html5学习笔记1-web开发新时代

学习HTML5的书：

本书涵盖了HTML5+CSS3的所有重要特性。重点介绍了用HTML5+CSS3进行应用开发和布局的方法和技巧。

HTML5被设计为跨平台的技术，只需要一个所有主流操作系统上都有的免费现代浏览器。Apple Safari、Google Chrome、Mozilla Firefox、Opera以及Microsoft Internet Explorer都支持HTML5的许多特性。在iPhone、iPad及Android移动设备上预装的浏览器也都对HTML5提供了极好的支持。

如需要针对不同版本的IE测试示例，可以下载IE Tester Windows版，因为它可同时支持IE6、IE7和IE8。对于非Windows用户，可以考虑使用VirtualBox或者VMware等虚拟机，或者使用CrossBrowserTesting和MogoTest等服务。

第一章 Web开发新时代

从2010年开始，HTML5和CSS3就一直是互联网技术中最受关注的两个话题。

2010年MIX10大会上微软的工程师在介绍IE9时，从前端技术的角度把互联网的发展分为3个阶段：

第一阶段是以Web1.0为主的网络阶段，前端主流技术是HTML和CSS；

第二阶段是Web 2.0的Ajax应用阶段，热门技术是JavaScript/DOM/异步数据请求；

第三阶段是即将迎来的HTML5+CSS3阶段，这两者相辅相成，使互联网又进入了一个崭新的时代。

1.1HTML5概述

1.1.1HTML5新特性

1 兼容性

一旦浏览器不支持HTML5的某项功能，针对该功能的备选行为就会悄悄运行。

2 合理性

HTML5新增加的元素是从现在的用户使用习惯进行跟踪、分析和概括而推出的。比如DIV标签的通用ID名称。

3 效率

用户即上帝

4 安全性

HTML5规范中引入了一种新的基于来源的安全模型。该模型不仅易用，而且各种不同的API都可通用。这个安全模型可以不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。

5 分离

分离表现与内容。实际上，HTML5规范已经不支持老版本HTML的大部分表现功能了。

6 简化

以浏览器原生能力替代复杂的JavaScript代码。

简化的DOCTYPE

简化的字符集声明

简单而强大的HTML5 API

7 通用性

HTML5与WAI（Web可访问性倡议）和ARIA（可访问的富Internet应用）做到了紧密结合，WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中

媒体中立：如果可能的话，HTML5的功能在所有不同的设备和平台上应该都能正常运行。

支持所有语种：如新的 元素支持在东亚页面排版中会用到的Ruby注释

无插件

提供对插件或复杂的hack的原生支持。

插件的坏处：

安装可能失败

可能被禁用或屏蔽（如flash插件）

自身会成为被攻击对象

不容易与HTML文档的其它部分集成，因为存在插件边界、剪裁和透明度问题。

以HTML5的canvas元素为例，以前在HTML4的页面中较难画出对角线，而有了canvas元素就可轻易实现。基于HTML5的各类API的优秀设计，可以轻松地对它们进行组合应用。例如，从video元素中抓取的帧可以显示在canvas中，用户单击canvas即可播放这帧对应的视频文件。

1.1.2 HTML5组织

WHATWG（Web Hypertext Applications Technology Working Group， Web超文本应用技术工作组）

由来自浏览器厂商的人员组成，成立于2004年。开发HTML和Web应用API。

W3C（World Wide Web Consortium，万维网联盟）

发布HTML5规范

IETF（Internet Engineering Task Force，因特网工程任务组）

开发Internet协议。比如，HTML5的新API（WebSocket API）所依赖的WebSocket协议，正由IETF工作组负责开发。

1.1.3 HTML5构成

Canvas Channel Cross-document消息传送 等等

可以访问www.caniuse.com，按浏览器的版本提供了详尽的HTML5的功能支持情况。

通过浏览器访问www.html5test.com，会直接显示用户浏览器对HTML5规范的支持情况。

