HTML5秘籍--文档类型和语义化以及离线缓存

HTML5秘籍书籍中文档类型和语义化, 离线缓存部分进行要点归纳

HTML5文档类型

好处:

• 简约, 相比XHTML和HTML4说明更加简单
• 声明的情况下. 进入标准模式, 所有现代浏览器都会以一致的格式和布局来显示网页
• 没有声明的情况下. ,进入混杂模式, 浏览器将按照自己的标准就进行布局(导致浏览器呈现效果不同)

语义元素

# 新增
, 
, 
, 
, 
, 
, 
, 

优点:

• 容易修改和维护
• 无障碍性(屏幕阅读器识别)
• 搜索引擎优化

语义使用

header

只有在内容标题还附带了其他信息的情况下，才有必要考虑

。也就是说，其中包含标题、概要、发表日期、作者署名、图片或子主题链接等很多内容

main

包装了

用于标识网页的主要内容。比如，在前面的启示录网站上，主要内容就是整篇文章，不包含站点页眉、页脚和侧边栏。强烈建议大家在自己的网页中使用这个元素。

标题标签

在站点的页眉中使用了

元素后，你就应该给页面中其他的区块（如“Articles”和“About Us”）选用

元素作标题

侧边栏aside

可以用它来标注一段与正文相关的内容（2.2.5节正是这么做的），也可以用它表示页面中一个完全独立的区块——作为页面主要内容的陪衬。

导航栏nav

常只用于页面中最大最主要的导航区

使用

标注JavaScript返回值

使用标注突显文本

ie9及以下执行

离线缓存

通过描述文件缓存资源

离线应用的一项基本技术就是缓存，即下载文件（如网页）并在用户计算机上保存一份副本。有了这份副本，即使计算机不能上网，浏览器也可以使用缓存的文件。

创建描述文件(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

使用描述文件

...

更新描述文件

它缓存了两个页面。如果你更新了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