为什么要用<!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)
提示和凝视
凝视:<!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下面版本号永远定在了怪异模式。
关于两种模式,你须要知道下面几点:
- 在标准化之前写的页面是没有doctype的。因此没有doctype的页面是在怪异模式下渲染的
- 反过来说。假设web开发者增加的doctype。说明他知道他所要做的事情,大部分的doctype会开启严格模式(标准模式),页面也会依照标准来渲染。
- 不论什么新的或者未知的doctype都会开启严格模式(标准模式)。
- 每一个浏览器都有自己的方式来激活怪异模式。
你能够看看这个清单: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。
为什么要用<!DOCTYPE>声明的更多相关文章
- Error-Javascript:错误:页面文档类型(DOCTYPE)未声明!
ylbtech-Error-Javascript:错误:页面文档类型(DOCTYPE)未声明! 1.返回顶部 1. HTML1300: 进行了导航.文件: TransferNote.aspxHTML1 ...
- <!DOCTYPE html>声明下div高度100%
问题:在HTML页面中声明<!DOCTYPE html>,页面中div属性设置100%页面显示不正常 body { max-width: 720px; margin: 0 auto; } ...
- doctype声明的重要性-------这绝对是ie的坑, 与angular无关, 我错怪你啦
今天开发一个页面, 自己写页面, 自己实现功能. 因为以往需求都没有要求兼容ie9, 所以并未发现此坑. 今天就记录下来. 贴图对比 ie9 chrome 如图, ie9界面显示错误. 起初以为是a ...
- !DOCTYPE html文档类型声明简写 HTML5 DOCTYPE缩写
html5之!DOCTYPE html文档类型声明简写,在HTML5中DOCTYPE简写非常重要. 一.概述 - TOP 让CSS样式表生效,DOCTYPE声明是必须的,以前TABLE布局的网 ...
- <!DOCTYPE html>很重要
噩梦开始的源头:之前写html或者jsp页面,从来不注意doctype的声明,也不太明白doctype的作用.直到最近碰到了一个非常奇葩的 bug:某一个页面在IE7和8,Chrome,ff等下正常, ...
- <!DOCTYPE html>作用
1.定义: DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. <!DOCTYPE> 声明 ...
- HTML5 声明兼容IE的写法(转载)
HTML5 声明兼容IE的写法(转载) 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <!--[if IE]> <meta http-eq ...
- JS魔法堂:doctype我们应该了解的基础知识
一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...
- HTML5标准学习 – DOCTYPE
转自:http://www.cnblogs.com/GrayZhang/archive/2011/03/31/learning-html5-doctype.html 上一篇文章主要讲述了HTML文档的 ...
随机推荐
- EasyUi – 5.修改$.messager.show() 弹出窗口在浏览器顶部中间出现
由于在easyui中$.messager.show() 只有一种弹出方式(在浏览器的或下角弹出),我最近在做一个项目的时候需要在浏览器的顶部中间出现.由于自己写花那么多的时间,所以就去修改了原码(不推 ...
- (转)粒子编辑器Particle designer属性的介绍
转载:http://blog.csdn.net/ym19860303/article/details/9210539 Particle designer粒子编辑器可到这里下载(包含授权码):http: ...
- yum软件搜索
安装软件却记不清包名,搜索出所有带SDL的包yum list *SDL* yum install xxx 列出所有的安装套件yum group list yum group install xxx
- Hibernate (开源对象关系映射框架)
一.基本介绍1.它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm(对象关系映射)框架,hibernate可以自动生成SQL语句,自动执行: Hibern ...
- 《Android虚拟机》----虚拟机概述
No1: 虚拟机是指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离的环境中的完整计算机系统. No2: Java虚拟机由如下五个部分组成:一组指令集.一组寄存器.一个栈.一个无用单元收集堆. ...
- Python并发编程-进程的几个方法
join()方法 from multiprocessing import Process import time def func(arg1,arg2): print('*'*arg1) time.s ...
- C# 消除累计误差的倒计时
使用 C# 中自带的各种 timer 计时,都会有累计误差,以下代码实现了一种消除累计误差的方法,使得每次计时的误差,空值在 100 ms 以内(可以通过修改代码提升精度.) 对于精度要求在秒级别的简 ...
- 为什么ArrayList remove报错
不报错 List<String> userNames = new ArrayList<String>() {{ add("Hollis"); add(&qu ...
- Hibernate 注解方式配置
在Hibernate3之后就可以使用注解的方式去配置.而且在工作中我们使用的更多的也是注解方式去配置项目,所以还有一部分使用配置文件去配置的一些关系就不在此去一一举例,需要了解的朋友可以去查看Hibe ...
- HDU 6205[计算几何,JAVA]
题目链接[http://acm.hdu.edu.cn/showproblem.php?pid=6206] 题意: 给出不共线的三个点,和一个点(x,y),然后判断(x,y)在不在这三个点组成的圆外. ...