HTML5初探

HTML5

第一章 HTML5中新的结构元素（header/hgroup/nav/footer/article/section/aside）

1.1 HTML5初始文件

头部
1、doctype：
原始：<！DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
html5：
2、字符编码meta部分
原始：<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
html5：<meta charset="utf-8"/>
3、js和css
html4：script 和 link元素需要使用type属性
html5：可以不写type
4、编码风格：
html5：可以全部大写、可以不用引号、可以忽略闭合斜杠、可以混合使用
建议：闭合所有标记，使用小写字母，并使用引号将属性括起来

1.2 这些新元素的来源：页面的结构

20个：
footer、menu、title、small、text、content、header、nav、copyright、button、main、search、msonormal（供显示使用）、date、smalltext、body、style1（供显示使用）、top、white（供显示使用）、link

1.3 主要元素介绍

1、header
可以包含在header元素中的内容：logo、网站名/标题、网站副标题、搜索栏、主导航栏
如：header中包含（标题和日期和作者）、不过HTML5建议将作者信息放在footer元素中。

---

2、hgroup
作用：用来对多个相关联的标题进行分组

---

3、nav
只有“主要导航”才适合放置在nav元素中
屏幕阅读器之类的辅助技术能够搜索并立即使用这些导航组，而不需要等待它们全部加载完毕。？？？

---

4、article
独立的内容块

---

5、section
是一个总是需要标题的内容区域或页面区域
用处：可以用它将多个部分的内容组合在一起，也可以根据需要，将内容的某一部分进一步划分。不可用作通用封装器来实现样式上的需求。
注意：section元素中可以包含article元素，并且article元素也可以将其内容分割为section。
article和section的选择：
section元素的使用方式和div标记的使用方式很相似。不过与div不一样的是，section具有语义含义，它是一组相关内容的组合。
如果你认为这部分内容具有独立的意义，那么就应当使用article标记。
如果section标记仅仅是用来添加样式，则最好使用div

---

6、aside——侧边栏
含义：表示跟周围内容紧密关联的一组内容，比如热门文章列表、博文分类、最近评论。这种内容与主页内容相关，但又与它相独立存在。
注意：如果它放在article中，aside内容必须与article内容紧密关联，比如词汇表。如果放置在article或者section之外，则它的内容应该是与整个页面相关的，如相关连接、网站所有者的微博列表或广告。

---

7、footer
旨在：包含作者、网站所有者、版权数据、网站规章制度等信息。如果它位于article或section中，则包含文章发布的日期、标记、分类和其他元数据
注：当然可以在footer中加入其他内容，比如导航、合作方的logo、许可协议，以及你经常会看到的“This site is powered by <cms name>文本。footer元素也可以包含指向相关文档的连接。

1.4 使用HTML5大纲工具验证结构（大纲测试）——chrome插件HTML5 outline

应用：如果内容安排合理，显示的将是结构整齐、有逻辑的目录。如果看到有“untititled section/article”这通常代表使用了错误的标记。

---

正确的大纲与下面类似
1、网站名
a、博客
i. 文章题目
ii. 文章题目
b、关于我
i. 我的名字
ii. 我喜欢的东西
iii. 我讨厌的东西
c. 联系我

1.5 使用所有新标记建立新闻页面

第二章 组合、文本级和重新定义的语义

组合元素或文本级元素：与页面内容密切相关

2.1 figure figcaption:插入图片和图注

1、figure元素用于插入某张图片并添加描述
当然，figure也用来插入一段代码、图表、音乐或者视频

---

2、figcaption:为图片添加图注
注：无论在哪种情况下都应为图片加上alt属性以防万一。
注：如果单纯是为了显示某张图片（或图表等），那么使用普通的img标记足以。不过，如果它包含了额外的有助于内容描述的信息，那么就应该使用figure和figcaption。
注：figure中只能包含一个figcaption

2.2 time

两个可选属性：
datatime：终端用户浏览的内容在time标记之间，而计算机可以识别datatime值“2011-04-01T16：00Z”。其中时间部分是可选的。
pubdata：布尔属性，代表的是其最近的父article元素内容的发布日期和时间。如没找到任何父article元素，则指向整个文档。
注：每个article元素只能拥有一个带pubdata的time元素。

