HTML文档类型

青春..荒唐

浏览: 974278 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端积累
HTML

前端积累 HTML

DOCTYPE，是英文Document type的缩写，翻译为“文档类型”

DOCTYPE标签是单独出现的，定义了标准文档的类型

【说明】

①文档类型，会使浏览器使用相应标准加载网页并显示

②文档类型定义在HTML文档的第一行，在html标签之前

③文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式，详见：浏览器模式

【浏览器表现模式】

浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页，如果文档正确定义了DOCTYPE浏览器则会进入标准模式（Standards Mode），否则浏览器会进入怪异模式或混杂模式（Quirks mode）

【浏览器多种表现模式的来源】

浏览器开发初期W3C倡导的网页标准并不流行，因此浏览器有独特的对网页标签或属性的解析模式，随着日后网页标准的流行，浏览器增加了对新标准的支持（Standards Mode标准模式），但又没有放弃对原有模式的兼容（Quirks mode怪异模式），这就是浏览器多种表现模式的来源。

而且Standards Mode W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode怪异模式和Standars mode标准模式，两种渲染方法共存在一个浏览器上。

那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：

1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。

2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/

3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析

4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。

5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。

6. 在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。

【为什么使用<!DOCTYPE HTML>】

不管是刚接触前端，还是你已经“精通”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，而不用担心会写错；

二、它是向后兼容的，是的，html5的doctype就是这样写的，并且现代浏览器都认识它

如果你跟我一样一直以为：没有指定dtd将会开启浏览器的怪异模式，这种说法是错的！

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

让我们来回顾一下，所有的浏览器都需要两种模式：怪异模式和严格模式（也有人叫标准模式）。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式，但是IE 6以下版本永远定在了怪异模式。关于两种模式，你需要知道以下几点：

①在标准化之前写的页面是没有doctype的，因此没有doctype的页面是在怪异模式下渲染的。

②反过来说，如果web开发人员加入的doctype，说明他知道他所要做的事情，大部分的doctype会开启严格模式（标准模式），页面也会按照标准来渲染。

③任何新的或者未知的doctype都会开启严格模式（标准模式）。

④每个浏览器都有自己的方式来激活怪异模式。

注意：你可以根本不需要根据你选择的doctype来验证你的页面，只要doctype标签存在就足以开启严格模式（标准模式）了

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

mode=document.compatMode;

这个代码可以用来判断，当前浏览器是处于怪异模式还是标准模式，该属性的兼容性毋庸置疑

你可以在你想测试的浏览器里查看：

便可看到结果了，据我所知，这样并没有激活怪异模式，即使是ie6下

【JS判断浏览器解析模式/方式】

在js中如何判断当前浏览器正在以何种方式解析？

document对象有个属性compatMode ,它有两个值：

①BackCompat 对应quirks mode

②CSS1Compat 对应strict mode

var mode = document.compatMode;
console.log(mode)

【怪异模式与标准模式区别】

Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上，这也是我们在js里要注意的地方。

什么是盒模式？这是针对块级元素说的，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。

在Standars mode标准模式中：

元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在Quirks mode怪异模式中：

width则是元素的实际宽度，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

1. 内联元素，例如<a>|<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。

2. 内联元素（display: inline）内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a|em|span等都为内联元素。内联元素可以为任何其他元素的子元素。

3. 浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

4. 如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。

5. 边界值可为负，其显示效果各浏览器可能不相同。

6. 填充值不可为负。

7. 边框默认的样式（border-style）为不显示（none）。

【用法】

官方解析：

在实际的项目中，我们还需要在获取浏览是否IE，这样就可以得到IE的渲染模式了。在Ext中的代码：isBorderBox=isIE&&!isStrict

当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"，因此，我们可以根据 document.compatMode 的值来判断文档是否加了标准声明

var height = document.compatMode=="CSS1Compat" ? 
document.documentElement.clientHeight : document.body.clientHeight;

【注意：】这里document.compatMode（文档渲染模式）用来判断当前浏览器采用的渲染方式

①等于BackCompat怪异模式时，浏览器客户区宽度是document.body.clientWidth

②等于CSS1Compat标准模式时，浏览器客户区宽度是document.documentElement.clientWidth

浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：

if (document.compatMode == \"BackCompat\") {
     cWidth = document.body.clientWidth;
     cHeight = document.body.clientHeight;
     sWidth = document.body.scrollWidth;
     sHeight = document.body.scrollHeight;
     sLeft = document.body.scrollLeft;
     sTop = document.body.scrollTop;
   }else { //document.compatMode == \"CSS1Compat\"
     cWidth = document.documentElement.clientWidth;
     cHeight = document.documentElement.clientHeight;
     sWidth = document.documentElement.scrollWidth;
     sHeight = document.documentElement.scrollHeight;
     sLeft = document.documentElement.scrollLeft == 0 ? 
             document.body.scrollLeft : document.documentElement.scrollLeft;
     sTop = document.documentElement.scrollTop == 0 ? 
            document.body.scrollTop : document.documentElement.scrollTop;
}

简而言之：

var pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
if(typeof pageWidth!='number'){
    if(document.compatMode=='CSS1Compat'){//标准模式
       pageWidth=document.documentElement.clientWidth;
       pageHeight=document.documentElement.clientHeight;
    }else{
       pageWidth=document.body.clientWidth;
       pageHeight=document.body.clientHeight;
    }
}

（以上代码兼容目前流行的全部浏览器，包括：IE、Firefox、Safari、Opera、Chrome）

常用的浏览器表现模式包括：

①IE

IE包括两种模式：标准模式（Standards Mode）与怪异模式或混杂模式（Quirks mode），简称为IE(S)与IE(Q)

②FireFox

FIreFox包括三种模式：Full Standards Mode、Almost Standards Mode与Quirks Mode。对这三种模式的描述见：Mozilla's DOCTYPE sniffing

③Opera

Opera包括三种模式：Quirks、Standards与Almost Standards。对这三种模式的描述见：DOCTYPE Switches support in Opera

分享到：

canvas总结列表 | HTML 颜色代码理论

2018-01-28 17:41
浏览 784
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论