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

Quirks(怪癖）模式是什么？它和 Standards（标准）模式有什么区别?

news 2026/2/9 23:30:15

前言:

用法:

代码:

Quirks模式示例:

Standards模式示例:

理解:

Quirks模式：

Standards模式：

高质量讨论:

前言:

"Quirks模式"和"Standards模式"是与HTML文档渲染模式相关的两种模式。它们影响着浏览器如何解释和渲染HTML和CSS。理解它们之间的区别对于前端开发者和网页设计师来说是至关重要的。本文将深入讨论Quirks模式和Standards模式的区别，以及它们的用途和影响。

用法:

要理解Quirks模式和Standards模式，首先需要知道它们是如何触发的。这两种模式的触发方式是通过文档类型（DOCTYPE）声明来确定的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>示例文档</title></head><body><!-- 页面内容 --></body>
</html>

<!DOCTYPE> 声明指定了文档的类型和版本。不同类型的文档声明会触发不同的渲染模式。

代码:

Quirks模式示例:

如果没有指定文档类型或使用了旧的文档类型，浏览器将进入Quirks模式。这是一种兼容性模式，用于支持旧的HTML文档。

<!-- 没有指定文档类型，将触发Quirks模式 -->
<html><head><title>Quirks模式示例</title></head><body><!-- 页面内容 --></body>
</html>

Standards模式示例:

如果使用了现代的文档类型声明，浏览器将进入Standards模式。这是一种更严格的模式，用于支持HTML5和现代Web标准。

<!DOCTYPE html>
<html><head><title>Standards模式示例</title></head><body><!-- 页面内容 --></body>
</html>

理解:

Quirks模式：

Quirks模式是一种宽松的渲染模式，它是为了与旧版本的HTML文档兼容而设计的。在Quirks模式下，浏览器的行为可能会有一些怪异之处，与标准模式不同。以下是Quirks模式的一些特点：

怪癖盒模型： 在Quirks模式下，浏览器使用怪癖盒模型来计算元素的宽度和高度。这意味着边距和填充会影响元素的实际大小。
浮动和定位： 浮动和定位的行为在Quirks模式下与标准模式不同，可能导致页面布局问题。
垂直对齐： 垂直对齐可能不一致，可能需要额外的样式来修复。
默认字体： 浏览器可能使用不同的默认字体，导致文本呈现不同。

Standards模式：

Standards模式是一种更严格的渲染模式，它遵循HTML5和现代Web标准。在Standards模式下，浏览器按照标准规范解释和渲染HTML和CSS。以下是Standards模式的一些特点：

标准盒模型： 在Standards模式下，浏览器使用标准盒模型来计算元素的宽度和高度，边距和填充不会影响实际大小。
一致的浮动和定位： 浮动和定位的行为在Standards模式下更一致，更容易控制。
一致的垂直对齐： 垂直对齐行为更一致，不太可能出现不一致的问题。
一致的字体： 浏览器使用相同的默认字体，文本呈现更一致。

高质量讨论:

一篇高质量的文章应该深入讨论Quirks模式和Standards模式的区别，以及它们如何影响网页的渲染和布局。文章还应提供如何选择正确模式的实际建议，以及如何避免进入Quirks模式。此外，文章还应包括浏览器的兼容性和不同文档类型声明的示例。

讨论不同的HTML版本和文档类型声明对模式的影响也是一篇高质量文章的一部分。还可以讨论Quirks模式和Standards模式的历史和发展，以帮助读者更好地理解它们的来龙去脉。

最后，一篇高质量文章应该包括示例代码、图表和图像，以帮助读者更好地理解Quirks模式和Standards模式的区别。这将使文章更具吸引力和可理解性。

Quirks(怪癖）模式是什么？它和 Standards（标准）模式有什么区别?

目录前言: 用法: 代码: Quirks模式示例: Standards模式示例: 理解: Quirks模式： Standards模式： 高质量讨论: 前言: "Quirks模式"和"Standards模式"是与HTML文档渲染模式相关的两种模式。它们影响着浏览器如何解释和渲染HT…...

编程日记 2023/10/25 5:20:27

自然语言处理---Transformer模型

Transformer概述相比LSTM和GRU模型，Transformer模型有两个显著的优势： Transformer能够利用分布式GPU进行并行训练，提升模型训练效率。在分析预测更长的文本时，捕捉间隔较长的语义关联效果更好。 Transformer模型的作用基于seq…...

编程日记 2023/10/25 5:18:25

动画系统的前世今生（一）

掐指一算，五年没更新过我的CSDN账号啦，方向也从人工智能变成了计算机图形学，当然也依旧会关注AI的发展，之前在知乎上写了一些文章[传送门]，后续也会逐渐同步到CSDN上～ 这个系列将包含五篇文章，内…...

编程日记 2023/10/25 5:17:24

11 结构型模式- 代理模式

结构性模式一共包括七种： 代理模式、桥接模式、装饰者模式、适配器模式、门面(外观)模式、组合模式、和享元模式。 1 代理模式介绍软件开发中的代理： 代理模式中引入了一个新的代理对象,代理对象在客户端对象和目标对象之间起到了中介的作用,它去掉客…...

编程日记 2023/10/25 5:16:23

Unity--用户界面

目录 “使用工具栏”： “层次结构”窗口： 层次结构窗口制作子GameObject “游戏”视图： “场景视图“： ”项目窗口“： 项目窗口工具栏： "Inspector" 窗口： Inspector 游戏…...

编程日记 2023/10/25 5:15:21

BUUCTF 乌镇峰会种图 1

BUUCTF:https://buuoj.cn/challenges 题目描述： 乌镇互联网大会召开了，各国巨头汇聚一堂，他们的照片里隐藏着什么信息呢？（答案格式：flag｛答案｝，只需提交答案&#xff0…...

编程日记 2023/10/25 5:14:18

Runner GoUI自动化测试发布

构建自动化测试体系是当下每个项目团队愿意去做的，自动化测试减少重复操作节省人力成本。 RunnerGo UI自动化平台 RunnerGo提供从API管理到API性能再到可视化的API自动化、UI自动化测试功能模块，覆盖了整个产品测试周期。 RunnerGo UI自动化基于Selen…...

编程日记 2023/10/25 5:13:17

【Gensim概念】03/3 NLP玩转 word2vec

第三部分对象函数八 word2vec对象函数该对象本质上包含单词和嵌入之间的映射。训练后，可以直接使用它以各种方式查询这些嵌入。有关示例，请参阅模块级别文档字符串。类型 KeyedVectors 1） add_lifecycle_event(event_name, log_level2…...

编程日记 2023/10/25 5:11:15

【网络协议】聊聊网络路由相关算法

如何配置路由路由器是一台网络设备，多张网卡，当一个入口的网络包到达路由器时，会根据本地的信息库决定如何正确的转发流量，通常称为路由表路由表主要包含如下核心思想是根据目的 IP 地址来配置路由目的网络：要去…...

编程日记 2023/10/25 5:09:14

Python 深度学习入门之CNN

CNN 前言一、CNN简介1、简介2、结构二、CNN简介1、输出层2、卷积层3、池化层4、全连接层5、输出层前言 1024快乐！1024快乐！今天开新坑，学点深度学习相关的，说下比较火的CNN。一、CNN简介 1、简介 CNN的全称是Convolutiona…...

编程日记 2023/10/25 5:08:12

国产开发板上打造开源ThingsBoard工业网关--基于米尔芯驰MYD-JD9X开发板

本篇测评由面包板论坛的优秀测评者“JerryZhen”提供。本文将介绍基于米尔电子MYD-JD9X开发板打造成开源的Thingsboard网关。 Thingsboard网关是一个开源的软件网关，采用python作为开发语言，可以部署在任何支持 python 运行环境的主机上，灵…...

编程日记 2023/10/25 5:07:11

英语——语法——从句——名词性从句——笔记

文章目录名词性从句一、定义二、分类（一）宾语从句（二）主语从句（三）C同位语从句（四）D表语从句名词性从句一、句子成分简而言之，构成一个句子的成分（或要素…...

编程日记 2023/10/25 5:05:09

PROSTATEx-2 上前列腺癌的 3D CNN 分类

内容本文介绍了在多参数 MRI 序列上使用 3D CNN 对前列腺癌进行显着性或不显着性分类。内容如下：数据集描述Dicom 到 Nifti 文件格式的转换不同 MRI 序列的联合配准...

编程日记 2023/10/25 5:03:07

npm ERR! node-sass@6.0.1 postinstall: `node scripts/build.js`

1.遇到的问题 vue npm install提示以下错误 2.首次尝试方法尝试用下面的方式重新安装弄得-saas，结果不起作用。 npm config set sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass npm install node-sass 这时考虑降级node版本，node.js从…...

编程日记 2023/10/25 5:02:06

3D学习论文参考-ACCURATE EYE PUPIL LOCALIZATION USING HETEROGENEOUS CNN MODELS

以下是该文档的关键内容： 该论文提出了一种使用异构卷积神经网络（CNN）模型的精确眼睛瞳孔定位算法。这种算法可以抵抗光照、图像分辨率和眼镜佩戴等干扰条件，同时具有高准确性。该算法由两部分组成：一是找到近似眼睛区…...

编程日记 2023/10/25 5:01:04

迁移conda环境后，非root用户执行pip命令和jupyter命令报错/bad interpreter: Permission denied

移动conda环境，在移动的环境执行pip和jupyter 报错-bash: /data/home/用户名/anaconda3/envs/llm/bin/pip: /root/anaconda3/envs/llm/bin/python: bad interpreter: Permission denied 报错信息一、原因原因是当前的这个data/home/用户名/anaconda3/envs/环境名…...

编程日记 2023/10/25 4:59:01

虚拟机使用linux常用问题(虚拟机操作系统:ubuntu 22.04LTS)

1.虚拟机连接外网 ubuntu解决网络连接的解决方案 CentOS7联网问题解决明明连接好了但是没有网络的情况 2.虚拟机磁盘扩容相关博客利用gparted工具时,直接将unallocated空间的前一个位置的磁盘resize,将unallocated的空间全部覆盖 3.虚拟机与本机共享文件安装vmtools 设…...

编程日记 2023/10/25 4:57:59

编译原理-词法分析器

文章目录对于词法分析器的要求概念词法分析器的功能和输出形式词法分析器的设计词法分析器的结构单词符号的识别：超前搜索状态转换图正规表达式和有限自动机正规式和正规集确定有限自动机（DFA）非确定有限自动机（NFA&#xff09…...

编程日记 2023/10/25 4:53:52

Kafka与MySQL的组合使用

根据上面给出的student表，编写Python程序完成如下操作： （1）读取student表的数据内容，将其转为JSON格式，发送给Kafka； 创建Student表的SQL语句如下： create table student( sno ch…...

编程日记 2023/10/25 4:52:50

2018年亚太杯APMCM数学建模大赛A题老年人平衡能力的实时训练模型求解全过程文档及程序

2018年亚太杯APMCM数学建模大赛 A题老年人平衡能力的实时训练模型原题再现跌倒在老年人中很常见。跌倒可能会导致老年人出现许多并发症，因为他们的康复能力通常较差，因此副作用可能会使人衰弱，从而加速身体衰竭。此外，对跌倒…...

编程日记 2023/10/25 4:51:49

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

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

编程新知 2026/2/8 20:42:55

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...

编程新知 2026/2/6 23:56:39

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2026/1/31 11:58:35

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2026/2/9 4:13:22

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2026/1/23 10:10:53

Linux 中如何提取压缩文件？

Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...

编程新知 2026/2/1 5:38:25

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2026/1/28 4:50:33

前言:

用法:

代码:

Quirks模式示例:

Standards模式示例:

理解:

Quirks模式：

Standards模式：

高质量讨论:

相关文章：