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

news2024/12/23 15:40:38

前言

持续学习总结输出中,今天分享的是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。

最后分享一句话:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1180287.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL的高阶语句

数据库的权限一般很小&#xff0c;工作中使用最多的场景就是查 排序、分组、子查询、视图、多表连接查询&#xff08;左连接、右连接、内连接&#xff09; create TABLE info ( id int(4) primary key, NAME varchar(5) not null, score decimal(5,2), address varchar(20)…

Django实战项目-学习任务系统-发送短信通知

接着上期代码内容&#xff0c;继续完善优化系统功能。 本次增加发送短信通知功能&#xff0c;学习任务系统发布的任务&#xff0c;为了更加及时通知到学生用户&#xff0c;再原有发送邮件通知基础上&#xff0c;再加上手机短信通知功能。 第一步&#xff1a;开通短信通知服务…

JSP通用材料收集归档系统eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 通用材料收集归档系统是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c…

计算机服务器中了eking勒索病毒怎么办,勒索病毒解密,文件数据恢复

随着科技的不断发展&#xff0c;网络技术也得到了不断更新&#xff0c;极大地方便了人们的生产与生活&#xff0c;但随之而来的网络安全威胁也不断增加&#xff0c;近期&#xff0c;网络上的eking勒索病毒开始流行&#xff0c;它是phobos勒索家族中的一种病毒&#xff0c;具有较…

红黑树的性质和实现

红黑树 由于AVL树为了保持平衡需要经常旋转&#xff0c;开销是很大的。因此&#xff0c;红黑树比起AVL树放宽了平衡的限制。 概念 红黑树&#xff0c;在每个节点上增加一个存储位表示节点的颜色&#xff0c;可以是RED或BLACK。 通过对任何一条从根到叶子的路径上各个结点着…

EGpKa

利用数据增强的可解释图神经网络预测碳氢化合物的 pKa&#xff0c;原文 Explainable Graph Neural Networks with Data Augmentation for Predicting pKa of C–H Acids&#xff0c;代码在 DATA AND SOFTWARE AVAILABILITY。模型框架如下&#xff1a;

如何使用Linux DataEase数据可视化分析工具结合内网穿透实现远程办公

文章目录 前言1. 安装DataEase2. 本地访问测试3. 安装 cpolar内网穿透软件4. 配置DataEase公网访问地址5. 公网远程访问Data Ease6. 固定Data Ease公网地址 前言 DataEase 是开源的数据可视化分析工具&#xff0c;帮助用户快速分析数据并洞察业务趋势&#xff0c;从而实现业务…

git从入门到会用

git从入门到大牛 什么是git理解版本控制版本控制软件 远程仓库git安装windows 安装git 客户端安装下载客户端安装界面介绍 客户端操作仓库管理创建本地仓库切换本地仓库删除本地仓库 文件操作创建文件修改文件删除文件新增/修改/删除 标志 分支管理创建分支切换分支合并分支 标…

【嵌入式 C 常用算法 3 -- 非线性存储结构 二叉树】

文章目录 树概念介绍树相关术语结点子树结点的度结点的层次有序树和无序树森林空树&#xff08;简单了解即可&#xff09; 二叉树二叉树性质满二叉树完全二叉树 二叉树的深度遍历前序遍历中序遍历后续遍历 二叉树的层次遍历二叉树的顺序存储结构二叉树的顺序存储结构C代码实现 …

如何解决DC电源模块的电源噪声问题

BOSHIDA 如何解决DC电源模块的电源噪声问题 在电子设备的设计和制作过程中&#xff0c;电源噪声是一个非常重要的考虑因素。DC电源模块的电源噪声问题是电子设备中普遍存在的问题之一。它不仅会影响设备的性能&#xff0c;还会对设备的寿命和稳定性产生负面影响。因此&#xf…

第二证券:消费电子概念活跃,博硕科技“20cm”涨停,天龙股份斩获10连板

