HTML <!DOCTYPE> 声明详解

最新推荐文章于 2025-10-30 16:13:21 发布
转载 最新推荐文章于 2025-10-30 16:13:21 发布 · 201 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhengshihui/p/6868419.html
文章标签：

#xhtml #ruby

&lt;!DOCTYPE&gt;声明用于告知浏览器文档采用何种HTML版本。位于文档开头，在&lt;html&gt;标签前，用于触发标准模式以确保文档正确解析与显示。HTML5仅有一种声明方式，而HTML4.01则有三种。

什么是<!DOCTYPE>？

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前，<!DOCTYPE>声明告知浏览器的解析器用什么文档标准解析这个文档（标准模式）。若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。

<!DOCTYPE> 标签没有结束标签。<!DOCTYPE> 声明不区分大小写。总是先给 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。

标准模式与兼容模式

若文档为标准模式，则该文档的排版与JS运作模式都是以该浏览器支持的最高标准运行；

兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

html4.01与html5中的<!DOCTYPE>

在html4.01中,<!DOCTYPE>声明需要引用DTD（文档类型声明），因为它是基于SGML（Standard Generalized Markup Language 标准通用标记语言），DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。html5不基于SGML因此不需要引用DTD。

HTML 5 只有一种<!DOCTYPE> 声明：

HTML5
 <!DOCTYPE html>

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset

HTML 4.01 Strict

不允许使用表现性、废弃元素（如font）以及框架集（如frameset）。

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

允许使用表现性、废弃元素（如font），不允许使用框架集（如frameset）。

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

允许表现性元素，废气元素以及框架集。

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

其他常见的DOCTYPE 声明

XHTML1.0 Strict

不允许使用表现性、废弃元素（如font）以及框架集（如frameset），文档必须是结构良好的XML文档。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 Transitional

允许使用表现性、废弃元素（如font），不允许使用框架集（如frameset）,文档必须是结构良好的XML文档。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset

允许表现性元素，废气元素以及框架集,文档必须是结构良好的XML文档。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1

不允许使用表现性、废弃元素（如font）以及框架集（如frameset），文档必须是结构良好的XML文档，但是允许添加模块（例如为东亚语言提供 ruby 支持）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 元素和有效 DOCTYPES

以下链接中的表格列出了所有的 HTML5/HTML 4.01/XHTML 元素，以及它们会出现在什么文档类型 (!DOCTYPE) 中，效果如图。

链接：http://www.runoob.com/tags/html-elementsdoctypes.html

 

文章参考资料：http://www.runoob.com/tags/tag-doctype.html

转载请注明地址：丝瓜 » HTML <!DOCTYPE> 声明详解

 

转载于:https://www.cnblogs.com/zhengshihui/p/6868419.html

