《HTML5和CSS3快速参考》——2.4 语法摘要

2.4 语法摘要

一般语法规则

（X）HTML5中的空标签语法

• 空标签没有闭标签（也叫结束标签），例如< input > 图像说明文字。
• 在HTML5中，空元素中的终止斜线不是必须的，例如< input >。
• 在XHTML5中，空元素中的终止斜线是必须的，例如< input />。

具有可选标签的HTML5元素

• 可选标签并不适用于XHTML5元素。
• 当可选标签满足（下表）“省略条件”列中列出的条件时：
  • 通常情况下，只要其中有一个条件被满足，该标签就可以被省略。
  • 另外，还有一些标签在本书撰写时依然没有提供限定条件。

下面我们来看一个省略了可选标签的并且仍然有效的HTML5文档示例，以及与之相对的，号称更为严谨的、通过Total Validator工具检测的XHTML5文档。

HTML5

<!DOCTYPE html>

　　<title>HTML5 document</title>

<table title=Report>
　<tr>
　　<td>1st cell content
　　<td>2nd cell content
　　<td>3rd cell content

　<tr>
　　<td>4th cell content
　　<td>5th cell content
　　<td>6th cell content

　</table>

XHTML5

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
　　　<title>XHTML5 document</title>
</head>
<body>
　　　<table title=”Report”>
　　<tr>
　　　<td>1st cell content</td>
　　　<td>2nd cell content</td>
　　　<td>3rd cell content</td>
　　</tr>
　　<tr>
　　　<td>4th cell content</td>
　　　<td>5th cell content</td>
　　　<td>6th cell content</td>
　　</tr>
　</table>
</body>
</html>

元素的类型

浏览器中的功能性脚本
由于现实中的浏览器对HTML5的支持并不一致，因此，我们可以用JavaScript来检测浏览器对某些特定功能的兼容性，或者为其添加某些缺失的功能。

<!DOCTYPE html>
<html>
<head><title></title>
　<script src=”modernizr.min.js”></script>
</head>

Modernizr

• 目前在检测HTML5兼容性方面，最有效的工具是Modernizr。这是一个开源的JavaScript库，通常用于检测目标环境对HTML5与CSS3的支持程度。

HTML5增强式脚本—Polyfills

• HTML5 Modernizr库只是一个检测工具，它不会为旧版浏览器添加其缺失的HTML5功能。然而，Modernizr网站中有一个“HTML5-Cross-browser-Polyfills”页面，其中所提供的各种链接正是用于此类问题的各种解决方案。
• Polyfills实际上就是一小段代码或插件，开发人员可以用它来提供一些浏览器缺失的技术。Polyfills填补某些旧版浏览器在HTML5和CSS3支持上的空白。