响应式设计中的HTML5

响应式设计的“移动优先”思想使它很适宜采纳最简洁、最有效和最具语义的代码。

本次内容：

1. HTML5的哪些部分我们现在就能用？
2. 如何编写HTML5网页
3. HTML5的精简之道
4. HTML5中的废弃零件
5. HTML5中的全新语义化元素
6. 嵌入媒体
7. 可响应的HTML5 iFrame视频
8. 让网站支持离线使用

HTML5的哪些部分我们现在就能用

虽然完整的HTML5规范尚待批准，但是现代浏览器都不同程度地支持HYML5的大多数新特性，当前HTML标准草案的内容最终未必全部会出现在W3C推荐标准中，但其中有很大一部分新特性现在已经可以用了。

如何编写HTML5网页

打开一个已有的网页。你可能会看到文件开头有这样几行代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

删除上面的代码片段并将其替换成如下代码片段：

<!DOCTYPE html> //文档如此简短，目的是以简洁的方式告诉浏览器用“标准模式渲染页面”。这种简洁高效渲染在html5
<html lang="zh">
<head>
<meta charset=utf-8> //meta是一个单闭合元素所以不需要关闭标签，字符通常都是utf-8

HTML5的精简之道

如果你很注意代码风格，一般都会使用小写字母，将属性值用引号括起来，而且会为脚本或样式文件链接声明type属性。例如，你会使用如下的代码来引入一个样式表：

<link href="CSS/main.css" rel="stylesheet" type="text/css" />

HTML5中不需要这么仔细，这样写它一样乐于接受：

<link href=CSS/main.css rel=stylesheet >

你看了一定感到怪异，我懂我也明白。代码没有闭合标签的斜线（/）,属性值没有用引号括起来，没有type声明。但是，好说话原HTML5不在一这些。第二行示例代码和第一行一样有效。
这种宽松的语法可应用于整个文档，而不仅仅是链接CSS和Javascript文件的元素。例如定义一个如下所示的div:

<div id=wrapper>