当前位置： 首页 > news >正文

DOCTYPE是什么，有何作用、 使用方式、渲染模式、严格模式和怪异模式的区别？

news 2026/3/29 9:58:33

前言

持续学习总结输出中，今天分享的是DOCTYPE是什么，有何作用、 使用方式、渲染模式、严格模式和怪异模式的区别。

DOCTYPE是什么，有何作用？

DOCTYPE是HTML5的文档声明，通过它可以告诉浏览器，使用那个HTML版本标准解析文档。

在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。对不同的DOCTYPE类型，浏览器会使用不同的方法来解析。

如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？

此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。

使用方式

<!DOCTYPE html>

可以通过document.compatMode来获取文档使用的那种模式

document.compatMode // CSS1Compat

运行结果参考：
请添加图片描述

1、BackCompat：标准兼容模式未开启（或叫诡异模式[Quirks mode]、混杂模式）2、CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

HTML经历了很多版本，不同版本支持的HTML标签不同 ，文档声明也不相同，如：

<!DOCTYPE html> 是HTML5的的文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 是HTML4的文档声明

渲染模式

浏览器渲染模式分为3种：

  • 怪异模式(混杂模式 Quirks)
  • 严格模式（标准模式 Standards）
  • 几乎标准模式

之所以出现不同的渲染模式，主要是由历史原因造成的。
在w3c标准出来之前，浏览器对页面的渲染没有统一的规范，不同公司的浏览器的规范不同，所以程序员开发网页要做很多兼容。
w3c出来后，为了保证浏览器页面的兼容性，浏览器都保留了旧的渲染方法，于是就出现了混杂模式和标准模式，两种渲染方法共存于一个浏览器中，混杂模式服务于旧的规则，标准模式服务于w3c标准规则。

严格模式和怪异模式的区别

（以下说的是怪异模式里的行为，标准模式是不允许的）：

  • 盒模型的宽高包含内边距padding和边框border
    在w3c标准中，如果设置一个元素的宽高，指的是元素内容的宽高，不包含padding和border
  • 可以设置行内元素的高度
    而在标准模式下给 span等行内元素设置width和height都不会生效，而在怪异模式下会生效
  • 可以设置百分比的高度
    而在标准模式下，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
  • 用margin: 0 auto 设置水平居中在IE下会失效
    在标准模式下，使用margin: 0 auto 会使元素水平居中
  • 怪异模式下设置图片的padding会失效
  • 怪异模式下table的字体属性不能继承上层的设置
  • 怪异模式下white-space:pre 会失效

如何区分？

浏览器解析时用严格模式还是怪异模式，与网页中的DTD有关，而HTML5没有DTD，因此也就没有严格模式和怪异模式的区别，HTML5有相对宽松的语法，已经尽可能的实现了向后兼容。

总结

DOCTYPE赋予网页更好的意义和结构。构建了对程序、对用户都更有价值的数据驱动的Web。

最后分享一句话：

研究历史并不能告诉我们应该如何选择，但至少能给我们提供更多的选项。
《未来简史》

本次的分享就到这里了！！！

相关文章：

DOCTYPE是什么，有何作用、 使用方式、渲染模式、严格模式和怪异模式的区别？

前言 持续学习总结输出中&#xff0c;今天分享的是DOCTYPE是什么&#xff0c;有何作用、 使用方式、渲染模式、严格模式和怪异模式的区别。 DOCTYPE是什么&#xff0c;有何作用&#xff1f; DOCTYPE是HTML5的文档声明&#xff0c;通过它可以告诉浏览器&#xff0c;使用那个H…...

编程日记 2023/11/7 16:48:34

Go语言实现HTTP正向代理

文章目录 前言实现思路代码实现 前言 正向代理&#xff08;Forward Proxy&#xff09;是一种代理服务器的部署方式&#xff0c;它位于客户端和目标服务器之间&#xff0c;代表客户端向目标服务器发送请求。正向代理可以用来隐藏客户端的真实身份&#xff0c;以及在不同网络环境…...

编程日记 2023/11/7 16:47:32

第11章_数据处理之增删改

