您的位置：首页 > Web前端 > HTML5

《响应式Web设计-HTML5和CSS3实战》阅读笔记第四章

2017-03-25 15:44 267 查看

概要

总结

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 html5 响应式web设计

相关文章推荐

新的分享

章节导航