HTML标签和其说明
qq_42671834的博客
10-11 834
HTML 注释标签 标签定义及使用说明 所有主流浏览器都支持 注释标签。 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。 您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。 您也可以在注释内容存储针对程序所定制的信息。在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中，这...
!DOCTYPE 文档类型声明
weixin_34194317的博客
10-20 202
1、用途 Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 !DOCTYPE的用处。!DOCTYPE声明必须是 HTML 文档的第一行，位于 html 标签之前。!DOCTYPE>声明不是 HTML 标签；它是指示...
HTML声明方式
weixin_30916125的博客
08-22 294
1.声明方式： 　　 <!DOCTYPE html> <html lang='zh-cn'> </html> lang属性的作用： 　　浏览器显示网页数据的时候会有一套默认的字体，通过这个属性告诉浏览器语种从而让浏览器选择更匹配这个语种的字体显示 　　SEO方面的考虑；搜索引擎蜘蛛抓取的时候也是需要知道语种的，这样会优化体验更好的展示搜...
HTML常见声明
sqfbeijing的专栏
01-13 1037
<!DOCTYPE html> <html lang="zh-cn"> <!-- 上面lang记得改成 lang="zh-cn" --> <head> <meta charset="UTF-8"><!-- 作者名 --> <meta name="author" content="此处为作者"><!-- 指定网页的兼容性模式设置 --> <meta http-equiv="X-
html<!DOCTYPE>声明标签
weixin_30824599的博客
01-21 167
html<!DOCTYPE>声明标签 <DOCTYPE>声明是html文档的第一行，位于<html>标签之前 <DOCTYPE>声明不是html标签，他是指示web浏览器关于页面使用哪个html版本进行编写的指令 在html4.01中，<!DOCTYPE>声明引用DTD,因为html4.01基于SGML,DTD规定了标记语言...
HTML 文档类型
u011201351的专栏
09-23 592
声明帮助浏览器正确地显示网页。 声明 Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 的用处。 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。 提示：W3School 即将升级
＜!DOCTYPE html＞ 标签详解
LanJason的博客
09-28 2026
DOCTYPE是 Document Type Declaration（文档类型声明）的缩写。它的主要作用是让浏览器知道该如何解析 HTML 文档的内容。如果不声明DOCTYPE，浏览器可能会进入怪异模式（quirks mode），这会影响页面的正常显示和渲染。
HTML5 <!DOCTYPE>声明详解
DOCTYPE html>，这意味着HTML5旨在支持现代网页开发的需求，同时摒弃了过去的一些过时元素和做法，鼓励使用更语义化的标签，如<header>、<nav>、<section>等，以提高页面的可读性和可访问性。 在实际开发中，理解<!...
<!doctype html>是什么
09-12
DOCTYPE html>` 是 HTML5 文档的类型声明（Document Type Declaration），它是 HTML 文档的第一行代码，必须在 `<html>` 标签之前出现。这个声明的作用是告知浏览器使用哪个 HTML 版本来解析和渲染页面，确保浏览器...
入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。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.csdn.net/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
DOCTYPE>`**：声明文档类型，告诉浏览器按照哪种 HTML 或 XHTML 规范解析页面。 - **`<html>`**：整个 HTML 文档的根节点，表示这是 HTML 文件。 - **`<head>`**：包含元信息（metadata），如字符集、标题、样式链接...
母亲节祝福页面-HTML
05-12
DOCTYPE html>`）**： - 表示这是一个HTML5文档。 2. **基本结构**： - `<html>`：文档的根元素。 - `<head>`：包含关于文档的信息，如标题、样式表链接等。 - `<title>`：定义文档的标题，在浏览器标签页显示...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入Vue库 --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <p><input type="number" placeholder="请输入第一个数" v-model="first"></p> <p><input type="number" placeholder="请输入第二个数" v-model="next"></p> <div>选择</div> <!-- 使用v-on指令绑定点击事件 --> <button @click="con">+</button> <button @click="del">-</button> <button @click="chen">x</button> <button @click="chu">/</button> <div>计算的结果为：{{ result }}</div> </div> <script> // 定义Vue应用的配置对象 const App = { data() { return { result:0, first:0, next:0 }; }, methods: { // 正确拼写methods而不是method con(){ result = this.first + this.next } } }; // 创建并挂载Vue实例到页面上的#app元素上 Vue.createApp(App).mount('#app'); </script> </body> </html>
03-20
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue计算器示例</title> <!-- 引入Vue库 --> <script src=...
《HTML基础知识》2020-09-16
mqd_chan的博客
09-16 346
页面基本结构 html head body 标签类型 <tagName/> <tagName></tagName> 注释 样式：<!--需要注释的内容--> 目的：1、暂时用不到 2、解释 页面编码 【默认】iso-8859-1/gbk/gb2312/utf-8 常用标签 行内元素 【a标签】 超链接：<a...
js 数组求和.html
weixin_42193179的博客
03-03 756
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>eval</title> </head> <body> <script> var arr=[1, 2, 3]...
怎么看网页是使用的哪个HTML版本编写的？
热门推荐
庄AC的博客
01-17 1万+
想要知道某个网页是由哪个HTML版本编写的，其实很简单，看源码最前面每个页面都要有的、但是看也看不懂的、老师还不一定讲的那一坨代码就行了。
刷题 | 牛客 - 前端面试手撕题 - 中等 - 1-8/20 更新ing 知识点&解答
weixin_42479421的博客
09-29 424
法一：常规做法，简单直接，但大小写固定要写"LI"。法二：简洁，但有潜在 bug（点空白会误加）。法三：最稳妥的写法 ——用nodeName判断，适用于更多情况。转小写避免大小写不一致问题。推荐在写通用组件 / 库的时候用这种方式。
RabbitMQ消息分发详解：从默认轮询到智能负载均衡
2201_75437633的博客
10-29 929
RabbitMQ是一款基于AMQP协议的消息队列系统，其核心价值在于高效分发消息。消息分发指队列将消息按预设策略投递给多个消费者，确保每条消息仅由一个消费者处理，支持轮询和公平分发两种策略。轮询策略简单但可能导致资源不均，适用于消费者能力相近的场景；公平分发则通过basicQos限制未确认消息数，实现按需分配，适合处理能力差异大的高并发场景。Spring Boot中可通过配置prefetch参数实现公平分发，提升系统吞吐量和资源利用率。典型应用包括秒杀订单处理、日志收集和任务调度等场景。
Ruby 范围（Range）
wjs2024的博客
10-28 365
在 Ruby 中，范围（Range）可以通过两种方式创建：使用Range.new方法或使用..运算符。# 使用 Range.new 方法创建范围# 使用 .. 运算符创建范围在上面的示例中，range1和range2都表示从 1 到 5 的连续整数序列。本文详细介绍了 Ruby 中的范围（Range）及其相关操作。通过学习本文，开发者可以更好地理解和应用范围（Range）这一特性，从而提高编程效率。在处理连续数据时，范围（Range）无疑是一个非常有用的工具。
我用ChatGPT，给RabbitMQ加了个连接池
最新发布
Javatutouhouduan的博客
10-30 673
上次我把 RabbitMQ 集成到项目中，但是每次使用 RabbitMQ 时都去 New 一个连接，导致并发起不来，所以这次我们就给 RabbitMQ 加一个连接池。 为了偷个懒，我直接用 ChatGPT 教我加。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值