2.3 details（可伸缩控件）

在其中使用summary元素还可以创建内容的概述信息。
details有一个可选属性：open，若其为真，内容默认为展开样式；反之则为收缩样式。

2.4 address 元素提供通信信息：address元素定义为“分节元素”，与nav或article类似。

错误：它并非显示通用邮寄地址（通常在某个“联系我们”页面中）的通用方式。

---

定义：显示与它最近的article或body元素的通信信息。
含义：它表示你应该使用address元素来显示当前article作者或整个页面的通信信息。意味着，在一个页面中可以多次使用address元素。
内容：address元素的内容可以是电子邮件地址、网址、电话号码、邮寄地址或其他任何通信信息。
注意：由于address元素用于通信信息，所以通常会在footer中使用到address

2.5 mark:元素高亮文本

2.6 s元素显示不准确或不相关的内容

以前，s元素特意用来显示带删除线的文字。在HTML5中，s元素的一重新定义，它现在用来显示不再正确或不相关的内容。
如果文档内容被编辑或删除，请不要使用S元素，而应使用del元素。

2.7 现存元素的变化

2.7.1 cite元素(斜体)

在HTML4中，cite元素允许内容开发人员显示引用内容的作者或发言人；
HTML5中，cite用来显示某个作品（书籍、诗歌）的标题。HTML5 规范推荐使用b元素显示作者名

2.7.2 ol元素

附加三种属性
1、start
2、reversed：布尔
3、type：“1”，”a”，“A”，“i”，“I”

2.7.3 dl元素：一个描述或者关联列表（第二行变小并缩进）

2.7.4 small元素：代表小打印体，如版权信息、条款或许可/法律信息

因为small是内嵌元素，如果有需要，你可以将它嵌入其他元素中。比如嵌入strong，它可以为该小打印体赋予重要性。

2.7.5 b和strong元素（表现样式无异）

b用它来为不带特殊重要性的内容添加样式
strong元素用来标识重要的内容

2.7.6 i和em（表现为斜体）

i ：示例——一个梦境、一个科技术语、一个想法或船名等
em：表示了能改变句子意思的强调。

2.7.7 abbr元素：既可以标识缩写词，也可以表示首字母缩略词。（尝试过程中没有鼠标移上效果）

2.7.8 hr 元素

现在，在段落末尾使用它，比如在书籍中，可用其指示场景的变换。通常，此元素会显示为节与节之间的一条横线或某种特殊图案

2.8 为多个元素添加相同的超链接

以前：为需要点击的元素，每个都加a
现在：将这些元素用a包裹
注意：虽然可以直接将article元素放在a元素中，但是目前将造成一些浏览器的兼容问题。因此，不建议这样使用。

2.9 利用Microdata 添加语义信息

Microdata规范为开发者带来了给某些内容添加标签的功能。
读者可以将Microdata视为某种自定义的元素。你可以使用它为商业、人、产品、事件等添加标签。

---

包含5个属性：
itemid
itemprop：代表这个Microdata项的一个属性，它描述了元素中的内容。
itemref
itemscope:当为某个元素添加itemscope时，该元素便成为了Microdata项。
itemtype
注：虽然Microdata规范正脱颖而出，而当前实际上更加流行采用Microformats

2.10 WAI-ARIA ( ARIA ):是一个旨在提高Web应用和Web页面可访问性的草稿规范。

ARIA允许使开发者与内容开发能够被辅助技术识别和使用的富Internet应用和内容。

ARIA的Landmark Roles（地标角色）部分：
是页面中用作导航地标的区域。50多种角色
role=”article”
role=”banner”
role=”complementary”
role=”contentinfo”
role=”form”
role=”heading”
role=”main”
role=”navigation”
role=”search”

---

使用方法：
<form role="search"></form>:表示该表单用于搜索。
例如：<header role="banner"> 、<nav role="navigation">、<article role="main">、<aside role="complementary"></aside>、<footer role="contentinfo">

---

