HTML5&CSS3笔记：响应式设计中的 HTML5

曾经终败给现在 2022-07-15 14:20 224阅读 0赞

所有现代浏览器都能够正确理解常见的 HTML5 新特性(新的结构元素、视频和音频标签)， 而对老版本的 IE 则可以使用腻子脚本来弥补我所遇到过的所有缺陷。

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

通常，老版本的 Internet Explorer(IE9 以前的版本)并不识别 HTML5 的任何新语义元素。 但是，Sjoerd Visscher 发现如果先使用 JavaScript 创建这些元素，那 Internet Explorer 就能识别这些元素并可为其设置样式。基于这一发现，JavaScript 专家 Remy Sharp 开发了 一 个 轻 量 级 的 增 强 脚 本 ：  
( [http://remysharp.com/2009/01/07/html5-enabling-script/][http_remysharp.com_2009_01_07_html5-enabling-script] )  
在 HTML5 网页中引入该文件后，就能神奇地让老版本 IE 支持新 HTML 元素。长期以来， HTML5 的先驱们都会在页面中嵌入该脚本，以便让使用 IE 6、7 的用户享受和现代浏览器一样的体验。

之后，这个领域上又出现了一个新丁，它能做到比刚才说的更多 的事情。它的名字叫：  
Modernizr([http://www.modernizr.com][http_www.modernizr.com])，如果你正在编写 HTML5 页面，它很值得你去关注。除了能让 IE 支持 HTML5 新元素之外，它还能够基于一系列特性测试来有条件地加载更高级的腻子脚本(polyfill)、CSS 文件以及额外的 JavaScript 文件。

html5:

<!DOCTYPE html>
    <html lang="en"> 
    <head>
    <meta charset=utf-8>

HTML5 中一个真正便利的精简之处，是我们可以在标签中嵌入多个元素。以前，如果你想让代码通过验证，必须将每个元素单独使用标签来包裹。

## HTML5 的全新语义化元素 ##

**section**

*section元素用来定义文档或应用程序中的区域(或节)*。例如，可以用它组织你的个人信息，一个section用于联系信息，另一个用于新闻动态。需要重点理解的是用它的目的不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式，那应该和以前一样继续使用div。

需要谨记的是，使用section的目的不是为了美化样式，而是为了标识一个鲜明独立的内容块。一个内容块(section)一般都应该带有标题，这恰好符合我们的需求(用于独立标识)。

**nav**

nav元素用来定义文档的主导航区域，其中的链接指向其他页面或当前页面的某些区域。因为nav用于主导航区域，所以严格来讲它不是为页脚或其他经常会包含一组链接的区块而设计的(虽然将它用在这些区块里包含链接也没问题)。

**article**

article元素与section元素很容易混淆。在完全理解之前我只得一遍又一遍地阅读它们的标准定义。*article元素用来包裹独立的内容片段*。当搭建一个页面时，想 想你准备放入article标签的内容能否作为一个整块而被复制粘贴到另外一个完全不 同的网站且能保持完整的意义？另一种办法是，想想包裹在article中的内容能否在 RSS 订阅源中独立成为一篇文章?应该使用article标签包裹的内容，最明显的例子就是博客正文。注意，如果出现嵌套的article元素，那内层的article元素内容 应该和外层文章内容直接有关。

**aside**

aside元素用来表示与页面主内容松散相关的内容。在实践中，我经常将其用作侧边栏(当它包含合适的内容时)。另外，引文、广告以及导航元素(如友情链接等)也可以使用它。

**hgroup**

如果页面中有一组使用h1、h2、h3等标签的标题、标语和副标题，则可以考虑使用hgroup将它们包裹起来。这样在 HTML5 的大纲结构算法中就会隐藏次级标题元 素，从而只让hgroup中的第一个标题元素进入文档大纲。

**header**

由于header元素不计入大纲结构，所以不能用它来划分内容结构，而是应该用它来包含对区域内容的介绍说明。实际使用中，header可用作网站头部的“刊头”区域，也可用作对其他内容如article元素的简要介绍。

**footer**

和header一样，footer元素也不计入大纲结构，所以也不能用于划分内容结构。 应该用它来包含其所在区域的辅助信息。例如可以用它包含一组指向其他页面的超链接， 或者用它包含版权信息。和header一样，它也可以视情况在同一个页面上多次出现。 例如博客网站的页脚可以用它，同时博客正文article元素内的文脚也可以用它。不过规范指出，博文作者的联系信息应该使用address元素来包裹。

**address**

address元素用于明确地标注离其最近的article或body祖先元素的联系信息。 为避免产生混淆，请记住address中一般不放具体的邮政地址，除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用p标签来包裹。

## HTML5 的文本级语义元素 ##

除了前面讲过的结构元素，HTML5 还修订了一些被称之为行内元素的标签。HTML5 标 准中称这些标签为文本级语义元素。我们来看几个常用的例子。

**b**

过去，人们通常利用b元素为文本添加样式，但它的实际用途其实是“给文本加粗”。 不过现在你可以正式地将其仅用作样式钩子了，因为现在 HTML5 标准对b的定义是：

......一小段文本，纯粹为了吸引人的注意，除此之外不传达任何重要性，也不暗示其他语态或语气，如文档摘要中的关键词、评论中的产品名称、交互式文本软件中的可操作单词，或者文章的导语。

**em**

在 HTML5 中它的语义是：

......强调内容中的重点。

因此，除非你确实想强调标签中的内容，否则的话可以考虑使用b标签或者可以的话使用i标签。

**i**

HTML5 标准中对i的描述如下：

......一小段有不同语态或语气的文字，或者是样子上与普通文章有所差异以便标明不同特点的文字。

简单地说，它不仅仅是用来给某些文字加斜体效果的。

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

WAI-ARIA 是 Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，指无障碍网页应用技术，它主要解决一个问题，让残障人士能无障碍地访问网页上的动态内容。

这种技术提供了一种描述自定义组件(网页应用中的动态片段)的角色、状态和属性的方法，这样这些组件就可以被依赖辅助技术的用户找到并加以利用。

如果你接了一个为客户制作网站的任务，除了基本要求之外通常不会给你专门的时间/经费来增加无障碍支持(悲剧的是，无障碍性经常被完全抛诸脑后)。但我们还是可以使用无障碍网页应用技术中的地标角色(landmark role)来修正 HTML 语义元素的一些明显的不足，从而使支持无障碍网页应用技术的屏幕阅读器可以在不同的页面区块之间轻松跳转。

**ARIA 的地标角色**

在响应式网页设计中实现 ARIA 的地标角色，跟响应式设计没有什么关系。可是，在某种程度上支持它一下又非常简单(而且不必作任何修改就保证通过 HTML5 验证)。

新的 HTML5 导航区域结构如下：

<nav> 
        <ul>
            <li><a href="#">Why?</a></li>
            <li><a href="#">Synopsis</a></li>
            <li><a href="#">Stills/Photos</a></li>
            <li><a href="#">Videos/clips</a></li>
            <li><a href="#">Quotes</a></li>
            <li><a href="#">Quiz</a></li>
        </ul> 
    </nav>

我们可以让导航区域在支持无障碍网页应用技术的屏幕阅读器上轻松地定位，只需为其追加一个地标角色属性 role 即可，如下面的代码片段所示：

<nav role="navigation">
        <ul>
            <li><a href="#">Why?</a></li>
            <li><a href="#">Synopsis</a></li>
            <li><a href="#">Stills/Photos</a></li>
            <li><a href="#">Videos/clips</a></li>
            <li><a href="#">Quotes</a></li>
            <li><a href="#">Quiz</a></li>
        </ul> 
    </nav>

够简单吧？针对文档结构的各部分分别有如下的地标角色。

application:用来定义用作网页应用的区域。
    banner:用来定义一个站点级别(而不是某个特定文档的)的区域。如网站的头部和logo。
    complementary:用来定义一个对页面主要区域进行补充说明的区域。
    contentinfo:用来定义与页面主要内容相关的信息区域。例如页脚的网站版权信息区域。
    form:你猜都能猜到，定义表单!但注意，如果表单用于搜索，则请使用 search 来替代。
    main:定义页面的主体内容。
    navigation:用来定义链向当前文档或相关文档的导航链接。  
    search:用来定义一个用于搜索的区域。

无障碍网页应用技术并非只有地标角色。想要做进阶应用，请参阅完整的角色列表及其简要使用说明：[http://www.w3.org/TR/wai-aria/roles\#role\_definitions][http_www.w3.org_TR_wai-aria_roles_role_definitions]。

## 在 HTML5 中嵌入媒体 ##

IE8 及更低版本都不支持 HTML5 视频和音频。不过给微软的“先天不足”的浏览器提供备用解决方案也很简单，稍后我们会讨论这个问题。其他现代浏览器 (Firefox 3.5+、Chrome 4+、 Safari 4、 Opera 10.5+、Internet Explorer 9+、 iOS 3.2+、Opera 6、Mobile 11+、Android 2.3+)都没问题。

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

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

在 HTML5 中只需要一个`<video></video>`标签(音频使用`<audio></audio>`标签)就能搞定。

还可以在开始标签和结束标签之间插入文字用以告知那些使用不兼容 HTML5 浏览器的用户，此外还支持你一般都会追加的附加属性如 height 和 width。我们把这些都加上：

<video src="video/myVideo.mp4" width="640" height="480">What, do you mean you don't
    understand HTML5?</video>

现在将上面这段代码插入我们的网页然后在 Safari 中查看，视频就会出现但没有播放控制栏。想要显示默认的播放控制栏则需要追加 controls 属性。我们还可以追加 autoplay 属性(不建议——因为大家都讨厌自动播放的视频，这是常识)。

其余的属性还包括用来控制媒体预加载的 preload(HTML5 的早期尝鲜者应该注意 preload 替代了原先的 autobuffer)，用来重复播放视频的 loop，以及用来定义视频缩略图的 poster(这个属性在视频播放延迟时非常有用)。要使用某个属性，将其追加到标签中即可。下面的例子包含了刚才提到的所有属性：

<video src="video/myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">What, do you mean you don't understand HTML5?</video>

**提供备用的媒体源文件**

最初的 HTML5 规范呼吁所有浏览器内置支持使用 Ogg 格式直接播放视频或音频(无需插件)。但是由于 HTML5 工作组的内部争议，曾经作为基线标准的支持 Ogg(包括 Theora video 和 Vorbis audio)的主张在最近更新的 HTML5 规范中被放弃。

因此目前的情况是， 一些浏览器支持某一套视频和音频文件格式，而另一些浏览器则支持其他格式。例如 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>

如果浏览器支持 Ogg 格式，则使用第一个文件；否则它会继续往下解析下一个`<source>`标签。

**针对老版本浏览器的备用方案**

照这种方式使用source标签，我们就能根据需要提供一系列备用方案。例如在提供了 MP4 和 Ogg 格式之后，如果我们还想给 IE8 及更低版本提供一个优雅的备用方案，则可以追加一个 Flash。更进一步，如果用户的浏览器没有任何合适的媒体播放技术，我们还可以为其提供媒体文件的下载链接：

<video width="640" height="480" controls autoplay preload="auto" loop poster= "myVideoPoster.jpg">
        <source src="video/myVideo.mp4" type="video/mp4">
        <source src="video/myVideo.ogv" type="video/ogg">
        <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>
    </video>

## 响应式视频 ##

对于 HTML5 式嵌入视频，修正方法很简单。只需删除视频标签中的 height 和 width 属性(如删除 width=”640” height=”480”)，然后在 CSS 中追加如下代码 `video { max-width: 100%; height: auto; }`

这种方法对本页面中的视频文件很有用，但它不能解决使用 iframe 嵌入的视频的响应问题。很有多方法可以解决这个问题，一个简单的办法是使用一个名为 FitVids 的 jQuery 小插件。（网址：[http://fitvidsjs.com/][http_fitvidsjs.com]）

## 离线 Web 应用 ##

肯定会有越来越多的移动设备用户访问网站，为他们提供一种不需要网络连接仍可访问网站内容的途径如何？HTML5 的离线 Web 应用特性将其变成了可能。

假设有一个在线笔记应用，当用户的手机网络断开时，他可能正在编辑一则笔记。使用 HTML5 的离线 Web 应用，他就可以继续离线编辑笔记，然后等到网络再次连接时将本地数据发送到服务器。

HTML5 离线 Web 应用的最美妙之处在于它的设置和使用都超级简单。

**离线 Web 应用概述**

离线 Web 应用的运行机制是每个需要离线使用的网页都指定一个后缀名为.manifest 的文本文件。这个文本文件罗列了该网页离线使用时所需的所有资源文件(HTML、图片 JavaScript 等等)。支持离线 Web 应用的浏览器会自动读取.manifest 文件，下载文件中所罗列的资源文件，并将其缓存在本地以备网络断开时使用。

**让网页可离线使用**

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

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

该文件的文件名随意，但后缀名建议使用.manifest。同时，你必须在每一个准备离线使用的页面的 HTML 标签中都追加 manifest= “/offline.manifest”属性。

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

AddType text/cache-manifest .manifest

这样就保证了.manifest 文件拥有正确的 MIME 类型，即 text/cache-manifest。  
在.htaccess 文件中还可以加入以下代码：

<Files offline.manifest>
      ExpiresActive On
      ExpiresDefault "access"
    </Files>

添加上面这几行代码，可以阻止浏览器缓存缓存文件。因为 offline.manifest 是一个静态文件，浏览器默认就会缓存 offline.manifest 文件。所以上面这几行代码 就是让服务器告诉浏览器不要这么干。

现在我们需要给 offline.manifest 填充内容。即通知浏览器那些文件是用作离线存储的。

例如：

CACHE MANIFEST
    #v1
    
    CACHE:
    basic_page_layout_ch4.html
    css/main.css
    img/atwiNavBg.png
    img/kingHong.jpg
    img/midnightRun.jpg
    img/moulinRouge.jpg
    img/oscar.png
    img/wyattEarp.jpg
    img/buntingSlice3Invert.png
    img/buntingSlice3.png
    
    NETWORK: 
    *
    
    FALLBACK:
    //offline.html

**理解 manifest 文件**

manifest 文件必须以 CACHE MANIFEST 开头。第二行就是一句注释，注明了 manifest 文件的版本号。这句注释的用途稍后详细介绍。

CACHE:部分罗列了所有离线使用所需的文件。这些文件的路径都是相对 offline.manifest 而言的，所以文件路径可能需要根据情况稍作修改。使用绝对路径也是可以的。

NETWORK:部分罗列了所有不需要被缓存的文件。你可以将其看成是一个“在线白名单”。 此处罗列的文件在网络畅通的情况下都会直接跳过缓存。如果你想网站内容在网络畅通的情况下及时更新(而不是仅在离线缓存中查找)，可以在此处使用\*。星号被称为在线白名单通配符。

FALLBACK:部分使用/字符定义了一个 URL 模板。它的作用是访问每个页面时都会问“缓存中有这个页面吗?”，如果有则显示缓存页面，如果没有则显示指定的 offline.html 文件。

**页面被自动加载到离线缓存**

根据实际情况，还有一种更简单的办法来设置 offline.manifest 文件。任何指定了离线 manifest 文件的页面(就是在标签中追加了 manifest=”/offline.manifest”的页面)在被用户访问时都会被自动加入到本地缓存。浏览器会缓存用户访问过的每一个网页以确保这些网页在离线状态下仍可访问。简化的 manifest 文件如下:

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

选择使用这个方法时有一点需要注意，这种方法只会下载和缓存用户访问的 HTML 页面， 不会缓存页面内引入的图片、JavaScript 或者其他资源文件。如果这些资源文件是必需的， 那么请按照上节中的方法在 CACHE:部分专门声明这类文件。

**版本注释的用途**

对网站内容或任何资源文件做了修改之后，你必须得对 offline.manifest 文件也做点修改并将其重新上传服务器。这样就能让服务器为浏览器提供新版本文件，而浏览器则会下载该新版本文件并再次触发离线存储进程。

更详细的说明：如果开发者对网站内容或资源做了修改，那么也得通知浏览器更新缓存文 件，否则浏览器仍然会使用之前已有的缓存文件。而通知浏览器更新缓存文件的方式通常是更新 manifest 文件， 浏览器如果发现 manifest 文件发生了变化，就会更新缓存文件。大多数情况下 manifest 中的缓存文件清单不会发生变化，那我们就通过修改注释的方式来改变 manifest 文件，注释中的版本号，既能触发文件变化，又能指明当前版本，一举两得。其实注释中还可以加入更新时间等更详细信息，有助于维护。

**离线 Web 应用的故障诊断**

当网站在离线状态下出现问题导致无法正常运行时，可以使用 Chrome 来做故障诊 断。Chrome 内置的开发人员工具有一个非常好用的 Console 控制台(点击地址栏右侧的扳手图标，然后找到工具 | 开发者工具，之后切换到 Console 面板;或者直接按 F12)， 从中可以看出哪些文件缓存成功，那些缓存失败，以及你做错了什么。通常是文件路径出现问题，例如缓存页面相对于 manifest 文件的路径不正确。

离线 Web 应用的完整规范，请见如下网址: [http://dev.w3.org/html5/spec/Overview.html\#offline][http_dev.w3.org_html5_spec_Overview.html_offline]

[http_remysharp.com_2009_01_07_html5-enabling-script]: http://remysharp.com/2009/01/07/html5-enabling-script/
[http_www.modernizr.com]: http://www.modernizr.com
[http_www.w3.org_TR_wai-aria_roles_role_definitions]: http://www.w3.org/TR/wai-aria/roles#role_definitions
[http_fitvidsjs.com]: http://fitvidsjs.com/
[http_dev.w3.org_html5_spec_Overview.html_offline]: http://dev.w3.org/html5/spec/Overview.html#offline