乐趣区

关于html5:HTML5秘籍文档类型和语义化以及离线缓存

jiezi

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
退出移动版