为什么要用!DOCTYPE声明

实例:

我们经常会看到类似这样的代码:

<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>

注解:可以看到最上面有一行关于“DOCTYPE”(文档类型)的声明,它就是告诉浏览器,使用哪种规范来解释这个文档中的规范。你知道如果没有它,浏览器在渲染页面的时候会使用怪异模式(各个浏览器在怪异模式下对各个元素渲染时有差异,因此会导致同一个样式在不同浏览器上看到的效果不同)。

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种:

<!DOCTYPE html>

HTML 元素和文档类型(Doctype)

请参阅这个 HTML 元素表,其中列出了每种元素会出现在哪个文档类型中。

提示和注释

注释:<!DOCTYPE> 声明没有结束标签。

提示:<!DOCTYPE> 声明对大小写不敏感。

提示:请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档!

常用的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型(例如提供对东亚语系的 ruby 支持)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

总结

(编写HTML时)声明文档类型:

<!DOCTYPE html>

这样声明的好处:

  • 你可以轻松的写下这个doctype,而不用担心会写错;
  • 它是向后兼容的(因为HTML5的doctype就是这样写的),并且现代浏览器都认识它。

疑问:没有指定dtd将会开启浏览器的怪异模式?

       这种说法是错的!正确的说法应该是没有定义doctype才会开启怪异模式,也就是说你只需要定义就可以让浏览器在严格模式(标准模式)下渲染页面,而不需要指定某个类型dtd。


回顾一下:

       所有的浏览器都有两种模式:怪异模式和严格模式(也有人叫标准模式)。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式,但是IE 6以下版本永远定在了怪异模式。


关于两种模式,你需要知道以下几点:

  1. 在标准化之前写的页面是没有doctype的,因此没有doctype的页面是在怪异模式下渲染的
  2. 反过来说,如果web开发人员加入的doctype,说明他知道他所要做的事情,大部分的doctype会开启严格模式(标准模式),页面也会按照标准来渲染。
  3. 任何新的或者未知的doctype都会开启严格模式(标准模式)。
  4. 每个浏览器都有自己的方式来激活怪异模式。

你可以看看这个清单:http://hsivonen.iki.fi/doctype/

注意:你可以根本不需要根据你选择的doctype来验证你的页面,只要doctype标签存在就足以开启严格模式(标准模式)了。如果仍感到怀疑,那么请前往http://www.quirksmode.org/css/quirksmode.html#link2了解你想知道的内容。

我们只需要一小段JavaScript代码就可以得到答案,它就是:

mode=document.compatMode;

这个代码可以用来判断,当前浏览器是处于怪异模式还是标准模式,该属性的兼容性毋庸置疑,如果你表示怀疑,可以查看http://www.quirksmode.org/dom/w3c_html.html#t11

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/373764.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 线程的开始、暂停、继续

Android项目中的一个需求&#xff1a;通过线程读取文件内容&#xff0c;并且可以控制线程的开始、暂停、继续&#xff0c;来控制读文件。在此记录下。 直接在主线程中&#xff0c;通过wait、notify、notifyAll去控制读文件的线程&#xff08;子线程&#xff09;&#xff0c;报错…

为什么要在Java中使用Unchecked异常而不是Checked异常

关于检查与未检查的异常的争论可以追溯到过去。 有人说这是Java包含的最佳功能之一。 其他人则说这是他们最大的错误之一[ 1 ]。 辩论似乎结束了。 在这篇文章中&#xff0c;我将尝试包含指向该主题的文章和书籍的链接。 我不是专家&#xff0c;但是我会尽力向您解释为什么我得…

batchplot插件用法_Batchplot批量打印怎么用?Batchplot批量打印教程

很多从事CAD设计工作的用户都碰到过这种情况&#xff1a;在一个单DWG格式的图纸文件中包含有大量图纸&#xff0c;如果一张一张选取打印不但费时费力&#xff0c;而且容易遗漏某张图纸&#xff0c;这时候就需要用到Batchplot插件&#xff0c;这是专门针对单DWG多图纸的批量打印…

选择排序和冒泡排序以及折半查找

1.选择排序 2.冒泡排序 3.折半查找 方式一&#xff1a;开发使用的方法 方式二&#xff1a;普通的折半 转载于:https://www.cnblogs.com/juncaoit/p/5935068.html

JSP中Request属性范围

JSP属性范围&#xff0c;通过以下几个测试代码来学习request属性的范围 测试一(JSP动态指令方式传参)&#xff1a; 测试内容&#xff1a; <jsp:param .../>添加参数,通过<jsp:forward page"...">来实现服务器端跳转,以此来测试request属性的范围&#…

Spring MVC – Flash属性

最新的Spring Framework版本&#xff08;3.1&#xff09;带来了有趣的功能&#xff0c;称为Flash属性。 这是对我很久以前在我的一篇文章中提到的问题的补救措施&#xff1a; Spring MVC –会话属性处理。 这个问题可以用几句话来形容&#xff1a;如果我们想通过两个控制器之间…

000 快速排序算法

一&#xff1a;概述 快速排序是东尼.霍尔所发展的一种快速排序算法。 对于n个项目的排序&#xff0c;平均O&#xff08;n*logn&#xff09;次比较&#xff0c;在比较糟糕的情况下是O&#xff08;n2&#xff09;次比较。 采用分治策略把一个串行分为两个子串行。 二&#xff1a;…

