HTML网页 <!DOCTYPE>详解

本文解释了DOCTYPE在HTML中的重要性,介绍了三种文档类型声明(过渡型、严格型、框架型)及其影响,强调标准模式的现代规范和怪异模式的兼容性历史,以及HTML5中<!DOCTYPEhtml>的推荐使用。

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

        DTD——即DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写DTD)通常情况下,DOCTYPE 位于一个 HTML文档的最前面的位置,位于根元素HTML的起始标签之前。这样一来,在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型,以决定其需要采用的渲染模式(不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析)。XHTML1.0提供了三种DOCTYPE可选择:

过渡型(Transitional )

严格型(Strict )

框架型(Frameset )

        <!DOCTYPE> //文档类型声明(浏览器并不只支持 HTML,还支持 XML 类型的文档;对 HTML 文件来说,浏览器使用文件开头的 DOCTYPE 来决定使用怪异模式处理或标准模式处理)

怪异模式:

        在很久以前的网络上,页面通常有两种版本:为网景的 Navigator 准备的版本,以及为微软的 Internet Explorer 准备的版本。当 W3C 创立网络标准后,浏览器不仅要按照新的标准去支持HTML和CSS,还要对老旧的网页进行兼容,而这一前一后的两种支持方式,就是我们所称的标准模式(StandardMode,)和怪异模式(QuirksMode)。浏览器采用了两种模式,用以把能符合新规范的网站和老旧网站区分开。

对于现代规范的网页,浏览器一般用标准模式去解析和渲染,而对于古老的网页,浏览器就会使用怪异模式去渲染.而在ie的开发者工具中,你可以自定义改变文档模式。

目前浏览器的排版引擎使用三种模式:

怪异模式(Quirks mode):

        排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。(为了避免“破损”那些按照在20世纪90年代末风行的实践创作的页面,浏览器违背了现代的Web格局规范。不合的浏览器实现了不合的怪癖行动。IE6、7和8中,怪癖模式有效地冻结在IE5.5 。其他浏览器中,怪癖模式是标准模式的少量偏移)

触发格式:

(第一行不写,或写错DOCTYPE就能触发)

接近标准模式(Almost standards mode):

        只有少数的怪异行为被实现。(它遵守传统的做法来实现表格单位格的垂直尺寸而不是严格的遵守CSS2规范,更接近Mozilla的准标准模式而不是Mozilla的标准模式)

触发格式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

标准模式(Standards mode):

        会尽量执行 HTML 和 CSS 规范所指定的行为。(浏览器按W3C标准规范解析执行代码)

触发格式:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <!-- 严格履行 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- 兼容XHTML放弃的标签 -->

        <!DOCTYPE html>是所有可用的 DOCTYPE 之中最简单的,也是 HTML5 所推荐的。HTML 的早期变种也属于推荐标准,不过,当今的浏览器都使用 DOCTYPE 标准模式,就算是早已过时的 Internet Explorer 6 也一样。目前,并没有正当的理由,去使用其他更复杂的 DOCTYPE。如果你使用其他的 DOCTYPE,你可能会面临触发接近标准模式或者怪异模式的风险。

        请确定你把 DOCTYPE 正确地置于 HTML 文件的顶端。如果有任何其他字符位于 DOCTYPE 之前,比如注释或 XML 声明,会导致 Internet Explorer 9 或更早期的浏览器触发怪异模式。

        在 HTML5 中,DOCTYPE 唯一的作用是启用标准模式。更早期的 HTML 标准中,DOCTYPE 会附加其他意义,但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。

三种模式下的表现差异:

        首先,怪癖模式是不可取的,因为其没有兼容性可言。在IE(IE6-IE9)中,混杂模式使用IE5.5内核来解析并渲染页面。

      其次,准标准模式是在尽可能遵循标准的基础上兼容部分非标准代码,比如一些已经弃用的标签等。

      最后,标准模式则是对统一标准实现最好的模式,它要求标签必须闭合(唯一不需要闭合的就是DOCTYPE标签),不能使用已经废弃的标签等等。目前,使用最多的DOCTYPE声明为过渡型HTML或XHTML,因为它能最大化的兼容一些老代码。不过,技术领先的公司(比如google、facebook、twitter等都如此)都已经使用了html5的DOCTYPE声明,即<!DOCTYPE html>,它所触发的模式与严格型HTML或严格型XHTML所触发的模式完全相同,但好处是节省代码且向前兼容(HTML5时代)。

入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言,而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面2 入门实例新建一个test.html文件,内容如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一个标题</h1><p>我的第一个段落。</p> </body></html>其中:<!DOCTYPE html> 声明为 HTML5 文档<html> 元素是 HTML 页面的根元素<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8(由于在大部分浏览器中直接输出中文会出现乱码,所以要在头部将字符声明为UTF-8)<title> 元素描述了文档的标题<body> 元素包含了可见的页面内容<h1> 元素定义一个大标题<p> 元素定义一个段落保存后运行,即可在浏览器中打开如下界面3 各部分详解3.1 标题HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6> </body></html>3.2 段落HTML 段落是通过标签 <p> 来定义的<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p> </body></html>3.3 链接HTML 链接是通过标签 <a> 来定义的<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <a href="https://blog.youkuaiyun.com/zong596568821xp">这是一个链接使用了 href 属性</a> </body></html>3.4 图像HTML 图像是通过标签 <img> 来定义的。注意: 图像的名称和尺寸是以属性的形式提供的。<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <img src="zongxp.jpg" width="640" height="640" /> </body></html>3.5 表格表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性来显示一个带有边框的表格:<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>4 速查列表4.1 基本文档<!DOCTYPE html><html><head><title>文档标题</title></head><body>可见文本...</body></html>4.2 基本标签<h1>最大的标题</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的标题</h6> <p>这是一个段落。</p><br> (换行)<hr> (水平线)<!-- 这是注释 -->4.3 文本格式化
04-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值