乐趣区

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

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