也可使用Modernizr(进行特性检测，它提供了非常先进的HTML5和CSS3检测功能。

1.2 HTML5设计原理

意大利经济学家帕累托提出“世界上20%的人口拥有80%的财富”。这个比例又暗合了自然界各个领域的幂律分布现象。总之，无论是编写软件，还是别的，都是一样的，即20%的努力可以触及80%的用例，最后20%的用例则需要80%甚至更多的努力。

1.2.1 HTML开发历程

HTML2.0~HTML4.01

XHTML1.0 要求使用XML语法：

所有属性小写，所有元素小写，所有属性值加引号，所有标签有结束标签，对img和br等孤标签，要求使用自结束标签。不少人认同这种严格的编码风格。

2000年，Web标准项目（Web Standards Project）如火如荼。

XHTML1.1，必须把文档标记为XML文档。

IE浏览器不能处理

XML的错误处理模型：如果解析器遇到错误，停止解析。浏览器死掉，用户看不到任何网页内容。而HTML根本没有错误处理模型。

XHTML2不再向后兼容已有的HTML的各个版本，所以浏览器厂商不支持，必须要保证浏览器向后兼容。

XHTML1.1和XHTML2都使用了XML错误处理模型，但这个错误处理模型太苛刻了。

违反了著名的伯斯塔尔法则：发送时要保守，接收时要开放。

开发浏览器的人必须敞开胸怀，接收所有发送给浏览器的东西。

1.2.2 HTML5开发动力

2004年，Opera公司的伊恩.希克森（Ian Hickson）提出了扩展和改进HTML。但未被采纳。

Opera、苹果等浏览器厂商成员脱离W3C，成立了WHATWG，为HTML5将来的命运埋下了伏笔。

2006年，W3C介入HTML5工作。

W3C要制定规范，定格在某个历史时刻；

WHATWG不断开发。

两个工作组同心同德，主要原因是HTML5的设计思想。

1.2.3 HTML5设计理念

HTML5是一个里程碑式的规范，它的设计理念相当于共同行动纲领。

避免不必要的复杂性

例如，doctype。

这个东东是写给验证器看的。要在文档一开头写XHTML1.0的doctype，是为了让验证器按照该doctype来验证我的文档。微软利用这个东东触发标准模型，而不是兼容模型（quiks mode）。

又例如，字符编码，理想的方式是通过服务器在头部信息中发送字符编码，不过也可以在文档穿上级别上指定。

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

同样，如果使用script元素，定义type="text/javascript"，浏览器也可以识别。对Web开发而言，谁还使用其它脚本语言吗？愿意的话，可以添加一个type属性，也可以什么都不写，浏览器自然会假设在使用JavaScript。

支持已有的内容

HTML比较宽容。可以使用lint工具（一种软件质量保证工具，或者说一种更加严格的编译器。它不仅可以像普通编译器那样检查出一般的语法错误，还可以检查出那些虽然完全合乎语法要求，但很可能是潜在的，不易发现的错误）

JS结尾加不加分号都可以，因为JS会自动插入分号。JSlint用来检查JS的语法。

登录htmllint.com，在其中运行HTML5文档，会帮助用户检查大小写，引号等。

解决现实的问题

链接包含的都是块级元素，但现在可以用一个元素包含它们。

求真务实

新增的语义元素，一方面可以把原DIV替换掉，另一方面作为类的替换品，重复使用。

4个新元素：section、article、aside、nav(navigation)，代表了新的内容模型——给内容分区。

div没有语义。section最为通用，article是一种特殊的section，aside和nav也是特殊的section

即便是footer，也不一定非要出现在下面不可。

每个分区都可以有自己的H1~H6，H元素可谓层层嵌套。但是，在编写内容或者内容管理系统的时候，它们又都是完全独立的内容块。

平稳退化

渐进增强的另一面就是平稳退化。使用type属性增强表单。type属性的新值：number、search、range等

浏览器无法理解新type值时，会把这些值解释为text

H5还为输入元素增加了新的属性placeholder（占位符），它表示在文本框中预先放一些文本。占位符就是文本框可以接受的示例内容，一般颜色是灰色的。只要一单击文本框，它就消失了。如果把已经输入的内容全部删除，然后单击文本框外部，它又会出现。

video元素。开始video元素，后备内容，结束video元素。

最终用户优先

1.3 编写第一个HTML5页面

1.3.1 搭建上机练习环境

IE9+可以很好支持HTML5

1.3.2 检测浏览器是否支持

浏览器在加载web页面时会构造一个文本对象模型（DOM），然后通过该对象模型来表示页面中的各个HTML元素，这些元素被表示为不同的DOM对象。全部的DOM对象都共享一些公共或特殊的属性。

1.4 HTML5页面的特征

1.4.1 使用HTML5结构化元素

如果使用一些带有语义性的标记，可以加快浏览器解释页面中元素的速度，如早期的 元素。

1.4.2 使用CSS美化HTML5文档

CSS会默认元素的display属性值为inline，需要将元素的display属性设置为block