doctype(文档类型)的作用是什么?转载
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
Document Type 文档类型,缩写成DOCTYPE,在html中它就是个标签:<!DOCTYPE>,它有自己的声明格式,不是在html标签前加上它就完事了的,查看qq.com页面源码可见如下声明:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE 包含 6 部分:
- 字符串“<!DOCTYPE”
- 根元素通用标识符“HTML”
- 字符串“PUBLIC”
- 被引号括起来的公共标识符(publicId)
- 被引号括起来的系统标识符(systemId)重点在这里 ,继续往下看
- 字符串“>”
看上去蛮复杂的,不用去纠结,一般只有三种(Strict Transitional Frameset)声明(以XHTML为例)
上面也提到,Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档,上文说到的DOCTYPE组成中的第5部分所引入的dtd文件则包含了标记、attributes 、properties、约束规则。除此外,Doctype还会对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析,所以Doctype是非常关键的,尤其是在 IE 系列浏览器中,由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。
两种渲染模式:
- BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
- CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
如果不声明doctype?
这个问题的最直接答案是:不写doctype,浏览器会进入quirks mode (混杂模式)
Q:如何判断浏览使用哪种方式解析css
A:这其实是上面问题的复习和延伸。直接给出答案:
1、没有doctype声明的采用quirks mode解析
2、对于有doctype的大多数采用standard mord(这里为什么用大多数,请读者思考,请参考http://hsivonen.iki.fi/doctype/)
3、特殊情况:
a、对于那些浏览器不能识别的doctype ,浏览器采用quirks mode
b、没有声明DTD或者html版本声明低于4.0采用quirks mode其他使用standard mode
c、你能看到的现在的大多数网页采用的是standard mode
d、ie6中,如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>),则采用quirks mode解析。(这点估计连面试官都没
js如何判断浏览器正在以何种方式解析?
function getMode{
var _cm = docoment.compatMode;
if(_cm == 'CSS1Compat'){
return "strict"
}
if(_cm == 'BackCompat' ){
return 'quirks'
}
}
引用
前端翻译:Activating Browser Modes with Doctype
前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode
正确使用DOCTYPE
doctype(文档类型)的作用是什么?转载的更多相关文章
- Doctype文档类型、作用及触发方式
Doctype文档类型 1) 该标签可声明三种 DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 2) HTML 4.01 规定了三种文档类型:Strict.Transit ...
- HTML DOCTYPE文档类型举例说明
HTML DOCTYPE文档类型举例说明 HTML4.01文档过渡定义类型,此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签(例如:font.b等),不可以使用框架 < ...
- Doctype 文档类型,标准模式,混杂模式
HTML4.01和XHTML1.0 基于 SGML,支持DTD声明,HTML5不是,但是需要 doctype 来规范浏览器的行为. 标准模式是指,DTD声明定义了标准文档的类型后,浏览器按W3C标准解 ...
- !DOCTYPE 文档类型声明
1.用途 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档.HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 H ...
- 文档类型DTD,DOCTYPE和浏览器模式
出处:http://blog.csdn.net/freshlover/article/details/11616563 浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义 ...
- HTML文档类型
在HMTL5中页面的最顶端代码就是: <!DOCTYPE html> 为何要如此定义.书写呢? 首先引入一个概念:文档类型,英译为:Document type,缩写成:doctype. 文 ...
- HTML文档类型DTD与浏览器怪异模式
虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...
- DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义
DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...
- !DOCTYPE html文档类型声明简写 HTML5 DOCTYPE缩写
html5之!DOCTYPE html文档类型声明简写,在HTML5中DOCTYPE简写非常重要. 一.概述 - TOP 让CSS样式表生效,DOCTYPE声明是必须的,以前TABLE布局的网 ...
随机推荐
- hadoop搭建杂记:Linux下不同linux主机之间文件copy的scp命令
不同的Linux之间copy文件常用有3种方法: 不同的Linux之间copy文件常用有3种方法: ①ftp 就是其中一台Linux安装ftp Server,这样可以另外一台使用ftp的程序来进行文件 ...
- npm总是安装不成功,而且很慢?
什么方法解决: 在cmd 里面先运行 npm config set registry "http://registry.npm.taobao.org" 然后再安装npm 就会很快 ...
- ThinkPHP第二十五天(自动完成、用户名密码PHP正则、移位或加密函数)
1.ThinkPHP自动完成功能 跟昨天的自动验证功能类似,也是需要在自定义的UserModel类,进行使用. 使用方法:定义$_auto属性 $_auto = array( array(完成字段,完 ...
- 【LeetCode题意分析&解答】40. Combination Sum II
Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...
- WireShark抓包时TCP数据包出现may be caused by ip checksum offload
最近用WireShark抓包时发现TCP数据包有报错:IP Checksum Offload,经过查阅资料终于找到了原因 总结下来就是wireshark抓到的数据包提示Checksum错误,是因为它截 ...
- windows 下面的内存泄漏排查.
内存泄漏排查 一下本人只是简单的介绍一个实用, 如果读者很感兴趣, 可以查阅msdn自己去深入调查相关的API和原理. API 介绍 1. 马上打印泄漏信息:_CrtDumpMemoryLeaks() ...
- 恢复sudo的权限的命令
出错的原因:不小心给了/etc/的所有文件的777属性,出现了sudo 的错误. 1.pkexec chmod 0440 /etc/sudoers 2.pkexec chmod 0440 /etc/s ...
- iOS开发获取缓存文件的大小并清除缓存
移动应用在处理网络资源时,一般都会做离线缓存处理,其中以图片缓存最为典型,其中很流行的离线缓存框架为SDWebImage. 但是,离线缓存会占用手机存储空间,所以缓存清理功能基本成为资讯.购物.阅读类 ...
- Delegation事情委托或代理
在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...
- android 点击下弹动画实现
下弹动画的实现 下弹动画在很多应用都有使用,比如豌豆荚中的应用介绍界面,百度手机助手的应用介绍界面等. 只要熟悉android动画的使用接口,制作动画并不困难. 这里使用开源库nineoldandro ...