1、HTML语义化
根据内容的结构，选择合适的标签和结构。
2、语义化的作用
1）使用户更容易阅读，页面结构清晰，即便没有css，裸奔，也能够让用户获取到关键信息。
2）方便一些特殊的设备更好的解析。
3）使开发者更容易维护。
4）让搜索引擎和爬虫更好的解析。
3、常用标签及我们要需要注意的点
1）尽可能少的使用无语义的标签
2）使用表格时应该如下
<table><caption>日常消费</caption><thead>表头 <tr><th>项目</th><th>支出</th> </tr> </thead> <tbody><tr><td>聚餐</td><td>200元</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>
3）<hn>标题
<h1> <h2> <h3> <h4> <h5> <h6>
用于文章的标题使用，重要性和字号逐渐减小，样式默认加粗。虽然我们可以定义hn的字体大小，但其字号排序应遵循原标准h1-h6字体逐渐减小。
4）<p>段落
段落标记，使用p作为段落是，p中的文字会自动换行。不需要使用<br>来区分锻炼，尽量少使用<br>
5）常见文本格式化标签。HTML现在只负责语义，而不负责样式。因此使用格式化标签时我们将他当作css钩子使用
<strong> :定义重要性强调的文字
<em> ：定义强调的文字
<ins>：定义插入的文字
<del>：定义删除的文字
6）<code> 计算机代码格式
固定的字母尺寸和间距，便于代码的展示
7）<a> 超链接
指向其他位置的连接
8）<img>图像
9）<ul>无序列表
一个项目的列表
10）<ol>有序列表
对项目使用数字进行标记
11）<hr>水平横线
12) <pre>标签
定义预格式化区域，在其区域中的文本会保留空格和换行符，经常会看到在code前出现。
13)<div>标签
Division,我们常用于划分页面逻辑。用于组合其他HTML元素的容器。
14）<form>标签
用于处理用户输入数据
15）<input>标签
type="text"，文本输入框;
type="password"时, 密码输入框。
type="radio" 时，单选框。
type="checkbox" 时，复选框。
type="submit时" 提交按钮。
type="reset时" 重置按钮。
16）<textarea>标签
<textarea rows="行数" cols="列数">用于显示大段文本</textarea>
17）<select>标签
<select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select>
18）<label>标签
无特殊效果，当鼠标指向它时，会将焦点转移到其指定的from上
19）<button>标签
定义一个按钮，我们使用CSS和JS可以让任何标签变成一个按钮，但是在特殊环境下它可能会出现意外。详见：https://segmentfault.com/q/1010000009486869?_ea=1945542
H5新增标签
1）<header></header>
页眉，网站标志、导航、全站链接以及搜索框。
2）<footer></footer>
页脚，父级是body时是整个页面的页脚。
2）<nav></nav>
标记导航，放弃我们使用的li，使用nav。
3）<main></main>
页面主要内容，唯一，<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
4）<article></article>
报纸的一页，一篇文章
5）<section></section>
具有相关性的一组内容
<section> <h1>HTML标签语义化</h1> <article> <h2>什么是语义化</h2> <p>...</p> </article> <article> <h2>语义化的作用</h2> <p>...</p> </article> <article> <h2>常用的标签及我们需要注意的</h2> <section> <h3>常用标签</h3> <p>....</p> </section> <section> <h3>H5新增标签</h3> <p>....</p> </section> </article> </section>
6）<aside></aside>
指定附注栏。主要有侧栏、指向文章的链接等
9.<mark></mark>
突出显示文本，提醒读者。样式差强人意，需要CSS修改。
10.<cite></cite>
标签定义作品
11.figure
标签规定独立的流内容，就像报纸上每页的插图。
<figure> <img src="/macaque.jpg" alt="Macaque in the trees"> <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a> </figcaption> </figure>
12.<address>
联系信息
13）<progress value="22" max="100"></progress>
定义运行中的进度