|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2021-8-11 09:11 编辑
在12,我们知道了HTML的基础:标签、属性
所谓的页面根元素,就是:
在HTML文档中,元素<html>代表了文档的根,其他所有的元素都是在该元素的基础上进行延伸或拓展的。
该元素也是HTML文档的最外层元素,因此也称为根元素。
这一帖,专攻,页面根元素html中最常用的两个属性 - lang & manifest。
lang,理解为语言文件 ; manifest,理解为文档的缓存
- lang
lang属性代表了网页的语言声明,通过对其设置,可以使得页面对于搜索引擎和浏览器更加兼容。
可以设置语言代码,来声明页面语言:
- <html lang="en"> 英文
- <html lang="zh-CN">中文
- <html lang="fr">法文
复制代码
- manifest
manifest属性,是HTML5新加入的。
对于离线页面缓存,简直是好用的不要不要的!
为啥这么说,因为manifest有一个牛X的特点:
一旦设置后,便会将需要缓存的文件保存在本地
这样用户,下一次访问时,即便是在没有网的情况下,也能正常访问页面内容。
manifest 文件可分为三个部分:
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
我们只举一个简单CACHE MANIFEST的例子,先创建一个HTML页面。
然后,设置html元素的manifest属性值为“first_cache.manifest”
这个值,对应了将要创建的manifest文件的名称。代码如下:
- <!doctype html>
- <html manifest="first_cache.manifest">
- <head>
- <title>一起测试manifest缓存</title>
- <link href="css.css" rel="stylesheet">
- </head>
- <body></body>
- </html>
复制代码
在创建一个css.css样式文件,定义背景色为最性感的粉色,忘了颜色大全表,请点这里
- body{
- background:#FF0088;
- }
复制代码
别忘了,放在一个文件夹:
接下来,通过创建html属性中指定的first_cache.manifest文件,来使浏览器能够缓存css.css文件
创建first_cache.manifest文件,代码如下:
- CACHE MANIFEST
- #修改时间:2016-1-10 20:22
- CACHE:
- css.css
复制代码
第一行,是manifest文件的声明。
第二行,是一段以‘#’开头的注释,表明版本或者修改时间。
第三行,”CACHE“是对需要缓存的文件的声明。
第四行,为缓存的文件列表,声明了css.css文件作为缓存的对象。
记住:当有多个文件,每一个文件路径都需要各占一行
看一下,最终路径中的文件:
点击,html文件启动:
看到这幅图,意味着,HTML、CSS、manifest文件上传到服务器。
我们可以查看浏览器是否已经缓存了,用Chrome为例,选择菜单项-视图-开发者-开发者工具
可以看到,三个文件都被浏览器缓存了:
现在不管怎么改css文件中颜色,换成#FFFFFF,页面颜色都不会变化。
只有修改manitest文件中的,时间或者文件版本!
现在随便改下时间,然后刷新,颜色变了。
当然了,这些都只是皮毛,留给你自己深入学习了
刮刮乐:
本地使用manifese无法成功,请见置顶贴正解
这位鱼油,如果喜欢本帖子,请订阅 专辑-->( 传送门)( 不喜欢更要订阅 )
官方 Web 课程:
|
评分
-
查看全部评分
|