第2章 语义化
2.1 语义化简介
HTML的精髓在于标签的语义。大部分标签都有它自身的语义，比如
<p>标签，表示paragraph，一个段落；<h1>，表示header level 1，一级标题。前端的三大核心技术HTML、CSS和JavaScript，HTML编写网页的结构、CSS处理网页的外观、JavaScript控制网页的行为。其实HTML才是最基础也是最重要的，好比盖房子，房子装饰得再漂亮，如果根基不稳，也容易倒塌。
编写语义良好的页面极其重要，不但有利开发调试和后期维护，也更利于搜索引擎优化。
2.2 标题语义化
标题标签（h1~h6）在搜索引擎优化(SEO)中占有非常重要的地位，其中
<h1>权重最高，<h6>权重最低。关于标题h1~h6的语义化：
一个页面只有一个
<h1>标签 ：好比一篇文章只有一个主标题，<h1>表示页面中最高层级的标题，搜索引擎会赋予<h1>标签最高权重。如果一个页面出现多个<h1>标签，可能会被判以作弊；h1~h6之间不要出现断层：虽然，我们通常只用到标题h1~h4，而不需要把6个标签全都用上，但标题的顺序应该是不应该出现断层的，比如“h1、h3、h4”而漏掉“h2”；
结构和样式相分离：
不要因为外观样式而滥用h1~h6标签：比如一个页面中，为了调整文本字体大小或者加粗字体而使用标题标签；
也不要用DIV来替代页面的标题
2.3 图片语义化
如何更语义化的定义
<img>标签？
alt和title属性：
<img src='' alt='给搜索引擎的图片描述' title='给用户看的图片描述'>
alt和title属性都表示图片的描述。其中
alt的描述文字是给搜索引擎看的并且当图片挂掉时，会显示alt属性值的文字；title是给用户看的，当鼠标悬停在图片上时，则显示title中的内容；所以我们应该注意，
alt是必填属性，，在SEO中有一定权重；而title是选填属性，可加可不加。
<figure>和<ficaption>标签：
<figure> <img src="" alt=""> <figcaption>图注描述</figcaption></figure>
<figure>元素代表一段独立的内容，经常和<figcaption>配合使用。这种组合标签表示在页面中引用图片、插图、表格、代码段等，比如可以实现“图片 + 图注”的效果。
2.4 表格语义化
要做好表格的语义化，首先要注意
<table>标签应该用来展示表格形式的数据，而不是用作页面布局。标签 说明 table 表格 caption 表格标题 thead 语义划分表格的表头 tbody 语义划分表格的表身 tfoot 语义划分表格的表尾 tr 行 th 表头单元格 td 表格单元格 另外可以配合使用
th、tbody等表格标签，使得表格语义更良好，结构更清晰：
| 标签 | 说明 |
|---|---|
| table | 表格 |
| caption | 表格标题 |
| thead | 语义划分表格的表头 |
| tbody | 语义划分表格的表身 |
| tfoot | 语义划分表格的表尾 |
| tr | 行 |
| th | 表头单元格 |
| td | 表格单元格 |
实例：
<table> <caption>三年二班成绩表</caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> </thead> <tbody> <tr> <td>周杰伦</td> <td>80</td> <td>80</td> <td>80</td> </tr> <tr> <td>韩红</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>张杰</td> <td>100</td> <td>100</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td>平均分</td> <td>90</td> <td>90</td> <td>90</td> </tr> </tfoot></table>
2.5 表单语义化
<label>标签的for属性
<div> <label for="userName">用户名:</label> <input type="text" id="userName" name="userName"></div>
根据W3C规范的定义，
<label>标签是描述输入控件的说明文字。其中
<label>标签的for属性值，应该填入所关联的表单元素控件的id。for属性的作用，一是增强了语义；二是增强操作便捷性，使得鼠标点击范围扩大至<label>元素上。
<fieldset>和<legend>标签
<fieldset disabled="disabled"> <legend>补充信息</legend> <div> <label for="job">职称：</label> <input type="text" id="job" name="job"> </div> <div> <label for="address">地址：</label> <input type="text" id="address" name="address"> </div></fieldset>
<fieldset>和<legend>标签用于为表单元素进行分组。分组除了可以增强表单的语义，也可以通过
<fieldset>元素的disabled属性来禁用分组内的元素。
2.6 其他语义化
不要滥用<br/>换行标签
<p> <p>深圳市</p><br/> <p>南山区</p><br/> <p>深南大道1101号</p></p>
根据W3C规定，
<br/>标签仅用于段落中的换行，也就是说，<br/>标签只应该出现在<p>标签之中。 而通过<br/>标签进行页面的换行，甚至通过多个<br/>标签来调整元素之间的间距是不符合HTML语义化的。
使用<ul>无序列表标签
<ul> <li> <span class="point hot"></span> 走上穷兵黩武，台湾恐难承受 </li> <li> <span class="point"></span> 新版历史教科书删去文革 </li> <li> <span class="point"></span> 2040年日本独居家庭将达四成 </li></ul>
对于列表型的数据，比如菜单、新闻列表等，建议使用
<ul>无序列表或者<ol>有序列表，而不是div来实现。
由于有序列表标签前的数字外观是固定的，所以大多数情况都是使用无序列表。
使用<strong>和<em>标签
<strong>文本加粗</strong><em>文本倾斜</em>
在表现上，
<strong>标签是加粗的文本，<em>标签是斜体文本。而在W3C规定中，
<strong>和<em>标签的文本被视为关键字，搜索引擎也赋予了一定的权重。基于结构和样式分离的原则，通常我们做法是：先通过CSS reset去除
<strong>和<em>标签的默认样式，然后只为页面中的重要文本加<strong>和<em>标签。<strong>和<em>标签的区别：<em>表示emphasis(强调)，比如“我<em>喜欢</em>胡萝卜”和“我喜欢<em>胡萝卜</em>”强调的东西就不一样；<strong>表示strong importance for its contents(十分重要的内容)，单独对某个句子增加其重要性，比如“<strong>警告！该链接不安全 ，是否继续访问？</strong>”
使用<del>和<ins>标签
<div> <p>越南进口火龙果</p> <p> <del>原价：￥36.90/kg</del> </p> <p> <ins>现在仅售：￥30/kg</ins> </p></div>
<del>和<ins>标签配合使用，可以实现商品原价和优惠价的HTML结构。<del>标签表示“delete”，用于定义被删除的文本；<ins>标签表示“insert”，用于定义被更新的文本。
页面显示图片该用<img>标签还是CSS的background-img
在页面上显示一张图片，可以用HTML的方式（
<img>标签），也可以用CSS的方式（样式背景图片background-img:(url)），那什么情况该采用具体哪种方式呢？答案是根据HTML语义来做判断，如果图片是作为HTML文档的一部分，并且希望搜索引擎能识别时，就该使用HTML的方式；而如果图片仅仅是起到修饰作用，被不被搜索引擎识别也无所谓的情况下，就该使用CSS的方式。
2.7 语义化验证
判断HTML的语义是否良好的最简单方式，就是禁用CSS样式，检查页面是否仍然具备很好的可读性。一个语义良好的页面，在“CSS裸奔”之后，可读性也非常高。
2.8 HTML5舍弃的标签
HTML5新增了一些标签，同时也舍弃了一些标签。
舍弃的标签主要有两大类：
仅仅为了定义样式，而没有任何语义的标签。比如
<s>、<font>、<center>等；很少使用或已经被新标签替代的。比如
<frame>、<dir>等；
作者：梁同学de自言自语
链接：https://www.jianshu.com/p/ad7b00652687
随时随地看视频
