doctype html css,为什么使用<!DOCTYPE html>就可以，正确使用DOCTYPE

最新推荐文章于 2021-06-30 02:43:22 发布
最新推荐文章于 2021-06-30 02:43:22 发布
阅读量186 收藏
点赞数
文章标签： doctype html css

ccb695384879e0100a33944f82cbb37e.gifd25ce40caa648ca3824cb72a2598bcac.gif

在XHTML Strict DTD声明的html中出现th标签属性width时，则会出现警告信息(如下图)，改成transitional dta就不会出现警告

f3b5c653382ea9c2c5321e7dfe999862.png

Doctype起啥作用?

上面也提到，Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，上文说到的DOCTYPE组成中的第5部分所引入的dtd文件则包含了标记、attributes 、properties、约束规则。除此外，Doctype还会对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析，所以Doctype是非常关键的，尤其是在 IE 系列浏览器中，由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。

两种渲染模式：BackCompat：标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

CSS1Compat：标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

长话短说两种渲染模式的由来，很久以前W3C标准没出现的时候，江湖很混乱，页面上根本就没有doctype这个东西，乱世出英雄啊，w3c标准出现后页面上就有了doctype，为了照顾老前辈的页面(没有doctype或使用HTML4以下[不包括HTML4]的DTD声明)，怪异模式就出现了，保证古董页面能正常显示；江湖统一之后，大家都开始使用w3c标准，这就是标准模式。

测试ie 8、 ff10、 chrome16的渲染模式，测试文档如下：(只是给予直观感受，并非全面周到的测试)

17896c310ee3d3fe2a13c56df33d6b12.gif

表中提到了“近似标准模式”近似标准模式(Almost Standards Mode)从字面意思上看与标准模式非常类似，但确实有小的差别。主要体现在对于表格单元格内垂直方向布局渲染差异。IE8 开始、Firefox、Chrome、Safari、Opera 7.5 开始，这些浏览器的标准模式更加严格的遵循了 CSS2.1 规范，故对于在目前看来不太“标准”的以前的标准模式，被赋予了“近似标准模式”的名字。但是在较早的 IE6 IE7 以及 Opera 7.5 之前版本中，浏览器无法严格遵循 CSS2.1 规范，故对于它们来说没有这个近似标准模式，也可以理解为它们的近似标准模式就是标准模式。

至于如何选择，参考表格自然明白，不用废话了！

参考资料很重要！！

来源：via