终有一天辅助技术能够轻松地导航到页面的各个区域，不过目前很少屏幕阅读器支持HTML5，更不用说ARIA于是怒了

2.11 带有评论的文章页面

第三章 应对浏览器的 HTML5 支持

3.1 IE 支持问题

3.1.1 利用 JavaScript解决HTML5兼容问题

• 用JavaScript以编程方式在DOM中创建它们，然后添加相应的样式

<script>
document.createElement('article');
document.createElement('section');
//and so on
</script>

• 用法：该脚本中有条件判断代码，使自身只能在IE中运行。
  

  不过我们可以编写条件注释使其只能在IE8或更旧的版本中运行。脚本必须包含在head标记中，并且处于样式表调用前。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<!--[if it IE 9]>
<script src = ".../html5.js"></script>
<![endif]-->
</head>

3.1.2 使CSS兼容

• 大多数现代浏览器都知道如何在默认情况下处理无样式的元素，而IE则不行。为了使IE兼容，我们需要将新元素设置为display：block

3.2 模板

• 模板：包含许多安排有序的文件或文件夹，可以大大提高构建新项目的速度。
• 模板的真正意义并不在于快速上手、着手于完成项目，而是让我们理解模板的内容，并且在其上添加额外内容或者删除你不需要、不同意的部分。
  

  目前理解应用不深，有时间可以去研究一下库中的html5 boilerplate模板

3.3 HTML 5 特性检查

• 直接检查元素或者API

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>Geolocation Check</title>
<script>
if(navigator.geolacation){
alert('Geolocation is supported.');
}else{
alert("Geolocation is not supported.");
}
</script>
</head>
<body>
</body>
</html>

利用JavaScript API来检测对某个API的支持情况是很常用的方法。相对来说，检查某个HTML5标记元素的方法则更加复杂。最常用的检查HTML5标记元素的方式是建立该标记，然后尝试从此元素中获取默认属性或方法。

<script>
if(document.createElement('canvas').getContext){
alert('Canvas is supported.');
}else{
alert('Canvas is not supported.');
}
</script>

3.4 使用 jquery 替代 calendar 标记

• 支持input[type='date']的浏览器

<form>
<label for='date'>What date do you leave?</label>
<input required type='date' id='date' name='date'/>
<input type='submit' value='submit'/>
</form>

• 考虑不支持的情况

<script>
$(function(){
    function inputSupport(){
        var input = document.createElement("input");
        input.setAttribute("type","date");
        var val = (input.type !== "text");
        delete input;
        return val;
    }
    if(!inputSupport() || ($.browser.webkit)){
        $('input[type=date]').datepicker({
        dateFormat:'yy-mm-dd'
    })
    }
})
</script>

3.5 利用Modernizr检查特性

原文链接：http://caibaojian.com/modernizr-js.html

我同意原文作者的观点：”觉得这种做法明显增加了CSS代码量，而且可能会造成当用户的页面没有启用js的情况下，里面的CSS3效果无法使用，另外就是今后维护比较困难，如果改变了某个样式，那样子CSS的代码类也要改变。个人不推荐使用这种方法来写兼容代码。”
那么问题来了：怎么写兼容代码

• 以前：通过浏览器嗅探技术来针对不同的浏览器写不同的代码（使用javascript里的navigator.userAgent属性来判断用户使用的是什么品牌哪个版本的浏览器。）

• 现在：使用特征检测（feature detection）

  这意味着我们不必通过问浏览器“你是谁？”来做出不靠谱的推测。取而代之，我们问浏览器“你能做这个或那个吗”。这么来检测浏览器的能力是很简便的，但一个个的花时间去手工测试依然令人厌烦。此时Modernizr可以帮助我们。

