后续持续更新前端相关基础知识，同时欢迎大家指导
HTML5基础
HTML发展历史
1989年，Tim Berners-Lee发明了HTML语言。
1990年11月，他编写出了最早的Web页面，开启了后来丰富多彩的网络生活。
1993年，互联网工程工作小组（IETF）发布了超文本标记语言，但这仅是一个非标准的工作草案。
1995年，W3C组织成立，规范化了HTML的标准，从而奠定了Web标准化开发的基础。
HTML从诞生至今，经历了30多年的发展，其中有很多曲折，经历的版本及发布的日期如下图所示。
| 版本 | 发布日期 | 说明 |
|---|---|---|
| 超文本标记语言（第一版） | 1993年6月 | 作为互联网工程工作小组（IETF）工作草案发布，非标准 |
| HTML2.0 | 1995年11月 | 作为RFC 1866发布，在2000年6月RFC 2854发布之后被宣布过时 |
| HTML3.2 | 1996年1月14日 | W3C推荐标准 |
| HTML4.0 | 1997年12月18日 | W3C推荐标准 |
| HTML4.01 | 1999年12月24日 | 微小改进，W3C推荐标准 |
| XHTML1.0 | 2000年1月26日 | W3C推荐标准，修订后于2002年8月1日重新发布 |
| ISO HTML | 2000年5月15日 | 基于严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准 |
| HTML1.1 | 2001年5月31日 | 较1.0有微小改进 |
| XHTML2.0草案 | 没有发布 | 2009年，W3C停止了XHTML2.0工作组的工作 |
| HTML5草案 | 2008年1月 | HTML5规范先是以草案发布，经历了漫长的过程 |
| HTML5 | 2014年10月28日 | W3C推荐标准 |
从以上HTML的发展来看，HTML没有1.0版本，这主要是因为当时有很多不同的版本。有些人认为Tim Berners-Lee的版本应该为初版，他的版本中还没有img元素，也就是说HTML刚开始时仅能够显示文本信息。
HTML文档结构和基本语法
HTML是构成网页文档的主要语言，它由HTML标签和字符信息组成，HTML标签可以标识文字、图形、动画、声音、表格、超链接等网页对象，字符信息用以传达网页内容，如标题、段落文本、图像等。
HTML4文档基本结构
HTML文档一般都应包含两部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：
<html>
、
<head>
和
<body>
。其中
<html>
标签标识HTML文档，
<head>
标签标识头部区域，而
<body>
标签标识主体区域。
【示例】一个完整的HTML4文档基本结构如下：
<html> <!--语法开始-->
<head>
<!--头部信息，如<title>标签定义的网页标题-->
</head>
<body>
<!--主体信息，包含网页显示的内容-->
</body>
</html> <!--语法结束-->
可以看到，每个标签都是成对组成，第1个标签（
<html>
）表示标识的开始位置，而第2个标签（
</html>
）表示标识的结束位置。
<html>
标签包含
<head>
和
<body>
标签，而
<head>
和
<body>
标签是并列排列。
如果把上面字符代码放置在文本文件中，然后另存为“test.html”，就可以在浏览器中浏览了。当然，由于这个简单的HTML文档还没有包含任何信息，所以在浏览器中是看不到任何显示内容的。
网页就是一个文本文件，文本扩展名一般为.html或.htm，俗称静态网页，可以直接在浏览器中预览；也可以是.asp、.aspx、.php或.jsp等，俗称为动态网页，需要服务器解析之后，浏览器才能够预览。
HTML4基本语法
编写HTML文档时，必须遵循HTML语法规范。HTML文档由标签和信息混合组成，当然这些标签和信息必须遵循一定的组合规则，否则浏览器是无法解析的。
HTML语言的规范条文不多，从逻辑上分析，这些标签包含的内容就标识一类对象，也可以称为网页元素。从形式上分析，这些网页元素通过标签进行分隔，然后表达一定的语义。具体说明如下：
-
所有标签包含在“<”和“>”起止标识符中，构成一个标签。如
<head>
. -
在HTML文档中，绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间包含的就是元素主体。如
<body>
和
</body>
中间包含的就是网页内容主体。 - 起始标签包含元素的名称以及可选属性，也就是说，元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始，然后附加上元素名称。例如
<tag>元素主体</tag>
- 元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间通过空格进行分隔。属性与元素名称之间也是通过空格进行分隔。例如：
<tag al="v1" a2="v2" a3="v3" ...... an="vn">元素主体</tag>
- 少数元素的属性也可能不包含属性值，仅包含一个属性名称。例如：
<tag a1 a2 a3 ...... an>元素主体</tag>
- 一般属性值都应该包含在引号内，虽然不加引号，浏览器也能够解析，但是读者应该养成良好的习惯。
- 属性是可选的，元素包含多少个属性，也是不确定的，这主要根据不同元素而定。不同的元素会包含不同的属性。HTML也为所有元素定义了公共属性，如title、id、class、style等。虽然大部分标签都成对出现，但是也有少数标签是不成对的，这些孤立的标签，被称为空标签。空标签仅包含起始标签，没有结束标签。例如：
<tag>
同样，空标签也可以包含很多属性，用来标识特殊效果或者功能，例如：
<tag al="v1" a2="v2" a3="v3" ...... an="vn">
-
标签可以相互嵌套，形成文档结构。签到必须匹配，不能如
<div><span></div></span>
这样交错嵌套。合法的嵌套应该是包含或被包含的关系，例如
<div><span></span></div>
或
<span><div></div></span>
。 -
HTML文档所有信息必须包含在
<html>
标签中，所有文旦雇员信息应包含在
<head>
子标签中，而HTML传递信息和网页显示内容应包含在
<body>
字标签中。
【示例】对于HTML4文档来说，除了必须符合基本语法规范外，还必须保证文档结构信息的完整性。完整文档结构如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w1.org/19999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文档标题</title>
</head>
<body></body>
</html>
HTML4文档的创作应包括如下内容：
- 必须在首行定义文档的类型，过渡型文档可省略。
-
<html>
标签应该设置文档名字空间，过渡型文档可省略。 -
必须定义文档的字符编码，一般使用
<meta>
标签在头部定义，常用字符编码包括中文简体（gb2312）、中文繁体（big5）和通用字符编码（utf-8）。 -
应该设置文档的标题，可以使用
<title>
标签在头部定义.
HTML文档扩展名为.htm或.html，保存是必须正确使用扩展名，否则浏览器无法正确解析。如果要在HTML文档中增加注释性文本，则可以在
<!-->
和
<-->
标识符之间增加，例如：
<!-- 单行注释-->
或
<!--
多行注释
-->
XHTML文档基本结构
XHTML是The Extensible HyperText Markup Language的缩写，中文翻译为可扩展标识语言，实际上他是HTML4的升级版本。XHTML和HTML4在语法和标签使用方面差别不大。熟悉HTML语言，再稍加熟悉标准结构和规范，也就熟悉了XHTML语言。XHTML具有如下特点：
- 用户可以扩展元素，从而扩展功能，但在目前1.1版本下，用户只能够使用固定的预定义元素，这些元素节本上与HTML4版本元素相同，但删除了部分属性描述性的元素。
- 能够与HTML很好地沟通，可以兼容当前不同的网页浏览器，实现XHTML页面的正确浏览。
【示例】完整的XHTML文档结构如下。
<!--[XHTML文档基本框架]-->
<!--定义XHTML文档类型-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w1.org/19999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无文档标题</title>
</head>
<body>
</body>
</html>
XHTML代码不排斥HTML规则，在结构上也基本相似，但如果仔细比较，就会发现有两点不同。
-
定义文档类型
在XHTML文档第一行新增了
<!DOCTYPE>
元素，该元素用来定义文档类型。DOCTYPE是documenttype（文档类型）的简写，它设置XHTML文档的版本。 使用时应注意该元素的名称和属性必须大写。
DTD（如xhtml1-transitional.dtd）表示文档类型定义，里面包含了文档的规则，网页浏览器会根据预定义的DTD来解析页面元素，并把这些元素所组织的页面显示出来。要建立符合网页标准的文档，DOCTYPE声明是必不可少的关键组成部分，除非XHTML确定了一个正确的DOCTYPE，否则页面的元素和CSS不能正确生效。 -
声明命名空间
在XHTML文档根元素中必须使用xmlns属性声明文档的空间命名。xmlns是XHTML NameSpace的缩写，译为命名空间（名字空间或名称空间）。命名空间是搜集元素和属性名字的一个详细DTD，它允许通过一个URL地址指向来识别命名空间。
XHTML是HTML向XML过渡的标识语言，它需要符合XML规则，因此也需要定义名字空间。又因为XHTML1.0还不允许用户自定义元素，因此它的命名空间都相同：“http://www.w1.org/19999/xhtml”。这也是为什么每个XHTML文档的xmlns值都相同的缘故。
XHTML基本语法
XHTML是根据XML语法简化而来的，因此他遵循XML文档规范。同时XHTML又大量继承HTML语言语法规范，因此与HTML语言非常相似，不过它对代码的要求更加严谨。遵循这些要求，对于培养良好的XHTML代码书写习惯是非常重要的。
- 在文档的开头必须定义文档类型。
- 在根元素中应声明命名空间，即设置xmlns属性。
-
所有标签都必须是闭合的。在HTML中，你可能习惯书写独立的标签，如
<p>
、
<li>
，而不爱写对应的
</p>
、
</li>
来关闭他们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签都必须关闭。如果是单独不成对的标签，应在标签的最后加一个“/”来关闭它，如
<br/>
。 -
所有元素和属性都必须小写。这与HTML不同，XHTML对大小写是敏感的，
<title>
和
<TITLE>
表示不同的标签。 -
所有的属性必须用引号
""
括起来。在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号，如
<table height="80"></table>
。特殊情况下，可以再属性值里使用双引号或单引号。 - 所有标签都必须合理嵌套。这是因为XHTML要求有严格的结构，所以，所有的嵌套都必须按顺序来。
- 所有的属性都必须被赋值，没有值的属性就用自身来赋值。例如：
错误写法：
<td nowrap>
正确写法：
<td nowrap="nowrap">
- 所有特殊符号都用编码表示，例如小于号（<）不是元素的一部分，必须被编码为“<”；大于号（>）必须被编码为“>”。
- 不要在注释内容中使用“–”。“–”只能出现在XHTML注释的开头和结束，也就是说，在内容中他们不再有效。例如：
错误写法：
<!--注释---------------注释-->
正确写法：
<!--注释———————————————注释-->
HTML5文档基本结构
HTML5文档省略了
<html>
、
<head>
、
<body>
等元素，使用HTML5的DOCTYPE声明文档类型，简化
<meta>
元素的charset属性值，省略
<p>
元素的结束标记，使用
<元素/>
的方式来结束
<meta>
元素，以及
<br>
元素等语法知识要点。
【示例】一个简单的HTML5文档基本结构如下：
<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5 基本语法</title>
<h1>HTML5的目标</h1>
<p>HTML5的目标是为了能够创建更简单的web程序，书写出更简洁的HTML代码。
<br/>例如，为了使web应用程序的开发变得更容易，提供了很多API：为了使HTML变得更简洁，开发出了新的属性、新的元素等。总体来说，为下一代web平台提供了许许多多新的功能。
HTML5基本语法
与HTML4相比，HTML5在语法上发生了很大的变化。为了确保兼容性，HTML5根据Web标准，重新定义了一套在现有HTML基础上修改而来的语法，以便各浏览器在运行HTML的时候能够符合通用标准。下面具体介绍在HTML5中队语法进行了那些改变。
-
内容类型
HTML5的文件扩展名和内容类型保持不变。例如，扩展名仍然为“.html”或“.htm”，内容类型（ContentType）仍然为“text/html”。 -
文档类型
DOCTYPE命令声明文档的类型，他是HTML文档必不可少的组成部分，且必须位于代码的第一行。根据化繁为简的设计原则，HTML5对文档类型和字符说明都进行了简化。
在HTML4中，文档类型的声明方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在HTML5中，刻意不使用版本声明，一份文档将会适用于所有版本的HTML。在HTML5中，文档类型的声明方法如下：
<!DOCTYPE html>
当使用工具时，也可以在DOCTYPE声明中加入SYSTEM识别符，声明方法如下：
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
在HTML5中，DOCTYPE声明方式是不区分大小写的，引号也不区分是单引号还是双引号
【注意】
使用HTML5的DOCTYPE会触发浏览器以标准模式显示页面。众所周知，网页都有多种显示模式，如怪异模式（Quirks）、近标准模式（Almost Standards）和标准模式（Standards）。其中标准模式也被称谓非怪异模式（no-quirks）。浏览器会根据DOCTYPE来识别该使用哪种模式，以及使用什么规则来验证页面。
-
字符编码
在HTML4中，使用meta元素来定义文档的字符编码，如下所示：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
在HTML5中，继续沿用meta元素定义文档的字符编码，但是简化了charset属性的写法，如下所示：
<meta charset="UTF-8" />
【提示】对于HTML5来说，上述两种方法都有效，用户可以继续使用前面一种方式，即通过content元素的属性来指定。但是不能同时混用两种模式。
注意：在传统网站中，可能会存在以下标记方式。在HTML5中，这种字符编码方式将被认为是错误的。
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset= UTF-8">
从HTML5开始，对于文件的字符编码推荐使用UTF-8.
-
标记省略
在HTML5中，元素的标记可以省略。具体来说，元素的标记分为三种类型：不允许写结束标记、可以省略结束标记、开始标记和结束标记全部可以省略。下面简单介绍这三种类型各包含哪些HTML5新元素。
- 不允许写结束标记的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr.
- 可以省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
-
可以省略全部标记的元素有：html、head、body、colgroup、tbody。
【提示】不允许写结束标记的元素是指，不允许使用开始标记与结束标记将元素括起来的形式，只允许使用
<元素/>
的形式进行书写。例如：
错误的：
<br></br>
正确的：
<br/>
-
布尔值
对于具有boolean值的属性，如disabled与readonly等，当只写属性而不指定属性值时，标识属性值为true；如果想要将属性值设为false，可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。
【示例】下面是几种正确的书写方法。
<!--只写属性，不写属性值，代表属性为true-->
<input type="checkbox" checked>
<!--不写属性，代表属性为false-->
<input type="checkbox">
<!--属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串，代表属性为flase-->
<input type="checkbox" checked="">
-
属性值
属性值两边既可以用双引号，也可以用单引号。HTML5在此基础上做了一些改进，当属性值不包括空字符串、<、>、=、单引号、双引号等字符时，属性值两边的引号可以省略。
【示例】下边写法都是合法的。
<input type="text">
<input type='text'>
<input type=text>
HTML4元素
HTML4共包含91个元素，这些元素都是针对特定内容、结构或特性定义的。具体分为结构元素、内容元素和修饰元素三大类。
结构元素
结构元素用于构建网页文档的结构，多指块状元素，具体说明如下：
- div：在文档中定义一块区域，即包含框、容器。
- ol：根据一定的排序进行列表。
- ul：没有排序的列表。
- li：每条列表项。
- dl：以定义的方式进行列表。
- dt：定义列表中的词条。
- dd：对定义的词条进行解释。
- del：定义删除的文本。
- ins：定义插入的文本。
- h1~h6：标题1到标题6，定义不同级别的标题。
- p：定义段落结构。
- hr：定义水平线。
内容元素
内容元素定义了元素在文档中标识内容的语义，一般指文本格式化元素，他们多是行内元素。具体说明如下：
- span：在文本行中定义一个区域，即行内包含框。
- a：定义超链接。
- abbr ：定义缩写词。
- address：定义地址。
- dfn：定义术语，以斜体显示。
- kbd：定义键盘键。
- samp：定义样本。
- var：定义变量。
- tt：定义打印机字体。
- code：定义计算机源代码。
- pre：定义预定义格式文本，保留源代码格式。
- blckquote：定义大块内容引用。
- cite：定义引文。
- q：定义引用短语。
- strong：定义重要文本。
- em：定义文本为重要。
修饰元素
修饰元素定义了文本的显示效果，具体说明如下：
- b ：视觉提醒，显示为粗体。
- i：语气强调，显示为斜体。
- big：定义较大文本。
- small：标识细则一类的旁注，文本缩小显示。
- sup：定义上标。
- sub：定义下标。
- bdi和bdo：定义文本显示方向。
- br：定义换行。
-
u：非文本注解，显示下划线。
以下是已废除的修饰元素： - center：定义文本居中。
- font：定义文字的样式、大小和颜色。
- s：定义删除线。strike的缩写。
- strike ：定义删除线。
HTML4属性
HTML4元素包含的属性众多，可以分为核心属性、语言属性、键盘属性、内容属性和眼神属性等类型。
核心属性
核心属性主要包括一下3个，这3个基本属性为大部分元素所拥有：
- class：定义类规则或样式规则。
- id：定义元素的唯一标识。
- style：定义元素的样式声明。
以下这些元素不拥有核心属性：html、head、title、base、meta、param、script、style，这些元素一般位于文档头部区域，用来定义网页元信息。
语言属性
语言属性主要用来定义元素的语言类型，包括两个属性：
- lang：定义元素的语言代码或编码。
- dir：定义文本方向，包括ltr和rtl取值，分别表示从左向右和从右向左。
以下这些元素不拥有语言属性：frameset、frame、iframe、br、hr、base、param、script。
【示例】以下分别为网页代码定义了中文简体的语言，字符对齐方式从左到右的方式。第二行代码为body定义了美式英语。
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="zh-CN">
<body id="myid" lang="en-us">
键盘属性
键盘属性定义元素的键盘访问方法，包括两个属性：
- accesskey：定义访问某元素的键盘快捷键。
- tabindex：定义元素的Tab键索引编号。
使用accesskey属性可以使用快捷键（ALT+字母）访问指定URL，但是浏览器不能很好地支持，在IE中仅激活超链接，需要配合Enter键确定。
【示例1】一般会在导航菜单中设置快捷键。
<a href="http://www.mysite.cn/" accesskey="a">按住Alt键，单击A键可以链接到飞哥首页</a>
tabindex属性用来定义元素的Tab键访问顺序，可以使用Tab键遍历页面中的所有链接和表单元素。遍历时会按照tabindex的大小决定顺序，当遍历到某个链接时，按Enter键可打开链接页面。
【示例2】在文档中插入3个超链接，并分别定义tabindex属性，这样可以通过Tab键快速切换超链接。
<a href="#" tabindex="1">Tab 1</a>
<a href="#" tabindex="3">Tab 3</a>
<a href="#" tabindex="2">Tab 2</a>
内容属性
内容属性定义元素包含内容的附加信息，这些信息对于元素来说具有重要补充作用，避免元素本身包含信息不全而被误解。内容语义包含五个属性：
- alt：定义元素的替换文本。
- title：定义元素的提示文本。
- longdesc：定义元素包含内容的大段描述信息。
- cite：定义元素包含内容的引用信息。
- datetime：定义元素包含内容的日期和时间。
alt和title是两个常用的属性，分别定义元素的替换文本和提示文本。
【示例1】以下示例分别在超链接和图像中定义title属性。
<a href="URL" title="提示文本">超链接</a>
<img src="URL" alt="替换文本" title="提示文本" />
替换文本（Alternate Text）并不是用来做提示的（Tool Tip），相反title属性才负责为元素提供额外说明信息。
当图像无法显示时，必须准备替换的文本来替换无法显示的图像，这对于图像和图像热点是必须的，因此alt属性只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性用来替换提交按钮的图片。
【示例2】以下示例在图像按钮域中定义alt属性。
<input type="image" src="URL" alt="替换文本" />
当浏览器被禁止显示、不支持或无法下载图像时，通过替换文本给那些不能看到图像的浏览者提供文本说明，这是一个很重要的预防和补救措施。
从语义角度考虑，替换文本应该提供图像的简明信息，并保证在上下文中有意义，而对于那些修饰性的图片可以使用空值（alt=“”）。
其他属性
其他属性（定义元素的相关信息，当然这类属性也很多。这里仅列举两个比较实用的属性）：
- rel：定义当前页面与其他页面的关系。从源文档到目标文档的关系。
- rev：定义其他页面与道歉页面之间的链接关系。标识从目标文档到源文档的关系。
【示例】一下示例链接到同一个文件夹中前一个文档，这样当搜索引擎检索到rel=”prev”信息之后，就知道当前文档与所链接的目标文档是平等关系，且处于相同的文件夹中。
<a href="4-3.html" rel="prev">链接到集合中的前一个文档</a>
其他关系与此类似，可以根据需要确定当前文档与目标文档中间的位置关系，兵进行准确定义，以方便浏览器对信息的来源进行准确判断。
HTML5元素
HTML5在HTML4的基础上新增了很多新的元素，根据标记内容的类型不同，这些新的元素被分成了如下几种类型。
结构元素
HTML5定义了一组新的语义化结构标记来描述网页内容。虽然语义化结构标记也可以使用HTML4标记进行替换，但是它可以简化HTML页面设计，明确的语义化更适合搜索引擎检索和抓取。在目前主流的浏览器中已经可以用这些元素了，新增的语义化标记元素如下表所示。
| 元素名称 | 说明 |
|---|---|
| header | 表示页面中一个内容区块或整个页面标题 |
| footer | 表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息 |
| section | 表示页面中的一个内容区块，如章节、页眉、页脚或页面中的其他部分。它可以与h1~h6等元素结合使用，标示文档结构 |
| article | 标示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章 |
| aside | 表示article元素的内容之外的、与article元素的内容相关的辅助信息 |
| nav | 表示页面中导航链接的部分 |
| main | 表示页面中的主要内容，主要内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容 |
| figure | 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。可以使用figcaption元素为figure元素组添加标题 |
功能元素
根据页面内容的功能需要，HTML5又新增了很多专用元素，简单说明如下：
- hgroup：用于对整个页面或页面中一个内容区块的标题进行组合。在HTML5.1中废除。例如：
<hgroup>...</hgroup>
在HTML4中表示为：
<div>...</div>
- video：定义视频，比如电影片段或其他视频流。例如：
<video src="movie.ogg" controls="controls">video 元素</video>
在HTML4中表示为：
<object type="video/ogg" data="movie.ogv">
<param name="src" value="movie.ogv">
</object>
- audio：定义音频，比如音乐或其他音频流。例如：
<audio src="someaudio.wav">audio 元素</audio>
在HTML4中表示为:
<object type="application/ogg" data="someaudio.wav">
<param name="src" value="someaudio.wav">
</object>
- embed：用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。例如：
<embed src="horse.wav" />
在HTML4中表示为：
<object data="flash.swf" type="application/x-shockwave-flash"></object>
- mark：主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。例如：
<mark></mark>
在HTML4中表示为：
<span></span>
- dialog：定义对话框或窗口。例如：
<dialog open>这是打开的对话窗口</dialog>
在HTML4中表示为：
<div id="dialog">这是打开的对话窗口</ div>
- bdi：定义文本的文本方向，使其脱离其周围文本的方向设置。
<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>:78 points</li>
</ul>
- figcaption：定义figure元素的标题。例如：
<figure>
<figcaption>飞哥家的猫咪白白</figcaption>
<img src="feifei_cat_baibai.jpg" width="350" height="234" />
</figure>
在HTML4中表示为：
<div id = "figure">
<h2>飞哥家的猫咪白白</ h2>
<img src="feifei_cat_baibai.jpg" width="350" height="234" />
</div>
- time：表示日期或时间，也可以同时表示两者。例如：
<time></time>
在HTML4中表示为：
<span></span>
- canvas：表示图形，如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西会知道这块画布上。例如：
<canvas id="myCanvas" width="200" height="200"></canvas>
在HTML4中表示为：
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200">
</object>
- output：表示不同类型的输出，比如脚本的输出。例如：
<output></output>
在HTML4中表示为：
<span></span>
-
source：为媒介元素（比如
<video>
和
<audio>
）定义媒介资源。例如：
<source>
在HTML4中表示为：
<param>
- menu：表示菜单列表。当希望列出表单控件时使用该标签。例如：
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />Blue</li>
</menu>
在HTML4中，menu元素不被推荐使用。
- ruby：表示ruby注释（中文注音或字符）。例如：
<ruby>汉<rt><rp>(</rp>ΩΣ<rp>)</rp></rt></ruby>
- rt：表示字符（中文注音或字符）的解释或发音。例如：
<ruby>汉<rt>ΩΣ</rt></ruby>
- rp：在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。例如：同14 -> ruby
- wbr：表示软换行。wbr元素与br元素的区别：br元素表示此处必须换行；而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽时（没必要换行时），不进行换行，而当宽度不够时，主动在此处进行换行。
<p>每个人的初恋,大都十分纯情。
<wbr> 跨过了初恋,爱情就生出了很多姿态。有人变得风流,见一个爱一个;<wbr>
有人冷漠,再不会拿出真心爱第二个人。 </p>
- command：表示命令按钮，如单选按钮、复选框或按钮。例如：
<command οnclick=cut()" label="cut">
- details：表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户单机标题时，会显示出细节信息。summary元素应该是details元素的第一个子元素。例如：
<details>
<summary>HTML5</summary>
烦恼时,笑一笑,笑来顺心把你绕;失意时,笑一笑,笑出顺利伴你跑;无奈时,笑一笑,笑出舒心美好罩。世界微笑日,愿你多笑笑,开心乐逍遥!
</details>
-
summary：为
<details>
元素定义可见的标题。实例参照上一个元素。 - datalist：表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。例如：
<datalist></datalist>
- datagrid：表示可选数据的列表，它以树形列表的形式来显示。例如：
<datagrid></datagrid>
- keygen：表示生成密匙。例如：
<keygen>
- progress：表示运行中的进程，可以使用progress元素来显示JavaScript中耗费时间的函数的进程。例如：
<progress></progress>
- meter：度量给定的范围（gauge）内的数据。例如：
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
- track：定义用在媒体播放器中的文本轨道。例如：
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="vodeo/mp4" />
<source src="forrest_gump.ogg" type="vodeo/ogg" />
<track kind="subtitles" src="sub_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="sub_chi.srt" srclang="en" label="English">
</video>
表单元素
通过type属性，HTML5为input元素新增了很多类型，简单说明如下：
-
tel：格式
<input type="tel" />
，表示必须输入电话号码的文本框。 -
search：格式
<input type="search" />
，表示搜索文本框。 -
url：格式
<input type="url" />
，表示必须输入URL地址的文本框。 -
email：格式
<input type="email" />
，表示必须输入电子邮箱地址的文本框。 -
datetime：格式
<input type="datetime" />
，表示日期和时间文本框。 -
date：格式
<input type="date" />
，表示日期文本框。 -
month：格式
<input type="month" />
，表示月份文本框。 -
week：格式
<input type="week" />
，表示周几文本框。 -
time：格式
<input type="time" />
，表示时间文本框。 -
datetime-local：格式
<input type="datetime-local" />
，表示本地日期和时间文本框。 -
number：格式
<input type="number" />
，表示必须输入数字的文本框。 -
range：格式
<input type="range" />
，表示范围文本框。 -
color ：格式
<input type="color" />
，表示颜色文本框。
这些新类型设计用户代理 （浏览器）可以提供用户界面，如日历、日期选择器，或整合用户的地址簿，并提交到服务器的格式。它给用户一个更好的经验，因为在发送到服务器之前，进行输入类型检查，这意味着有更少的时间等待反馈。
HTML5属性
HTML5同时增加和废除了很多属性。下面简单介绍一些常用属性。
表单属性
- 为input（type=text）、select、textarea与button元素新增加autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点。
- 为input元素（type=text）与textarea元素新增加placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。
- 为input、output、select、textarea、button与fieldset新增加form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内。
- 为input元素（type=text）与textarea元素新增加required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容。
- 为input元素增加autocomplete、min、max、multiple、pattern和step属性。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合使用。multiple属性允许在上传文件时一次上传多个文件。
- 为input元素与button元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget，他们可以重载form元素的action、enctype、method、novalidate与target属性。为fieldset元素增加了disabled属性，可以把它的子元素设为disabled（无效）状态。
- 为input属性、button元素、form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件地提交。
链接属性
- 为a与area元素增加了media属性，该属性规定目标URL是为什么类型的媒介、设备进行优化的，只能在href属性存在时使用。
- 为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素的一致。
- 为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小。
- 为base元素增加了target属性，主要目的是保持与a元素的一致性。
其他属性
- 为ol元素增加属性reversed，它指定列表倒序显示。
- 为meta元素增加charset属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的指定提供了一种比较良好的方式。
- 为menu元素增加了两个新的属性——type与label。label属性为菜单定义一个可见的标注，type属性让菜单可以上下文菜单、工具条与列表菜单3种形式出现。
- 为style元素增加scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。
- script元素增加async属性，它定义脚本是否异步执行。
- 为html元素增加属性manifest，开发离线web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。
- 为iframe元素增加3个属性，即sandbox、seamless与srcdoc，用来提高页面安全性，防止不信任的Web页面执行某些操作。
HTML5全局属性
HTML5新增了8个全局属性。所谓全局属性是指可以用于任何HTML元素的属性。
contentEditable属性
contentEditable属性的主要功能是允许用户可以在线编辑元素中的内容。contentEditable属性是一个布尔值属性，可以被指定为true或false。
注意，该属性还有一个隐藏的inherit（继承）状态，属性为true时，元素被指定为允许编辑；属性为false时，元素被指定为不允许编辑；未指定true或false时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。
【示例】在以下示例中为列表元素加上contentEditable属性后，该元素就变成可编辑的了，读者可自行在浏览器中修改列表内容。
<!DOCYTPE html>
<head>
<meta charset="UTF-8">
<title>conentEditable属性示例</title>
</head>
<h2>可编辑列表</h2>
<ul contentEditable="true">
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>
在编辑完元素中的内容后，如果想要保存其中内容，只能把该元素的innerHTML发送到服务器端进行保存，因为改变元素内容后该元素的innerHTML内容也会随之改变，目前还没有特别的API来保存编辑后元素中的内容。
所有主流的浏览器都支持contentEditable属性。
另外，在JavaScript脚本中，元素还具有一个isContentEditable属性，当元素可编辑时，该属性值为true；反之为false。
contextmenu属性
contextmenu属性用于定义
<div>
元素的上下文菜单。上下文菜单在用户右键单击元素时出现。
【示例】以下示例使用contextmenu属性定义
<div>
元素的上下文菜单，其中contextmenu属性的值是要打开的
<menu>
元素的id属性值。
<!DOCYTPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div contextmenu="mymenu">上下文菜单
<menu type="context" id="mymenu">
<menuitem label="微信分享"></menuitem>
<menuitem label="微信分享"></menuitem>
</menu>
</div>
</body>
</html>
当用户右击该元素时，会弹出一个上下文菜单，从中可以选择指定的快捷键菜单项目。
目前只有Firefox支持contextmenu属性
data-*属性
使用data-*属性可以自定义用户数据。具体应用包括：
- data-*属性用于存储页面或Web应用的私有自定义数据。
- data-*属性赋予所有HTML元素嵌入自定义data属性的能力。
存储的自定义数据能够被页面的JavaScript脚本利用，以创建更好的用户体验，不进行Ajax调用或服务器端数据库查询。
data-*属性包括两部分：
- 属性名：不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符。
- 属性值：可以是任意字符串。
当浏览器（用户代理）解析时，会完全忽略前缀为“data-”的自定义属性。
【示例1】以下示例使用data-*属性为每个列表项目自定义一个自定义属性type。这样在JavaScript脚本中可以判断每个列表项目包含信息的类型。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li data-animal-type="bird">猫头鹰</li>
<li data-animal-type="fish">鲤鱼</li>
<li data-animal-type="spider">蜘蛛</li>
</ul>
</body>
</html>
所有主流浏览器都支持data-*属性。
【示例2】以上面示例为基础，下面示例使用JavaScript脚本访问每个列表项目的type属性值，演示效果如图1.5所示。
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
console.log(lis[i].dataset.animalType);
}
draggable属性
draggable属性可以定义元素是否可以被拖动。属性取值说明如下：
- true：定义元素可以拖动。
- false：定义元素不可以拖动。
- auto：定义使用浏览器的默认行为。
draggable 属性常用在拖放操作中。
提示：IE9+、Firefox、Opera、Chrome和Safari都支持draggable属性。
dropzone属性
dropzone属性定义在元素上拖动数据时，是否复制、移动或链接被拖动数据。属性取值说明如下：
- copy：拖动数据会产生被拖动数据的副本。
- move：拖动数据会导致被拖动数据被移动到新位置。
- link：拖动数据会产生指向原始数据的链接。
例如：
<div dropzone="copy"></div>
提示：目前所有主流浏览器都不支持dropzone属性。
hidden属性
在HTML5中，所有元素都包含一个hidden属性。该属性设置元素的可见状态，取值为一个布尔值，当设为true时，元素处于不可见状态；设为false时，元素处于可见状态。
【示例】使用hidden属性定义段落文本隐藏显示。
<p hidden>这个段落应该被隐藏。</p>
hidden属性可用于防止用户查看元素，知道匹配某些条件，如选择了某个复选框。然后，在页面加载之后，可以使用JavaScript脚本删除该属性，删除之后钙元素变为可见状态，同时元素中的内容也即时显示出来。
提示：除了IE，所有主流浏览器都支持hidden属性。
spellcheck属性
spellcheck属性定义是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查：
- input元素中的文本值（非密码）。
-
<textarea>
元素中的文本。 - 可编辑元素中的文本。
spellcheck元素是一个布尔值的属性，取值包括true和false，为true时标识对元素进行拼写和语法检查，false时不检查。用法如下：
<!--以下两种方法书写正确-->
<textarea spellchekck="true" >
<input type=text spellcheck=false>
<!--以下书写错误-->
<textarea spellchekck >
注意：如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。
【示例】设计进行拼写检查的可编辑段落。
<!docytpe html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p contentEditable="true" spellcheck="true">这是一个段落。</p>
</body>
</html>
==提示：IE10+、Firefox、Opera、Crome和Safari都支持spellcheck属性。
translate属性
translate属性定义是否应该翻译元素内容。取值说明如下：
- yes：定义应该翻译元素内容。
- no：定义不应翻译元素内容。
【示例】如何使用translate属性
<!docytpe html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p translate="no">请勿翻译本段。</p>
<p>本段可被翻译成任意语言。</p>
</body>
</html>
提示：目前所有主流浏览器都无法正确支持translate属性。