标签：
缘起
HTML（HyperText Markup Language超文本标记语言）是用于构建web页面的标记语言和通用标准。它并不是一项新的发明，因为超文本（具有超链接的文本）和标记语言（用于电子文档的定义和描述）在HTML问世以前都早已存在多年。作为一项划时代的创造，它再次印证了乔布斯的名言：创新即整合（Creativity is just connecting things）。
HTML的创造者，被后人称为互联网之父的Tim Berners-Lee曾经是CERN（欧洲核子研究组织）的一位科学家。1990年，他受命开发一套软件系统用于组织内部成员分享和查阅研究报告，于是他把超文本和标记语言合成了HTML，然后写了一个浏览器和一个服务器，这就是万维网（World Wide Web）的起源。是的，一群科学家，只是为了方便看报告，结果顺手搞出了互联网。
Tim Berners-Lee并不是一个广为人知的名字，原因是他完全放弃了万维网所能带给他的数不胜数的财富，和他类似的人还有很多，比如Linux的创始人Linus。正是这些具备非凡理念的人物奠定了互联网的精神基调：平等、共享、开源和创造。
1994年Tim创建了W3C，这是一个非盈利性的国际化组织，致力于维护和制定web相关的标准。
语义（semantic）
语义化标记，是指每种标记表示一种特定的内容形态，例如标题、列表、表格等。与之对应的概念，是样式标记（presentational markup）。Tim最初设想HTML应该是一种纯语义化的标记语言，然而在混沌无序的初始阶段，各家浏览器厂商多少受到另一种通行多年的标记语言SGML的影响，由于该语言同时存在语义化标记和样式标记，于是早期的HTML也被设计成了两类标记的杂合体。不过随着90年代末CSS的逐步应用以及随之而起的“内容与表现分离”理念，样式标记在新的HTML版本中被逐渐废除，但出于向后兼容的考虑，仍然有部分样式标记被保留，例如：i（样式）/ em（语义）；b（样式）/ strong（语义）。
为什么需要使用语义化标记？
1、HTML本身就是语义化标记语言，使用符合语义的标记，才谈得上正确使用HTML
2、使用合适的标记，可以合理应用浏览器默认样式
3、使用合适的标记，才能合理运用相应的属性
4、使用合适的标记，是确保可访问性的一个前提
5、使代码具有更好的组织结构与可读性
版本与规格
HTML历经多个版本迭代，1999年第四代标准发布。
第四代标准分化为两类，一类是SGML-based HTML，即HTML4.01，另一类是XML-based HTML，即XHTML1.0。其中每一类下又分为三种规格：Strict、Transitional和Frameset。
XHTMl是W3C为了规束HTML所做的一厢情愿的徒劳，它试图以严格的语法和极低的容错率来矫正早期HTML市场上业已存在的种种不规范行为。然而互联网世界没有谁可以成为上令下行的权威，并且标准必然是滞后于现实的，因此W3C后来放弃了XHTML2.0，转而投入向后兼容的HTML5。
2014年第五代标准HTML5发布（Recommendation）。它最早是由一个由浏览器厂商代表组成的叫WHATWG的组织提出的，后来学院派的W3C在放弃XHTML的制定后，与实务派的WHATWG联合，共同制定了H5标准。历经十五年的换代升级，HTML5新增了大量的内容，包括新的标记（新的语义标签、多媒体支持、新的属性）和新的API（canvas、svg、webstorage、websocket……），其中许多内容模块至今仍在完善中。
HTML使用<!DOCTYPE >来声明其版本及规格。
DTD是通用标记语言SGML用于定义文档遵循何种标准的一套语法规则，HTML4.01基于SGML，因此HTML4.01也引入了DTD的声明方式，一共有三种模式：
Strict：严格模式，不允许样式标记和框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional：松散（混合、过渡）模式，允许样式标记，不允许框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset：框架集模式，允许样式标记和框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML5不基于SGML，因此没有引入DTD，也只有一种声明：
<!DOCTYPE html>
标签（tags）
图例：H5元素；替换元素*；行内元素
注：仅包含所有H5支持的标签。
|
分区 |
|||
|
div |
division分区 |
aside |
侧栏 |
|
header |
头部 |
footer |
页脚 |
|
nav |
导航 |
section |
区域 |
|
article |
文章 |
|
|
|
文本 |
|||
|
abbr |
abbreviation缩写 |
q |
quotation短引用，自动加引号 |
|
strong |
强调，粗体 |
b |
bold粗体 |
|
em |
emphasized斜体 |
i |
italic斜体 |
|
samp |
sample示例文本 |
cite |
引用 |
|
code |
代码 |
var |
varible变量 |
|
dfn |
定义项 |
time |
时间 |
|
kbd |
keyboard键盘文本 |
sub/sup |
上标/下标 |
|
del |
deleted删除文本 |
address |
联系信息 |
|
ins |
insert插入文本，下划线 |
mark |
标记文本，背景色 |
|
span |
无语义 |
small |
小号字 |
|
blockquote |
块文本引用 |
h1~h6 |
标题 |
|
bdi |
bidi isolate方向隔离 |
bdo |
bidi override方向重置 |
|
p |
paragraph段落 |
pre |
preformatted预格式化文本 |
|
影音图像 |
|||
|
img* |
图片 |
audio |
音频 |
|
source* |
影音资源 |
track* |
字幕轨道 |
|
canvas |
画布 |
vedio |
视频 |
|
figure |
插图 |
figcaption |
插图的标题 |
|
embed* |
嵌套 |
object |
对象 |
|
param* |
parameter对象参数 |
|
|
|
列表 |
|||
|
ol |
有序列表 |
ul |
无序列表 |
|
li |
列表项 |
dl |
自定义列表 |
|
dt |
defined term |
dd |
defined description |
|
表格 |
|||
|
table |
表格 |
thead |
表头 |
|
tbody |
表格主体 |
tfoot |
表尾 |
|
tr |
table row行 |
td |
table data cell |
|
th |
table header cell |
|
|
|
表单 |
|||
|
form |
表单 |
input* |
输入型表单元素 |
|
textarea |
文本域 |
select |
选择框 |
|
option |
下拉列表项 |
optgroup |
下拉列表项分组 |
|
button |
自定义按钮 |
label |
标签 |
|
fieldset |
用于表单元素分组 |
legend |
为fieldset添加标题 |
|
datalist |
input选填项 |
keygen* |
key generator密匙 |
|
output |
输出 |
|
|
|
其它网页元件 |
|||
|
a |
anchor锚 |
wbr* |
单词换行 |
|
hr* |
horizontal rule水平尺 |
br |
break换行 |
|
meter |
比例条 |
progress |
进度条 |
|
rp、rt、ruby |
用于东亚字符 |
command |
仅IE支持 |
|
map |
图像映射 |
area* |
图像映射区域 |
|
details |
详细信息 |
summary |
详细信息的标题 |
|
dialog |
对话窗口 |
menu |
菜单 |
|
menuitem |
菜单项 |
|
|
|
元数据 |
|||
|
title |
网页标题 |
link* |
链接 |
|
script |
脚本 |
nosrcipt |
无脚本 |
|
meta* |
元信息 |
base* |
基准url |
|
html |
根元素 |
head |
头部 |
|
body |
主体 |
iframe |
框架 |
全局标准属性
class、id、title、lang、style、tabindex
dir：设置内容的文本方向
accesskey：设置激活元素的快捷键
/* H5新增 */
contenteditable：规定内容是否可编辑，值为布尔值
contextmenu：与menu标签配合使用，用于自定义右键菜单，目前仅火狐实现
data-*：用于嵌入自定义数据
draggable：用于规定元素是否可拖动，值为布尔值
dropzone：目前不支持。copy | move | link
hidden：没有值，单独使用。IE不支持
spellcheck：规定是否对元素内容进行拼写检查，值为布尔值
translate：规定是否翻译元素内容。支持较差。yes | no
替换元素（replaced element）
从CSS的角度看，替换元素是一种内容样式在CSS控制范围之外的元素，它的内容是一个独立的外部对象。典型的替换元素有<img>, <object>, <video>，以及某些表单元素如<textarea>和<input>。有的元素如<audio>和<canvas>仅在某些情况下是替换元素。使用伪元素content属性插入的对象属于匿名替换元素。
In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.
——from MDN
可见大部分替换元素都是单标签，但也有少部分是标签对，如textarea和canvas。
行内元素（inline）与块级元素（block-level）
区别：
1、在正常流中是否另起一行
2、盒模型规则不同
兼容性（compatibility）
H5新标签的兼容性问题主要存在于IE9以下的浏览器。
方法一：在head中引入处理兼容性问题的js
< ! - - [ if lt IE9 ] >
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ! [ endif ] - - >
然后需显示的将H5标签设置为block
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
方法二：document.createElement()
可用性（usability）、可访问性（accessibility）
可访问性主要是指Web内容对于残障用户的可阅读和可理解性。
广义的可访问性/可用性包含四个方面：
可感知perceivable、可操作operable、可理解understandable、健壮性robust
具体参见：https://www.w3.org/TR/WCAG20/
可维护性（maintainability）
可维护性的首要前提是可读性。可读性越强，维护成本越低。
确保HTML可维护性的基本方法：
1、使用正确的标签；
2、详细的注释；
3、合理的缩进与换行；
4、结构与样式分离/解耦
渐进增强（progressive enhancement）与优雅降级（graceful degradation）
渐进增强和优雅降级是两种相对的开发模式，目的是实现应用的兼容性、健壮性。它们的区别仅在于方向不同：渐进增强首先照顾老版本浏览器，然后在最低可用版本基础上增加新特性；优雅降级则率先针对最新的浏览器，使用最新的技术，实现最好的效果，然后再向下兼容低端浏览器。
标签：
原文地址：http://www.cnblogs.com/kidney/p/5785094.html