• 是什么：Modernizr是一个开源的JS库，它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
  Modernizr是基于渐进增强理论来开发的，所以它支持并鼓励开发者一层一层的创建他们的网站。一切从一个应用了Javascript的空闲地基开始，一个接一个的添加增强的应用层。
  -应用：
  1、从该网站 http://modernizr.cn/download/ 选择你想要应用的HTML5和CSS3 特性，生成特定的文件（也可以用别人常用的，库中）；
  2、把它加入<head>中；
  3、接下来，向<html>元素添加“no-js”的类。

  当Modernizr运行的时候，它会把这个“no-js”的类变为“js”来使你知道它已经运行。？？？Modernizr并不仅仅只做这一件事情，它还会为所有它检测过的特性添加class类，如果浏览器不支持某个特性，它就为该特性对应的类名加上“no-”的前缀。）
  Modernizr同时还会创建一个JS对象，被命名为Modernizr，其内容是为每一个检测完的特性给出的布尔值结果组成的列表。如果浏览器支持新的canvas元素，那么Modernizr.canvas的值就是true；如果浏览器不支持这个新元素，那它对应的值就是false。这个JS对象针对某些功能还会包含更为详细的信息，如Modernizr.video.h264会告诉你浏览器是否支持这个特殊的编解码器。Modernizr.inputtypes.search会告诉你当前浏览器是否支持新的search input类型，等等。

3.6 Polyfiling

• 是什么：为各种浏览器提供统一特性支持的代码或库称作polyfill或polyfiller
• 怎么用：
  1、Modernizr提供了载入脚本的方法：Modernizr.load——给予对某个特定特性的检测，然后根据结果动态载入一个polyfill

Modernizr.load({
test: Modernizr.canvas,
yep: 'myCanvas.js',
nope: 'myCanvasPolyfiller.js'
})

• 众多为不同浏览器组件开发polyfill：
  http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

3.7 HTML5验证网站

• 下面的网站列表能够告诉开发者各种浏览器对不同特性的支持情况。
  1、http://findmebyIP.com:提供各种信息
  2、http://caniuse.com:提供一个信息表格，并可以按需进行筛选
  3、http://html5test.com:测试一系列HTML5特性，根据支持情况为浏览器打分
  4、http://html5readiness.com：可视化地显示各种浏览器的状况

第四章 CSS3 新布局和样式技巧

4.1 使用CSS3媒介查询（Media Query）建立响应式设计

发展历程：

• 通过JavaScript来检测目标设备是否为手机设备，然后提供不同的样式或将用户重定向到特定的手机站点。
• 通过JavaScript来检测浏览器窗口大小是否改变，进而改变样式来适应布局。
• 早期的媒体查询功能：设置目标为屏幕还是打印机

<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="print.css" media="print"/>

• CSS媒体查询（一）

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="smartphone.css"/>
<link rel="stylesheet" media="screen and (min-width:480px)" href="screen.css"/>

问题：该方法意味着head标记中会产生很多的HTTP请求。

• CSS文件中包含媒体查询（注意and语法组合不同的查询）

合理使用：

• 在桌面电脑和笔记本电脑上使用媒介查询毫无疑问是很有用的，但是手机屏幕变换层出不穷。而且手机浏览器越来越强大几乎可以解决大多问题。
• 网站检测是否为手持设备，重定向到手机版面（这类网站：内容丰富，含有大量的数据、图片、视频、广告、flash等）
• 你是仅需要额外的样式表还是完全独立的手机版面，这全部取决于你提供的内容。如果只是想改变布局并且添加某些样式，只需使用CSS3媒介查询。

手机

强制命令浏览器将可是宽度作为设备宽度

<meta name="viewport" content="width=device-width; initial-scale=1.0;"">

补充

语法
媒体查询包含媒体类型和媒体属性
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all 。
- 逻辑操作符
（1）and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
（2）not 操作符用来对一条媒体查询的结果进行取反。
（3）only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。（在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。）
（4）若使用了 not 或 only 操作符，必须明确指定一个媒体类型。
（5）你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。
- 媒体属性：

4.2 使用@font-face 进行自定义字体

• 最简单的形式（已经实践.ttf 在chrome 、IE9+、safari有效）

<style>
font-face{
font-family:Anagram;
src:url('anagram.ttf');
}
h1{
font-family:Anagram, Tahoma, Verdana, sans-serif;
font-size: 9em;
}
</style>

• 文件格式和跨浏览器问题
  不同格式字体的浏览器支持：http://blog.163.com/zx_1258/blog/static/133233799201301424414229/
  由于不同浏览器或者设备对不同格式的字体支持不同，所以我们需要为相同的字体提供多种不同格式。
  解决：执行转换字体或者使用诸如Font Squirrel的工具完成（网站打不开了）。

