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

<!DOCTYPE html>的作用是什么

一、背景

从今天开始会不定时的发布一些前端的常见面试题,供大家参考。今天要发布的内容是关于html的面试题的作用是什么。接下来就一起讨论以下吧

二、概念

DOCTYPE 是html5中一种标准通用标记语言的文档类型的声明,它的目的就是为了告诉浏览器应该以什么样的文档类型定义来解析文档。不是一个html标签,二是一个指令,负责告诉浏览器页面使用哪个html版本来编写。

三、主要作用

1、启用浏览器的标准模式或者怪异模式
2、用来告诉浏览器应该使用哪种HTML版本来解析文档。这声明对于确保在不同浏览器中的正确显示和行为具有至关重要的作用。DOCTYPE 声明位于HTML 档的最顶部,是文档的第一行。
1)CSS1Compat(标准模式):浏览器按照 W3C的标准严格解析代码,的显示效果和性能表现更加符合现代web标准。例如:语雀官网的文档类型就是 CSS1Compat
2)BackCompat(怪异模式):假如文档缺少DOCTYPE 或使错误的 DOCTYPE ,浏览器就可能采这种模式,可能不会按照开发者的预期渲染。
不同的渲染模式会影响浏览器对 CSS 代码甚⾄JavaScript 脚本的解析。
正确的 DOCTYPE 声明是现代 web 开发的基础,有助于:

  • 提高页面的兼容性,确保在不同的浏览器和设备上都能正常显示。
  • 减少调试和维护的时间,避免因浏览器解析差异导致的多数常见问题。

四、深挖

首先我们来看一下这个声明的由来,mdn描述:

在很久以前的网络上,页面通常有两种版本:为网景(Netscape)的 Navigator 准备的版本,以及为微软(Microsoft)的 Internet Explorer 准备的版本。当 W3C 创立网络标准后,为了不破坏当时既有的网站,浏览器不能直接弃用这些标准。因此,浏览器采用了两种模式,用以把能符合新规范的网站和老旧网站区分开。

目前浏览器的排版引擎使用三种模式:怪异模式(Quirks mode)、接近标准模式(Almost standards mode)、以及标准模式(Standards mode)。

那么浏览器是如何去选择使用哪种模式的呢?

对 HTML 文件来说,浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。
然而目前 唯一的作用是启用标准模式。

五、总结

综上我们可以总结一下哈,那就是主要的作用就是通过声明的方式告知浏览器应该选用哪种模式进行解析html,css等代码,目前浏览器的排版引擎使用三种模式:怪异模式、接近标准模式、以及标准模式。如果不声明的话,浏览器就会默认使用怪异模式来解析,这可能和开发者的预期不符。所以,正确的 DOCTYPE 声明是现代 web 开发的基础,这有助于提高页面的兼容性,确保在不同的浏览器和设备上都能正常显示,也能减少调试和维护的时间。

六、结语

今天的面试题就分享到这里,今后还会有其他关于前端面试的面试题,想要快速找到这个专栏,可以进入我的社区,社区中的面试题专栏,会持续更新面试题,感谢大家的耐心阅读,希望这篇文章能给您带来一些启发和帮助。如果您有任何疑问或建议,请随时在评论区留言,我会尽快回复。如果您觉得这篇文章还不错,请点赞、分享给更多的朋友吧!同时,也欢迎关注我的博客,获取更多精彩内容。

相关文章:

<!DOCTYPE html>的作用是什么

一、背景 从今天开始会不定时的发布一些前端的常见面试题,供大家参考。今天要发布的内容是关于html的面试题的作用是什么。接下来就一起讨论以下吧 二、概念 DOCTYPE 是html5中一种标准通用标记语言的文档类型的声明,它的目的就是为了告诉浏览器应该以…...

EasyExcel改名为FastExce做了那些改变呢

回到:github原作者地址:https://github.com/CodePhiliaX/fastexcel 中文 |English | 什么是 FastExcel FastExcel 是由原 EasyExcel 作者创建的新项目。2023 年我已从阿里离职,近期阿里宣布停止更新 EasyExcel,作者他本人决定继…...

