高质量的HTML

浏览数：21 / 时间：2015年06月09日

本系列源自《编写高质量代码-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表格

表格经常用在数据显示页面上。table常用的标签有caption、thead、tbody、tfoot、tr、td、th。表格标题要用caption，表头用thead包围，主体用tbody包围，尾部用tfoot包围。

表头和一般单元格要分开，表头用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>