首页 > 代码库 > 高质量的HTML

高质量的HTML

2024-07-15 14:36:32   231人阅读

本系列源自《编写高质量代码-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=http://www.mamicode.com/"#">更多>>>
        <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=http://www.mamicode.com/"#">更多>>>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=http://www.mamicode.com/"登录" class="subBtn">>
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>

2.4语义化标签应该注意的问题
为了保证网页去除样式后的可读性，并且又符合Web标准，应该注意以下几点：
1.尽量少用div和span，用更加语义化的标签来代替它们；
2.语义不明显，既可以用p又可以用div的情况下，尽量用p。因为p默认有上下间距，去除样式后可读性更好 ，对兼容特殊终端有利；
3.不要使用纯样式标签，例如b，font，u等，改用CSS设置。语义上需要强调的用strong和em，二者有强调之意。































        

            
                
                  
                
                

                    联系

                    我们