书写语义化的HTML标签和属性

经常看到前端招聘的要求里面，有一条就是：对HTML语义化有深入的理解。那么这里面到底都有些什么知识呢？为什么要这么做呢？怎么做才是语义化的HTML标签呢？这便是今天要总结的知识了。

1. 为什么要语义化 语义化是结构与表现分离的一个重要的方面，能够让你页面css加载失败导致html裸奔时，别人也能看的懂你想表达什么，而不会产生误解。另外，语义化对使用读屏软件的用户更加友好，使他们的屏幕阅读器能够准确的读到我们的内容。最后，语义化的网页对搜索引擎也更友好，方便蜘蛛爬取。
2. 语义化有哪些知识 下面是一些对语义化的基本要求
   • <hx> h1-h6,作为标题使用，并且依据重要性递减
   • <p> 段落标记，不要再使用<br/>来换行啦
   • <ul>、<ol> <ol>这是经常要使用的，大家都比较熟悉了</ol>
   • <dl> 定义列表,一般用在比较书面的地方
   • <cite>、<q>、<blockquote> <cite>是用来标明著作，来源、解释等用的，<q>为行内引用，<blockquote>为块引用；
   • <em>、 <strong>、<b> <em>即emphasis，表示强调，用来标示可能造成误会的地方，或是反讽、语气转折等地方；<strong>标示重点，文章的想法、结语等重要的地方；<b>用来的当没有层级的标题，表示不同但没有重点意味的关键字;
   • <table>、<td>、<th>、< caption >、 summary <th>为表格标题，属性summar为摘要，<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格主体内容，<tfoot>标签为表格尾部。
   • <del>、<ins> <del>表示删除，<ins>表示插入，它们还带有cite和datetime来表明删除原因及删除时间；如<del cite="wrong" datetime="2013.4.2">del</del> 
   • <abbr> 表示web页面的简写，<acronym>表示取首字母的简写，不过后者已经被html5所抛弃了。如：<abbr title="world wide web">WWW</abbr> 
   • <alt>、<title> title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。
3. 下面附一张语义表

标签名	英文全拼	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition description	定义描述
del	delete	删除
div	division	分隔
dl	definition list	定义列表
dt	definition term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list item	列表项目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered list	不排序列表
var	variable	变量

上面有删除线的表示不推荐再使用的，另外，html5还新增了许多语义化的标签，比如最常用的<section><article><header><nav><menu><details><address><time><summary><footer><figure><figcaption>等