html标准及其语义化

　　引子：做前端开发有好长一段时间了，以前写页面，只考虑能实现用户见到的布局效果就OK了，从未考虑过自己的页面是否对搜索引擎和用户友好，html代码是否结构清晰，简洁的问题。最近想把这块内容做一个总结，使自己写的代码即时在不支持css功能的浏览器里也有很强可用性，对搜索引擎和维护也更友好。

　　正文：本文会分为两个部分，首先会介绍为什么我们要遵循html标准和语义化，然后会介绍常用html标签和属性及其语义（包括html5）

　　引例：首先来看一个简单的例子，让大家了解，什么样的代码是符合html标准及语义的，什么样的代码是不符合的（摘自携程UED）

　　　　

　　非语义化的实现方式：

<div>旅游产品经理（出境游）</div>
<div class="search_detail_content">
<div><span>工作地点</span> <span>职位类别</span> <span>学历要求</span> <span>人数</span> <span>更新日期</span> </div>
<div> <span>广州 </span> <span>产品运作 </span> <span>本科 </span> <span>2</span> <span>2011-9-16</span>
	<div>工作职责</div>
	<div>1、前期目的地市场分析、市场调查以及制定产品设计思路。</div>
	<div>2、制定所负责区域的产品资源采购策略与定价策略。</div>
	<div>3、本地市场竞争信息的收集、分析及对策。</div>
	<div>4、参与制定所负责区域的市场营销策略。</div>
	<div>5、下属日常工作的抽查、监控和培养。</div>
</div>
<div>
	<div>职位要求</div>
	<div>1、大专或以上学历。</div>
	<div>2、2年或以上同等职位工作经验者。</div>
	<div>3、具备旅行社经验者优先，有旅行社出境游（港澳或东南亚）团队管理经验者优先。</div>
	<div>4、普通话标准，英文较好，口齿清晰，极强的沟通能力，抗压力强。</div>
	<div>5、良好的客户服务意识，良好的职业道德和团队合作意识。</div>
	<div>6、良好的数据分析，逻辑分析及学习能力。</div>
	<div>7、熟练使用计算机和OFFICE办公软件。</div>
</div>

　　语义化实现方式：

<h2>旅游产品经理（出境游）</h2>
<table>
	<tbody><tr>
		<th>工作地点</th>
		<th>职位类别</th>
		<th>学历要求</th>
		<th>人数</th>
		<th>更新日期</th>
	</tr>
	<tr>
		<td>广州 </td>
		<td>产品运作 </td>
		<td>本科 </td>
		<td>2</td>
		<td>2011-9-16</td>
	</tr>
</tbody></table>
<dl>
	<dt>工作职责</dt>
	<dd>1、前期目的地市场分析、市场调查以及制定产品设计思路。</dd>
	<dd>2、制定所负责区域的产品资源采购策略与定价策略。</dd>
	<dd>3、本地市场竞争信息的收集、分析及对策。</dd>
	<dd>4、参与制定所负责区域的市场营销策略。</dd>
	<dd>5、下属日常工作的抽查、监控和培养。</dd>
</dl>
<dl>
	<dt>职位要求</dt>
	<dd>1、大专或以上学历。</dd>
	<dd>2、2年或以上同等职位工作经验者。</dd>
	<dd>3、具备旅行社经验者优先，有旅行社出境游（港澳或东南亚）团队管理经验者优先。</dd>
	<dd>4、普通话标准，英文较好，口齿清晰，极强的沟通能力，抗压力强。</dd>
	<dd>5、良好的客户服务意识，良好的职业道德和团队合作意识。</dd>
	<dd>6、良好的数据分析，逻辑分析及学习能力。</dd>
	<dd>7、熟练使用计算机和OFFICE办公软件。</dd>
</dl>

　　看到上面的例子，喜欢称写网页就是div+css的童鞋们，是不是该考虑下，自己的网页是否对搜索引擎和屏幕阅读器友好，对那些不支持css的wap浏览器，好的逻辑结构，会更利于用户浏览你的网站。

一、为什么样遵循html标准及其语义化：

• 语义化的html代码结构更清晰，便于使用css设置样式，团队开发维护
• 对搜索引擎友好，你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记。
• 对用户会更友好，屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
• 由于有很多wap浏览器无法支持css样式，结构更清晰的html代码显示的页面更利于用户访问。

二、常见html标签的语义及其属性

分类	标签元素	元素语义	常用属性	备注
文档标记	h系列	页面及段落标题	class,id,title,lang,dir
	p	表示段落，也用于区分段落	class,id等
	address	用于标记与文档有关的联系信息	常用属性
	blockquote	用于包含文档引用文本块	cite,title
	q	表示行内引用文本	cite
	ul/li	无序列表，表示一组相关项目的集合
	ol/li	有序列表，表示一组有顺序关系项目的集合
	dl/dt/dd	用于将术语或名称于描述关联起来元素		运用比较广泛
	a	锚点元素，链接新的文件或文档的某个锚点	href, target
短语元素	em	起强调作用，文本默认以斜体显示
	strong	强调作用，语气比em更强，以粗体显示
	code	表示一此处内容为一段程序代码
	var	表示程序变量
	samp	表示程序输出结果
	kbd	表示要用键盘输入的内容
	abbr	内容缩写词	title	可用title属性指定完整内容
	acronym	首字母缩写词
	del	表示被更改的内容
	ins	表示被插入的内容
	dtn	术语定义
表示性元素	hr	在文档中插入一个横线
	pre	保持文档编辑格式不变
	sub	文字下标显示
	sup	文本上标显示
表格元素	table	用于日历，统计图表，excel表等元素	summary(摘要属性)
	caption	表示表格的标题
	thead	表示表格头部
	tbody	表示 表格体
	tfoot	表格底部
	tr	表示表格行
	th	表示行或列标题单元格
	td	表示表格单元格
表单元素	form	action , method , enctype , accept
	fieldset	对表单控件进行分组
	legend	对分组表单控件添加标题描述信息
	label	表单控件标题	for(值与关联控件id相同)
	input	输入表单控件	type(text, password,file,checkbox, radio,hidden,reset,submit,button,image) tabindex , name , value,placeholder(html5新增),maxlength,readonly,checked, disabled
	textarea	输入多行文本	cols , rows
	select	选择菜单	name, multiple
	optgroup	选项分组	label（分组的描述标题）
	option	选项菜单内某一项	selected
	button	表单按钮	样式比input 好控制
多媒体元素	img	在文档中插入图片	src , title, alt
	object	在文档中插入其他对象
	embed	插入视频或其他对象
元数据	title	文档标题
	meta	描述文档基本信息	name,content, http-equiv , charset
html5新增元素	article
	section
	aside
	nav
	header
	footer