概要
总结
HTML5的哪些部分我们现在就能用
所有现代浏览器都能够正常理解常见的HTML5新特性(结构元素、视频/音频标签),对老版本IE我们可以使用腻子脚本来弥补。腻子脚本指的是一段能给老版本浏览器带来新特性的JS代码。
推荐使用Modernizr
- 可以让IE支持HTML5元素
- 基于特性有条件的加载腻子脚本、CSS、其它JS
- 快速创建项目的HTML5样板文件(http://html5boilerplate.com/)
如何编写HTML5网页
- 精简的HTML5,支持大小写混杂,没有引号,没有结束标签的斜线……
- 虽然支持各种“不合理”的写法,但建议考虑代码可读性。
- lang属性用于指定页面元素内容和元素属性值的主语言,完整的语言列表
- a标签可以在标签中嵌套多个元素,不能一个a中嵌套另一个a,不能嵌套表单
- HTML5中的废弃零件/标签,http://dev.w3.org/html5/spec/Overview.html#non-conforming-features
HTML5的全新语义化标签
- section用来定义文档或应用程序中的区域、节
- nav用来定义导航链接的部分
- article用来包裹独立的内容片段(一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。)
- aside用来表示与页面主内容松散相关的内容
- hgroup被包裹的h1h2…元素在大纲模式下只显示第一个标题元素(在线大纲生成)
- header用于网站头部或article元素简要介绍,不计入大纲结构
- footer页脚/尾部信息,不计入大纲结构
- address用于明确标注离其最近的article或body元素的联系信息
HTML5的实际用法
当页面中有article或section元素时header、nav、footer使用次数不限,每个article或section都可以有自己的header、nav、footer。注意元素复用问题,你需要定义不同的样式。
HTML5的文本级语义元素
- b一小段吸引人注意的文本
- em强调内容中的重点
- i一小段有不同语态或语气的文字,标明与普通有所差异的特点文字
- 其它文本级语义标签
遵循WAI-ARIA实现无障碍站点
无障碍网页应用技术(WAI-ARIA)主要是为了方便残障人士无障碍访问网页上的动态内容。
基本使用:在模块中添加地标(即标签中添加role属性)
- application:用来定义用作网页应用的区域
- banner:用来定义一个站点级别(而不是某个文档)的区域。头部或Logo
- complementary:用来定义一个对页面主要区域进行补充说明的区域
- contentinfo:用来定义与页面主要内容相关的信息区域。版权
- form:表单定义
- main:定义页面主体内容
- navigation:定义链向当前文档或相关文档的导航连接
- search:搜索区域
<header role="banner"><!--文档头部-->
<nav role="navigation"><!--主要导航-->
<a href="#">导航一</a>
<a href="#">导航二</a>
<a href="#">导航三</a>
</nav>
</header>
<article role="main">
<p>开始文章正文了。。。。。。</p>
</article>
<footer role="contentinfo">这里是文档底部,版权</footer>
在HTML5中嵌入媒体
这里所说的嵌入媒体并不是添加视频或音频,而是使用HTML5自身的渲染,IE9以上和现代浏览器都支持。
用HMTL5的方法为页面添加视频或音频
视频/音频使用标签video/audio。
提供备用的媒体资源文件:因Ogg格式规范未被正式发布,不同浏览器支持的视频格式也不同,在video标签中添加多个source,让浏览器自行选择支持的格式播放。
针对老版本浏览器备用方案:在 video标签中追加Flash,添加下载视频的链接。
<video width="640" height="480" autoplay loop poster="../images/kingKong.jpg">
<!--兼容不同浏览器支持的格式-->
<source src="../images/余明慧240.mp4" type="video/mp4">
<source src="../images/bug.wmv" type="video/wmv">
<!--支持老版本IE(IE9以下)-->
<object width="640" height="480" type="application/x-shockwave-flash" data="../images/bug.swf">
<param name="movie" value="../images/bug.wmv"/>
<param name="allowfullscreen" value="true"/>
</object>
<!--下载链接-->
<p><b>Download Video:</b></p>
<p><a href="../images/bug.wmv">Bug.wmv</a></p>
播放视频
</video>
响应式视频
将标签中的宽高去掉,设置video默认样式宽为100%、高为auto。iframe中的视频需要使用JS插件处理,FitVids。
video {
max-width: 100%;
height: auto;
}
<video autoplay loop poster="../images/kingKong.jpg">
......
</video>
离线Web应用
离线应用就是允许网页在断网情况下继续使用网页,在重新连接网络时再发送数据请求。HTML5中的实现方式就是给需要离线使用的网页指定一个后缀为.manifest的文件,该文件包含网页离线所需要的所有资源文件。在访问页面时会读取文件,下载所有资源缓存供断网时使用。
离线文件的使用
- 在HTML标签中指定.manifest离线文件
- 文件必须以CACHE MANIFEST开头
- CACHE部分列出所有离线需要的文件
- NETWORK不需要缓存的文件列表
- FALLBACK断网时显示的缓存页面,如果这个页面缓存了的话
- #注释
自动加载到离线缓存:只下载HTML,不缓存引用的图片、JS
添加版本注释:在文件头部添加注释版本号,每次更新文件时版本号也更新。这样用户可以获取最新版本的离线文件
离线Web应用的故障诊断:在谷歌浏览器的控制台中可以看到缓存文件列表的状态,以及错误信息
页面修改内容
<html manifest="offline.manifest">
offline.manifest文件内容
CACHE MANIFEST
#V1 版本号,既可以辨识当前版本又可以防止浏览器缓存当前文件
#要缓存的文件
CACHE:
../images/kingKong.jpg
../images/midnightRun.jpg
#不缓存的文件
NETWORK:
*
#离线时先访问的页面,如果页面缓存了的话
FALLBACK:
//html5.html