font-face{
font-family:'AnagramRegular';
src:url('type/Anagram-webfont.eot');
src:url('type/Anagram-webfont.eot?iefix') format('embedded-opentype'),
    url('type/Anagram-webfont.woff') format('woff'),
    url('type/Anagram-webfont.ttf') format('truetype'),
    url('type/Anagram-webfont.svg#webfontCiw7vqzS') format('svg');
}

• 字体服务
  免费字体：Font Squirrel/Google Font Directory（可以下载各种字体）

4.3 使用CSS渐变和复合背景创建按钮

http://www.w3cplus.com/content/css3-gradient

渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url() 值的地方采用，比如最常见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止，仅在背景图片中得到最完美的支持。

• 简单CSS线性渐变

div{
height:200px;
width:200px;
background:url(gradient.gif);
background:-moz-linear-gradient(top,white, black);//firefox
background:-webkit-linear-gradient(top,white, black);
background:-linear-gradient(top,white,black);//一般
background:-o-linear-gradient(top,white,black);//opera
background:-ms-linear-gradient(top,white,black);//IE10+
}

在background属性中复合的背景样式需要使用逗号分割

• IE下的渐变

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

• 用途：
  最简单的就是制作背景，我们还可以应用其制作一些漂亮的按钮，还可以用他来制作patterns，我在这里列出几种制作patterns的示例代码吧：
• 示例，tab
  http://people.opera.com/pepelsbey/experiments/apple-menu/

4.4 使用变换和过渡以美化网站

4.5 利用CSS创建动画

（有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)）

http://www.w3cplus.com/content/css3-transform
- 变形：用matrix表示的偏移、旋转
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

1、偏移
transform: matrix(1, 0, 0, 1, 30, 30);
就等同于transform: translate(30px, 30px);
2、缩放
matrix(s, 0, 0, s, 0, 0);
3、旋转(按照角度，顺时针旋转)
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
CS-SC：初三-上床
4、拉伸
matrix(1,tan(θy),tan(θx),1,0,0)
5、镜像对称效果
matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0)

注意的是使用多个属性值时，其之间不能用逗号（“，”）分隔，必须使用空格分隔

---

过渡和动画的区别
前者过渡效果是在两个状态之间发生的变化（如鼠标悬停或鼠标点击），而后者是基于时间轴进行的动画。

• 转换（过渡）：
  定义：css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

语法:

  transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> ||<'transition-delay'>]

执行变换的属性：transition-property,
http://www.css88.com/book/css/properties/transition/transition-property.htm
变换延续的时间：transition-duration,
在延续时间段，变换的速率变化transition-timing-function,
变换延迟时间transition-delay。
- 动画：动画与过渡不同的是，它并不需要鼠标悬停或者鼠标点击等事件触发。

“Keyframes”——关键帧
前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。

---

CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

第五章 HTML5 Web 表单

5.1 验证

HTML5 提供的内置表单验证（form validation）：如required

5.2 HTML 4 输入类型

可以用无序列表（ul）和列表元素（li）来布局该表单

5.3 建立联系人表单：

input的type
email：告知浏览器，该输入域的内容格式应为邮箱地址格式。（不同浏览器验证的格式不一致）
tel：可以接受字符和数字（匹配模式让其仅仅可以输入数字）
url：当前浏览器中任何包含冒号（：）的url都可以验证通过。

5.4 input type=”search”

• 没有任何特殊功能，仅仅用于帮助浏览器理解它是搜索输入域。

• webkit浏览器还额外提供了results属性：输入域左边有放大镜图标，如果存在先前搜索的字段，点击该图标会显示历史搜索条目（测试没发现啊）

• Safari自定义了搜索输入的样式，可以使用-webkit-appearance:none；来重置

5.5 建立日历和时间控件

目前支持度不高，还是用jquery的插件吧
- input type=”datetime”
- input type=”datetime-local”
- inpup type=”date”
- input type=”time”
- input type=”month”
- input type=”week”
两个新属性min和max可以控制和限制控件的日期或时间的选择

