整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
今天我们一起来了解下HTML，
首先HTmL包含三层结构，分别是结构层，表现层，行为层。
结构层：html => 网页上有什么，比如说文字啊、按钮啊、图片啊等等。
表现层：css => 显示成什么样子，比如说文字的大小啊，位置啊，颜色啊等等。
行为层：JavaScript => 具体怎么操作，比如说点击按钮让图片放大缩小等等。
===============================
在了解了html的三层结构之后，我们来学习如何写html。html不是编程语言，它是一套标签。最简单的html文本是下图1这个样子。我们可以在电脑桌面上新建一个记事本文件，然后把后缀名改一下（.txt=>.html），把这段标签代码粘贴到html文件里，这样一个空白的网页就做成了。如果需要在网页上添加内容，我们只需要在第10行的位置添加各种各样的标签即可。比如我在图二添加了一个按钮标签和一段文字标签，双击html文件，页面上就从左到右，从上到下显示对应的内容。是不是很简单。我们日常浏览的网页都是这样一个标签一个标签画上去的。
我给大家总结了一张图，基本上覆盖了工作中常用的知识点。同时分享几个小技巧。
1.最简单的网页写成什么样子，也就是html模板不需要记忆，下图也说了，去百度下载一个VSCode软件（类似于记事本，是现在主流的前端代码编辑器），用它打开我们的html文件，输入英文叹号回车就自动生成了，学编程不要死记硬背。
2.控件的标签不需要记忆，直接百度html XXX标签，例如：百度搜“html按钮标签”，他就会告诉我们是<button>，用的时间长了自然就记住了。是不是省力。
3.标签的属性很重要，可以不去记他的写法，因为写可以百度，重要的是你需要记住标签有什么属性，下图的属性记住足矣。为什么要记呢，因为工作中，有的时候会遇到这样一种情况，明明设置一个属性可以完成的功能，我们不知道，花费了大力气用css和js去实现，结果还存在着特定场合的bug，让人很无奈。
4.对于html还有两个标签<canvas>和<svg>，他们是用来绘图的，做特殊效果的。我们可以先跳过，等框架啥的都学完了，有兴趣，学习一下。
5.给大家推荐一个小白学习html的网站，w3cschool，图里不明白的可以去上边学学练练。
6.如果觉得一个人学习前端有难度，我建了一个小白前端学习交流群，可以私聊我，大家在群里多多交流，我会经常给大家答疑，组织大家练习，一起做小项目。有方向，少走弯路。
前话
Hello，小伙伴们大家新年好，本篇是今年第一篇，也筹划许久，本篇主题为美食，系html5网站模板，div加css布局，网页资源分开存储以便管理，网页结构清晰简单，希望本篇能够助力各位萌新
主题
《周末の食记》
美食能抚平一切的忧伤
简介
文件结构包含了css、fonts、images、js和html，运用html5技术，包括nav标签、header标签和footer标签等，采用bootstrap进行布局
图摘
目录
编码
<div class="ftco-46-row d-flex flex-column flex-lg-row">
<div class="ftco-46-text ftco-46-arrow-right">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">扬州炒饭</h3>
<p class="mb-5">一碗不一样的炒饭，让你难以拒绝.</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
<div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
<div class="ftco-46-text ftco-46-arrow-up">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">蓝莓酸奶冰激凌</h3>
<p class="mb-5">触动您的心灵，令人甜蜜至极，难以忘怀，心旷神怡的味觉享受，精选一级的夏威夷果仁，入口丝滑</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
</div>结语
如果人的一生总的能量是固定的话，那就节省开支，延长时间，喜怒哀乐不溢于言表，不困于心智，保持乐观心态
在前面：java作为一门世界级编程语言金字塔顶尖的语言。需要大量的练习、练习、练习来巩固自己所获得的知识。冰冻三尺非一日之寒，希望大家在学习java的日子里一定一定要坚持不懈，严格要求。多练，多问，多百度。祝大家早日成为一名优秀的软件工程师！
文章摘要：此篇文章会带领大家创建一个html最简单的页面，以及在页面中增加一些简单的内容。
我先给大家放2张我以前教学的时候，开课前给学生画的图：
这2张图应该已经比较清晰明了的告诉你，学习java前端需要具备的一些主观和客观方面的东西，我就不多做解释了，以后我的文章中，会以代码图片及展现效果居多，尽量减少文字的占比。让大家对所学的知识有一个更直观的感受。
言归正传，想要编写html代码，首先需要一个后缀为.html的文件，这个文件怎么创建呢？最简单的方式，建一个txt，然后把后缀改为.html，用编辑器打开，就可以编写代码了。
当然，txt界面太丑，笔者这里选用sublime,该编辑器也可以直接加载一个html模板，选择菜单→新建文件(模板)→html,当然，前提要先设置好这个模板，具体设置方法这里就不做详细介绍了，百度上一大堆。新建完成后，产生一个代码如下的页面：
然后在<body></body>标签体之间打入一行代码
用浏览器打开该文件，显示如下图，说明这个html文件已经创建成功了，能够正常的编写代码。
零基础的同学一定对刚才的代码比较疑惑，虽然照着写能实现功能，但是这些代码各自又都是什么意义呢？ 我用注释的方式上图来告诉大家：
首先，html 的标签分为自闭和标签和闭合标签
自闭和标签：就是没有结束标签，比如上图的<meta>标签，该标签是没有结束标签相呼应的。
闭合标签：有开始和结束标签，比如上图的<html><body><h1>标签，他们都有一个</html></body></h1>相呼应
在上图中，我用过了比较多的 < !-- -- >标签，这是html里的注释标签，在编写代码的过程中，勤加注释是一个非常非常好的习惯，不仅方便了他人也方便了以后自己代码的维护。所以说，不加注释的代码都是在耍流氓。
我们80%的页面标签代码都会写在<body></body>标签里面,什么是标签，至少包含< > 和标签元素，比如<div><a><p><input>等，标签还有标签属性和属性值，标签属性和属性值在第一个标签内容中，如果是多个标签则以空格符号分割 ，如图：
Div 是整个html中最常用的一个标签元素，<div></div>类似于一个盒子，里面可以承载各种各样的元素标签，大家看到的所有的网站都是靠着div一个个的盒子规划开来，最后拼接在一起的，形成了一个完整的页面。
那么如何去建立一个div呢？首先，我们在html的<body></body>标签中加入一个<div></div>标签 ，但是单纯的加入标签并不会在页面中产生肉眼可见的东西，因为我们还要定义这个div的宽，高，背景色，边框等等，详见如下代码：
这样的一行代码，最后展现出来的效果是：
我们来一点点的剖析这一行代码：
Style:style 是元素标签里的一个标签属性，他的作用是可以定义该标签的样式。里面的样式格式是xxx:xxx; 每一组样式都是这样的定义，冒号用来隔开样式属性和样式属性值，最后以分号结尾.
width:定义该元素的宽
height:定义该元素的高
background:定义该元素的背景颜色(也可使用red,yellow等颜色定义)
border:定义该元素的边框
4px 代表边框粗细，
solid 代表边框样式, 边框样式又分为solid(实框)、dotted(虚框)
red代表边框颜色,边框颜色也可用#ccc,#112233这种形式表现
Div里可以放入文字、图片、标签元素等各式各样的东西。下面我演示一下如何放入照片：
首先，放入照片要使用到<img>标签，这是一个自闭和标签，所有没有结束标签。
Src代表图片的路径，width,height 代表图片的宽度和高度 ,alt是图片的描述
这个路径可以是相对路径，也可以是绝对路径。
相对路径：就是相对于这个网页的路径，比如图片和网页在同一个文件夹下，那么src处就直接填图片的文件名字就可以，若建了一个文件夹images，图片放在该文件夹中，同时这个文件夹和网页在同一个位置，那么src所填的就是images/图片名字.jpg
绝对路径：即从头开始写路径，如src = “C:/xxx/xxx/xxx/xxx.jpg”
假设我现在的图片位置和网页位置同处一处
最后的效果：
我这里改大了DIV的宽度和高度，若图片所设的宽高大于DIV的宽度高度，那么将会发生溢出的情况，同学们可以自己去试一下，这种溢出的情况也有对应的标签可以做调整，这个我们后面再讲。
这边特别提醒一点，如果div没有设定宽度width,则默认为等同浏览器宽度的宽度，若div没有设定高度，则该div根据div中内容进行高度的伸缩，div中的内容有多高，div就有多高，如图，我把width和height全部去掉：
上图width和height全部去掉，所以，width默认跟浏览器宽度等宽，高度为图片的高度。
文字的话就比较简单了，代码贴上：
最后结果：
第二句文字才是div创建出来的文字，我解释一下style里面的样式：
Font-size:文字大小，px为单位(像素)
Font-family:文字样式，分为很多，这个可以去word文档里找找
Font-weight：文字加粗，bold是一种默认加粗的大小。
End.
来源：公众号“java编程”
运行人员：中国统计网小编（微信号：itongjilove）
微博ID：中国统计网
中国统计网，是国内最早的大数据学习网站，公众号：中国统计网
http://www.itongji.cn
*请认真填写需求信息，我们会在24小时内与您取得联系。
