HTML5学习笔记

来源：互联网发布：网络里沙发是什么意思编辑：程序博客网时间：2024/06/03 06:35

1、什么是腻子脚本？

腻子脚本（polyfill）这个词由Remy Sharp 提出，意指使用腻子来补平老版
本浏览器的缺陷。因此，腻子脚本具体指的是一段能给老版本浏览器带来
新特性的JavaScript 代码。值得注意的是，腻子脚本会给你的代码里追加
多余的代码。因此，就算你添加3 个腻子脚本可以让Internet Explorer 6 中
网站的渲染效果与其他浏览器一模一样，也并不意味着你一定要这么做！

可以使用腻子脚本来解决浏览器版本不兼容问题

2、媒体查询

3、流式布局

4、Modernizr

5、想找一种编写优秀HTML5 代码的捷径？可以考虑HTML5 样板文件

如果你时间紧迫，但却需要一个好的项目起点，可以考虑使用HTML5

样板文件（http://html5boilerplate.com/）。样板文件是一个预先做好的融

合了“最佳实践”HTML5 文件，包含一些基本样式（如之前提到过的

normalize.css）、polyfill 和一些必要的工具如Modernizr。它还包含一个

自动合并CSS 和JS 文件、自动删除注释以生成生产环境代码的构建工

具。强烈推荐！

6、HTML5全新语义化标签

<section>元素用来定义文档或应用程序中的区域（或节）

<article>元素用来包裹独立的内容片段。

<aside>元素用来表示与页面主内容松散相关的内容。

<hgroup>如果页面中有一组使用<h1>、<h2>、<h3>等标签的标题、标语和副标题，则可以考虑

使用<hgroup>将它们包裹起来。

<address>元素用于明确地标注离其最近的<article>或<body>祖先元素的联系信息。

为避免产生混淆，请记住<address>中一般不放具体的邮政地址，除非相应内容确实需

要联系地址。而邮政地址和其他可能会改变的联系信息应该使用<p>标签来包裹。

7、HTML5 的大纲结构算法

HTML5 允许每个<section>容器有自己独立的大纲结构。这样你就不必总想着现在是几级标题了。

使用<section>的目的不是为了美化样式，而是为了标识一个鲜明独立

的内容块。一个内容块（section）一般都应该带有标题，这恰好符合我们的需求（用于

独立标识）

8、HTML5 的文本级语义元素

<b>元素：没有具体含义，浏览器渲染为加粗效果

<em>元素：强调内容的重点，除非你确实想强调标签中的内容，否则的话可以考虑使用<b>标签或者可以的话使用<i>标签。

<i>元素：着重语气，也可以给文字添加着重效果，浏览器默认渲染为斜体效果

9、遵循WAI-ARIA 实现无障碍站点

application：用来定义用作网页应用的区域。

banner：用来定义一个站点级别（而不是某个特定文档的）的区域。如网站的头部和 logo。

complementary：用来定义一个对页面主要区域进行补充说明的区域。

contentinfo：用来定义与页面主要内容相关的信息区域

form：你猜都能猜到，定义表单！但注意，如果表单用于搜索，则请使用search 来替代。

main：定义页面的主体内容。

navigation：用来定义链向当前文档或相关文档的导航链接。

search：用来定义一个用于搜索的区域。

使用 nav[role="navigation"] {}可以为导航区域设置样式。其它role类似

10、用HTML5 的方法为页面添加视频或音频

添加多媒体的语法和添加图片类似：

视频标签：<video></video>

显示默认的播放控制栏则需要追加controls 属性

autoplay 属性设置自动播放

控制媒体预加载的preload属性

重复播放视频的loop属性

定义视频缩略图的poster（这个属性在视频播放延迟时非常有用）。

Safari 只允许在<video>和<audio>元素中使用MP4/H.264/AAC 媒体文件，而Firefox 和 Opera 则只支持Ogg 和WebM。

解决浏览器兼容问题：

<video width="640" height="480" controls autoplay preload="auto" loop

poster="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>
如果浏览器支持ogv格式，则使用第一个文件，否则它会继续往下解析下一个<source>标签

针对老版本浏览器的备用方案
可以在<source>标签之后添加一个flash支持
<object width="640" height="480" type="application/x-shockwave-flash"
data="myFlashVideo.SWF">

