<!DOCTYPE html>很重要

最新推荐文章于 2024-12-12 07:15:03 发布
原创 最新推荐文章于 2024-12-12 07:15:03 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#DOCTYPE #document.compatMode

本文讲述了DOCTYPE声明对于网页一致性显示的重要性，特别是避免浏览器的怪异模式，确保跨浏览器兼容性。

噩梦开始的源头：之前写html或者jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。直到最近碰到了一个非常奇葩的bug：某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，各种log，终于在httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了<!DOCTYPE html>,果然奏效了。

 

下面我就尽可能简洁扼要的说一下DOCTYPE的作用和用法。

 

1作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

 

  document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

       这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

    如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的

标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

 

2 使用：<!DOCTYPE html>

2.1 使用也很简单，就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了

2.2 jsp的话，添加在<%@ page %>的下一行。

2.3 不用区分大小写哦

 

想了解更多，可以参考：

w3c : http://www.w3school.com.cn/tags/tag_doctype.asp

博文：http://i.wanz.im/2010/05/28/why_doctype_html/

 

 

 

 

 

 

 

 

 

 

愤怒的coder  - 以后所有页面都要添加DOCTYPE

 

 

你写的 HTML 可能一直是错的！DOCTYPE 的秘密终于有人讲清了
Where there is a will, there is a way !
05-25 1379
本文深入解析了DOCTYPE的重要性，揭示了标准模式与怪异模式的关键差异，通过真实案例展示了DOCTYPE错误可能导致的严重后果，并提供了实用的最佳实践指南。
HTML <!DOCTYPE> 标签
10-25
DOCTYPE声明位于HTML文档的顶部，通常在`<html>`标签之前。 在不同的浏览器中，如果没有声明DOCTYPE，页面可能会在不同的渲染模式下显示，导致布局和样式差异。例如，Firefox（FF）和Internet Explorer（IE）在默认...
HTML和XHTML的联系与区别,文档类型<!DOCTYPE>
07-30
NULL 博文链接：https://liuzidong.iteye.com/blog/850929
DOCTYPE作用及用法详解
weixin_33889665的博客
12-16 1141
一、浏览器呈现模式和doctype 有的网页是遵循标准而创作的，但也有很多不是。即使你不能创建遵循标准的网页，也希望浏览器根据标准来正确显示那些页。目前，大量网页充斥着大量非标准代码，它们仍能正常地工作。事实上，为旧版浏览器设计的大多数代码都能在新版浏览器中正确显示（虽然呈现方式可能有所区别）。这是什么原因呢？事实上，假如严格遵循最新标准，会完全破坏那些页的生存基础。对于任何希望有所...
<!DOCTYPE html>
weixin_33929309的博客
11-20 315
html5标准网页声明，原先的是一串很长的字符串，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5。
<!DOCTYPE html>重要性
http://itzones.cn
04-27 522
今天遇到一个奇葩的问题，其他jsp页面都没问题，找了半天才找到原来没加 来说一说<!DOCTYPE html>作用 doctype是document type（文档类型）的简写，在页面中，用来指定页面所使用的xhtml（或者html）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就 是doctype声明。只有确定了一个正确的doctype，xhtml里的标识和css才能正常生效
有关 <!DOCTYPE HTML>
weixin_33915554的博客
01-25 146
HTML4.01中的doctype需要对DTD进行引用，因为HTML4.01基于SGML。而HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。 1作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 document.compatMode： BackCompat：...
关于<!DOCTYPE html>
weixin_30872789的博客
06-26 183
1.定义 DOCTYPE标签是一种标准通用标记语言的文档类型声明，目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 2.作用 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 document.co...
<!doctype html>
jasondu的博客
09-04 312
<!doctype html>是html5标准网页声明，原先的是一串很长的字符串，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。 注意 : <!doctype> 声明必须位于 HTML5 文档中的第一行 VSC 中快速生成快捷键 生成h5 模版 ! + enter 生成 html 模板快捷键 doc + enter ...
＜!DOCTYPE html＞
m0_74871359的博客
02-25 201
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
为什么需要写这个<!DOCTYPE html>
06-06
</h1> </body> </html> ``` #### 3. DOCTYPE 在不同 HTML 版本中的演变 在 HTML 4.01 中，存在三种 DOCTYPE 声明形式：Strict、Transitional 和 Frameset。每种形式对应不同的文档规范要求。而在 HTML5 中，为了...
HTML5 <!DOCTYPE>声明详解
DOCTYPE html>，这意味着HTML5旨在支持现代网页开发的需求，同时摒弃了过去的一些过时元素和做法，鼓励使用更语义化的标签，如<header>、<nav>、<section>等，以提高页面的可读性和可访问性。 在实际开发中，理解<!...
在Subline Text中输入代码报错： <!DOCTYPE html> ^ SyntaxError: invalid syntax
04-02
<think>好的，我现在需要解决用户在Sublime Text中编写HTML时遇到的SyntaxError错误，具体是关于doctype的无效语法问题。首先，我得回忆一下HTML的基本结构和常见的doctype声明格式。 用户提到的错误是“doctype ...
!DOCTYPE HTML
qq_27891995的博客
03-04 669
&amp;amp;amp;amp;amp;lt;!-- &amp;amp;amp;amp;amp;lt;!DOCTYPE HTML&amp;amp;amp;amp;amp;gt; --&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;gt; &
HTML网页 ＜!DOCTYPE＞详解
aaistudy的博客
10-23 2069
//文档类型声明（浏览器并不只支持 HTML，还支持 XML 类型的文档;对 HTML 文件来说，浏览器使用文件开头的 DOCTYPE 来决定使用怪异模式处理或标准模式处理)。
HTML零基础教学（REAL）
MeyrlNotFound的博客
12-12 1548
一种超文本标记语言: HyperText Markup Language常见误区：HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML文档的别名web 页面HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容。
<!doctype html>是什么
最新发布
09-12
<think> 首先，用户的问题是：“我想了解<!doctype html>的含义 请问<!doctype html>的含义解释”。这是一个直接的询问，要求解释<!doctype html>的含义。 回顾系统级指令： - 所有行内数学表达式必须使用$...$格式，但这里没有数学内容，所以不需要。 - 独立公式使用$$...$$，但同样，没有数学内容。 - LaTeX语法正确：不适用。 - 使用中文回答：必须用中文。 - 生成相关问题：指令要求生成相关问题。 - 添加引用标识：在回答中引用的段落末尾自然地添加引用标识。 用户提供了引用[1]到[5]，我需要参考这些引用来回答问题。引用内容都与<!DOCTYPE html>相关。 关键点提取： - 引用[1]：<!DOCTYPE html>确保浏览器以标准模式解析和渲染页面，提高兼容性、可维护性。 - 引用[2]：它是HTML5标准网页的声明，指明采用W3C标准；作用是告知浏览器HTML版本，开启标准模式；确保在所有浏览器中一致显示。 - 引用[3]：声明HTML版本，确保向后兼容性；例如<!DOCTYPE html>用于HTML5。 - 引用[4]：提供了不同DOCTYPE的例子，如XHTML的版本。 - 引用[5]：展示了在HTML代码中的使用例子。 用户的问题集中在含义上，所以我需要解释<!doctype html>是什么、为什么使用它、以及它的作用。 结构化回答： 1. **介绍**：简要解释<!doctype html>是什么。 - 它是HTML文档类型声明，用于HTML5。 - 目的：指定文档使用的HTML版本。 2. **核心含义和作用**： - 确保浏览器以标准模式渲染页面，而不是怪异模式（quirks mode）。 - 提高兼容性：减少浏览器差异，确保一致性。 - 向后兼容性：即使在旧浏览器中，也能正确处理新特性。 - 基于W3C标准。 3. **位置和使用**： - 必须在HTML文档的第一行，在<html>标签之前。 - 写法：<!DOCTYPE html>（不区分大小写）。 4. **益处**： - 提高页面可维护性。 - 支持现代网页特性。 5. **相关引用**：自然地融入引用内容，并添加引用标识如[^1]。 生成相关问题： - 指令要求：在回答结束后，生成相关问题。 - 示例中使用了“§§相关问题§§”部分。 - 相关问题应围绕主题展开，比如： - 如何正确使用<!DOCTYPE html>？ - 不同DOCTYPE的区别？ - 为什么<!DOCTYPE html>能提高兼容性？ - 历史演变或与其他版本比较。 完整回答结构： 1. 开头：直接回答含义。 2. 主体结构化：分点解释（保持段落清晰）。 3. 结束：总结。 4. 相关问题部分。 使用中文回答： - 整个回答用中文撰写。 引用标识： - 在引用的句子末尾添加[^1], [^2]等。 - 例如，引用[1]的内容：...提高网页的兼容性[^1]。 确保引用准确： - 引用[1]：提高兼容性、可维护性。 - 引用[2]：含义、作用、位置。 - 引用[3]：向后兼容性。 - 引用[4]：其他DOCTYPE的例子，但焦点在HTML5。 - 引用[5]：使用例子，但含义相关较少。 用户的问题指定了“<!doctype html>”，所以重点在HTML5的DOCTYPE。 </think> ### <!DOCTYPE html> 的含义解释 `<!DOCTYPE html>` 是 HTML5 文档的类型声明（Document Type Declaration），它是 HTML 文档的第一行代码，必须在 `<html>` 标签之前出现。这个声明的作用是告知浏览器使用哪个 HTML 版本来解析和渲染页面，确保浏览器以“标准模式”而非“怪异模式”处理代码。以下是其核心含义和作用的详细解释： 1. **指定 HTML 版本**： - `<!DOCTYPE html>` 明确声明文档遵循 HTML5 标准，基于 W3C（万维网联盟）规范[^2]。这避免了浏览器因猜测版本而导致的解析错误，例如在旧版 HTML 或 XHTML 中，浏览器可能会切换到兼容模式，引发不一致的渲染结果。 2. **启用标准模式渲染**： - 当浏览器检测到 `<!DOCTYPE html>` 时，它会强制使用标准模式（standards mode），这意味着页面将严格按照 W3C 标准解析 CSS 和 JavaScript，确保布局、样式和行为在不同浏览器（如 Chrome、Firefox、Safari）中保持一致[^1][^2]。例如，如果没有此声明，旧版浏览器可能以怪异模式渲染页面，导致元素尺寸计算错误或布局错乱。 3. **提高兼容性与可维护性**： - 通过声明 HTML5 版本，`<!DOCTYPE html>` 增强了页面的向后兼容性：即使在旧浏览器中，也能更好地支持 HTML5 新特性（如语义标签），同时减少浏览器差异带来的问题[^1][^3]。这降低了开发维护成本，因为开发者不需编写大量兼容性代码[^1]。 4. **优化性能和安全性**： - 标准模式加速了页面渲染，并支持现代特性（如响应式设计）。此外，它有助于避免安全风险，因为怪异模式可能允许某些不规范的脚本执行[^2]。 5. **语法简洁**： - 与历史版本（如 XHTML 的复杂声明）相比，HTML5 的 `<!DOCTYPE html>` 设计简洁，不区分大小写（如 `<!doctype html>` 也有效），易于编写和记忆[^2][^4]。它在 HTML 文档中的位置固定： ```html <!DOCTYPE html> <html> <head>...</head> <body>...</body> </html> ``` 总之，`<!DOCTYPE html>` 是现代网页开发的基石，它通过标准化渲染确保了跨浏览器一致性、兼容性和性能优化[^1][^2][^3]。在实际项目中，始终将其置于文档开头，是遵循最佳实践的关键一步。 ### 相关问题 1. 如何在 HTML 文档中正确使用 `<!DOCTYPE html>` 来避免常见错误？ 2. `<!DOCTYPE html>` 与旧版 HTML4 或 XHTML 的 DOCTYPE 声明有什么主要区别？ 3. 为什么 `<!DOCTYPE html>` 能显著提高网页的跨浏览器兼容性？ [^1]: 引用[1]: ＜!DOCTYPE html＞ 标签详解。<!DOCTYPE html> 是一个非常重要的 HTML 声明，它确保浏览器以标准模式解析和渲染页面...。 [^2]: 引用[2]: ＜!DOCTYPE HTML＞(HTML 5)。它是用来告知 Web 浏览器页面使用了哪种 HTML 版本...。 [^3]: 引用[3]: 学习前端之HTML5中的`＜!DOCTYPE＞`声明有什么意义。通过声明HTML版本，可以帮助浏览器正确地解析页面...。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值