文档章节

为什么使用<!DOCTYPE HTML>

李长春
 李长春
发布于 2011/11/14 15:29
字数 844
阅读 97
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

不管是刚接触前端,还是你已经“精通”web前端开发的内容,你应该知道在你写html的时候需要定义文档类型;你知道如果没有它,浏览器在渲染页面的时候会使用怪异模式;你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
好在现在的各种web开发工具都足够强大,支持插入模板代码,因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它,你也许可以尝试下面这个写法:
<!DOCTYPE html>
哇哦,很简洁哦!好处显而易见:一、你可以轻松的写下这个doctype,而不用担心会写错;二、你大概省下了105字节字符,对于一个每日PV达到千万级的站点,它可以省下相当客观流量;三、它是向后兼容的,是的,html5的doctype就是这样写的,并且现代浏览器都认识它。
如果你跟我一样一直以为:没有指定dtd将会开启浏览器的怪异模式,这种说法是错的!正确的说法应该是没有定义doctype才会开启怪异模式,也就是说你只需要定义<!doctype html>就可以让浏览器在严格模式(标准模式)下渲染页面,而不需要指定某个类型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代码就可以得到答案,它就是:
这个代码可以用来判断,当前浏览器是处于怪异模式还是标准模式,该属性的兼容性毋庸置疑,如果你表示怀疑,可以查看http://www.quirksmode.org/dom/w3c_html.html#t11。你可以在你想测试的浏览器里访问:http://wanz.im/demo/doctype-test.html,便可看到结果了,据我所知,这样并没有激活怪异模式,即使是ie6下,如果你有什么新发现,欢迎给我留言。

本文转载自:http://i.wanz.im/2010/05/28/why_doctype_html/

李长春
粉丝 81
博文 249
码字总数 117406
作品 0
海淀
私信 提问
前端计划——面试题总结-HTML篇

前言: 阅读本文前请做好以下心理准备: 本系列文章将不定期更新。 本系列文章不是很严谨。 前端面试之HTML篇 Part A:常识系列 你真的了解浏览器么? HTML中的Doctype是什么鬼? 多了个X的X...

Alarak
2017/01/02
0
0
javascript问题:window.onload问题

问题:如果只写: var one = document.getElementById('one'); one.onclick = function(){ alert('你单击了这个DIV小方块'); } 如果只写上述代码为什么单击div小方块没作用呢。 为什么要使用......

如是我聞
2015/01/25
318
2
有什么用?

做web开发,无论前端后端,对这个多多少少有点印象吧?似乎每个页面前面都有一句不知道有什么鸟用的一句话。类似下面这样 或者这样 你有没有想过这个是干啥的?反正我没有,每个页面都一样,...

我要活出个人模狗样
2017/11/13
0
0
CSS实现垂直居中的常用方法

在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些...

snowing1990
2016/03/15
37
0
关于DOCMENT TYPE对于echarts效果的影响

@Kener-林峰 你好,想跟你请教个问题:大神,你好,之前遇到了个问题,echarts图表在IE7,8中图表文字(例如bar柱子的数值)在图表动态生成的过程中一直闪个不停,官网上的例子却正常,搞了一...

gggoodgame
2014/05/06
219
1

没有更多内容

加载失败,请刷新页面

加载更多

Java8新特性,语法学习

package com.example.demo.java8;import com.example.demo.domin.User;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import java.util.stream.Co......

Gx_ww
6分钟前
4
0
type()和isinstance()之间有什么区别?

这两个代码片段之间有什么区别? 使用type() : import typesif type(a) is types.DictType: do_something()if type(b) in types.StringTypes: do_something_else() 使用isinsta......

javail
6分钟前
4
0
Flink-本地设置教程

设置:下载并启动Flink 启动本地Flink群集 阅读代码 运行示例 下一步 通过几个简单的步骤即可启动并运行Flink示例程序。 设置:下载并启动Flink Flink在Linux,Mac OS X和Windows上运行。为了...

sunwuhan
8分钟前
2
0
RPA是什么?RPA发展极简史

眼下,RPA(机器人流程自动化)技术爆火于科技圈与投资界,并持续引发新一轮的数字化变革。 与过去几年间的很多技术投资热点不同,如今RPA技术被资本方和市场方广为看好,原因有二:一是RPA...

UiBot
10分钟前
3
0
超级账本Fabric的交易背书过程解读

Hyperledger Fabric和其他许多区块链的关键区别之一,就在于Fabric区块链的交易执行过程:Fabric交易需要首先通过节点的背书,然后再进行交易排序,最后才利用有序交易进行账本的更新。本文将...

区块链教程
12分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部