HTML文档结构

本文深入探讨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=" 你的姓名 "/> 告诉搜索引擎你的站点的制作的作者;
   5 <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow"/>
  其中的属性说明如下:
  设定为 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 种。
 
三、主体部分: 包含在网页中显示的文本、图像和链接等主体内容。

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值