HTML5学习摘录

浏览数：32 / 时间：2015年06月09日

设计原理

不是规范里都包含什么，而是规范里为什么会包含它们，以及在设计这个规范的时候，设计者们是怎么看待这些东西的。

发展史：HTML2.0——》HTML3.2——》HTML4.0.1——》XHTML1.0——》XHTML1.1和XHTML2.0的失败——》HTML5

原理：

（1）避免不必要的复杂性

HTML 4.01的doctype：

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

XHTML 1.0的doctype：

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5中doctype就简化成：

<!DOCTYPE html>

　　什么文档一开头就要写doctype？它不是写给浏览器看的。Doctype是写给验证器看的。也就是说，我之所以要在文档一开头写那行XHTML 1.0的doctype，是为了告诉验证器，让验证器按照该doctype来验证我的文档。浏览器在接收的时候必须要开放。因此，它不会检查任何格式类型，而验证器会，验证器才关心格式类型。HTML5的另一个设计原理，它必须向前向后兼容，兼容未来的HTML版本——不管是HTML6、HTML7，还是其他什么——都要与当前的HTML版本，HTML5，兼容。因此，把一个版本号放在doctype里面没有多大的意义，即使对验器证也一样。

　　注：当初微软在引入CSS的时候，走在了标准的前头，他们率先在浏览器中支持CSS，也推出了自己的盒模型——后来标准发布了，但标准中使用了不一样的盒模型。他们想出了一个非常巧妙的主意。那就是利用doctype，利用有效的doctype来触发标准模式，而不是兼容模型（quiks mode）。在我们向文档中加入doctype时，就相当于声明了“我想使用标准模式”，但这并不是发明doctype的本意。这只是为了达到特殊的目的在利用doctype。

　在文档前面写完doctype html是在Internet Explorer中触发标准模式的最少字符数目。

　　还有一个例子，同样可以说明规范是如何省略不必要的复杂性，避免不必要的复杂性的。如果前面的文档使用的是HTML 4.01：

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

　　在XHTML 1.0指定同样的编码，就得多敲一下键盘，因为你还得声明meta元素位于一个开始的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中，如果我使用link元素链接到一个样式表，用rel=”stylesheet”，不用再说type=”text/css”。用了script元素，不用再说type=”text/javascript”，浏览器自然会假设你在使用JavaScript。避免-不必要的-复杂性。

（2）支持已有的内容

　元素属性可以不区分大小写，属性值可以不加引号

(3) 解决现实的问题

　　页面中已经有了一块内容，我想给整块内容加个链接，怎么办？

<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>

在HTML5中，我只要简单地把所有内容都包装在一个链接元素中就行了。

<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>

　　它解决了一个现实的问题链接包含的都是块级元素，说HTML5解决现实的问题，其本质还是“你都这样写了很多年了吧？现在我们把标准改了，允许你这样写了。

(4)求真务实

　　HTML5中新的语义元素就是遵循求真务实原理的反映。新增的元素不算多，谈不上无限的扩展性，但却不失为一件好事。尽管数量屈指可数，但意义却非同一般。这些新元素涉及头部（header）、脚部（footer）、分区（section）、文章（article）……，相

(5)平稳退化

<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>

　　上面的代码中包含了4个不同的层次。
　　1、如果浏览器支持video元素，也支持H264，没什么好说的，用第一个视频。
　　2、如果浏览器支持video元素，支持Ogg，那么用第二个视频。
　　3、如果浏览器不支持video元素，那么就要试试Flash影片了。
　　4、如果浏览器不支持video元素，也不支持Flash，我还给出了下载链接。