消费电子概念7日盘中再度拉升&#xff0c;到发稿&#xff0c;博硕科技“20cm”涨停&#xff0c;光大同创、波长光电涨超10%&#xff0c;易德龙、向阳科技、得润电子、天龙股份、同兴达等涨停。 博硕科技强势涨停&#xff0c;公司昨日在接受安排调研时表明&#xff0c;公司从上…

第二证券:炒股常识技巧大全?

炒股对许多出资者来说既是一种出资方式&#xff0c;也是一种兴趣。可是&#xff0c;关于初学者来说&#xff0c;炒股可能是一个充溢风险的国际。所以&#xff0c;了解一些炒股的常识技巧关于出资者的长时间成功至关重要。本文将从多个角度分析炒股的常识技巧。 首要&#xff0…

广域网加速的作用:企业为什么需要广域网加速?

由于局域网与广域网之间巨大的带宽鸿沟&#xff0c;通过增加带宽来满足膨胀的流量需求是不切实际的。 并且广域网带宽成本较高&#xff0c;增加广域网带宽对任何企业都意味着巨大的成本负担。这些使得控制 管理广域网带宽使用成为必需。 企业为什么要加速广域网? 对重要的企…

bilibili快速升满级(使用Docker 容器脚本)

部署bilibili升级运行容器脚本 docker run --name"bili" -v /bili/Logs:/app/Logs -e Ray_DailyTaskConfig__Cron"30 9 * * *" -e Ray_LiveLotteryTaskConfig__Cron"40 9 * * *" -e Ray_UnfollowBatchedTaskConfig__Cron"…

『MySQL快速上手』-②-数据库基础

文章目录 1.什么是数据库2.MySQL的基本使用2.1 MySQL的安装2.2 连接MySQL服务器2.3 服务器、数据库与表的关系2.4 使用案例 3.SQL语句分类4.存储引擎4.1 什么是存储引擎4.2 查看存储引擎 1.什么是数据库 存储数据用文件就可以了&#xff0c;为什么还要弄个数据库&#xff1f;文…

批量剪辑神器,专业又好用,支持一站式AI脚本创作、批量剪辑、矩阵分发……

越来越多短视频领域的小伙伴都用上了超级编导批量剪辑这款软件&#xff0c;这也是小编今天要推广给大家的一款批量剪辑工具。 超级编导问世两年多&#xff0c;吸取了同类软件的优点、并结合市场环境、用户反馈&#xff0c;弥补了其他软件的不足&#xff0c;能够一站式完成AI脚…

重写abp框架UserManager类

背景&#xff1a;用过abp框架的应该都知道&#xff0c;abp框架会封装一些成熟的类方法提供给使用者来使用&#xff0c;用来操作 一些内置的实体类&#xff08;类中一些字段设置为了protected internal&#xff09;&#xff0c;比如IdentityUser、IdentityRole等。但是这些封装的…

那些误导消费者的PoE交换机,你知道多少?

PoE交换机是一种具备供电功能的交换机&#xff0c;广泛运用于安保监控和无线覆盖领域&#xff0c;有效避免了对摄像头和无线AP进行繁琐的电源布线。通常来说&#xff0c;对于规模较大的无线覆盖和网络监控项目&#xff0c;大多数人会选择使用支持PoE的交换机。 自PoE供电技术问…

必看!2023年最新MSP开源应用程序指南电子书大揭秘

开源工具有利于节省成本、更好的技术和灵活性已经成为业界的共识。 在理想的世界中&#xff0c;我们用于工作的一切都可以是基于开源的。 但是在生产关键服务的实施和管理中&#xff0c;工程师和业务决策者必须有更好的决策方法来确定哪些工具可以适用于每个需求。 这并不表示…

A. Hit the Lottery

#include<bits/stdc.h> using namespace std; const int N1e55; int n,a[N],res; int main(){scanf("%d",&n);int an/100;n%100;int bn/20;n%20;int cn/10;n%10;int dn/5;n%5;int en;cout<<abcde;return 0; }