狗狗的生育周期:关注与呵护

狗狗的繁殖是一个复杂且需要谨慎对待的过程,了解其生产周期对于宠物主人以及从事相关行业的人员至关重要。 一般而言,狗狗的怀孕周期约为两个月左右,但这并非绝对固定。从受孕到分娩,通常在 58 至 65 天之间波动。小型犬可能相对…...

ABAP DIALOG屏幕编程2

在上一篇博客ABAP DIALOG屏幕编程1中阐述了DIALOG、PBO、PAI的概念并且对常用页面元素怎么用进行了演示。在这一篇博文中会讲述怎么添加下拉框、搜索帮助,怎么创建表控件、屏幕跳转等。会用到上一篇里面的内容。 有关程序包含文件结构如下。 一、响应用户指令 如上…...

获取缓存大小与清除 Web 缓存 - 鸿蒙 HarmonyOS Next

针对浏览器 Web 组件清除缓存相关,具体实现如下 code 实例所示: /*公共方法类*/ export class PublicUtils {/*获取缓存大小*/static async getCacheSize(): Promise<number> {try {let bundleStats await storageStatistics.getCurrentBundleStats()let size bundleS…...

在Unreal Engine中,UHT与反射机制

UHT&#xff08;Unreal Header Tool&#xff09; 是虚幻引擎&#xff08;Unreal Engine&#xff09;中的一个重要工具&#xff0c;它用于处理和生成引擎所需的元数据&#xff0c;使得虚幻引擎能够执行许多复杂的功能&#xff0c;如反射、序列化、蓝图交互、垃圾回收等。简而言之…...

SQL项目实战与综合应用——项目设计与需求分析

项目设计与需求分析是软件开发过程中的核心环节&#xff0c;尤其在涉及数据库的应用时&#xff0c;良好的设计将直接影响到项目的可扩展性、性能和维护性。本文将深入探讨数据库设计的最佳实践&#xff0c;结合 C 与 SQL 的实际应用场景&#xff0c;涵盖项目需求收集、数据库设…...

分布式中的CAP定理和BASE理论与强弱一致性

分布式中的CAP定理和BASE理论与强弱一致性 CAP定理 CAP定理&#xff0c;也称为布鲁尔定理&#xff08;Brewer’s Theorem&#xff09;&#xff0c;是由加州大学伯克利分校的Eric Brewer教授在2000年提出的&#xff0c;并由麻省理工学院的Seth Gilbert和Nancy Lynch于2002年正…...

C/C++常见符号与运算符

C/C常见符号与运算符对照表 符号用法与意义与Java类比:在条件运算符中 (cond ? x : y) 表示条件为假的分支&#xff1b;在 switch-case 中如 case 1:表示标签结束点&#xff1b;在自定义标签如 label: 中用于 goto 跳转Java中? :三元运算相同&#xff1b;switch-case中也有:…...

了解 k8s 网络基础知识

了解 Docker 网络模式 在使用 Docker run 创建 Docker 容器时&#xff0c;可以使用 --net 选项指定容器的网络模式&#xff0c;Docker 可以有4种网络模式。 host 模式。–nethost 指定和宿主机共用一个 NetWork Namespace&#xff0c;容器中的网络环境&#xff08;ip 地址、路…...

用户信息界面按钮禁用+发送消息功能

用户信息界面按钮禁用发送消息功能 前言 那么在上一集我们就完成了个人信息窗口所有的内容的修改&#xff0c;那么我们就需要进一步来看我们别的用户的信息界面的窗口。 需求分析 在之前的我们也讲了用户信息界面窗口一共有下图几种组件。 用户头像、用户id、用户昵称、用户…...

接近开关传感器-PCB线图电感式传感器【衰减系数1】

设计和工作原理 衰减系数为1的传感器是在电感式接近开关的基础上装备了特殊的振荡器。传感器内部有两个耦合空心线圈&#xff0c;能够保证根据不同的金属特性作合适的检测调整。无需考虑目标物是不同的金属&#xff0c;因为传感器能在同一感应距离下检测所有金属。 衰减系数为…...

C/C++流星雨

系列文章 序号直达链接1C/C爱心代码2C/C跳动的爱心3C/C李峋同款跳动的爱心代码4C/C满屏飘字表白代码5C/C大雪纷飞代码6C/C烟花代码7C/C黑客帝国同款字母雨8C/C樱花树代码9C/C奥特曼代码10C/C精美圣诞树11C/C俄罗斯方块12C/C贪吃蛇13C/C孤单又灿烂的神-鬼怪14C/C闪烁的爱心15C/C…...

计算机网络:传输层、应用层、网络安全、视频/音频/无线网络、下一代因特网

目录 &#xff08;五&#xff09;传输层 1&#xff0e;传输层寻址与端口 2&#xff0e;无连接服务与面向连接服务 3. 传输连接的建立与释放 4. UDP 的优点 5. UDP 和 TCP 报文段报头格式 6. TCP 的流量控制 7&#xff0e;TCP 的拥塞控制 8. TCP 传送连接的管理 &#…...

[漏洞挖掘与防护] 05.CVE-2018-12613:phpMyAdmin 4.8.1后台文件包含缺陷复现及防御措施

这是作者新开的一个专栏——“漏洞挖掘与防护”,前期会复现各种经典和最新漏洞,并总结防护技巧;后期尝试从零学习漏洞挖掘技术,包括Web漏洞和二进制及IOT相关漏洞,以及Fuzzing技术。新的征程,新的开启,漫漫长征路,偏向虎山行。享受过程,感谢您的陪伴,一起加油~ 欢迎关…...

GroundingDINO微调训练_训练日志解释

文章目录 1. 训练日志1. Epoch 和 Iteration2. Learning Rate&#xff08;学习率&#xff09;3. ETA&#xff08;预计剩余时间&#xff09;4. Time 和 Data Time5. Memory6. Gradient Norm&#xff08;梯度范数&#xff09;7. Loss&#xff08;损失&#xff09;8. Individual L…...

【0362】Postgres内核 XLogReaderState readBuf 有完整 XLOG page header 信息 ? ( 7 )

上一篇: 【0361】Postgres内核 page_read 读取所请求数据长度(至少 short page header)( 6 ) 文章目录 1. 检查 page_read 返回值 readLen2. 根据 readBuf 计算 XLogPageHeader 大小2.1 验证 XLOG Page header2.2 更新 XLogReaderState 读取状态信息1. 检查 page_read 返回…...

H5接入Steam 获取用户数据案例 使用 OpenID 登录绑定公司APP账户 steam公开用户信息获取 steam webapi文档使用

官方文档地址 1.注册 Steam API Key&#xff1a; 你需要一个 Steam Web API Key&#xff0c;可以在 Steam API Key 页面 获取。https://steamcommunity.com/dev/apikey 这里开发做demo用自己steam账户的就好&#xff0c;后续上线要用公司的账户 2.使用 OpenID 登录&#xff…...

pytorch多GPU训练教程

pytorch多GPU训练教程 文章目录 pytorch多GPU训练教程1. Torch 的两种并行化模型封装1.1 DataParallel1.2 DistributedDataParallel 2. 多GPU训练的三种架构组织方式2.2 数据不拆分&#xff0c;模型拆分&#xff08;Model Parallelism&#xff09;2.3 数据拆分&#xff0c;模型…...

力扣--LCR 178.训练计划VI

题目 教学过程中&#xff0c;教练示范一次&#xff0c;学员跟做三次。该过程被混乱剪辑后&#xff0c;记录于数组 actions&#xff0c;其中 actions[i] 表示做出该动作的人员编号。请返回教练的编号。 示例 1&#xff1a; 输入&#xff1a;actions [5, 7, 5, 5] 输出&#…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

表单设计器拖拽对象时添加属性

背景&#xff1a;因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...

第14节 Node.js 全局对象

JavaScript 中有一个特殊的对象&#xff0c;称为全局对象&#xff08;Global Object&#xff09;&#xff0c;它及其所有属性都可以在程序的任何地方访问&#xff0c;即全局变量。 在浏览器 JavaScript 中&#xff0c;通常 window 是全局对象&#xff0c; 而 Node.js 中的全局…...