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

一文读懂大模型,彻底告别 AI 焦虑 | 零门槛

今天&#xff0c;不聊复杂代码、不晒专业论文&#xff0c;用最直白的语言&#xff0c;带非技术背景的你彻底读懂大模型&#xff1a;核心逻辑、实用场景、产品选型&#xff0c;以及普通人应对AI浪潮的正确姿势。全文干货密集&#xff0c;建议收藏转发&#xff0c;读完摆脱AI焦虑…...

Pixel Fashion Atelier保姆级教程:如何将生成结果无缝导入Aseprite进行二次编辑

Pixel Fashion Atelier保姆级教程&#xff1a;如何将生成结果无缝导入Aseprite进行二次编辑 1. 教程概述 Pixel Fashion Atelier是一款基于Stable Diffusion与Anything-v5的像素风格图像生成工具&#xff0c;特别适合创作复古RPG风格的时尚设计。本教程将手把手教你如何将生成…...

ROS2新手必看:用turtlesim小乌龟快速入门机器人仿真(附完整安装指南)

ROS2实战入门&#xff1a;从turtlesim小乌龟探索机器人仿真世界 引言&#xff1a;为什么选择turtlesim作为ROS2的起点&#xff1f; 在机器人操作系统(ROS)的学习道路上&#xff0c;很多开发者都会遇到一个共同的困境&#xff1a;理论概念抽象难懂&#xff0c;而直接上手复杂项…...

JeecgBoot低代码开发平台终极实战指南:从零开始构建企业级应用

JeecgBoot低代码开发平台终极实战指南&#xff1a;从零开始构建企业级应用 【免费下载链接】jeecg-boot jeecgboot/jeecg-boot 是一个基于 Spring Boot 的 Java 框架&#xff0c;用于快速开发企业级应用。适合在 Java 应用开发中使用&#xff0c;提高开发效率和代码质量。特点是…...

快速体验Qwen3-0.6B-FP8:无需下载模型,开箱即用的AI文本生成服务

快速体验Qwen3-0.6B-FP8&#xff1a;无需下载模型&#xff0c;开箱即用的AI文本生成服务 1. 为什么选择Qwen3-0.6B-FP8&#xff1f; Qwen3-0.6B-FP8是Qwen系列最新推出的轻量级语言模型&#xff0c;采用FP8量化技术大幅降低了显存需求。相比传统模型&#xff0c;它具有以下突…...

Qt实战:用QTreeWidget打造班级管理系统(含右键菜单完整源码)

Qt实战&#xff1a;用QTreeWidget构建高交互班级管理系统 在Qt框架中&#xff0c;QTreeWidget作为展示层级数据的利器&#xff0c;特别适合教育管理系统的开发需求。不同于简单的列表控件&#xff0c;树形结构能直观呈现班级、年级、学生等多级关系&#xff0c;配合右键菜单可实…...

Deepfake Offensive Toolkit实战:视频会议系统渗透测试案例

Deepfake Offensive Toolkit实战&#xff1a;视频会议系统渗透测试案例 【免费下载链接】dot The Deepfake Offensive Toolkit 项目地址: https://gitcode.com/gh_mirrors/dot/dot 想要了解如何利用深度伪造技术进行视频会议系统安全测试吗&#xff1f;Deepfake Offensi…...

避坑指南:SpringBoot整合Drools 7.20时热部署冲突的解决方案

SpringBoot与Drools 7.20热部署冲突深度排查指南 当SpringBoot的devtools热部署功能遇上Drools规则引擎&#xff0c;就像两个高效率的工人同时修改同一台机器——看似都能独立工作&#xff0c;组合时却可能引发难以察觉的运行时故障。本文将带您深入这个典型的技术冲突现场&…...

wan2.1-vae提示词评估体系:构建BLEU-Style指标量化中文提示词有效性

wan2.1-vae提示词评估体系&#xff1a;构建BLEU-Style指标量化中文提示词有效性 1. 为什么需要评估提示词质量 在AI图像生成领域&#xff0c;提示词的质量直接影响最终生成效果。好的提示词能准确表达创作意图&#xff0c;而模糊或不当的提示词可能导致生成结果与预期不符。特…...

pyqt使用QChartView绘制饼状图详解(QPieSeries)

pyqt使用QChartView绘制柱状图一、工程搭建二、QPieSeries详解1、核心概念2、主要功能和方法2.1、QPieSeries 的常用方法2.2、QPieSlice 的常用属性和方法3、关键点解释4、常见问题二、代码示例1、示例代码2、效果展示一、工程搭建 pyqt6QtCharts模块需要单独安装&#xff0c;…...