在,我们知道了HTML的基础:标签、属性
所谓的页面根元素,就是:
在HTML文档中,元素html代表了文档的根,其他所有的元素都是在该元素的基础上进行延伸或拓展的。
该元素也是HTML文档的最外层元素,因此也称为根元素。
这一帖,专攻,页面根元素html中最常用的两个属性-langmanifest。
lang,理解为语言文件;
manifest,理解为文档的缓存。
fishclanglang属性代表了网页的语言声明,通过对其设置,可以使得页面对于搜索引擎和浏览器更加兼容。
可以设置语言代码,来声明页面语言:
htmllang="en"英文
htmllang="zh-CN"中文
htmllang="fr"法文
fishcmanifestmanifest属性,是HTML5新加入的。
对于离线页面缓存,简直是好用的不要不要的!
为啥这么说,因为manifest有一个牛X的特点:
一旦设置后,便会将需要缓存的文件保存在本地
这样用户,下一次访问时,即便是在没有网的情况下,也能正常访问页面内容。
manifest文件可分为三个部分:
CACHEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存
NETWORK-在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(比如页面)
我们只举一个简单CACHEMANIFEST的例子,先创建一个HTML页面。
然后,设置html元素的manifest属性值为“first_cache.manifest”
这个值,对应了将要创建的manifest文件的名称。代码如下:
!doctypehtml
htmlmanifest="first_cache.manifest"
head
title一起测试manifest缓存/title
linkhref="css.css"rel="stylesheet"
/head
body/body
/html
在创建一个css.css样式文件,定义背景色为最性感的粉色,忘了颜色大全表,请戳我
body{
background:#FF;
}
别忘了,放在一个文件夹:
接下来,通过创建html属性中指定的first_cache.manifest文件,来使浏览器能够缓存css.css文件
创建first_cache.manifest文件,代码如下:
CACHEMANIFEST
#修改时间:-1-:22
CACHE:
css.css
第一行,是manifest文件的声明。
第二行,是一段以‘#’开头的注释,表明版本或者修改时间。
第三行,"CACHE"是对需要缓存的文件的声明。
第四行,为缓存的文件列表,声明了css.css文件作为缓存的对象。
*记住:当有多个文件,每一个文件路径都需要各占一行
看一下,最终路径中的文件:
点击,html文件启动:
看到这幅图,意味着,HTML、CSS、manifest文件上传到服务器。
我们可以查看浏览器是否已经缓存了,用Chrome为例,选择菜单项-视图-开发者-开发者工具
可以看到,三个文件都被浏览器缓存了:
现在不管怎么改css文件中颜色,换成#FFFFFF,页面颜色都不会变化。
只有修改manitest文件中的,时间或者文件版本!
现在随便改下时间,然后刷新,颜色变了。
当然了,这些都只是皮毛,留给你自己深入学习了
本地使用manifese无法成功,请见论坛置顶贴正解看到论坛很多同学的学习笔记也做得非常不错,顺便附上给大家学习学习。
joker:蜜汁尴尬,manifest似乎用不了
环境是:win7+chrome
chrome浏览器F12后似乎没有出现缓存的first_cache.manifest文件,断网后修改颜色,依然可以显示
看W3c上的解释:
在想是不是需要在服务器上配置,貌似并没有服务器的权限
也看到博客有人说缓存成功,chrome浏览器F12后console会有缓存信息,如下图,依旧没有找到