文章目录 1 插入数据1.1 实际问题1.2 方式 1&#xff1a;VALUES的方式添加1.3 方式2&#xff1a;将查询结果插入到表中演示代码 2 更新数据演示代码 3 删除数据演示代码 4 MySQL8新特性&#xff1a;计算列演示代码 5 综合案例课后练习 1 插入数据 1.1 实际问题 解决方式&#…...

编程日记 2023/11/7 16:46:31

数据时代的新引擎：数据治理与开发，揭秘数据领域的黄金机遇！

文章目录 一、数据时代的需求二、数据治理与开发三、案例分析四、黄金机遇《数据要素安全流通》《Python数据挖掘&#xff1a;入门、进阶与实用案例分析》《数据保护&#xff1a;工作负载的可恢复性 》《Data Mesh权威指南》《分布式统一大数据虚拟文件系统 Alluxio原理、技术与…...

编程日记 2023/11/7 16:44:28

使用 Golang 实现基于时间的一次性密码 TOTP

上篇文章详细讲解了一次性密码 OTP 相关的知识&#xff0c;基于时间的一次性密码 TOTP 是 OTP 的一种实现方式。这种方法的优点是不依赖网络&#xff0c;因此即使在没有网络的情况下&#xff0c;用户也可以生成密码。所以这种方式被许多流行的网站使用到双因子或多因子认证中&a…...

编程日记 2023/11/7 16:43:27

微服务之Nacos配置管理

文章目录 一、统一配置管理Nacos操作二、统一配置管理java操作1.引入依赖2.创建配置文件3.测试4.总结 三、Nacos配置自动更新1.添加注解RefreshScope2.使用ConfigurationProperties注解3.总结 四、Nacos多环境配置共享1.配置文件2.多种配置的优先级3.总结 一、统一配置管理Naco…...

编程日记 2023/11/7 16:41:25

PySpark 优雅的解决依赖包管理

背景 平台所有的Spark任务都是采用Spark on yarn cluster的模式进行任务提交的&#xff0c;driver和executor随机分配在集群的各个节点&#xff0c;pySpark 由于python语言的性质&#xff0c;所以pySpark项目的依赖注定不能像java/scala项目那样把依赖打进jar包中轻松解决问题…...

编程日记 2023/11/7 16:40:24

UNI-APP_获取手机品牌

在uni-app中&#xff0c;使用uni.getSystemInfoSync().brand可以获取设备的品牌信息。根据不同设备的品牌&#xff0c;uni.getSystemInfoSync().brand可能返回以下一些常见值 “Apple” - 苹果 “Samsung” - 三星 “Huawei” - 华为 “Xiaomi” - 小米 “OPPO” - OPPO “Vivo…...

编程日记 2023/11/7 16:39:23

新登录接口独立版变现宝升级版知识付费小程序-多领域素材资源知识变现营销系统

源码简介&#xff1a; 资源入口 点击进入 源码亲测无bug&#xff0c;含前后端源码&#xff0c;非线传&#xff0c;修复最新登录接口 梦想贩卖机升级版&#xff0c;变现宝吸取了资源变现类产品的很多优点&#xff0c;摒弃了那些无关紧要的东西&#xff0c;使本产品在运营和变现…...

编程日记 2023/11/7 16:38:22

「掌握创意，释放想象」——Photoshop 2023，你的无限可能！

Adobe Photoshop 2023(PS2023) 来了,全世界数以百万计的设计师、摄影师和艺术家使用 Photoshop 将不可能变为可能。从海报到包装&#xff0c;从基本的横幅到漂亮的网站&#xff0c;从令人难忘的徽标到引人注目的图标&#xff0c;Photoshop 2023让创意世界不断前进。借助直观的工…...

编程日记 2023/11/7 16:36:20

SQLSugar查询返回DataTable

SQLSugar是一个用于执行SQL查询的C#库&#xff0c;它提供了简单易用的API接口来执行SQL查询。要查询返回DataTable&#xff0c;可以使用SQLSugar的QueryHelper类。 以下是一个示例代码&#xff0c;展示了如何使用SQLSugar的QueryHelper类查询返回DataTable&#xff1a; 首先&…...

编程日记 2023/11/7 16:35:17

企业微信开启接收消息+验证URL有效性

企业微信开启接收消息验证URL有效性 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对…...

编程日记 2023/11/7 16:34:16

电脑访问不到在同网络的手机设备

