好像上周11.12看的，这周补笔记+巩固
2017.11.18 六 23:20
人民邮电出版社出版发行
著 [英] Ben Frain
译 王永强
2013年 1 月北京第 1 次印刷
9章246页
## 前言
第 1章，HTML5、CSS3及响应式设计入门，定义了什么是响应式网页设计，展示了一些响应式设计的网站示例，重点强调了使用 HTML5和 CSS3的优势。
第 2 章，媒体查询：支持不同的视口，讲解了什么是媒体查询，如何实现媒体查询，以及如何针对设备能力匹配 CSS样式，将其应用于任意设计。
第 3 章，拥抱流式布局，讲解了流式布局的优点，以及如何将一个现有的固定宽度设计轻松地转换为流式布局，怎样使用 CSS框架快速搭建响应式网页。
第 4章，响应式设计中的 HTML5，探讨了使用 HTML5技术的诸多好处，比如更简洁的代码、语义化标签、离线存储，以及无障碍网页应用辅助技术。
第 5 章，CSS3：选择器、字体和颜色模式，展示了 CSS3 选择器的强大威力，可以让你轻松地指定和改变任何元素。 还讲解了通过@font-face声明来使用漂亮的网络字体， 另外讲解了新的 CSS3颜色模式如 RGB(A)和 HSL(A)。
第 6章，用 CSS3创造令人惊艳的美，展示了如何使用纯粹的 CSS3代码实现文字阴影、盒阴影和渐变效果。还涵盖了如何使用多重背景图片，以及如何通过字体文件创建图标。
第 7章，CSS3的过渡、变形和动画，讲解如何仅使用 CSS3来创建和转换屏幕上的元素，并制作动画效果。
第 8章，用 HTML5和 CSS3征服表单，阐述了在所有设备上（从最新的智能手机到桌面版浏览器）都能良好运行的跨浏览器表单开发技巧。
第 9章，解决跨浏览器问题，讲解了如何保证老版本的 Internet Explorer可响应，如何将一组链接修改成移动设备上的一个菜单，如何为高分辨率显示器提供不同内容，以及如何使用 Modernizr框架分条件地加载资源文件。
## 第 1章 HTML5、CSS3及响应式设计入门
1. 支持小屏幕设备的重要性、什么是移动网站设计
2. 什么是响应式网页设计
3. 优秀响应式网页实例赏析
4. 视口和屏幕的区别
5. 安装和使用修改视口的浏览器扩展程序
6. 使用 HTML5编写更简洁的标记
7. 使用 CSS3解决常见的设计问题
### 1.1 为什么智能手机很重要（而老版的 IE 不再重要）
### 1.2 响应式设计一定是最佳选择吗
### 1.3 响应式网页设计的定义
响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑·马科特（Ethan
Marcotte）提出。他在 A List Apart发表了一篇开创性的文章，将三种已有的开发技巧（弹
性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个
术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、
自适应布局、跨设备设计以及弹性设计。
上面仅列举了其中一部分！不过，正如马科特等人所说， 真正的响应式设计方法不仅仅只是根据视口大小改变网页布局。相反，它是要从整体上颠覆我们当前设计网页的方法。
以往我们先是针对桌面电脑进行固定宽度设计，然后将其缩小并针对小屏幕进行内容重排；现在我们应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕的设计和内容 。
### 1.5 响应式网页设计示例
#### 1.5.1 下载视口调试工具
1. Internet Explorer用户请下载安装 Microsoft Internet Explorer Developer Toolbar，下载地址
如下：http://www.microsoft.com/download/en/details.aspx?id=18359
2. 如果你在使用 Safari，虽然 ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/
ResizeMe.html）的功能类似且免费，但我最爱 Resize（http://resizeSafari.com）
3. Firefox 用户请下载 Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/）
4. Chrome 请下载 Windows Resizer（https://chrome.google.com/webstore/detail/kkelicaakdan
hinjdeammmilcgefonfh）
不喜欢使用浏览器扩展？还有一个方法：我写了个简单 HTML页面来显示浏览器窗口的当前视口高度和宽度。 页面用了 jQuery框架， 获取当前的视口的高度和宽度并显示出来。你可以在浏览器新标签页中打开这个页面，调整窗口大小，然后切回你要测试的页面查看
效果。这个超级简单的“What size is my viewport page?”页面地址如下：http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/
### 1.6 为什么 HTML5 很优秀
#### 1.6.1 省时省力
1. 我写页面的时候从来不会手工敲出文档类型声明
2. type 属性不再是必需的。链接 CSS文件与此类似(单双引号也可以省)
（但 HTML5 并 不介意，这 样的代码照 样能够通过 W3C 的 HTML5 验证 工 具（http://validator.w3.org/）的验证。）
#### 1.6.2 新增了语义化标签元素
假如看到一个结束标签，你会立即明白哪个标签结束了，不用注释。
####
####
### 1.7 CSS3 为响应式设计和更多创新奠定了基础
> CSS3是在 CSS 2基础上按模块构建的，以 CSS 2.1标准为核心。每个模块都会增加功能或是替换 CSS 2.1 标准中已有章节。CSS 工作组的设想是新的 CSS 模块不会与 CSS 2.1标准冲突，这些模块只会追加新功能，改进已有规定。
#### 1.7.1 底线：CSS3 不破坏任何东西
#### 1.7.2 CSS3 如何解决日常设计问题
界面元素创建圆角效果:滑动门技术 （http://www.alistapart.com/articles/slidingdoors/）来实现，即将一张背景图片放在另一张后面。
不再需要渐变背景图片
### 1.8 看呐，不用图片
“渐进增强”
#### CSS3 还带来了什么
### 1.9 HTML5 和 CSS3 现在就能用吗
以我的经验，一开始通常会问自己以下问题:
### 1.10 响应式网页设计不是灵丹妙药
### 1.11 引导客户：网站不必在所有浏览器中表现一致
### 1.12 小结
## 第 2 章 媒体查询：支持不同的视口
1. 理解为什么响应式设计需要媒体查询
1. 如何构造 CSS3媒体查询
1. 我们能够检测哪些设备特性
1. 编写第一个 CSS3媒体查询
1. 为特定视口设定 CSS样式
1. 如何在 iOS和 Android设备上使用媒体查询
### 2.1 现在就能使用媒体查询
> W3C对规范有一套完整的审批流程（如果你有空， 可以去看看该流程的官方说明，地址：http://www.w3.org/2005/10/Process-20051014/tr） ，从工作 草 案 （ Working Draft ， WD ） ， 到 候 选 推 荐 标 准 （ Candidate Recommendation ， CR ）， 再 到 提 议 推 荐 标 准 （ Proposed Recommendation，PR） ，几年之后，才能成为 W3C 推荐标准（REC） 。
>
> 所以那些相对成熟的模块使用起来比较安全。比如，
### 2.2 为什么响应式设计需要媒体查询
#### 2.2.1 媒体查询语法
@media screen and (max-width: 550px) { }
@import url(“phone.css”) screen and (max-width:360px);
切记，使用 CSS 的@import 方式会增加 HTTP 请求（这会影响加载速度） ，所以请谨慎使用该方法。
#### 2.2.2 媒体查询能检测那些特性
1. width：视口宽度。
1. device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度） 。
1. orientation：检查设备处于横向还是纵向。
1. aspect-ratio：基于视口宽度和高度的宽高比。一个 16∶9 比例的显示屏可以这样定义 aspect-ratio: 16/9。
1. device-aspect-ratio：和 aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。
1. color：每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16位颜色。
1. color-index：设备的颜色索引表中的颜色数。值必须是非负整数。
1. monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。
1. resolution：用来检测屏幕或打印机的分辨率，如 min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm。
1. scan：电视机的扫描方式，值可设为 progressive（逐行扫描）或 interlace（隔行扫描） 。 如 720p HD电视 （720p的 p即表明是逐行扫描） 匹配 scan: progressive，而 1080i HD 电视（1080i中的 i表明是隔行扫描）匹配 scan: interlace。
1. grid：用来检测输出设备是网格设备还是位图设备。
#### 2.2.3 用媒体查询改造我们的设计
层叠
#### 2.2.4 加载媒体查询的最佳方法
因此，将不同媒体查询的样式保存到独立的文件中没有太大好处（个人喜好或为便于组织代码除外） 。使用多个独立的文件会增加用于页面渲染的 HTTP请求数量，从而导致页面加载变慢。
Respond.js（https://github.com/scottjehl/Respond）是为 Internet Explorer 8及更低版本增加媒体查询支持的最快的JavaScript工具，但它目前无法解析 CSS的@import 命令。因此，
建议在已有的样式表中追加媒体查询样式。使用如下语法即可在已有样式表中加入媒体查询：
@media screen and (max-width: 768px) {/样式/}
### 2.3 我们的第一个响应式设计
http://www.andthewinnerisnt.com/
#### 2.3.1 我们的设计是固定宽度的，不要惊讶
> 我在 HTML 4页面中使用的重置样式，是在 Eric Meyer 的原版http://meyerweb.com/eric/tools/css/reset/）基础上加上了我的一些个人偏好及技巧，这些技巧是我从另外一些天才如 Dan Cederholm （http://simplebits.com）的代码里学来的
>
> 我 觉 得 针 对 HTML5 文 档 有 更 好 的 选 择 ， 如normalize.css（http://necolas.github.com/normalize.css/） ，第 4章会详细介绍。
#### 2.3.2 响应式设计中要保证图片尽可能精简
不过，所有这些问题都可以使用 HTML5 和 CSS3 来解决。使用 HTML5
和 CSS3，而不再是简单插入图片（如我们以前做过的那样） ，会使网站与我们的响应式目标步调一致。 时刻谨记，我们要保证代码和数据都尽可能精简，以便为带宽有限的用户提供愉悦的体验。
#### 2.3.3 小视口下的内容剪切
### 2.4 阻止移动浏览器自动调整页面大小
iOS 和 Android 浏览器都基于 WebKit（http://www.webkit.org/）核心。这两种浏览器以及很多其他浏览器（如 Opera Mobile） ，都支持用 viewport meta元素覆盖默认的画布缩放设置。只需要在 HTML的标签中插入一个标签。标签中可以设置
>安装 iOS 模拟器和 Android 模拟器
虽然真机测试无可替代， 但还是可以使用Android和iOS模拟器。 Windows、Linux和 Mac版的 Android模拟器都可以免费下载， Android软件开发工具包（SDK）也可以免费安装。下载地址是 http://developer.android.com/sdk/。 不过得使用命令行安装，需要你有一颗勇敢的心①。iOS 模拟器是 Xcode开发包（在 Mac App Store中免费下载）的一部分，只能在 Mac OS X上使用。一旦安装了 Xcode，你就可以在这个路径下找到模拟器：~/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications iOS Simulator.app
### 2.5 针对不同视口宽度修正设计
### 2.6 响应式设计中内容始终优先
这样无疑是坚决贯彻“内容优先”原则的合理做法
### 2.7 媒体查询只是必要条件之一
#### 我们需要流动布局
换句话说，它不能适应未来的变化。目前的情形是，页面捕捉到媒体查询设置的断点，然后布局发生变化。但在捕捉到下一个视口断点之前，页面静止不变。
我们需要比这更好的策略。针对各种视口的排列组合编写对应的 CSS 样式，无法兼容未来可能出现的设备；而一个完美的设计，往往能在一定程度上适应未来的发展。
在这点上我们目前的解决方案尚不完备。目前的效果更像是一个自适应设计，而不是我们想要的真正的响应式设计。我们的设计应该在突变之前保持灵动。要做到这点，需要将呆板的固定布局修改成灵活的流动布局。
### 2.8 小结
## 第 3 章 拥抱流式布局
1. 理解为什么响应式设计需要百分比布局
1. 将元素的固定像素宽度转换为百分比宽度
1. 将文字的固定像素大小转换为等量的相对尺寸
1. 理解如何找到任意元素的上下文
1. 学习如何使图片平滑缩放
1. 学习如何为不同的大小的屏幕提供不同的图片
1. 学习如何让媒体查询与弹性图片及流式布局协同工作
1. 使用 CSS网格系统从头创建一个响应式布局
### 3.1 固定布局经不起未来考验
因为每次有新东西出来，只要用户要求修改网站，就可以借机收一次费。但是，这种方法不是一种完全兼容未来的网页制作方法。未来，还会出现更多
大小不一的视口，我们需要一些适应未知设备的方法。
### 3.2 为什么响应式设计需要百分比布局
> 百分比布局和媒体查询和谐共处
> 事实上，这种网页设计新方法做到了两全其美：使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应
式设计的核心，基于此可以创造出真正完美的设计。
### 3.3 将网页从固定布局修改为百分比布局
#### 3.3.1 需要牢记的公式
#### 3.3.2 设置百分比元素的上下文
> 这些数字能四舍五入吗？
一些响应式设计技术的批评者（如这篇文章：http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/）认为在样式表中输入诸如.550724638 这样的数字很愚蠢。你可能也会疑惑，为什么不将这些小数四舍五入？但支持者们认为，这样做可以提供更加精确的结果。为浏览器提供更加精确的结果可以使其显示效果更加精准。
顺便说一下，学过数学的人都应该知道黄金分割率（http://en.wikipedia.org/wiki/Golden_ratio） 。黄金分割率是一个很早就被发现且广泛应用于各学科的数学比例，其比值大约为 1:1.61803398874989（如果你想知道保留 10000位小数的黄金分割数，请访问这里：http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/ Fibonacci/ phi10000dps.txt） 。怎么看它都不是一个简洁的数字，但是它非常重要。黄金分割率的测量都能做到如此精确，那我相信网页设计同样做得到。
等等，这不是我们想要的效果。导航链接没再折成两行，但很明显导航链接之间的间距不对。导航链接看上去像一个字典里查不到的长单词……
#### 3.3.3 必须时刻牢记上下文
这种情况很常见，不过我们有很多方法解决这个问题。我们可以给li标签设置一个明确的宽度值，这个值必须得是一个固定像素宽度或者是一个相对于其包裹元素（#navigation div）的百分比值，但这两种值都无法保证li中的文字灵活可变。
此外我们可以修改li现在的 CSS代码，将 inline-block 改为 inline：
使用 display: inline;（这样可以阻止li元素渲染为块级元素）还可以使导航在不支持 inline-block 的老版本 Internet Explorer（版本 6和 7）中水平显示。
不过，我是inline-block 的粉丝，因为它允许我们在现代浏览器中有效的控制外边距和内边距，所以我会让li标签继续保持 inline-blocks 状态（一会可以给 IE6 和 IE7 追加一个覆写样式） ，然后将（没有明确的上下文的）a标签上的百分比外间距挪到li上来。
我准备先将文字大小从像素尺寸修改为相对单位 em。完成这个工作之后，我们就会注意到另外一个被忽略的问题 ，即让图片随着页面的变化缩放。
### 3.4 用 em 替换 px
### 3.5 弹性图片
img,object,video,embed { //ie7+
max-width: 100%;
}
这些多媒体元素都可以自动缩放了。但是，对于采用的iframe显示视频的网站（比如YouTube） ，这个技术还不行，我们会在第 4 章解决这个问题。眼下，还是专注于图片的缩放问题吧，因为不论何种多媒体元素，原理都是相通的。
使用这种方法有几个需要斟酌的问题。第一，要提前准备一张足够大的图片，以备大视口使用。但这也就引出了第二个，同时也是非常重要的问题，即无论视口多大，什么设备，都得下载超大图片。可能对某些设备来说，图片大小只要原始图片的 25%就好了。另外，在某些情况下，你还不得不因此而考虑带宽限制。
我们呆会儿再说第二个问题，先把图片缩放问题说完。
#### 3.5.1 让图片随视口缩放
#### 3.5.2 为特定图片指定特定规则
img {
max-width: 100%;
}
.sideBlock img {
max-width: 45%;
}
#### 3.5.3 给弹性图片设置阈值
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; / 698 ÷ 202 / //3.5.2
max-width: 202px; //3.5.3
}
#### 3.5.4 超级全能的 max-width 属性
另一种限制页面无限制扩张的方法是给最外层的#wrapper div 设置max-width 属性，
### 3.6 为不同的屏幕尺寸提供不同的图片
我们曾指出图片缩放存在一定的问题。图片尺寸必须比其显示尺寸更大以保证渲
染效果，否则的话图片可能看起来很糟糕。基于这个原因，图片文件的体积就永远比实际显示所需的大。
很多人都在研究这个问题，尝试为较小的屏幕尺寸提供较小的图片。第一个著名的例子是 Filament Group的 “响应式图片”（http://filamentgroup.com/lab/responsive_images_experi_
menting_with_context_aware_image_sizing/） 。
不过最近，我已经转而使用 Matt Wilcox 的“自适应图片” （http://adaptive-images.com）了。Filament Group的解决方案需要对图片标签做一定修改。Matt Wilcox的解决方案则不需要，而且他的方案会根据标签中已经设定的全尺寸图片自动创建各种尺寸的图片。这种解决方案允许基于一组屏幕尺寸断点，根据用户需要为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。
#### 设置自适应图片
实现 Adaptive Images解决方案需要 Apache 2、PHP 5.x和 GD库，也就是说需要 Web服务器端编程。首先，
#### 把背景图片放在其他地方
但是在使用自适应图片方案时，建议将那些用于CSS的背景图片（或者那些你不想被缩放的图片）放在另一个目录。自适应图片方案默认为此创建的目录是assets。
### 3.7 流动网格布局和媒体查询的默契配合
你看到了，我们根据视口宽度来改变文字大小，结果就是这组导航链接在 769 像素到无穷大的视口中都会显示在一行。这是媒体查询和流动布局和谐共存的又一证据：媒体查询约束流动布局的变动范围，而流动布局则简化了从一组媒体查询样式过渡到另一组的改变过程。
### 3.8 CSS 网格系统
褒贬不一. 但同时我也很欣赏它们在快速搭建界面布局上的价值。
1. Semantic (http://semantic.gs)；
1. Skeleton (http://getskeleton.com)；
1. Less Framework (http://lessframework.com)；
1. 1140 CSS Grid (http://cssgrid.net)；
1. Columnal (http://www.columnal.com)。
这些框架中，我个人最喜欢 Columnal 网格系统，因为它有一套内置的集成了媒体查询的流动网格布局，而且它使用了与 960.gs 框架类似的 CSS 命名，960.gs 框架是一套广为开发者和设计师所熟知的非常流行的固定宽度网格系统。
#### 使用网格系统快速搭建网站
但 Columnal 网格系统最大只支持
12列，所以我们将 PSD中的 16列改为 12列。
### 3.9 小结
响应式设计的 “移动优先” （mobile first）思想使它很适宜采纳最简洁、最有效和最具语义的代码。(ar:和本章内容没有关系)
## 第 4章 响应式设计中的 HTML5
1. HTML5的那些部分我们现在就能用？
1. 如何编写 HTML5网页
1. HTML5的精简之道
1. HTML中的废弃零件
1. HTML5中的全新语义化元素
1. 使用无障碍网页应用技术（WAI-ARIA）来增强语义，支持辅助技术
1. 嵌入媒体
1. 可响应的 HTML5和 iFrame视频
1. 让网站支持离线使用
### 4.1 HTML5 的哪些部分现在就能用
IE9！当前 HTML 标准草案的内容最终未必全都会出现在 W3C 推荐标准中，但其中有很大一部分新特性现在已经可以用了。
#### 4.1.1 大多数网站可以用 HTML5 编写
> 什么是腻子脚本？
腻子脚本（polyfill）这个词由 Remy Sharp提出，意指使用腻子来补平老版
本浏览器的缺陷。因此，腻子脚本具体指的是一段能给老版本浏览器带来新特性的 JavaScript代码。值得注意的是，腻子脚本会给你的代码里追加多余的代码。因此，就算你添加 3个腻子脚本可以让 Internet Explorer 6中网站的渲染效果与其他浏览器一模一样，也并不意味着你一定要这么做
#### 4.1.2 腻子脚本和 Modernizr
> 想找一种编写优秀 HTML5 代码的捷径？可以考虑 HTML5 样板文件
如果你时间紧迫，但却需要一个好的项目起点，可以考虑使用 HTML5样板文件（http://html5boilerplate.com/） 。样板文件是一个预先做好的融合了“最佳实践”HTML5文件，包含一些基本样式（如之前提到过的normalize.css） 、polyfill和一些必要的工具如 Modernizr。它还包含一个自动合并 CSS和 JS文件、自动删除注释以生成生产环境代码的构建工具。强烈推荐！
### 4.2 如何编写 HTML5 网页
W3C验证器（http://validator.w3.org/）
> HTML5 文档类型为什么这么简短?
HTML5的<!DOCTYPE html>文档类型如此简短，目的是以简洁的方式告诉浏览器用 “标准模式” 渲染页面。 这种简洁高效的思想渗透在HTML5的方方面面。
> 你会说汉语吗?
根据 W3C的定义http://dev.w3.org/html5/spec/Overview.html#attr-lang） ，lang属性用来指定页面元素内容和元素属性值的主语言。如果你的网页不是英语内容， 你最好设定正确的页面语言。 例如对于中文网页， HTML标签应该是。完整的语言列表请见这个网址：http://www.iana.org/ assignments/language-subtag-registry。
最后，..
字符编码通常都是 UTF-8，除非你有特殊理由才可能使用其他编码。
#### 4.2.1 HTML5 的精简之道
这样同样有效。没有结束标签的斜线，没有引号，大小写混杂。甚至，省略head>元素，页面依然有效。XHTML 1.0对这种情况会怎么说呢？
#### 4.2.2 HTML5 标签的合理写法
对我而言，那些看似多余的字符（用于闭合的斜线和属性值两边的引号）可以提高代码的可读性。因此在编写 HTML5 文档时我倾向于在老式编写风格（这样风格的代码在HTML5 中依然有效，不过可能在验证器或类似检查工具中会产生一些警告）和 HTML5的极简主义之间找到一个平衡。举例说明，以上节的 CSS链接为例，我会这样写：
<link href="CSS/main.css" rel="stylesheet"/>我闭合了标签，使用了引号，但删除了 type 属性。关键是找到一种你自己满意的风格。HTML5不会训斥你，也不会在课堂上批评你糟糕的标签代码，更不会因为你的代码没通过验证而罚你站墙角。
#### 4.2.3 伟大的a>标签万岁
#### 4.2.4 HTML 的废弃零件
你的情况可能和我差不多。如果你好奇，可以在后面这个网址找到完整
的非保留废弃零件列表：http://dev.w3.org/html5/spec/Overview.html#non-conforming-features。
比较常见的非保留废弃零件有 strike、 enter、 font、 acronym、 frame 和 frameset。
### 4.3 HTML5 的全新语义化元素
语义化是给我们的标签赋予意义的过程。为什么语义化很重要？很高兴你问这个问题。
#### 4.3.1 section>
#### 4.3.2 nav>
#### 4.3.3 article>
article>元素与section>元素很容易混淆。
#### 4.3.4 aside>
#### 4.3.5 hgroup>
HTML5 的大纲结构算法
HTML5允许每个section>容器有自己独立的大纲结构。 这样你就不必总想着现在是几级标题了。例如在一个博客中，博文的标题可以使用h1>标签，同时博客内容的标题也可以包含h1>标签。请见如下代码：
1. http://gsneders.html5.org/outliner/
1. http://hoyois.github.com/html5outlier/
#### 4.3.6 header>
由于header>元素不计入大纲结构，所以不能用它来划分内容结构，而是应该用它来包含对区域内容的介绍说明。实际使用中，header>可用作网站头部的“刊头”区域，也可用作对其他内容如article>元素的简要介绍。
#### 4.3.7 footer>
#### 4.3.8 address>
address>元素用于明确地标注离其最近的article>或body>祖先元素的联系信息。
为避免产生混淆，请记住ddress>中一般不放具体的邮政地址，除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用p>标签来包裹。
### 4.4 HTML5 结构元素的实际用法
> 注意 HTML5 中的元素复用
请注意， HTML5页面中可能会有多个\