5.6 创建数字选择器

input type=”number”
step属性可以更精确的控制数字。

5.7 创建滑块（无需javascript）——如何控制音量？？？

range（IE、火狐、安卓不支持）
我们可以为range控件设置高度和宽度，若高度大于宽度，控件将会竖着放置。否则，默认水平放置

5.8 创建颜色选择器

支持度很差，需要插件
input type=”color”

5.9 使用output元素显示结果

<output onforminput="value=range.value"></output>
IE和安卓不支持

5.10 使用占位文字（placeholder）

默认的灰色占位文字与默认背景颜色并没有足够的对比度，因此可能会带来可访问性方面的问题。webkit和mozilla为我们提供了如下css来覆盖文本颜色
input::-webkit-input-placeholder:{color:red;};
input:-moz-placeholder{color:red;}


5.11 使用list和datalist完成自动补全功能

firefox和opera支持
我们可以从数据库或ajax请求来生成datalist

<input list = "sportlist" type="text" id="sport" name="sport">
<datalist id="sportlist">
<option label="Baseball" value= "Baseball"/>
<option label="Football" value= "Football"/>
<option label="" value= "Baseball"/>
<option label="Baseball" value= "Baseball"/>
</datalist>

5.12 使用progress元素跟踪任务完成程度

两个可选属性：
value:表示任务完成程度百分比
max：某项任务需要达到的完成度。

5.13 使用meter元素进行计量

六个可选属性：
min:允许的最小值
max:允许的最大值
value:实际的当前值
low:低值范围
high:高值范围
optimum:最优值，必须位于min和max之间

5.14 页面载入时跳转到某个form元素

autofocus：建议在如通讯录页面或搜索网站类似的form元素为主的页面上使用它

5.15 允许多个条目

multiple属性允许用户在某个特定域输入多个值：如上传多个文件、发送附件等

5.16 利用required属性进行基本验证

• 可以使用aira-required=“true”，这将提高表单元素的可用性
  关于无障碍阅读wai-aria
  http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

5.17 编写自定义验证规则

pattern属性 + 正则表达式

<input required pattern="(http|https)://([\w-]+\.)+[/[\w- ./?%&=]*)?" type="text" id="url" name="url"/>

5.18 限制用户输入

• step:可用在number、range、time输入类型上。
• min，max：meter、number、range、date、time
• formnovalidate，novalidate：使用这两个属性关闭浏览器验证。这两个属性在希望保存表单当前状态而不是提交表单时非常有用。例如，在网站包含一个很大的表单或者是用户在提交前还需填写其他表单而因此无需关心当前的数据验证时，可以使用这类属性。
  （为表单元素设置novalidate，为单个表单元素设置formnovalidate）为什么？？？
  <form novalidate>

5.19 自定义表单样式（未实践）

input:invalid:required{
}
input:focus:invalid{
}
input:valid{
}

5.20 错误消息

虽然我们无法修改样式，但我们可以使用javascript中的setCustomValidity（）函数修改错误消息文字：

function check(){
var emailInput = document.getElementById('email');
emailInput.setCustomValidity("This is not valid. Please fix it.");
}

综合应用以创建注册表单（实践）

第六章 Canvas 绘图

canvas提供的是基于像素的绘制方式，而非矢量、层系统，所以它能够带来的功能是十分基础。

6.1 Canvas 介绍

canvas的实现包含了两个基础的部分：canvas元素和操作canvas的javascript功能。

注意：在IE8和之前的版本中，你需要一些第三方库，如explorercanvas（http://code.google.com/p/explorercanvas）。如果只需要在IE8中使用，你可以添加如下的条件语句：

<!--[if lte IE8]><script src="excanvas.js"><![endif]-->

6.1.1 初始工作

• 至少需要id、width、height
• </canvas>提供了回滚容器，通过回滚容器，当浏览器无法支持canvas时回滚信息将会显示。
• javascript中进行绘制：通过id获取绘制环境——使用该元素的getContext（）方法获取其二维绘制环境的引用。

var canvas = document.getElementById('mycanvas').getContext('2d');

