HTML文档_文档heml-优快云博客

本文详细介绍了HTML5文档的结构与元素概念，重点解析了DOCTYPE的作用及html元素的特性，如lang和manifest特性。深入探讨了manifest特性如何实现离线浏览、快速加载和减少服务器负载，并详细说明了manifest文件的结构及其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的HTML文档

简单的HTML5 文档

<!DOCTYPE html>

<html lang = "en">
    <head>
        <meta charset = "utf-8"/>
        <title> HTML5 Sample Document</title>
    </head>
    <body>
    </body>
</html>

元素概念

一个元素是由一个开始和一个结束标签以及两个标签之间的内容组成。

<tag attribute="value" ……> content </tag>

DOCTYPE

在web开发早期，web页面根据当前所使用的浏览器的实现方式而开发的，之后随着HTML规范的发展使用更新规范所开发的新浏览器无法使用旧的web页面。
引入DOCTYPE元素，使得每个页面可以指定所针对的规范的版本。浏览器需解释该元素并提供必要的向后兼容性。
但是如果使用HTML5，可以忽略DOCTYPE元素，只需要简单将其设置为html即可：

<!DOCTYPE html>

html元素特性

lang 特性：
<lang = "en"> 告诉浏览器文档内容使用English编写，如果浏览器当前使用的语言不是English，浏览器使用该特性来翻译文档内容。
manifest特性：
<html manifest = "www.mywebsite.com/cache.appcache">
manifest特性用来定义应用程序缓存，特性的值可以是绝对或者相对的URL。
应用程序缓存使得应用程序具有的优点：
1.离线浏览
2.快速，缓存的资源可以更加快速地加载
3.减少服务器加载，浏览器只需要从服务器上下载已更新资源。

manifest文件：是一个简单的文本文件，列举出浏览器用于离线访问而缓存的资源。manifest文件的结构为：

CACHE MANIFEST -在此标题下列出的文件将在首次下载后进行缓存。
NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存。
FALLBACK-在此标题下列出的文件规定当前页面无法访问时的回退页面。

CACHE MANIFEST:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

manifest文件列出三个资源：一个css文件，一个GIF文件，一个JavaScript文件。当manifest文件加载后，浏览器会从网站的根目录下载这三个文件，用户与Internet断开连接，这三个文件资源也是可用的。

NETWORK:

NETWORK
login.php

login.php文件永远不会被缓存。

NETWORK
*

使用※来指示所有的其他文件/资源都需要Internet连接
FALLBACK：

FALLBACK
/html/offline.html

如果无法建立Internet连接，则用“offline.html”代替/html5/目录中的所有文件。

一旦应用被缓存，就会保存缓存直到发生下列的情况：

用户清空浏览器缓存
manifest文件被修改
由程序来更新应用程序

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，需要跟新manifest文件。
不同浏览器缓存的容量限制可能不太一样，某些浏览器设置的限制是每个站点5MB。