上一篇我们学习了什么是HTML,并编写了第一个HTML,今天我们来学习html有哪些标签
通过本篇你会学到：
- 当前所学在前端知识体系的哪个位置？
- 什么是语义化？
- 书写一个html页面的大致流程？
- 熟悉html标签：
- 如何表示标题？
- 如何表示段落？
- 如何换行？
- 如何展示一个图片？
- 如何展示一个超链接？
- 如何表示有序列表？
- 如何表示无序列表？
- 提高效率：利用emmet语法，快速书写html标签
- 检查书写的html是否规范
零、当前所学在前端知识体系的哪个位置？
一、 什么是语义化？ 想到标题就知道用h1~h6等等，对应的内容用来合适的标签来表示。
二、 书写一个html页面的大致流程？
1. 根据设计稿，对页面进行宏观的划分，比如是几行几列，头部有什么，中间部分有什么，底部有什么。
2. 根据第一步的划分，选取合适的布局方式：table or float or position or flex or grid
3. 根据对应的内容，采用合适的标签来书写
4. 完成html页面的书写，浏览器查看效果，做微调，再css美化（后面讲到css再说）
三、熟悉html标签：
1. 标题标签：` h1 ~ h6 `表示。
2. 段落标签： `p` 标签来表示（ paragraph）,给一段文字分段落表示。
3. 文本相关的标签： 加粗`b` 或者 `strong`、倾斜 `em`、删除线`del` 下划线`ins`。
换行标签：br输入这个标签会换行
5. 图片用`img`标签表示 `<img src="imgurl" alt="提示文字 当图片加载失败时显示">`
有序列表ol>li, 无序列表 ul>li
7. 超链接用`a`标签表示，`<a href="google.com" title="a title" > google</a> or <a href="index.html" > > 去平级的index.html页面</a> `
四、emmet常用语法，提高书写html效率，更多用法，查看官网：emmet
var a = 1; 给div添加id为app div#app按tab 即可生成 <div id="app"></div>生成给div添加类名为container div.container + tab 即可生成 <div class="container"></div>
父子关系 div>p 按tab 即可生成 <div> <p></p> </div>
兄弟关系 div+ul>li <div></div> <ul> <li></li> </ul>
上级 div>ul>li^div按tab 即可生成 <div> <ul> <li></li> </ul> <div></div> </div>
重复 * div*3 + tab 按tab 即可生成 <div></div> <div></div> <div></div>
分组 () div>(ul>li>a)+div>p按tab 即可生成 <div> <ul> <li><a href=""></a></li> </ul> <div> <p></p> </div> </div>
tagName[attr]再按tab img[alt]再按tab 生成： <img src="" alt="">
a[href=google.com]{google} <a href="www.goole.com">google</a> 等等
检查书写的html是否规范：在这个网站：w3c markup validation service:
下一篇内容预告：
- blocks and inline-blocks elements
- html5针对html方面，新增了哪些标签
- 表格元素的介绍
- 表单元素的介绍
- 实战1： 实现一个新闻页面
- 实战2： 实现一个table
- 实战3: 实现标签导航
- 实战3: 实现一个登录页面
小结：
学习了基本html元素。更多的详细的用法用的时候参考mdn即可，平时常用的用根据需求知道用什么元素。
参考资料：
本文使用 mdnice 排版
