1.2 HTML5设计原则_Web前端开发全程实战：HTML5+CSS3+JavaScript+jQuery+Bootstrap-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

1.2　HTML5设计原则

为了规范HTML5开发的兼容性、实用性和互操作性，W3C发布了HTML5设计原则（http://www.w3.org/TR/html-design-principles/），简单说明如下。

1.2.1　避免不必要的复杂性

HTML规范可以写得十分复杂，但浏览器的实现应该非常简单。把复杂的工作留给浏览器后台去处理，用户仅需要输入最简单的字符，甚至不需要输入，才是最佳文档规范。因此，HTML5首先采用化繁为简的思路进行设计。

【示例1】在HTML4.01中定义文档类型。代码如下：

     <!DOCTYPE html PUBLIC "-//W3C/DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5简化如下：

     <!DOCTYPE html>

HTML4.01和XHTML中的DOCTYPE过于冗长，但在HTML5中只需要简单的<!DOCTYPEhtml>就可以了。DOCTYPE是给验证器用的，而非浏览器，浏览器只在做DOCTYPE切换时关注这个标签，因此并不需要写得太复杂。

【示例2】在HTML4.01中定义字符编码。代码如下。

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

在XHTML1.0中还需要再声明XML标签，并在其中指定字符编码。

     <?xml version="1.0" encoding="utf-8" ?>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5简化如下：

     <meta charset="utf-8">

关于省略不必要的复杂性，或者说避免不必要的复杂性的例子还有不少。但关键是HTML5既能避免不必要的复杂性，又不会妨碍在现有浏览器中使用。

在HTML5中，如果使用link元素链接到一个样式表，先定义rel="stylesheet"，然后再定义type="text/css"，这样就重复了。对浏览器而言，只要设置rel="stylesheet"就够了，因为它可以猜出要链接的是一个CSS样式表，不必要再指定type属性。

对Web开发而言，大家都使用JavaScript脚本语言，也是默认的通用语言，用户可以为script元素定义type="text/javascript"属性，也可以什么都不写，浏览器自然会假设在使用JavaScript。

1.2.2　支持已有内容

XHTML2.0最大的问题就是不支持已经存在的内容，这违反了Postel法则（即对自己发送的东西要严格，对接收的东西则要宽容）。现实情况中，开发者可以写出各种风格的HTML，浏览器遇到这些代码时，在内部所构建出的结构应该是一样的，呈现的效果也应该是一样的。

【示例】下面示例展示了编写同样内容的4种不同写法，4种写法唯一的不同点就是语法：

从浏览器解析的角度分析，这些写法实际上都是一样的。HTML5必须支持已经存在的约定，适应不同的用户习惯，而不是用户适应浏览器的严格解析标准。

1.2.3　解决实际问题

规范应该去解决现实中实际遇到的问题，而不该考虑那些复杂的理论问题。

【示例】既然有在<a>中嵌套多个段落标签的需要，那就让规范支持它。

如果块内容包含一个标题、一个段落，按HTML4规范，必须至少使用两个链接。例如：

     <h2><a href="#">标题文本</a></h2>
     <p><a href="#">段落文本</a></p>

在HTML5中，只需要把所有内容都包裹在一个链接中即可。例如：

其实这种写法早已经存在，当然以前这样写是不合乎规范的。所以，HTML5解决现实的问题，其本质还是纠正因循守旧的规范标准，现在允许用户这样写。

1.2.4　用户怎么使用就怎么设计规范

当一个实践已经被广泛接受时，就应该考虑将它吸纳进来，而不是禁止它或搞一个新的实践出来。例如，HTML5新增了nav、section、article、aside等标签，它们引入了新的文档模型，即文档中的文档。在section中，还可以嵌套h1~h6的标签，这样就有了无限的标题层级，这也是很早之前Tim Berners-Lee所设想的。

【示例】下面几行代码相信大家都不会陌生，这些都是频繁被使用过的ID名称。