三

#第四章：本地音频
audio元素，src属性指向你的音频文件的位置或针对旧浏览器的备用内容的位置。

<audio src="audio.ogg"></audio>

多种音频编码解码器：.aac、.mp3、.ogg、.wav、.webm
因为浏览器生产商之间还没有达成共识，所以必须在HTML5 audio中编码并包含多个音频文件。

<audio>
	<source src="audio.ogg"/>    //从最愿意使用的源格式，一直列到最不愿使用的源格式     
	<source src="audio.mp3"/>
	Download<a href="audio.ogg">episode 42 of Learning to love HTML5</a>       //当浏览器不支持audio时候 ，显示出的备用内容
</audio>

##audio的属性、事件和方法

1. controls属性：让浏览器为你的音频显示一个默认的控件（布尔类型）
2. preload属性：提示浏览器应该何时开始缓存音频。（直接指定preload:<audio preload>,让浏览器来决定合适的操作，或者可以从3个定义的preload值中进行选择）

• preload=“auto”（与布尔类型的preload相同，建议浏览器应该开始下载该文件，但是，让浏览器决定最终操作。如果在一个移动环境或一个较慢的连接中，则浏览器可能会决定不要预加载，以节省带宽。）
• preload=“metadata”(提示浏览器不应该自己缓存音频，知道用户激活该控件，但是像时长和音轨这样的元数据应该预加载）
• preload=“none” （建议不应该下载音频，直到用户激活该控件)

3. autoplay属性：告诉浏览器页面一旦加载就开始播放音频（尽量不要使用，布尔属性）
4. loop属性：告诉浏览器当向前播放的时候循环播放音频（谨慎使用，布尔属性）
5. canplaytype（type）：返回一个字符串，表明浏览器是否能够播放一种特定类型的媒体。
6. currentTime：以秒表示的当前播放位置
7. duration：以秒表示的音频文件长度。
8. play()：从当前位置开始播放
9. pause()：暂停播放