• 通过getContent方法确认浏览器是否支持canvas绘图。

6.1.2 X和Y坐标

6.2 在canvas上绘制网格

• 创建HTML页面；
• 为canvas对应的id添加样式
• 使用window.addEventlistener为页面载入完成时添加回调函数showGrid，声明canvas和context（绘制环境）变量
• 实现showGrid函数，在canvas上绘制线段、点和文字

默认情况下，文字是左上对齐的（fillText）
因为canvas是基于对像素操作的，所以在该二维世界中的绘制顺序将会影响最终显示出来的效果。例如，如果你在一个纯色背景上绘制标记之前先绘制了标记文字，那么文字会被后面绘制的标记所掩盖。那么，这种情况下就应该先绘制标记，然后在上面绘制文字。

Canvas工具

• Rectangle:在指定位置绘制指定长宽的长方形；
• Line：创建从点A到点B的一条线段。
• Path：使用一条或多条线段甚至曲线创建的一条路径；
• Arc：建立制定角度的弧形，包括建立圆形；
• Curve：建立两种类型的曲线：贝塞尔曲线、二次曲线

6.3 绘制简单的图形和线段

6.3.1 长方形或正方形并设置样式

1、canvas.fillRect(0,0,100,100)：在（0，0）处绘制一个边长为100的正方形
2、clearRect（pos-x,pos-y,width,height）:清空指定的正方形区域像素。
3、strokeRect（pos-x,pos-y,width,height）：可以与lineWidth结合起来绘制长方形边线。

一些效果
- Fill:控制填充参数；
- Stroke：控制绘制图形边线时使用的画笔；
- Gradient：允许用户使用线性或放射状渐变填充；
- Transparency：定义canvas上所有图形的透明度或指定图形填充时的透明度。
- Shadow：提供可应用于单个图形的简便阴影效果；
- Composition：遮罩或裁剪canvas的某个区域，并可以控制canvas上建立图形的整体顺序；

作用于图形上的一些常用效果方法
- strokeSyle：设置图形边线的颜色或样式；
- fillStyle：设置图形内部填充的颜色或样式；
- shadowOffsetX/shadowOffetY:设置阴影偏移距离；
- shadowBlur：设置阴影的模糊度；
- shadowColor：设置阴影颜色；
- createLinearGradient:创建图形线性填充；
- createRadialGradient：创建图形放射状填充。

因为fillRect方法的作用是告诉canvas绘制环境渲染出图形，所以在这之前我们就必须设置好样式。实际上，图形在canvas上是以一个个单独像素点显示的，所以我们没办法在会之后修改该图形。不过，你可以通过重新绘制达到修改的目的。

6.3.2 为图形添加渐变填充

createLinearGradient（startX,startY,endX,endY）：线性渐变
createRadialGradient（startX,startY,startRadius,endX,endY,endRadius）：放射状渐变
addColorStop：

6.3.3 绘制线段或路径

• moveTo（x,y）
• lineTo（x,y）
• stroke（）

---

• beginPath（）
• closePath（）

---

• lineCap：butt、round、square
• lineJoin：bevel、miter、round
  解决线段衔接

6.4 使用路径绘制多边形

• 基本的绘图结构
• 为页面添加变数和半径的输入域，以及触发绘制用的按钮；
• 添加init函数、全局变量和load回调函数，设置对canvas和绘制环境的全局引用；
• 添加drawPolygon函数，完成实际绘制正多边形的代码。

6.5 绘制弧形和圆形

arc（x,y,radius,startAngle,endAngle,antiClockwise（Boolean））；
绘制曲线
quadraticCurveTo（cx,cy，endX,endY）:只有一个控制点
bezierCurveTo（c1X,c1Y,c2X,c2Y,endX,endY）：有两个控制点

6.6 添加文字

• fillText（text,x,y）：将文字渲染为填充后的文字图形
• strokeText（text,x,y）：只会渲染文字的边框

6.7 绘制图片

drawImage（image,dx,dy）
drawImage（image,dx,dy,dw,dh）
drawImage（image,sx,sy,sw,sh,dx,dy,dw,dh）前四个是针对原图的裁剪、后者为裁剪的图片的位置

