HTML5的文档结构

2023年8月21日

文章访问量：

简述HTML5文档的基本结构

在sublime中，输入<html>就能自动补全一个html5文档的基本结构。如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

</body>
</html>

文档类型说明
<!DOCTYPE html>

在HTML早期的版本（如HTML4），文档头部的类型说明代码非常长，举个例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5开始就简化了开头这段代码，虽然现在去网上找html4写的网站，貌似有点困难，但这里还是简述一下其含义。

W3C：万维网联盟（World Wide Web Consortium）
DTD：文档类型定义（Document Type Definition）
表明该DTD是由W3C定义的，DTD的类型则跟在后面。
HTML 4.01 Transitional//EN：表示该HTML文档的DTD使用的是HTML 4.01的规范。Transitional则表示“过渡的”文档类型。除此之外，在html4.0.1中还有两种文档类型。具体解释如下
- Transitional：意为”过渡的“。表示开发者在将旧版本的HTML文档移植到更新版本的HTML时可以使用那些过时的标签。举个例子：在这个过程中，开发者仍然可以使用新版本中被废弃的标签（如font）。主要是确保在移植到新版本的HTML上时，旧版本的网页仍然可以正常显示。
- Strict：意为“严格的”。顾名思义，HTML 4.01 Strict 不允许使用那些过时的，或者是不再推荐使用的标记和属性。
- Frameset：意为“框架集”，不过现在好像不常用了。主要是用于页面布局，分割浏览器窗口，让一个浏览器窗口可以同时加载多个网页或应用程序。
http://www.w3.org/TR/html4/loose.dtd：指向了指向 HTML 4.01 Transitional 规范中，定义的文档类型定义（DTD）文件的URL。浏览器碰到该规定的HTML文档时，就会从该URL获取DTD，并按照该DTD解析处理HTML文档。

不过HTML5开始就不用这一长串了，直接15个字的代码就能搞定：

<!DOCTYPE html><html>

非常好的简化，爱来自HTML5。

HTML标签
<html></html>

很明显，文档的所有内容都写在两个html标签之间，就像大括号一样。没啥好解释的。

头标签
<haed></head>

头标签用于说明文档头部的相关信息，如标签信息，元信息等。需要注意的是定义在头标签这的内容一般不会在网页上直接显示出来。

元信息标签
<meta></meta>

元信息（meta-information)的概念，初次接触可能不太好懂。

比如你自己写了个博客网页。在经历了漫长的设计页面，找云服务器，备案；最后终于能在浏览器输入网址后访问你的博客后，剩下最后一个问题：你无法搜索到你的博客。

一般来说这个问题非常常见，因为有私人博客的人很多，但几乎没人会去特意访问别人的博客，不是吗？

这就导致即使你用了百度收录平台，或者bing的收录之后，在之后的很长一段时间内仍然无法直接通过浏览器的搜索功能找到你自己的网站。需要注意的是这里的搜索分为两种，一种是自己输链接然后去搜索，另一种是输入关键词去搜索。

输链接再搜索，一般来说都能找到你的博客网站（百度除外，吸血鬼是这样的）。但是输关键词就不太一样了。

过去，搜索引擎在检索你的网页时会看你页面的关键词。用户搜索关键词，你的页面关键词完美符合，那你网页就更靠前，更容易被用户看到。但很明显，那些垃圾网站也知道这点，所以往关键词里塞一堆东西，导致现在搜索引擎其实没那么看重关键字了。

言归正传，关键字就是一种元信息。这里简单解释下例子中提到的

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

第一个，utf-8肯定都很熟悉了，这是在告诉浏览器该页面需要用utf-8这个字符集(charset)去显示。

第二个写过应用程序的应该能看得出来这是干啥的。首先，把content属性关联到viewport这个名称上，再定义与viewport相关的元信息，即定义其为“width=device-width, initial-scale=1”。简单来说其实就是设置页面缩放比和宽度的。

当然还有很多其他的元信息，实际碰到的话百度即可。

标题标签
<title></title>

很直观的一个标签。举个例子，假设标题为

<title>百度</title>

那么用户打开浏览器后，在打开你的页面时，浏览器上方的标签栏那里显示的页面标题就是百度，如图

很直观吧。（试下表情包）

主体标签
<body></body>

头标签搞定了，接下来就是网页的主题部分了，前面的相当于是“前置任务”。

那网页的主体部分能塞的东西就很多了，比如塞<h1>(标题标签）或者单纯的文本。举个例子，假设代码如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<h1>Hello World</h1>This is a test message.
</body>
</html>

那么最终显示的效果如图所示。

你可能也注意到了，即使我没有使用换行标签，但标题标签仍然自带了一个换行符。否则第二行文本会紧跟在第一行后面。

页面注释标签
<!– –>

注释标签….就是注释，之前在winui3中写过xaml文档，所以我个人对于这个还是比较熟悉的。不过也没啥好说的，注释标签一试就知道咋用了。