<script>
	function playAt(seconds){
		var audio=document.getElementsByTagName("audio")[0];
		audio.currentTime=seconds;
		audio.play();

##使用JavaScript生成音频
可以使用Mozila Audio Data API

#第五章：本地视频
video元素，并且添加src属性，它引用视频文件的位置。

<video src="video.ogv"></video>

多种音频编码解码器：.mp4、.ogv、.webm
因为浏览器生产商之间还没有达成共识，所以必须在HTML5 video中编码并包含多个音频文件。

<video>
	<source src="video.mp4"/>    //从最愿意使用的源格式，一直列到最不愿使用的源格式     
	<source src="video.ogv"/>
	Your device does not support HTML5 video.       //当浏览器不支持video时候 ，显示出的备用内容
</video>

##video的属性、事件和方法
###与audio一致的属性、事件和方法

• controls属性
• preload属性
• loop属性
• autoplay属性
  ###video其他属性
• width、height属性：浏览器根据你指定的尺寸来显示视频播放器，而不是根据实际视频的分辨率。（因为过大或过小都会使得视频质量受损，因此，尽可能地对video元素使用与视频文件自身相同的尺寸值。）（如果没有设置尺寸，浏览器会默认地继承视频文件自身的大小，这会导致浏览器不知道该为视频保留多大的空间，并可能在你下载了视频数据之后，必须再重新绘制页面）
• type属性：为视频文件指定MIME类型
• poster属性：在视频播放前提供一个占位符图像

 <video controls width="640" height="360" poster="video_still.png">
	 <source src="video.mp4" type="video/mp4">
	 <source src="video.ogv" type="video/ogv">
</video>

#第六章：微数据和定制数据
HTML5引入了微数据，而不是继续扩展class属性或者red属性。微数据用来标记结构性数据，它引入新的属性，这些属性可以应用于任何元素以识别名/值对。微数据可以用来在Web站点和应用程序之间共享数据，使用data-前缀来创建属性，并且给它们赋值。但是，其自身并不会显示。由于我们根据Web站点或应用程序的需要来定义该属性，这些属性不会用来与其他的站点交换数据，公共的搜索引擎也不会使用它们。
##给标记添加定制数据
给名称定义自己的data-属性

<ul>
	<li data-year="1996" data-color="white" data-engine="VR6"></li>
	<li data-year="1993" data-color="purple" data-engine="VR6"></li>
	<li data-year="2008" data-color="red" data-engine="2.0T"></li>
</ul>

使用Javascript访问定制数据：

• 使用dataset API定制数据
• 使用getAttribute和setAttribute
• 使用jQuery data（）的方法

var car=document.getElementsByTagName("li");
for(var i=0;i<car.length;i++){
	if(car[i].dataset){
		car[i].dataset.color="yellow";      //datasetAPI需要将其换成驼峰大小写的名称（data-foo-bar表示成为dataset.fooBar)
		car[i].dataset.rating="awesome";
	}else{
		car[i].setAttribute("data-color","yellow");
		car[i].setAttribute("data-rating","awesome");  //创建新的微数据

$("li").data("color");             //读取标记中定义的data-color
$("li").data("color","yellow");        //修改颜色数据
$("li").data("rating","awesome");    //添加评论数据

JQuery data()方法成功地获取标记定义的data-color，但是，如果通过datasetAPI访问data-color，或是查看DOM对象，将不会看到其值改编为yellow，也不会知道data-rating属性。尽管jQuery从定制数据属性读取数据，它不会将数据写回到该DOM中；相反，它将数据存储在javascript对象中。当要执行很多数据访问或数据操作的时候，这加快了应用程序的速度。
#第七章：可访问性
Web可访问性是为了去除哪些阻止人们使用Web的障碍。
WCAG2.0概括Web可访问性的4项基本原则—POUR

• 可感知性—可以感觉得到（为图像提供替代性文本、为音频和视频提供字幕）
• 可操作性—确保人们可以使用站点或者与站点交互
• 可理解性—文本是易读的
• 健壮性—页面的标记和编码可以在各种用户代理和辅助性技术中工作。

##在页面中使用ARIA
###使用ARIA Landmark角色

• banner(页面header，只使用这个角色一次）
• complementary（aside元素）
• navigation（nav元素）
• form（除了包含搜索功能的表单）
• search（站点的搜索表单）
• contentinfo（与页面内容相关的信息，只使用这个角色一次）
• application
• main
  …

一个表单配多个标签，一个图片配多个说明文字…：
aria-labelledby、aria-describedby（aria-labelledby和aria-describedby之间的区别在于，标签本来就是要求精炼，而说明可能更宽泛，包括更多细节。）

<form>
	<fieldset>
		<legend>Account Logout</legend>
		<span id="labelAutoLogout">Automatically log out after</span>
		<input id="autoLogout" type="text" vaule="30" aria-labelledby="label-Autologout labelAutoLogoutTime" aria-describedby="autoLogoutDesc">
	<span id="labelAutoLogoutTime">minutes of inactivity</span>
	<p id="autoLogoutDesc">Allows you to customize the timeout period for each of your accounts.</p>
	</fieldset>
</form>

###使用ARIA Live Regions声明
ARIA Live Regions提供了一种标准的方法来警告辅助性技术，DOM已经发生了变化以及如何处理这种变化。
首先，为内容变化或更新的HTML元素，添加aria-live属性，并且确定通知更新的紧迫性。
然后，选择一个标准的live region角色，将这个角色分配给包含了可能变化的内容的父HTML元素。如果角色的默认行为何时，则不需要指定属性。
<div role="alert">
标准的live region角色包括：

• alert
• alertdialog
• log
• marquee
• status
• timer

###定制的live region
给包含了可能变化的内容的父HTML元素分配一个aria-live属性。aria-live属性的值将反映更新会多快地传达给用户。可能的值包括：

• aria-live=“off”,更新不会公布
• aria-live=“polite”，当用户空闲或完成了当前的活动的时候，公布更新。
• aria-live=“assertive”,尽可能快地公布更新，即便这意味着会打断用户的当前任务。 （避免使用）

如果整个live region必须显示才能够让修改有意义，则给HTML元素分配一个置为true的aria-atomic属性。如果想要传达的只是修改的部分，并且修改的部分的含义本身就是很清除的，那么，将值为false的aria-atomic属性分配给HTML元素。
识别更新的类型。酱relevant属性分配给HTML属性。更新的类型是：

• relevant=“additions”， 新的节点添加到DOM
• relevant=“removals”，节点从DOM中删除
• relevant=“text”，已有节点中的文本发生变化（默认行为）

<div aria-live="polite" aria-atomic="false" relevant="additions removals text">

当一个live region中有多个更新需要一起公布时，动态地设置属性状态（aria-busy=“true”)，直到live region中所有更改都已完成更新后再消除它。

##其他细节
###按逻辑组织表单字段（对表单中相关的字段分组）:
添加fieldset元素，并在fieldset中，添加一个legend作为第一个元素。legend表示该组字段的一个标题或题目。
###将表单字段及其标签关联起来：
使用label元素，标签的for属性，必须与表单字段的id属性的值相一致，在每个页面上，这个id值必须是唯一的。

<form>
	<fieldset>
	<legend>Movie Rating</legend>
	<p><input type="radio" name="rating" id="rating1">
	<label for="rating">Excellent</label></p>
	<p><input type="radio" name="rating" id="rating2">
	<label for="rating2">Good</label></p>
	</fieldset>
</form>

2、 <abbr title="xxx xxx xxx">kkk</abbr>向用户表明一个缩写或缩略语