当前位置: 首页 > 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] 输出&#…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...