手机连接了同网络的wifi&#xff0c;但是电脑ping不通手机的ip&#xff0c;这可能是路由出了问题&#xff0c;因为最终是走的mac地址&#xff0c;访问不了是因为电脑不知道手机的mac地址&#xff0c;则可以这样设置绑定mac地址&#xff0c;管理员权限启动cmd&#xff0c;然后执…...

编程日记 2023/11/7 16:33:15

国内MES系统应用研究报告：“企业MES应用现状”| 百世慧®

随着制造企业数字化转型需求的增强&#xff0c;工业软件的需求也不断被激发。 2022年&#xff0c;中国MES软件及服务市场规模实现23.8%的较高速增长。同时&#xff0c;随着工业互联网、MOM的兴起和不断发展&#xff0c;也推动着MES持续发展和不断迭代&#xff0c;如今MES向着更…...

编程日记 2023/11/7 16:32:13

C++模板元模板实战书籍讲解第一章题目讲解

目录 第一题 C代码示例 第二题 C代码示例 第三题 3.1 使用std::integral_constant模板类 3.2 使用std::conditional结合std::is_same判断 总结 第四题 C代码示例 第五题 C代码示例 第六题 C代码示例 第七题 C代码示例 总结 第一题 对于元函数来说&#xff0c;…...

编程日记 2023/11/7 16:31:10

Java在互联网网络安全中的应用（三）

目录 1. 互联网网络安全概述 2. Java的网络安全特性 3. 用Java加固网络应用 4. 安全传输 5. 安全框架和工具 6. 实际应用案例 7. 最佳实践和资源 目标 本次技术分享的目标是介绍Java技术在互联网网络安全中的应用&#xff0c;包括关键概念、最佳实践和实际案例。 1. 互…...

编程日记 2023/11/7 16:30:09

VMLogin如何解决跨境电商多账号管理难题？

做跨境电商的&#xff0c;比如亚马逊、eBay这些卖家。随着团队规模的扩大&#xff0c;或者多店铺运营&#xff0c;那么多个店铺多个账号管理就成为了一个困难。如何解决这个问题呢&#xff1f; 首先来看看很多电商卖家多账号管理会面临的问题 经营者通常需要同时管理多个市场…...

编程日记 2023/11/7 16:29:08

STM32创建工程步骤

以创建led工程为例&#xff1a; 新建一个led文件夹 新建一个以led命名的工程&#xff08;用keil_uVision5&#xff09;并添加三个组。 Library文件夹里放置库函数文件。 User&#xff1a; 点亮led灯的程序&#xff1b; 直接给寄存器赋值 调用库函数。 #include "stm…...

编程日记 2023/11/7 16:28:07

软考 系统架构设计师系列知识点之边缘计算（1）

所属章节&#xff1a; 第11章. 未来信息综合技术 第4节. 边缘计算概述 1. 边缘计算概念 在介绍边缘计算之前&#xff0c;有必要先介绍一下章鱼。章鱼就是用“边缘计算”来解决实际问题的。作为无脊椎动物中智商最高的一种动物&#xff0c;章鱼拥有巨量的神经元&#xff0c;但…...

编程日记 2023/11/7 16:26:04

vue:写一个数组box和list数组，在保留box数组中原有对象的同时，将list数组中每一个对象插入到box数组后面

前言&#xff1a;由于源码涉及到后端调用数据和一些无关的功能所以我就专门针对这个功能的代码&#xff0c;这样好方便理解。 1、在data中定义两个数组&#xff1a;box和list&#xff0c;并给它们初始化值 data() {return {box: [/*初始的box数组对象*/],list: [/*初始的list…...

编程日记 2023/11/7 16:25:03

STM32G474低功耗模式怎么选？一张图看懂睡眠、停止、待机模式区别与实战选型

STM32G474低功耗模式实战选型指南&#xff1a;从睡眠到待机的全场景决策框架 当你面对一块需要连续工作数月的电池供电设备时&#xff0c;每个微安培的电流都变得至关重要。STM32G474系列作为意法半导体针对高性能低功耗场景推出的微控制器&#xff0c;提供了从轻度睡眠到深度休…...

编程新知 2026/3/29 9:22:02

S2-Pro大模型CentOS 7生产环境部署全攻略：安全与高可用配置

