HTML5秘籍书籍中文档类型和语义化, 离线缓存部分进行要点归纳
HTML5文档类型
<!DOCTYPE html>好处:
- 简约, 相比XHTML和HTML4说明更加简单
- 声明的情况下. 进入标准模式, 所有现代浏览器都会以一致的格式和布局来显示网页
- 没有声明的情况下. ,进入混杂模式, 浏览器将按照自己的标准就进行布局(导致浏览器呈现效果不同)
语义元素
# 新增
<time>, <nav>, <footer>, <header>, <figure>, <figcaption>, <main>, <output>优点:
- 容易修改和维护
- 无障碍性(屏幕阅读器识别)
- 搜索引擎优化
语义使用
header
只有在内容标题还附带了其他信息的情况下，才有必要考虑<header>。也就是说，其中包含标题、概要、发表日期、作者署名、图片或子主题链接等很多内容
main
<main>包装了<article>
用于标识网页的主要内容。比如，在前面的启示录网站上，主要内容就是整篇文章，不包含站点页眉、页脚和侧边栏。强烈建议大家在自己的网页中使用这个元素。
标题标签
在站点的页眉中使用了<h1>元素后，你就应该给页面中其他的区块（如“Articles”和“About Us”）选用<h2>元素作标题
侧边栏aside
可以用它来标注一段与正文相关的内容（2.2.5节正是这么做的），也可以用它表示页面中一个完全独立的区块——作为页面主要内容的陪衬。
导航栏nav
常只用于页面中最大最主要的导航区
使用<output>标注JavaScript返回值
使用<mark>标注突显文本
ie9及以下执行
<! --[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<! [endif]-->离线缓存
通过描述文件缓存资源
离线应用的一项基本技术就是缓存，即下载文件（如网页）并在用户计算机上保存一份副本。有了这份副本，即使计算机不能上网，浏览器也可以使用缓存的文件。
创建描述文件(PersonalityTest.manifest)
描述文件就是一个文本文件，其中列出了需要缓存的文件。
CACHE MANIFEST
# version 1.00.001 // 下方更新描述文件中有描述
# pages
PersonalityTest.html
PersonalityTest_Score.html
# styles & scripts
PersonalityTest.css
PersonalityTest.js
# pictures & fonts
Images/emotional_bear.jpg
Fonts/museo_slab_500-webfont.eot
Fonts/museo_slab_500-webfont.woff
Fonts/museo_slab_500-webfont.ttf
Fonts/museo_slab_500-webfont.svg使用描述文件
<! DOCTYPE html>
<html lang="en" manifest="PersonalityTest.manifest">
...更新描述文件
它缓存了两个页面。如果你更新了PersonalityTest.html，打开浏览器，重新加载这个页面，你看见的仍然是原先缓存的那个页面。无论你的计算机目前能否上网，都是如此。
问题在于，只要浏览器缓存了应用，那么它就不会向Web服务器请求新内容。浏览器不管你是否更新了服务器上的页面，它只管用自己已经缓存的那个。由于离线应用没有过期一说，所以无论你过多长时间以后再看，就算是几个月以后再看，浏览器照旧还会忽略更新后的页面。
最好的办法就是添加注释，比如：
...
# version 1.00.001
...NETWORK
CACHE MANIFEST
PersonalityTest.html
Images/emotional_bear.jpg
NETWORK:
Images/logo.png在联网时，浏览器才会尝试从Web服务器下载logo.png文件，而在离线时，则会忽略它。
FALLBACK
CACHE MANIFEST
PersonalityTest_Score.html
FALLBACK:
PersonalityScore.html PersonalityScore_offline.html浏览器会把后备文件（即这里的PersonalityScore_offline.html）下载并缓存起来。不过，只有在不能上网的时候浏览器才会使用这个后备文件。而在能上网的时候，浏览器会照常向Web服务器请求另一个文件（即这里的PersonalityScore.html）。
SETTINGS: 在线时绕开缓存
SETTINGS:
prefer-online
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。