6.8 裁剪图片

drawImage（image,sx,sy,sw,sh,dx,dy,dw,dh）前四个是针对原图的裁剪、后者为裁剪的图片的位置
用图片进行填充
createPattern方法为某个图形的背景使用图片进行填充。
- 首先，设置好图片，并使用此图片创建pattern变量。
- 然后，使用坐标和大小值绘制图形；
- 接着，使用pattern变量对图形进行填充；

6.9 子图动画——使用简单的三帧图片制作回收标签的动画

• 创建页面，以及相应的canvas的style、body标记和控制动画开始、停止的按钮
• 添加全局变量定义、init函数和window.addEventHandler事件处理函数
• 添加用于绘制裁剪后图片的animateSprite函数
• 添加关联到开始、停止动画按钮的startAnimation和stopAnimation函数
  

  canvas可以模拟层的功能。定义多个相互层叠的canvas元素，元素的z-index样式属性用来控制页面上层的位置关系。我们可以利用这种方法来制作游戏。（游戏上包含一个背景canvas，然后在背景上放置一个小的人物动画canvas。）如果想实现这种多canvas页面，务必注意为每个canvas而保存多个引用所带来的性能问题。？？？

---

**Canvas 变换**（绘制、特效、变换） - rotate（angle） - scale（x，y） - transform - 另外：translate（x，y） - 旋转是以坐标原点为轴心进行的。有两种方法可以使坐标原点恢复到原来的位置： （1）第一种是再次直接使用translate方法，反向移动坐标原点； （2）另一种也是更好的一种方法，是使用save和restore方法 **常用扩展库** netron 、 canvas toolkit 、 EaseIJS 、jCanvasScript 、gury

6.10 为图片添加动画——齿轮（有一点模糊）

6.11 柱形图表动画

• 创建页面和canvas所属的style、body、canvas的id为graph；
• 添加charData JSON对象、initGraph函数和window.addEventListener事件处理函数和相关全局变量；
• 添加initSettings函数，设置图表的柱条数、标题等所有属性。
• 添加drawAxis函数绘制x、y轴，轴标记和标题。
• 添加growBars函数，以完成柱条的动画效果；
• 添加drawBar函数，以完成在canvas上的实际绘制工作

第七章 HTML5 嵌入视频

在很久很久以前，我们嵌入视频，使用的是flash插件或者使用object元素播放quicktime文件

7.1 使用video元素插入视频

<video src="mymovie.mp4"></video>
<video src="mymovie.mp4"/>

7.1.1 浏览器和设备支持

IE9+

7.1.2 HTML5和视频编码（这几部分可能存在过时的问题）

对于HTML5，只有三种主要编码和视频格式供选择（H.264、Ogg Theora 、WebM）
- H.264 ：Android、chrome、iE9+、ios、safari
- Ogg Theora：chrome、firefox 、opera
- WebM：Chrome、firefox、IE9插件、opera

7.1.3 为何我们需要了解编码（关注移动视频）

• H.264（MPEG-4）：存在授权方面的问题
• WebM：目测前景较好
  https://tools.google.com/dlpage/webmmf/（webm for IE）

视频转换格式的软件：firefogg、MicroVideoConverter

7.2 在所有浏览器中使用视频

1、使用多个source元素：解决浏览器和编码问题。（ipad浏览器存在bug，只会载入第一个视频文件，所以将.mp4置于第一位）
    不足：无法解决不支持video的IE6、IE7、IE8
2、为过时浏览器添加回滚内容：
（1）添加文字：<p>一些文字</p>
（2）提供视频直接下载（好主意）：

<a href="video.mp4">Download our movie in MP4 format</a>
<a href="video.webm">Download our movie in MP4 format</a>
<a href="video.ogv">Download our movie in MP4 format</a>

（3）将flash内容作为回滚内容：一是将视频上传到视频托管网站上（如，youtube——通常提供内嵌代码），二是自行托管文件并使用自己的flash播放器（如JW Player）（<script type="text/javascript" src="swfobject.js"></script>）。

???HTML5视频开发中的MIME类型问题