Mustafa先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html基本语法
qq_45624490的博客
02-13 675
html基本语法 html概述 ●HTML 指的是超文本标记语言 (HyperText Markup Language)。 超文本:是指页面内可以包含图片、链接、声音,视频等内容 标记:标签(通过标记符号来告诉浏览器网页内容该如何显示) <!-- ctrl+shift+/生成注释 声明html语言的版本，主要是告诉浏览器，使用的是html的哪一个版本为标准来解析网页 !DOCTYPE html <-- html5 --> <!DOCTYPE html>
html基础
qq_50452445的博客
07-06 3190
HTML 的全称为超文本标记语言, 是一种标记语言。主要用来为文本添加语义。 注释 基本标签 h p img src: “图片的 URL”alt: “图像显示出错的替代文本”width: “图像宽度”height: “图像高度”注意点:​ 1.默认显示图像正常宽高​ 2.图像只设置宽度,高度自适应​ 3.图像只设置高度,宽度自适应​ 4.图像同时设置宽和高, 可能会导致图像变形 a href: “链接指向的页面 URL”target: “新页面打开方式” base target: “所有页面打开方
选择正确DOCTYPE解决CSS在网页失效问题
09-27
网页制作Webjx文章简介：如果你的CSS都是正确的，链接也没有出错的话，为什么偏偏CSS样式不生效呢？你也许正在为这个事而焦头烂额，呵呵，不要气馁，我以前也被这个事弄得头大过。这时你需要检查你的网页最头部是否有如下一句话了？
使用CSS时的DOCTYPE选择
SayGoodbyeToYou的专栏
06-16 828
语法： HTML  顶级元素  可用性 "注册//组织//类型 标签//定义  语言""URL" 可能值： - 顶级元素：指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。 - 可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源，如本地文件或 URL
前端面试题HTML+CSS基础篇——Doctype
xiaomao_wxj的博客
08-09 254
Doctype <!DOCTYPE>不属于HTML标签，所有浏览器都支持Doctype 1. Doctype的使用 声明必须是 HTML 文档的第一行，位于 标签之前。 <!DOCTYPE> 没有结束标签，不区分大小写 2. Doctype的作用 Doctype声明于文档的最前面，告诉浏览器是以何种方式来渲染页面 页面的渲染方式分为两种：严格模式和混杂模式 <!DOCTYPE html> <html> <head> <title>文
doctype html css,选择合适的Doctype 解决CSS失效
weixin_30577815的博客
06-15 260
在HTML中假设不运用或增多DOCTYPE标签，整个HTMLCSS将会失效。假定你的CSS都是正确的，链接也没有蜕化的话，为什么正好CSS样式不生效呢？你大约正在为这个事而焦头烂额，呵呵，不要消极，我曩昔也被这个事弄得头大过。这时候你需要检查你的网页最头部能否有以下一句话了？有的朋侪或许会说，以前我新建网页后都把它去掉了，没用。此刻我要演讲你，这类做法是过错的！那末，这句话终于是什么含义，又有哪...
文档声明<!DOCTYPE html>对css的影响
tjmljw的专栏
03-05 326
用php做了一个网页，和Java的代码基本完全一致，可显示效果却差别很大。 具体表现是： Java版的页面中的body和div使用了css，在css中设置了height:100%，但页面高度并没有充满全屏。 php版的页面是从Java版本拷贝做成的，但是php版本的页面高度却是充满全屏的。   找到了问题的原因，没错，就是文档声明部分不同而已。 Java版本的是 &lt;!DOC...
为什么使用DOCTYPE HTML
12-08
通过了解和正确使用DOCTYPE HTML，开发者能够确保他们的网页在各种浏览器上具有一致的显示效果，提高用户体验，并减少潜在的技术问题。对于那些需要处理大量历史代码或者需要兼容旧版浏览器的开发者来说，理解...
HTML ＜!DOCTYPE＞ 声明：定义文档类型
deadray的博客
05-30 894
示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 这是一个HTML5页面 </body> </html> 标签定义及使用说明： <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html&gt
第1天:选择什么样的DOCTYPE
_FINEFLY_
11-11 943
前言大家好！这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。好了，让我们开始吧第一天开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码，可以看到第一行就是： 打开一些符合标准的站点，例如著名web设计软件
html中doctype标签的作用,HTML中<!DOCTYPE> 标签的用法
weixin_33694391的博客
06-30 117
HTML中 标签的用法发布时间：2020-11-06 14:31:05来源：亿速云阅读：96作者：小新这篇文章主要介绍HTML中 标签的用法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！所有浏览器都支持 声明。定义和用法 声明必须是 HTML 文档的第一行，位于 标签之前。(推荐学习：HTML入门教程) 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个...
关于 DOCTYPE HTML 的详细写法
oLiuXiaoXi的博客
10-11 658
HTML <!DOCTYPE> 标签的意图是告诉浏览器 获取本文档应该使用的html或xhtml规范。 有过渡型（Transitional ）、严格型（Strict ）、框架型（Frameset ） 具体的写法和其他的要点可以点下边连接详细看。 https://www.w3school.com.cn/tags/tag_doctype.asp ...
!DOCTYPE html 的作用
态度决定一切
06-04 1万+
1.定义：DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器； 2.作用： 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 document.compatMode： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。 ...
<!DOCTYPE html>很重要
愤怒的coder
12-31 1047
噩梦开始的源头：之前写html或者jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。直到最近碰到了一个非常奇葩的bug：某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，各种log，终于在httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了&lt;!DOCTYPE html&gt;,果然奏效了。 ...
jsp页面的css加载不出来是因为＜!DOCTYPE html＞惹的祸?（哪里有bug我来踩）
weixin_45637920的博客
11-05 2935
踩bug使我快落，今天在学习smbms管理系统的时候手贱啊，问题解决就很明朗！！ 首先要对<!DOCTYPE html>要有一定的认识，积累多多总有好处！ 那么我来讲一下今天我遇到的问题，因为一开始对于jsp加这个有点不太了解，所以总认为是这个<!DOCTYPE html>的错误，但是很庆幸自己从这个认知里面走出来。 真实问题是： 过滤器导致的对text/html的全局设置，改变了所有的contentType，包括css的，这样就发生问题了。 问题详解： chrome浏览器的.
django加载html5 !DOCTYPE html 的css不生效
qq_27361945的博客
03-28 4509
django加载html5（&lt;!DOCTYPE html&gt;）的css不生效         html5是规范前...
HTML中 !DOCTYPE 的解释与作用
热门推荐
UaoSonic
03-31 1万+
    最近在练习html和css练习题时，会发现有很多细节性的东西，以前都没有注意到，虽然会敲代码，但是理论性的知识掌握得不牢固，所以重新学习了一下以前因为急于求成忽略的一些东西。    &lt;!DOCTYPE&gt;标签    这个虽然每次都会写到，写在html文档的第一行，但平时并没有深究过。    在w3school上是这么解释的：&lt;!DOCTYPE&gt;声明不是HTML标签，指...
<!DOCTYPE html> <html> <head> <title>Display YAML</title> <style>{{ css }}</style> </head> <body> <h1>YAML Data:</h1> <pre>{{ highlighted_data|safe }}</pre> </body> </html>
最新发布
07-25
<style>{{ css }}</style> <script> function openDialog() { // 弹出窗口的逻辑 alert("弹出窗口"); } </script> </head> <body> <h1>YAML Data:</h1> <pre>{{ highlighted_data|safe }}</pre> <button ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值