HTML文档结构详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zerolsy/article/details/2184764

本文深入探讨HTML文档的结构，从基础元素到高级特性，解析如何构建符合标准的HTML页面，以提升网页可读性和搜索引擎友好性。同时，讨论了Microsoft的Generator属性在不同浏览器中的兼容性和使用策略。

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

HTML 文档结构

一、 HTML 简述

超文本标记语言 (HTML) 是 Web 用于创建和识别文档的标准语言。这些标记都是通过使用标签来完成的，标签可以指定网页在浏览器中的显示方式。

文档对象模型 document 提供了一组按树状形式结构组织的 HTML 文档树状结构中的每一个对象称为一个节点，每一个节点对象都有一个或多个属性与方法。如下图所示：

从上图可以看出：
（ 1 ）在 DOM 中，无论对象是什么，每一个对象都称为一个节点。节点又可以分为根节点、父节点、子节点、兄弟节点、叶子节点。

（ 2 ）根节点：最顶层的节点： <html>

（ 3 ）兄弟节点：拥有相同父节点的两个或两个以上节点称为兄弟节点。如： <head> 和 <boyd>.

（ 4 ）叶节点：位于树形结构底部的节点。如： href 等。

二、 HTML 文档的结构

典型的 HTML 文档主要由 3 部分组成：

1 HTML 部分： HTML 标签告诉浏览器这两个标签中的间的内容是 HTML 文档。

2 头部： 头部以 <head> 标签开始，以 </head> 结束。包含显示在网页标题栏中的标题和 meta 信息等其它不在网页中显示的信息。

（ 1 ） <title></title>
（ 2 ） <meta /> :meta 是用来在 HTML 文档中模拟 HTTP 协议的响应头报文。 meta 标签用于网页的 <head> 与 </head> 中， meta 标签的用处很多。 meta 的属性有两种： name 和 http-equiv 。

name 属性主要用于描述网页，对应于 content （网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找 meta 值来给网页分类）。这其中最重要的是 description （站点在搜索引擎上的描述）和 keywords （分类关键词），所以应该给每页加一个 meta 值。比较常用的有以下几个：

name 属性

　　 1 、 <meta name="Generator" contect=""/> 用以说明生成工具（如 Microsoft FrontPage 4.0 ）等；

　　 2 、 <meta name="KEYWords" contect=""/> 向搜索引擎说明你的网页的关键词；

　　 3 、 <meta name="DEscription" contect=""/> 告诉搜索引擎你的站点的主要内容；

　　 4 、 <meta name="Author" contect=" 你的姓名 "/> 告诉搜索引擎你的站点的制作的作者；

　　其中的属性说明如下：

　　设定为 all ：文件将被检索，且页面上的链接可以被查询；

　　设定为 none ：文件将不被检索，且页面上的链接不可以被查询；

　　设定为 index ：文件将被检索；

　　设定为 follow ：页面上的链接可以被查询；

　　设定为 noindex ：文件将不被检索，但页面上的链接可以被查询；

　　设定为 nofollow ：文件将不被检索，页面上的链接可以被查询。

http-equiv属性

　　 1 、 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

和 <meta http-equiv="Content-Language" contect="zh-CN"> 用以说明主页制作所使用的文字以及语言；

　　又如英文是 ISO-8859-1 字符集，还有 BIG5 、 utf-8 、 shift-Jis 、 Euc 、 Koi8-2 等字符集；

2 、 <meta http-equiv="refresh" content="5;url=http://www.hao123.com"/> 定时让网页在指定的时间 5 内，跳转到页面 http://www.hao123.com ；

<meta http-equiv="refresh" content="5"/> 代表每隔 5 秒刷新一次网页

3 、 <meta http-equiv="expires" contect="Mon,12 May 2001 00:20:00 GMT"> 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用 GMT 时间格式；

　　 4 、 <meta http-equiv="Pragma" contect="no-cache"> 是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从 Cache 中再调出；

　　 5 、 <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie 设定，如果网页过期，存盘的 cookie 将被删除。需要注意的也是必须使用 GMT 时间格式；

　　 6 、 <meta http-equiv="Pics-label" contect=""> 网页等级评定，在 IE 的 internet 选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过 meta 属性来设置的；

　　 7 、 <meta http-equiv="windows-Target" contect="_top"> 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个 frame 页调用；

　　 8 、 <meta http-equiv="Page-Enter" content="revealTrans(duration=3,transtion= 12)"/> 和 <meta http-equiv="Page-Exit" content="revealTrans(duration=20 ， transtion=6)"> 设定进入和离开页面时的特殊效果，这个功能即 FrontPage 中的 “ 格式 / 网页过渡 ” ，不过所加的页面不能够是一个 frame 页面。
duration 表示效果持续的时间秒， transtion 滤镜效果值从 0 到 23 共计 24 种。

三、主体部分： 包含在网页中显示的文本、图像和链接等主体内容。