<param name="movie" value="myFlashVideo.swf" />

<param name="flashvars" value="controlbar=over&image=myVideoPoster.

jpg& file=video/myVideo.mp4" />

<img src="myVideoPoster.jpg" width="640" height="480" alt="__TITLE__"title="No video playback capabilities, please download the video below" />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href="myVideo.mp4">"MP4"</a>
Ogg Format: <a href="myVideo.ogv">"Ogg"</a>
</p>

音频标签：<audio></audio>

和<video>标签类似

11、响应式视频

对于HTML5 式嵌入视频，修正方法很简单。只需删除视频标签中的height 和width 属性（如删除width="640" height="480"），然后在CSS 中追加如下代码：

video { max-width: 100%; height: auto; }

向网页中插入短视频：

frameborder="0" allowfullscreen></iframe>

1、首先引入 jQuery 库文件。

2、从网站http://fitvidsjs.com/上下载FitVids 插件（有关该插件的更多信息请见

http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/）。

3、将 FitVids 文件存入一个合理的文件夹（假设文件夹名为“js”），然后在<head>中引入该

文件：

4、只需使用jQuery 指定包含YouTube 视频的特定元素。

5、本例中我将《午夜狂奔》视

频放入了id 为#content 的div 中：
<script>

$(document).ready(function(){

// Target your .container, .wrapper, .post, etc.
$("#content").fitVids();

});

</script>

6、只需这几步。多亏有了FitVid 插件，现在我们有了一个完全可响应的YouTube 视频。

12、离线Web 应用（一种不需要网络连接仍可访问网站内容的途径）

背景：

假设有一个在线笔记应用，当用户的手机网络断开时，他可能正在编辑一则笔记。使用

HTML5 的离线Web 应用，他就可以继续离线编辑笔记，然后等到网络再次连接时将本地

数据发送到服务器。

原理：

离线Web应用的运行机制是每个需要离线使用的网页都指定一个后缀名为.manifest 的

文本文件。这个文本文件罗列了该网页离线使用时所需的所有资源文件（HTML、图片

JavaScript 等等）。支持离线Web 应用的浏览器会自动读取.manifest 文件，下载文件中

所罗列的资源文件，并将其缓存在本地以备网络断开时使用。

实现：

1、在 HTML 的开始标签中，我们指定一个.manifest 文件：

<html lang="en" manifest="/offline.manifest"

该文件的文件名随意，但后缀名建议使用.manifest。

【你必须在每一个准备离线使用的页面的HTML 标签中都追加manifest= "/offline.manifest"属性。】

2、如果使用的是Apache 服务器，你可能还需要修改一下.htaccess 文件，追加一行代码：

AddType text/cache-manifest .manifest

这样就保证了.manifest 文件拥有正确的MIME 类型，即text/cache-manifest。

3、在.htaccess 文件中还可以加入以下代码：

ExpiresActive On

ExpiresDefault "access"

</Files>

添加上面这几行代码，可以阻止浏览器缓存缓存文件。

理解manifest 文件

manifest 文件必须以CACHE MANIFEST 开头。第二行就是一句注释，注明了manifest 文

件的版本号

CACHE:部分罗列了所有离线使用所需的文件。（路径可以使相对和绝对路径）

NETWORK:部分罗列了所有不需要被缓存的文件。如果你想网站内容在网络畅通的情况下及时更新（而不是仅在离线缓存中查找），可以在此处使用*星号被称为在线白名单通配符。

FALLBACK:部分使用/字符定义了一个URL 模板。它的作用是访问每个页面时都会问“缓存

中有这个页面吗？”，如果有则显示缓存页面，如果没有则显示指定的offline.html 文件。

任何指定了离线manifest 文件的页面（就是在标签中追加了manifest="/offline.manifest"的页面）在被用户访问时都会被自动加入到本地缓存。浏览器会缓存用户访问过的每一个网页以确保这些网页在离线状态下仍可访问。简化的manifest 文件如下：

CACHE MANIFEST
# Cache Manifest v1
FALLBACK:
//offline.html
NETWORK:
*

选择使用这个方法时有一点需要注意，这种方法只会下载和缓存用户访问的HTML 页面，

不会缓存页面内引入的图片、JavaScript 或者其他资源文件。

离线Web 应用的故障诊断

0 0