本节书摘来自异步社区《JavaScript设计与开发新思维》一书中的第2章，第2.2节，作者：【美】Larry Ullman著，更多章节内容可以访问云栖社区“异步社区”公众号查看
2.2 HTML5入门
我写这本书的时候已经临近2012年，HTML5是一个奇妙的东西，它已经以某种形式存在了数年，但是不久之前XHTML2.0停止发展之后，HTML5才成为了Web开发的事实标准。HTML5还没有正式地标准化和发布，这意味着不管何时出现HTML5的最终实现方案，无疑都会与现在讨论的HTML5不同。通常，由于Web浏览器普遍存在而又多变，明智的人应该避开这类新事物。但是你可以采取许多方法，在两个方面上都得到最大的益处：使用一些HTML5特性，而又不破坏用户的体验。我们首先来看一个普通的HTML5模板，然后学习最好的新型HTML5表单元素。
提示： HTML5不只是一个单独的标准，相反，它是对HTML标准与一组其他的新特性的统称。
2.2.1 一个HTML5模板
下面这个代码块展示了一个HTML5模板，我将把它作为本书中所有HTML脚本的基础。仔细观察这段代码，然后我将详细介绍它的特殊性。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Template</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/
html5.js"></script>
<![endif]-->
</head>
<body>
<!-- template.html -->
</body>
</html>
从第一行开始，我们已经说过，简单的HTML5 DOCTYPE将使浏览器处于标准模式，这是我们的第一个目标。接下来是一个html元素，其中包含head和body元素。奇怪的是，HTML5不需要head元素，但是不使用它我感觉不安。不管是否使用head，HTML5仍然需要一个title标记。你还应该习惯于指出编码（也就是使用中的字符集）。正如你所看到的那样，meta标记也得到了简化（第4行）。如果你不熟悉字符集和编码，应该对这一主题展开研究，因为UTF-8编码支持所有语言的字符，我们通常使用它。你还会看到，我已经为html开始标记（第2行）添加了lang属性，但是它也不是必需的。
注意： 编码必须在文档的开头指明，所以始终将它放在head开始标记之后，title元素之前。
这就是一个HTML5文档的基本语法。在本章的下一小节中，我将重点介绍在本书中使用HTML5的主要原因：一些新颖且非常实用的表单元素。但是，现在我要先介绍两个有关HTML5模板的知识。首先，如果你和本书中的例子一样，打算使用外部样式表，正确的语法是：
<link rel="stylesheet" href="css/styles.css">
你可能注意到，HTML5中的link元素不使用type属性，因为rel属性的值为stylesheet时，假定类型为text/css。
其次，HTML5定义了许多语义元素，如article、footer、header、nav和section。这些标记的创建是通过挖掘Web上最常见的ID和类元素确定的。例如，在HTML4中，许多设计人员使用一个ID为header的div表现页面最开始的部分；然后相应地用CSS设置div的样式和位置，而在HTML5中，你只需要创建一个header元素，然后设置样式即可。大部分老的浏览器无法处理HTML5，但在遇到这些新的HTML标记时也没有问题，仍然能够正确地应用样式。遗憾的是，Internet Explorer 9以前的版本无法为未知元素应用样式，也就是说运行IE8或者更早版本的用户无法看到正确格式化的文档。这个问题的解决方案是一段巧妙的、被称为“HTML5 shiv”的JavaScript，这段代码由一群非常能干的人创建，它生成新类型的元素，效果是使Internet Explorer发现这些元素并且正确地设置样式。HTML5 shiv程序库的源代码已经公开，目前存在于Google Code上，使用如下代码可以加入它：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
上述代码块以“条件注释”开始和结束，这种注释只在Internet Explorer中得到支持。注释中的特殊条件检查当前浏览器版本是否低于（lt）IE9。如果条件成立，则自动向页面添加script标记。因为这些条件注释仅对IE有意义，其他浏览器将不会试图加载这个脚本。
你可能已经注意到，这个script标记和link标记类似，也不使用type属性—假定为text/javascript。
在第3章“行业工具”中，我将列举一些HTML验证器。在本书写作的时候，这些验证器都是实验性的，但是HTML5也处于不明确的试验阶段！
注意： 本书的例子中很少有需要包含HTML5 shiv的新元素，但是我将坚持使用这个模板（包括shiv）。
2.2.2 HTML5表单元素
我决定不顾HTML5尚未定稿这一事实，在本书中使用HTML5，原因有二。第一个原因是HTML5明显是Web开发的未来。另一个原因是HTML5提供的新表单元素有利于更好的用户体验。特别是下列新的输入域类型：
email
number
range
search
tel
url
这些元素用于让用户输入电子邮件地址、用“微调框”输入数字（图2.2）、用滑动块输入数字、搜索词和电话号码或者URL。对于支持这些元素的浏览器，内建的客户端验证将确保输入的数据有效。例如，URL输入域只允许用户输入一个URL（图2.3，在输入域类型得到支持时）。这些输入域类型还有额外的好处。例如，当iPhone等移动设备上电子邮件输入域得到焦点时，将会为用户提供一个输入电子邮件地址的键盘。另一个例子是，Search输入域类型的样式类似Mac的标准搜索框，带有圆角（图2.4，但是不会自动包含“Search…”文本）。
使用这些新的元素是安全的，因为对于不支持它们的浏览器，用户将得到一个标准的文本输入框。而且，浏览器默认情况下还会在同一行内渲染未知的元素，所以使用这些新的输入域类型甚至不会影响你的布局！
HTML5表单还定义了一些值得考虑的新输入域属性。第一个是autofocus，它指出该元素在表单加载时获得浏览器的焦点：
<input type="text" name="username" autofocus>
注意： 在编写本书的时候，在所有浏览器中，Opera对这些新输入域类型的支持最好。
第二个属性是placeholder，该属性设置了输入域应有的初始文本值（参见图2.4）：
<input type="search" placeholder="Search... ">
HTML5还引入了required属性，它与HTML5的自动表单验证绑定，存在required属性时，用户为元素提供的数据必须通过相关验证。例如，如果一个电子邮件地址是必需的，用户必须在此输入语法有效的电子邮件地址。当一个元素不是必需的时候，不需要提交任何数据，但是如果提供了数据，它仍然必须通过验证（图2.5和图2.6）。
Primary Email: <input type="email" name="email1" required>
Secondary Email: <input type="email" name="email2">
为了限制文本元素提交的文本总数，可以使用maxlength属性。这个属性已经出现多年，但是现在绑定得更加紧密（不同的浏览器对过多文本的响应方式不同），甚至可以应用到文本区域（Textarea元素）：
<textarea name="comments" rows="8" cols="40" maxlength="300">
</textarea>
最后，在form开始标记添加novalidate属性可以禁用自动表单验证：
<form action="somepage.php" method="get" novalidate>
预先警告，本书中的一些示例（特别是在前几章）使用JavaScript执行验证。如果你用支持HTML5的浏览器测试这些例子，就需要为表单添加novalidate属性，否则浏览器不会让无效的数据进入JavaScript。
现在你已经知道了使用HTML5的意义，让我们回到JavaScript吧！
HTML5 与XHTML
XHTML要求严格的XML语法，这是我对它的喜爱程度超过HTML的原因之一（强制严格的行为能减少错误）。更严格的XHTML有几条不适用于HTML的规则，特别是： - 没有结束标记的元素如img、input和br，必须在开始标记中用斜杠结束，如： < img src="file.png" alt="img" /> - 如上述代码，属性必须加上引号 - 属性始终需要设值，如： < option value="yes" selected="selected">Yes< /option> 但是，HTML5和较早版本的HTML一样，不要求严格的XML语法。这种做法蕴含了许多意义，包括这样的事实：上述的规则均不适用于HTML5。上述的两个XHTML代码片断可以写成如下的有效HTML5： < img src=file.png alt=img> < option value=yes selected>Yes< /option> 个人观点，我愿意去掉斜杠结束符和属性值（在恰当的时候），因为这样语法会更清晰而且不影响代码的含义。但是，我仍然建议为属性加上引号。原因之一是这样做能够突出属性值。其次，有些场合下，你必须为属性值加上引号，例如在属性里有空格的时候： < img src="file.png" alt="My Vacation"> 最后，因为一些属性可能必须加上引号，所以如果所有属性都例行地加上引号，代码的一致性就会更好—更好的一致性总是代表着更好的编码。
提示： HTML5还创建一个新的pattern属性，可将元素验证与一个正则表达式绑定。