nginx post请求超时_nginx记录分析网站响应慢的请求(ngx_http_log_request_speed)

nginx模块ngx_http_log_request_speed可以用来找出网站哪些请求很慢&#xff0c;针对站点很多&#xff0c;文件以及请求很多想找出哪些请求比较慢的话&#xff0c;这个插件非常有效.作者的初衷是写给自己用的&#xff0c;用来找出站点中处理时间较长的请求, 这些请求是造成服务…

如何用angularjs制作一个完整的表格之一__创建简单表格

初步接手人生的第一个项目&#xff0c;需要用angularjs制作表格和实现各种功能&#xff0c;因此遇到了各种问题和以前不熟悉的知识点&#xff0c;在此记录下来&#xff0c;以供大家学习交流&#xff0c;解决方式可能并不完善或符合规范&#xff0c;如果大家有更好的方式欢迎指出…

Java的String类是上帝的对象吗?

10月&#xff0c;我写了一个博客&#xff0c;题为“上帝对象中的顶级特朗普”&#xff0c;其中谈到了用167种不同的方法发现的对象的发现&#xff0c;这些方法将该对象与应用程序的所有其他部分链接在一起&#xff0c;并且正如您所期望的那样&#xff0c;上帝或怪物物的一般标准…

十步完全理解SQL

很多程序员视 SQL 为洪水猛兽。SQL 是一种为数不多的声明性语言&#xff0c;它的运行方式完全不同于我们所熟知的命令行语言、面向对象的程序语言、甚至是函数语言&#xff08;尽管有些人认为 SQL 语言也是一种函数式语言&#xff09;。 我们每天都在写 SQL 并且应用在开源软件…

curl命令java_上curl java 模拟http请求

最近&#xff0c;我的项目要求java模拟http请求&#xff0c;获得dns解决 tcp处理过的信息特定的连接。java api提供urlConnection apache提供的httpClient都不能胜任该需求&#xff0c;二次开发太费时间。于是google之。最后 得出两种解决的方法&#xff1a;一是使用HTTP4J。该…

androidstudio 优化gradle编译效率

androidstuido 使用gradle自己主动构建和编译。有时做少量改动编译须要等待时间过长&#xff0c;近期Erik Hellman编写的Boosting the performance for Gradle in your Android projects&#xff08; 译文 參考1&#xff09;提到了此问题的优化方法。1.gradle的升级到2.4 。 2.…

Common Knowledge_快速幂

问题 I: Common Knowledge 时间限制: 1 Sec 内存限制: 64 MB提交: 9 解决: 8[提交][状态][讨论版]题目描述 Alice and Bob play some game in which they score points. Each of the two has an n-digit scoreboard which depicts numbers in base 10 (with leading zeroes).…

播放2.0:Akka,Rest,Json和依赖项

在过去的几个月中&#xff0c;我越来越多地涉足scala。 Scala与“ Play框架”一起为您提供了一个非常有效且快速的开发环境&#xff08;即&#xff0c;您掌握了Scala语言的特质之后&#xff09;。 Play框架背后的家伙一直在努力开发新版本的Play 2.0。 在Play 2.0中&#xff0c…

python使用多线程写生成器_Python学习——多线程,异步IO,生成器,协程

Python的语法是简洁的&#xff0c;也是难理解的。比如yield关键字&#xff1a;def fun():for i in range(5):print(test)x yield iprint(good, x)if __name__ __main__:a fun()# print(a.__next__())# print(a.__next__())# print(a.__next__())y a.send(None)y a.send(-1…

Python与C++结构体交互

需求&#xff1a;根据接口规范&#xff0c;实现与服务端的数据交互 服务端结构体分包头、包体、包尾 包头C结构体示例如下 1 typedef struct head2 {3 BYTE string1;4 BYTE string2; //包类型5 BYTE string3; //版本号,目前为06 char s…

Ubuntu下安装OpenSSH Server并在客户端远程连接Ubuntu

本文主要是向读者介绍了如何在Ubuntu系统下安装OpenSSH Server并在客户端远程连接Ubuntu&#xff0c;共有两种方法&#xff0c;一种是命令行安装&#xff1b;另一种是通过Ubuntu Software Center安装&#xff0c;希望对大家能有帮助&#xff01; 方法一&#xff08;推荐&#…

算法:老鼠走迷宫问题

算法&#xff1a;老鼠走迷宫问题(初) 【写在前面】 老鼠走迷宫问题的递归实现&#xff0c;是对递归思想的一种应用。 【问题描述】 给定一个二维数组&#xff0c;数组中2表示墙壁&#xff0c;0表示通路&#xff0c;由此数组可展示为一个迷宫图。给定入口位置和出口位置&#xf…

rust python对比_Python Rust 迭代器对比

迭代是数据处理的基石&#xff0c;而 Python 中所有集合都可以迭代&#xff0c;这是 Python 让使用者感到非常方便的特征之一。下面是一些在 Python 中经常使用的迭代模式# 列表for i in [1, 2, 3, 4]:print(i)# 字典di {a: 1, b: 2, c: 3}# 迭代键for k in di.keys():print(k…