HTML5学习摘录

设计原理

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

发展史：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，我还给出了下载链接。

(6)最终用户优先

一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

　　Drupal社区曾联系马克·博尔顿（Mark Boulton）和丽莎·雷贺特（Leisa Reichilt）设计Drupal的界面。他们计划遵循一些设计原理。为此，他们并没有纸上谈兵，而是经过了一段时间的思考和酝酿，提出指导将来工作的4个设计原理：

简化最常见的任务，让不常见的任务不至于太麻烦。
只为80%设计。
给内容创建者最大的权利。
默认设置智能化。

参考： <http://kb.cnblogs.com/page/79308/>

HTML5到底是什么？

　　一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分，不单单只是HTML部分而已，CSS 3和JavaScript也有许多的创新，让整个网页程序功能更加缤纷。

　　HTML5的技术组成

　　脱机功能

　　HTML5透过JavaScript提供了数种不同的脱机储存功能，相对于传统的Cookie而言有更好的弹性以及架构，并且可以储存更多的内容。

WebStorage: 比 Cookies 更大、更有弹性的的储存
Web SQL Database: 本地端的SQL数据库
Indexed DB: Key-value 的本地数据库
Application Cache: 将部分常用的网页内容cache起来

　　实时通讯

　　以往网站由于HTTP协议以及浏览器的设计，实时的互动性相当的受限，只能使用一些技巧来「仿真」实时的通讯效果，但HTML5提供了完善的实时通讯支持。

WebSocket: 实时的socket联机
Web Workers: 以往 JavaScript 都是 single thread，透过 Worker 可以有多个运算
Notifications: 原生的提示讯息，类似像OS X的Growl提示

　　档案以及硬件支持

　　不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透过拖拉的方式将档案作为邮件附件？这就是这部份HTML5档案的功能中的Dragn Drop和File API。

Dragn Drop: HTML元素的拖拉
File API: 读取用户本机计算机的内容
Geolocation: 地理定位
Device orientation: 手持装置的方向
Speech input: 语音输入

　　语义化

　　语义化的网络是可以让计算机能够更加理解网页的内容，对于像是搜索引擎的优化（SEO）或是推荐系统可以有很大的帮助。

New tags: 新的标签，像是 header、 section等
Application tags: 也是新的标签，像是 meter、 progress
等
Microdata: 加入语义的数据让搜索引擎等网站可以正确显示
Form type: form可以加入的type便多了，包含email和tel等属性，浏览器会协助进行数据格式的验证

　　多媒体

　　Audio、Video的卷标支持以及Canvas的功能应该是大家对于HTML5最熟悉的部份了，也是许多人认为Flash会被取代的主要原因。

Audio video: 影片和音乐的原生播放支持
Canvas: 2D的绘图功能支持
Canvas 3D: 3D的绘图功能支持
SVG: 向量图支援

　　CSS 3

　　CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。

Selector: 更有弹性的选择器
Webfonts: 嵌入式字体
Layout: 多样化的排版选择
Stlying radius gradient shadow: 圆角、渐层、阴影
Border background: 边框的背景支持
Transition: 组件的移动效果
Transform: 组件的变形效果
Animation: 将移动和变形加入动画支持

　　JavaScript

　　在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

DOM API: 更方便的查询DOM组件
History API: 浏览器的上下页内容修改，方便AJAX可以保留浏览记录

　　而对于旧的浏览器兼容性而言，先前撰文介绍过的CSS3 Pie便是一个让旧版浏览器也能支持CSS 3功能的JavaScript函数库。

　　而Modernizer也是一个相当重要的JavaScript函数库，提供开发者轻松的方式判别目前使用者的浏览器是否有支持特定的HTML5功能。

来源： <http://kb.cnblogs.com/page/111338/>