《HTML5移动开发》—— 2.1 HTML5语法

本节书摘来异步社区《html5移动开发》一书中的第2章，第2.1节，作者：【美】estelle weyl（埃斯特尔 韦尔），更多章节内容可以访问云栖社区“异步社区”公众号查看。

html5与html4与xhtml非常类似。后两者支持的大部分元素在html5中仍然是支持的。只有一些过时了的标记和属性已被剔除。在大多数情况下，如果你的文档能通过html4严格（strict）模式或是xhtml模式的验证，那么它们作为html也能通过验证[1]。html和xhtml的语法虽略有不同，但是两者都被支持。仅仅把html 4.01或xhtml的doctype改成，就可以通过html5验证（稍后将介绍更多有关doctype的内容）。

html5比html4和xhtml更好，包含了之前版本的元素，剔除了已过时的元素，添加了一些新元素，还重新定义或微调了另外一些元素。

html5规范的编写者调查了web上那些开发者们已经在做的：哪些文档分段是各种网站都趋向的，他们都赋给这些组件哪些类（class）和id，哪些脚本是大多数的网站作者反复使用的，以及哪些类库功能已经激增至普遍存在。

html5试图处理那些个人开发者们一直自行在做的：创建一个标准；详细说明浏览器都应该如何处理这些标准；以及当他们的代码，呃，不那么标准的时候，浏览器应该如何处理开发人员标记。html5规范明确细化了浏览器应该如何处理，或解析，各种代码正确或错误的情况。通过关注细节，html5的一个目标就是告诉浏览器如何处理所有可能会发生的情况，从而浏览器可以从同样的标记构造出一致的dom，这样开发人员就不会一直把带宽浪费在处理浏览器差异上了。

从我个人而言，我乐于见到更严格的标准。我的观点是开发者们应该正确地编写代码，而不是指望浏览器从宽解析糟糕的代码。你正在读这本书，所以我假定你是“良好代码”阵营的一员。很好！这就是你要学的东西。

web页面是由一系列元素组成的。有些元素是空的，其他的元素则包含文本，而另一些可以包含其他元素（或者既有元素也有文本）。大多数元素可以包含子元素或文本节点。那些不能包含子元素的，例如图像和meta元素，称为空元素（empty element）。

如图2-1所示，一个元素就是一个结构体，由一个开始标记、一些可选的（有时是必需的）属性、通常还有一些内容，以及一个结束标记，而且如果你使用xhtml风格编写代码的话，还有一个专门针对像<code>&lt;img&gt;</code>和<code>&lt;input&gt;</code>这样空元素自闭合标记的可选的斜杠组成。

在html之前版本的中，内联元素（inline element）只能包含其他内联元素和文本。根据元素的不同，块级元素（block-level element）可以包含其他块级元素、内联元素和（或）文本。它们的“后代”元素（descendant element），像“祖先”元素（ancestor element）一样，也可以由元素、属性和文本组成。

使用css，你可以把任何短语元素[2]（phrase element）的样子更改成块（block）显示，还可以强制一个块元素或区块元素（sectioning element）显示成内联的样子（注意：我仍然在使用内联这个词。在html5中，内联指的是外在表现，而不是指元素类型）。

在html5中，我们终于从内联元素还是块元素的观念中解脱出来了——基于外观的命名约定。在html5中，元素被定义为区段元素、标题（heading）元素、短语元素、嵌入式（embedded）元素、流（flow）元素、元数据（metadata）元素以及交互式（interactive）元素。不过在语义上，一些观念还是保持不变的。举例来说，区段元素不能位于短语元素内部。

在选择一个元素时，要基于语义选择最恰当的元素，而不要基于默认的浏览器渲染。虽然你确实可以针对不管什么文体上的目的而使用任意元素，但你不应该这样做。每一个元素都有语义上的含义。

有几个属性对于几乎所有html5元素来说是全局的（global）——包括核心（或全局）属性和国际化（internationalization）属性（将在下一节中介绍）——以及另一些更加元素特有的属性，这些我们将在第3章当讲到这些属性正在被修改的元素时进行介绍。

html5已经添加了几个国际化属性和核心属性，这些属性可以被应用到几乎任何元素上。

id、class、title、style、lang和dir属性继续在所有元素上被支持。html5往核心属性列表中添加了accesskey、hidden和tabindex属性，同时还有contenteditable、contextmenu、spellcheck、draggable和dropzone共5个建议性的交互式属性。随后将讨论这些属性。

除了全局属性，所有的元素也可以有微数据（microdata）属性（wia-aria角色和aria-属性）和自定义数据属性。自定义数据属性是你自己的属性，写成data-的形式，这里的由你自己设置。html5通过添加data-前缀以允许开发者们创建不会与未来的html版本冲突的属性。我们将在“data-自定义数据属性”小节描述data-属性，在第6章介绍微数据和aria无障碍属性。

id

id属性是一个唯一标识符。每个文档不应该存在具有相同id的两个元素，并且每个元素最多也只能有一个id。在html5中，id的值必须至少一个字符长，而且不能包含空格。这与之前的版本有所不同，之前版本id的值必须以字母a-z或a-z开始，后面可以跟字母（a-za-z）、数字（0-9）、连字符（-）、下划线（_）、冒号（:）和句号（.）。

我建议你把id限制于仅使用字母和数字，然而无论你选择使用哪种命名约定，重要的是保持统一。

id属性一般是可选的。不过，对于内部页面锚点（anchoring）和正在实现显式标签（explicit label）的表单内部元素是必需的。通过使用标签的for属性和表单元素的id属性可以把显式标签和表单元素关联起来。要注意的是，对于嵌套在一个隐式标签（implicit label）之内的表单元素，id属性不是必需的。我们将在第4章讨论标签和id属性。

id属性作为一个锚点用于使用javascript进行定位也非常方便，只是可能有一点重度使用。id属性，如果有被包含的话，可以用在css中定位元素。然而，由于id在css样式中的高量值或特征性，即使id选择器用起来稍微更好一些，id值也应该尽量少在css选择器中使用。所有这些我们将在第6章讨论。现在你只要知道，在你读完这本书的时候，你将能意识到你可以使用css3选择器定位到页面中的任何元素，而不需要使用id选择器就够了。

class

class是该元素所属的一个类别的名字或一些类别的列表。class属性具体说明了该元素是哪一个或哪一些类的一员。和id属性不同，任何数量的元素都可以共用同一个类。一个元素可以有多个使用空格分开的类。

就css样式而言，class属性中类名的顺序无关紧要。然而在样式表（stylesheet）中的顺序，却很重要（这个问题我们将在第6章进行讨论）：