本系列源自《编写高质量代码-web前端开发修炼之道》
HTML,CSS,JavaScript三者中,HTML作为结构,CSS作为修饰,JavaScript作为控制。不管是在前端还是后台,结构都是非常重要的,使用HTML时必须要考虑语义化。
1.如何确定你的标签是否语义化?
浏览器会给标签给定默认样式,所以就算不用CSS修饰也能体现一些简单的样式。因此判断一个网页标签是否语义化的简单方法是:去掉CSS,看网站结构是否组织良好有序,是否仍然有良好的可读性。
你可以手动注释CSS代码,也可以使用web调试工具,比如firefox的Web Developer插件,可以禁用CSS。
2.如何选用正确的标签?
下面举了一些常见的例子:
2.1标题和内容
要 实现上面这个样式,可以使用方案一:
<div class="container">
<h2>标签的语义<a href="#">更多>></a></h2>
<p>段落一的内容.....<strong>重要部分</strong>......</p>
<p>段落二的内容.....<strong>重要部分</strong>......</p>
<p>段落三的内容很长长长长长长长长长长长长长长长长长长长长.</p>
</div>
<style type="text/css">
.container{
width: 400px;
margin: 0 auto;
background-color: #ff0;
}
h2{
position: relative;
border-bottom: 1px dashed #333;
}
h2 a{
position: absolute;
right: 0;
top: 0;
}
p{
text-indent: 2em;
line-height: 150%;
margin: 0 0 1em 0;
}
strong{
color:red;
font-weight: normal;
}
</style>
此方案将锚点放在了h2中,但很明显锚点”更多“不属于标题,所以这个是不合语义的。下面是方案二:
<div class="container">
<div class="title">
<h2>标签的语义</h2>
<a href="#">更多>></a>
</div>
<p>段落一的内容.....<strong>重要部分</strong>......</p>
<p>段落二的内容.....<strong>重要部分</strong>......</p>
<p>段落三的内容很长长长长长长长长长长长长长长长长长长长长.</p>
</div>
CSS代码就不贴了,将锚点从标题中提出来,同时在二者外再加一个div块,表示他们形式上应该属于一个整体。方案二结构看起来要清晰的多。
2.2表单
一般来说,表单域要用fieldset标签包起来,并用legend标签说明表单的用途。fieldset默认有边框,可以按需要更改样式,也可以隐藏legend标签,以此来兼顾语义和显示。
每个input标签对应一个label,通过for联系起来,下面是示例:
<form action="" method="" class="fieldset">
<fieldset>
<legend>登录表单</legend>
<p>
<label for="name">账号:</label>
<input type="text" id="name"/>
</p>
<p>
<label for="pw">密码:</label>
<input type="text" id="pw"/>
</p>
<input type="submit" value="登录" class="subBtn">
</fieldset>
</form>
2.3表格
表头和一般单元格要分开,表头用th,单元格用td。
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>实现方式</th>
<th>代码量</th>
<th>搜索引擎友好</th>
<th>特殊终端兼容</th>
</tr>
</thead>
<tbody>
<tr>
<th>table 布局</th>
<td>多</td>
<td>差</td>
<td>一般</td>
</tr>
<tr>
<th>乱用标签</th>
<td>多</td>
<td>差</td>
<td>一般</td>
</tr>
</tbody>
</table>
2.4语义化标签应该注意的问题
1.尽量少用div和span,用更加语义化的标签来代替它们;
2.语义不明显,既可以用p又可以用div的情况下,尽量用p。因为p默认有上下间距,去除样式后可读性更好 ,对兼容特殊终端有利;
3.不要使用纯样式标签,例如b,font,u等,改用CSS设置。语义上需要强调的用strong和em,二者有强调之意。