S2-Pro大模型CentOS 7生产环境部署全攻略&#xff1a;安全与高可用配置 1. 前言&#xff1a;为什么需要生产级部署方案 当你第一次在测试环境跑通S2-Pro大模型时&#xff0c;那种兴奋感可能让你迫不及待想上线使用。但现实往往很骨感——测试环境能跑通&#xff0c;不代表生产…...

编程新知 2026/3/29 8:49:54

PP-DocLayoutV3惊艳案例：印章（seal）+ 页眉图片（header_image）+ 视觉脚注（vision_footnote）联合定位

PP-DocLayoutV3惊艳案例&#xff1a;印章&#xff08;seal&#xff09; 页眉图片&#xff08;header_image&#xff09; 视觉脚注&#xff08;vision_footnote&#xff09;联合定位 1. 引言&#xff1a;当文档布局分析遇到“硬骨头” 想象一下这个场景&#xff1a;你拿到一份…...

编程新知 2026/3/29 8:43:50

雪女-斗罗大陆-造相Z-Turbo社区实践：在CSDN分享自定义风格LoRA训练心得

雪女-斗罗大陆-造相Z-Turbo社区实践&#xff1a;在CSDN分享自定义风格LoRA训练心得 最近在CSDN社区看到不少朋友在讨论用AI模型生成特定风格的角色图&#xff0c;尤其是像“斗罗大陆”这类有大量粉丝基础的作品。大家普遍有个痛点&#xff1a;直接用通用模型生成&#xff0c;角…...

编程新知 2026/3/29 8:27:46

短视频创作者必备：Qwen3本地字幕生成工具，5步快速上手

短视频创作者必备&#xff1a;Qwen3本地字幕生成工具&#xff0c;5步快速上手 1. 引言&#xff1a;为什么需要本地字幕生成工具 作为短视频创作者&#xff0c;你是否经常遇到这样的困扰&#xff1a;剪辑完视频后&#xff0c;手动添加字幕耗时费力&#xff1b;使用在线工具又担…...

编程新知 2026/3/29 8:03:35

保姆级避坑指南：用Gromacs 2023版跑通蛋白质结合自由能伞形采样（附完整配置文件）

Gromacs 2023版蛋白质结合自由能伞形采样全流程避坑指南 第一次用Gromacs做伞形采样时&#xff0c;我对着报错信息熬了三个通宵。现在回想起来&#xff0c;90%的问题都源于教程没交代清楚的细节——比如gmx pdb2gmx处理多链蛋白时的选项差异&#xff0c;或是云计算平台提交任务…...

编程新知 2026/3/29 5:23:59

Windows Defender Remover：系统性能优化与防护机制管理指南

Windows Defender Remover&#xff1a;系统性能优化与防护机制管理指南 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_mirror…...

编程新知 2026/3/29 4:33:19

零代码实现YouTube视频翻译：Hugging Face大语言模型实战教程

零代码实现YouTube视频翻译&#xff1a;Hugging Face大语言模型实战教程 在全球化内容消费的今天&#xff0c;语言障碍成为许多人获取知识的隐形门槛。想象一下&#xff0c;当你发现一个精彩的英文技术讲座视频&#xff0c;却因为语言问题无法充分理解&#xff1b;或是需要将中…...

编程新知 2026/3/29 4:08:54

YOLOv8安全帽检测实战：如何用自定义数据集提升模型在复杂工地场景的识别率？

YOLOv8安全帽检测实战&#xff1a;从100张样本到工业级部署的优化全流程 在建筑工地、电力巡检等高危作业场景中&#xff0c;安全帽佩戴检测系统正逐渐从"可有可无"的辅助工具转变为"不可或缺"的合规刚需。但当我们把实验室里准确率90%的模型部署到真实工地…...

编程新知 2026/3/29 1:47:35

Qwen3-ASR-0.6B企业应用：呼叫中心实时转录+方言识别生产环境实践

Qwen3-ASR-0.6B企业应用&#xff1a;呼叫中心实时转录方言识别生产环境实践 1. 项目背景与价值 在现代企业客服场景中&#xff0c;语音通话仍然是客户沟通的主要方式。传统的呼叫中心面临着一个普遍痛点&#xff1a;大量通话内容需要人工记录和整理&#xff0c;不仅效率低下&…...

编程新知 2026/3/29 1:31:24