第 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~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> 元素代表一段独立的内容,经常和 <figcaption> 配合使用.这种组合标签表示在页面中引用图片,插图,表格,代码段等,比如可以实现 "图片 + 图注" 的效果.
<figure>
<img src="" alt="">
<figcaption>图注描述</figcaption>
</figure>
2.4 表格语义化
要做好表格的语义化,首先要注意 <table> 标签应该用来展示表格形式的数据,而不是用作页面布局.
标签 说明
table 表格
caption 表格标题
thead 语义划分表格的表头
tbody 语义划分表格的表身
tfoot 语义划分表格的表尾
tr 行
th 表头单元格
td 表格单元格 另外可以配合使用 th,tbody 等表格标签,使得表格语义更良好,结构更清晰:
标签 说明
table 表格
caption 表格标题
thead 语义划分表格的表头
tbody 语义划分表格的表身
tfoot 语义划分表格的表尾
tr 行
th 表头单元格
td 表格单元格
实例:
2.5 表单语义化
<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>
<label> 标签的 for 属性
根据 W3C 规范的定义,<label> 标签是描述输入控件的说明文字.
<div>
<label for="userName">用户名:</label>
<input type="text" id="userName" name="userName">
</div>
其中 <label> 标签的 for 属性值,应该填入所关联的表单元素控件的 id.for 属性的作用,一是增强了语义;二是增强操作便捷性,使得鼠标点击范围扩大至 <label> 元素上.
<fieldset> 和 <legend> 标签
<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> 元素的 disabled 属性来禁用分组内的元素.
2.6 其他语义化
不要滥用 <br/> 换行标签
根据 W3C 规定,<br/> 标签仅用于段落中的换行,也就是说,<br/> 标签只应该出现在 <p> 标签之中. 而通过
<p>
<p>深圳市</p><br/>
<p>南山区</p><br/>
<p>深南大道1101号</p>
</p>
标签进行页面的换行,甚至通过多个
标签来调整元素之间的间距是不符合 HTML 语义化的.
使用 <ul> 无序列表标签
走上穷兵黩武,台湾恐难承受
<ul>
<li>
<span class="point hot"></span>
新版历史教科书删去文革
</li>
<li>
<span class="point"></span>
2040年日本独居家庭将达四成
</li>
<li>
<span class="point"></span>
</li>
</ul>
对于列表型的数据,比如菜单,新闻列表等,建议使用 <ul> 无序列表或者 <ol> 有序列表,而不是 div 来实现.由于有序列表标签前的数字外观是固定的,所以大多数情况都是使用无序列表.
使用 <strong> 和 <em> 标签
在表现上,<strong> 标签是加粗的文本,<em> 标签是斜体文本.
<strong>文本加粗</strong>
<em>文本倾斜</em>
而在 W3C 规定中,<strong> 和 <em> 标签的文本被视为关键字,搜索引擎也赋予了一定的权重.
基于结构和样式分离的原则,通常我们做法是:先通过 CSS reset 去除 <strong> 和 <em> 标签的默认样式,然后只为页面中的重要文本加 <strong> 和 <em> 标签.
和 标签的区别:
表示 emphasis(强调),比如 "
我 < em > 喜欢 < /em>胡萝卜/
"和"
我喜欢 < em > 胡萝卜 < /em>/
" 强调的东西就不一样;
表示 strong importance for its contents(十分重要的内容),单独对某个句子增加其重要性,比如 "
<strong>警告!该链接不安全 ,是否继续访问?</strong>
"
使用 <del> 和 <ins> 标签
<del> 和 <ins> 标签配合使用,可以实现商品原价和优惠价的 HTML 结构.
<div>
<p>越南进口火龙果</p>
<p>
<del>原价:¥36.90/kg</del>
</p>
<p>
<ins>现在仅售:¥30/kg</ins>
</p>
</div>
<del> 标签表示 "delete",用于定义被删除的文本;<ins> 标签表示 "insert",用于定义被更新的文本.
页面显示图片该用 <img> 标签还是 CSS 的 background-img
在页面上显示一张图片,可以用 HTML 的方式( 标签),也可以用 CSS 的方式(样式背景图片
background - img: (url)
),那什么情况该采用具体哪种方式呢?
答案是根据 HTML 语义来做判断,如果图片是作为 HTML 文档的一部分,并且希望搜索引擎能识别时,就该使用 HTML 的方式;而如果图片仅仅是起到修饰作用,被不被搜索引擎识别也无所谓的情况下,就该使用 CSS 的方式.
2.7 语义化验证
判断 HTML 的语义是否良好的最简单方式,就是禁用 CSS 样式,检查页面是否仍然具备很好的可读性.一个语义良好的页面,在 "CSS 裸奔" 之后,可读性也非常高.
2.8 HTML5 舍弃的标签
HTML5 新增了一些标签,同时也舍弃了一些标签.
舍弃的标签主要有两大类:
仅仅为了定义样式,而没有任何语义的标签.比如 <s>,<font>,<center> 等;
很少使用或已经被新标签替代的.比如 <frame>,<dir> 等;
来源: http://www.jianshu.com/p/ad7b00652687