Javascript.DOM编程艺术 读书笔记(第11章）

其余章节链接

• Javascript.DOM编程艺术 读书笔记(1-3章）
• Javascript.DOM编程艺术 读书笔记(第4章）
• Javascript.DOM编程艺术 读书笔记(5-6章）
• Javascript.DOM编程艺术 读书笔记(第7章）
• Javascript.DOM编程艺术 读书笔记(8-9章）
• Javascript.DOM编程艺术 读书笔记(第10章）
• Javascript.DOM编程艺术 读书笔记(第12章）

HTML5

• 结构层中，HTML5添加了新的标记元素，如<section>、<article>、<headed>、<footer>、<canvas>、<audio>和<video>等；还增加了一些新特性，如表单得到了加强，新增了颜色拾取器、数据选择器、滑动条和进度条等；除此之外，很多新元素还带有自己的JavaScript和DOM API
• 行为层中，HTML5规定了DOM中每个新元素的交互方式以及新的API，例如可以自定义<video>元素的控件，改变其播放方式；<form>元素支持进度控制；<canvas>元素可以绘制各种图形和添加图片及其他对象
• 表现层中，CSS3中的多个模块囊括了高级选择器、渐变、变换还有动画
• 新JavaScript API还包括其他很多模块，比如Geolocation、Storage、Drop-and-Drop、Socket以及多线程等
• Modernizr是一个开源的JavaScript库，可以提供HTML5、CSS3的特性检测，可以对HTML5文档进行更好的控制
• 为了保证每个人都能看到视频，必须制作多种格式的视频并在<video>元素中包含多个来源，为了确保HTML5的最大兼容性，至少要包含以下三个版本：基于H.246和ACC的MP4；WebM（VP8+Vorbis）；基于Theora视频和Vorbis音频的Ogg文件：

<video id="movie" preload controls>
	<source src="movie.mp4"/>  <!-- 放在第一位是保证iOS设备能够顺利读取视频 -->
	<source src="movie.webm" type='video/webm;codes="vp8,vorbis"'/>
	<source src="movie.ogv" type='video/ogg;codes="theora,vorbis"'/>
	<!-- 不支持原生视频时的替代内容 -->
	<p>Download movie as
		<a href="movie.mp4">MP4</a>
		<a href="movie.wemb">WebM</a>
		<a href="movie.ogv">Ogg</a>.
	</p>
</video>

• 不管创建什么控件，都切记在<video>元素中添加control属性，<video src="movie.mp4" controls>，想要自定义控件的外观或者添加新的控件，可以通过<video>元素的DOM属性来实现，包括：currentTime，返回当前播放的位置，以秒表示；duration，返回媒体的总时长，以秒表示，对于流媒体返回无穷大；paused，表示媒体是否处于暂停状态。与一些特定媒体相关的事件主要有：play，在媒体播放开始时发生；pause，在媒体暂停时发生；loadeddata。在媒体可以从当前播放位置开始播放时发生；ended，在媒体已播放完成而停止时发生
• HTML5中表单新的输入控件类型包括：email，用于输入电子邮件地址；url，用于输入URL；date，用于输入日期和时间；number，用于输入数值；range，用于生成滑动条；search，用于搜索框；tel，用于输入电话号码；color，用于选择颜色
• HTML5中表单新的属性包括：autocomplete，用于为文本（text）输入框添加一组建议的输入项；autofocus，用于让表单元素自动获得焦点；form，用于对<form>标签外部的表单元素分组；min、max和step，用在范围（range）和数值（number）输入框中；pattern，用于定义宇哥正则表达式，以便验证输入的值；placeholder，用于在文本输入框中显示临时性的提示信息；required，表示必填
• 使用localStorage和sessionStorage在客户端储存大型和复杂数据集的更有效方案
• 使用Websocket与服务器端脚本进行开放的双向通信
• 使用Web Worker在后台执行JavaScript
• 标准化的拖放实现
• 在浏览器中实现地理位置服务