0 0 1 3 - 页面#根元素属性html 之 lang & mainfest属性
本帖最后由 不二如是 于 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无法成功，请见置顶贴正解
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 本帖最后由 joker11111 于 2017-2-14 00:39 编辑
蜜汁尴尬，manifest似乎用不了
环境是：win7+chrome
chrome浏览器F12后似乎没有出现缓存的first_cache.manifest文件，断网后修改颜色，依然可以显示
看W3c上的解释：
在想是不是需要在服务器上配置，貌似并没有服务器的权限
也看到博客有人说缓存成功，chrome浏览器F12后console会有缓存信息，如下图，依旧没有找到
博客地址：http://blog.csdn.net/tsxw24/article/details/8315672
有点费解，留坑一枚，待弄清再填
也期待有会的朋友解疑答惑，灰常感谢
不二如是 发表于 2017-2-14 08:00
哈哈，我当时故意搭的服务器，做出来manifest效果
本地单机是无法实现滴！
服务器，搭建个tomcat？ 这么复杂{:10_269:} alltolove 发表于 2017-1-11 15:14
这么复杂
manifest主要适用于不依赖网络，且下载后不需要更行的地方
像，HTML5的游戏、应用界面等。
而现在，比起没网，大家99%会有网！
所以，了解下就好，有需求知道去哪里找就行 joker11111 发表于 2017-2-14 00:37
蜜汁尴尬，manifest似乎用不了
环境是：win7+chrome
哈哈，我当时故意搭的服务器，做出来manifest效果
本地单机是无法实现滴！
另外被joker这么优质的学习帖‘震’到了！！！ 不二如是 发表于 2017-2-14 08:00
哈哈，我当时故意搭的服务器，做出来manifest效果
本地单机是无法实现滴！
哈哈哈哈，感觉要玩大家来找茬了，你只管写，我只管找茬{:10_311:}
自己搭的服务器{:10_302:}，崇拜崇拜，还不知道服务器是什么鬼呢，自己简直弱爆了{:10_283:} joker11111 发表于 2017-2-14 08:31
哈哈哈哈，感觉要玩大家来找茬了，你只管写，我只管找茬
自己搭的服务器，崇拜崇 ...
其实超级简单～
留个悬念，后面肯定会介绍到{:10_268:}
欢迎提供更多优质回复！ 表示打开后 重新修改css颜色界面还是改变了，，
manifest 修改之后页面要刷新两次 很不友善 还有就是出现了个请求 favicon.ico 的bug 会魔法的魔法 发表于 2017-3-15 16:36
还有就是出现了个请求 favicon.ico 的bug
见4#，置顶帖 交作业<!DOCTYPE html> <!--在HTML文档中，元素<html>代表了文档的根，其他所有的元素都是在该元素的基础上进行延伸或拓展的。-->
<html lang="en" manifest="first_ManifestCace.appcache"><!--页面根元素html中最常用的两个属性 - lang & manifest。lang，理解为语言文件 ； manifest，理解为文档的缓存-->
<!--重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。-->
<!--first_ManifestCace.appcache文件解释说明:
第一行，是manifest文件的声明。
第二行，是一段以‘#’开头的注释，表明版本或者修改时间。
第三行，”CACHE“是对需要缓存的文件的声明。
第四行，为缓存的文件列表，声明了css.css文件作为缓存的对象。-->
<link rel="stylesheet" href="0009CSS.css">
<head>
<meta charset="UTF-8">
<title>测试manifest离线缓存</title>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>让编程改变世界!<br/>Change the world by program!</p>
<a href="http://www.fishc.com/" id="first_Js">传送门</a>
<a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539" id="first_Js2">HTML5-庖丁解牛</a>
</div>
<script src="0008JS.js"></script>
</body>
</html> 继续学习 这是不是意味着缓存实验失败了？{:10_266:}
这个故事告诉我们看帖先看评论{:9_233:} 微末非末 发表于 2018-2-22 19:22
这个故事告诉我们看帖先看评论
是的 都一年前了亲 joker11111 发表于 2017-2-14 00:37
蜜汁尴尬，manifest似乎用不了
环境是：win7+chrome
那个，能解释的再明白点吗？
初学者，不明白
谢谢你 刮刮乐刮出来个错字，不是manifest吗？{:10_254:}
页:
[1]
2