响应式Web设计：使用HTML5和CSS3实践 （10）
|
- UID
- 1066743
|
响应式Web设计：使用HTML5和CSS3实践 （10）
第4章 响应式设计中的HTML5
本章概览式地介绍了一些HTML5相关知识，更多偏向概念和引导性，操作性不强。
大多数网站可以采用HTML5来编写。
polyfill脚本：通常指的是一段能给老版本浏览带来新特性的JavaScript代码。
Modernizr是一个很常用的相对polyfill更加增强了的脚本库。
时间紧迫可以考虑使用HTML5样板文件。里面包含了基本样式normalize.css、polyfill和一些必要的工具如Modernizr。
前端开发工具基本都包含了迅速生成基本文件的功能，这里只稍微对比一下两个lang和charset的含义：lang="en"指的是语言，比如中文、英文；<meta charset="UTF-8">指的是字符集，可用的类型可就多了只对中文这种语言就有很多种字符集可用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML5的标签是可以简略地书写的，并且一些不符合XHTML1.0的写法也不会有任何问题，但我们还是推荐尽可能标准的方式来书写HTML代码，并且尽可能找到一个平衡：类似于<link>的type属性可以省略，但标签要记得闭合并且给属性加上引号。
有一些标签在HTML5中被废弃了，你也许很多都没有用到过，但是记住要尽可能采用CSS的方式来实现效果，而不是之前的在标签上加属性的方式。
HTML5增加了一些全新的语义化元素，为什么语义化很重要，因为在以前的做法中我们通过给div家id和class能够让其他人在阅读代码的时候很好地理解代码，但是对机器而言就不那么简单了。HTMl5旨在用全新的语义化标签来解决这个问题。如下是一些语义化标签的列表（不打算详细记录，那样也没有意义）：
section
nav
article
aside
hgroup
header
footer
address
HTML5的很多容器都有自己独立的大纲结构，这意味着你不用总是去想现在是几级标题，不同父级容器会给不同的标题相应的大小样式，你只需要在容器中任意使用就好。
有一些网页工具可以用来测试生成的网页的大纲结构（个人认为对于排版不佳、长久未读的代码还是有些帮助的）。
可以尝试着把之前自己构建的网页的元素替换成header、nav、footer，然后修改对应的css中的选择器。
HTMl5中的文本语义级元素如b, em, i以前会是用来添加文本样式的并且不推荐为了做样式而使用它们，但是现在通常有了新的语义可以自己查询看，不赘述。
遵循WAI-ARIA是指无障碍网页应用技术，来让残障人士能够访问网页中的动态内容，实现这些技术包含的内容有很多，这里只简单提一下会用到的一些，比如地标角色landmark role（也就是在很多页面中看到的role="navigation/application/banner/form"等）可以让屏幕阅读器在不同的页面区块之间轻松跳转。
Apple公司拒绝在IOS设备上支持Flash的时候极大的促进了HTMl5的发展。
使用HTML5方法为页面添加视频或者音频
因为早起浏览器内置视频格式的争议，目前很多浏览器支持的不同的格式的视频或音频，为了解决这个问题我们可能会为这个视频或音频创建多个版本，并都嵌套在video标签中。
为了给IE8以及更低版本的浏览器提供备用方案，你可能还需要追加一个Flash甚至媒体文件的下载链接。
audio和video的标签用法基本一致。
响应式视频
给视频设置固定宽高，当页面被拉伸的时候，似乎就不怎么响应式了，你可以就本书的例子或者W3C上找一个例子试一试。通过给视频设置max-width: 100%的方法能够解决这个问题（本书前面章节针对图片有提到过这个解决方案）。
离线Web应用
对于一些应用需要在离线状态下能够正常使用。比如一个笔记应用，当用户的手机网络断开时，可能正在编辑一篇笔记，通过使用Web离线功能他就能够继续编辑笔记，等到网络连接上的时候再把内容同步到网络上。
HTML5离线应用的运行机制是：为每个需要离线使用的网页都制定一个.mainfest文件，这个文件罗列了该网页离线使用时所需要的的所有资源文件。支持离线Web应用的浏览器会自动读取.mainfest文件，下载所罗列的资源列表并缓存至本地以备网络断开时使用。 |
|
|
|
|
|
