zccst
- 浏览: 3319860 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具（开发）使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563：
感谢作者分享~请教下，http://www.lisa33xia ...
CSS基础：text-overflow:ellipsis溢出文本 -
u012206458：
$.ajax的error,complete,success方法 -
DEMONU：
谢谢，虽然不能给你赞助，但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes：
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础：text-overflow:ellipsis溢出文本 -
zenmshuo：
用过SpreadJS，也包含数据可视化的图表
推荐几个web中常用js图表插件
作者：zccst
一、doctype
1，严格模式与混杂模式的区分？如何触发这两种模式？
在 HTML 4.01 和 XHTML 中分别有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种。
1.过渡的(Transitional)：要求非常宽松
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
混杂模式：浏览器对XHTML的解析较为宽松。允许使用4.01中的标签，但必须符合XHTML的语法。
2.严格的(Strict)：不能使用任何表现层的标识和属性，例如<br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
严格模式：使用此类型的网页，浏览器解析将相对严格，不允许使用任何表现样式的标识和属性，比如在元素中直接使用background-color背景色属性。
3.框架的(Frameset)：专门针对框架页面设计使用的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
如果不写DOCTYPE的话，会造成低版本的ie不兼容，产生bug
在html5中，<!DOCTYPE html>
2，document.documentElement和document.body区别
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，不管有没有 DTD，可以使用如下代码：
documentElement 和 body 相关说明：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。
二，compatModel
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释：
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度document.documentElement.clientWidth。
我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
三、面试题
触发标准模式
1、加DOCTYPE声明,比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
<!DOCTYPE html>
2、设置X-UA-Compatible触发。
触发怪异模式
1、无doctype声明、定义旧的HTML版本（HTML4以下,例如3.2）
2、加XML声明，可在ie6下触发
< xml version="1.0" encoding="utf-8" >
<!DOCTYPE ...>
3、在XML声明和XHTML的DOCTYPE之间加入HTML注释，可在ie7下触发 < xml version="1.0" encoding="utf-8" >
<!-- keep IE7 in quirks mode -->
<!DOCTYPE ...>
5、<!--->放在<!DOCTYPE前面
X-UA-Compatible
X-UA-Compatible只有IE>=8才识别，所以他们可以用doctype声明、X-UA-Compatible、兼容性视图设置来改变模式。
IE6/7却依靠DOCTYPE来改变标准或怪异模式，类似这些低版本的浏览器下的标准模式，接近与“先进”浏览器下的几乎标准模式，因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下，各自的渲染还是是有差别的。没差别就不会有css hack的诞生。
IE6-IE9下，怪异模式都在IE5.5下。
不需要写X-UA-Compatible，用css也完全可以搞定各个版本IE的解析不同。
IE=(0<= 值 <7) - 触发怪异模式(无论页面是否有DOCTYPE)，注：这里的怪异模式和IE8下的有点不同，测试发现"-"、"_"这两个css hack符号，IE8怪异下是都识别的，IE9怪异下不识别"-"。
IE=7(7<= 值 <8) - 强制IE7标准(无论页面是否有DOCTYPE)
IE=8(8<= 值 <9) - 强制IE8标准，有doctype-使用IE8几乎标准模式(或IE8标准)，无doctype-IE8标准
IE=EmulateIE7、EmulateIE8 和上面IE8的情况一样
IE=9、IE=Edge(值 >=9 ) - 有doctype-使用几乎标准模式(或IE9标准)。和IE8一样，靠doctype来选择IE9几乎标准，或IE9标准模式；无doctype-IE9标准。
IE=(值 <0)、IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd、IE=xxx类似这样不靠谱的、或把X-UA-Compatible meta写在<link>或<script>标签后的，这些情况和无X-UA-Compatible是一样的：首先判断"兼容性视图"，有"兼容性视图"的设置(doctype-IE7标准，无doctype-怪异模式)；未设置"兼容性视图"，有DOCTYPE-遵循doctype，无doctype-怪异模式。
注1：把X-UA-Compatible写在<link>或<script>标签下面，X-UA-Compatible的设置无效。
注2：页面、服务器HTTP Header都设置了X-UA-Compatible的情况，使用页面的X-UA-Compatible设置。页面无X-UA-Compatible，才使用HTTP Header设置的值。
注3：几乎标准模式的意思和触发，下面的"Almost Standards Mode"有说明。
注4：IE=xx的值，ie会尝试xx转换为最接近的值。比如：IE=7.789 -> IE=7；介于5、6之间的->IE=5；大于等于8的->IE=8。
注5：IE=4、IE=3、IE=0.1、IE=-7 这些小于5的，包括类似IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd，和无X-UA-Compatible一样一样滴。可以理解为X-UA-Compatible设置了无效的值，所以跳过这里了。
X-UA-Compatible的特殊写法
触发Google Chrome Frame：
<meta http-equiv="X-UA-Compatible" content="chrome=1">
可以和IE的X-UA-Compatible混搭：比如：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">。
这样写的好处：可以让ie在最好的渲染方式下渲染页面。
"IE=edge,chrome=1"，可以写成"chrome=1,IE=edge"、"chrome=1; IE=edge"。
一、doctype
1，严格模式与混杂模式的区分？如何触发这两种模式？
在 HTML 4.01 和 XHTML 中分别有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种。
1.过渡的(Transitional)：要求非常宽松
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
混杂模式：浏览器对XHTML的解析较为宽松。允许使用4.01中的标签，但必须符合XHTML的语法。
2.严格的(Strict)：不能使用任何表现层的标识和属性，例如<br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
严格模式：使用此类型的网页，浏览器解析将相对严格，不允许使用任何表现样式的标识和属性，比如在元素中直接使用background-color背景色属性。
3.框架的(Frameset)：专门针对框架页面设计使用的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
如果不写DOCTYPE的话，会造成低版本的ie不兼容，产生bug
在html5中，<!DOCTYPE html>
2，document.documentElement和document.body区别
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，不管有没有 DTD，可以使用如下代码：
var scrollTop = window.pageYOffset //用于FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
documentElement 和 body 相关说明：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。
二，compatModel
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释：
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度document.documentElement.clientWidth。
我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
三、面试题
触发标准模式
1、加DOCTYPE声明,比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
<!DOCTYPE html>
2、设置X-UA-Compatible触发。
触发怪异模式
1、无doctype声明、定义旧的HTML版本（HTML4以下,例如3.2）
2、加XML声明，可在ie6下触发
< xml version="1.0" encoding="utf-8" >
<!DOCTYPE ...>
3、在XML声明和XHTML的DOCTYPE之间加入HTML注释，可在ie7下触发 < xml version="1.0" encoding="utf-8" >
<!-- keep IE7 in quirks mode -->
<!DOCTYPE ...>
5、<!--->放在<!DOCTYPE前面
X-UA-Compatible
X-UA-Compatible只有IE>=8才识别，所以他们可以用doctype声明、X-UA-Compatible、兼容性视图设置来改变模式。
IE6/7却依靠DOCTYPE来改变标准或怪异模式，类似这些低版本的浏览器下的标准模式，接近与“先进”浏览器下的几乎标准模式，因为它们都没有严格遵循CSS2规范。并且他们同样在标准模式下，各自的渲染还是是有差别的。没差别就不会有css hack的诞生。
IE6-IE9下，怪异模式都在IE5.5下。
不需要写X-UA-Compatible，用css也完全可以搞定各个版本IE的解析不同。
IE=(0<= 值 <7) - 触发怪异模式(无论页面是否有DOCTYPE)，注：这里的怪异模式和IE8下的有点不同，测试发现"-"、"_"这两个css hack符号，IE8怪异下是都识别的，IE9怪异下不识别"-"。
IE=7(7<= 值 <8) - 强制IE7标准(无论页面是否有DOCTYPE)
IE=8(8<= 值 <9) - 强制IE8标准，有doctype-使用IE8几乎标准模式(或IE8标准)，无doctype-IE8标准
IE=EmulateIE7、EmulateIE8 和上面IE8的情况一样
IE=9、IE=Edge(值 >=9 ) - 有doctype-使用几乎标准模式(或IE9标准)。和IE8一样，靠doctype来选择IE9几乎标准，或IE9标准模式；无doctype-IE9标准。
IE=(值 <0)、IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd、IE=xxx类似这样不靠谱的、或把X-UA-Compatible meta写在<link>或<script>标签后的，这些情况和无X-UA-Compatible是一样的：首先判断"兼容性视图"，有"兼容性视图"的设置(doctype-IE7标准，无doctype-怪异模式)；未设置"兼容性视图"，有DOCTYPE-遵循doctype，无doctype-怪异模式。
注1：把X-UA-Compatible写在<link>或<script>标签下面，X-UA-Compatible的设置无效。
注2：页面、服务器HTTP Header都设置了X-UA-Compatible的情况，使用页面的X-UA-Compatible设置。页面无X-UA-Compatible，才使用HTTP Header设置的值。
注3：几乎标准模式的意思和触发，下面的"Almost Standards Mode"有说明。
注4：IE=xx的值，ie会尝试xx转换为最接近的值。比如：IE=7.789 -> IE=7；介于5、6之间的->IE=5；大于等于8的->IE=8。
注5：IE=4、IE=3、IE=0.1、IE=-7 这些小于5的，包括类似IE=IE8、IE=IE7、IE=IE6、IE=a、IE=b、IE=bcd，和无X-UA-Compatible一样一样滴。可以理解为X-UA-Compatible设置了无效的值，所以跳过这里了。
X-UA-Compatible的特殊写法
触发Google Chrome Frame：
<meta http-equiv="X-UA-Compatible" content="chrome=1">
可以和IE的X-UA-Compatible混搭：比如：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">。
这样写的好处：可以让ie在最好的渲染方式下渲染页面。
"IE=edge,chrome=1"，可以写成"chrome=1,IE=edge"、"chrome=1; IE=edge"。
分享到：
发表评论
-
js浏览器端判断当期是否在线
2015-04-17 20:50 2368作者：zccst 纯浏览器端解决办法就是轮询，img轮询和a ... -
scroll时判断向下滚动还是向上滚动
2015-03-30 16:53 38288作者：zccst 有时候需要用到，判断页面是向上还是向下滚动 ... -
[html5]localStorage代替Cookie? HTML5本地存储安全性
2015-03-20 17:53 26375zccst转载 HTML5本地存储的前身就是Cookie，H ... -
[BOM]navigator知识点
2015-03-20 14:42 4848作者：zccst 历史 最早的时候有一个浏览器叫NCSA ... -
[html5]navigator.online属性检测用户是否在线
2015-03-20 14:11 5340作者：zccst navigator.online属性检测用 ... -
[移动端]专用的meta
2015-03-04 15:31 8272作者：zccst <meta name=" ... -
document.body、document.documentElement和window获取视窗大小的区别
2015-03-04 15:12 27650作者：zccst 参考网址：http://www.ido32 ... -
[html5]触摸事件(touchstart、touchmove和touchend)
2015-02-13 20:28 29569作者：zccst 参考文章 ... -
meta name=viewport含义
2015-02-12 16:29 4039作者：zccst viewport中文 ... -
Document，Node，Element，HTMLDocument ，HTMLCollection，HTMLElement，NodeList
2015-01-05 15:38 7559作者：zccst 这个问题如 ... -
window.history
2014-12-23 10:37 10064作者：zccst 旧版： f ... -
js 页面刷新location.reload和location.replace的区别小结
2014-12-02 20:57 129600作者：zccst reload 方法，该方法强迫浏览器刷新当 ... -
【转义字符】HTML 字符实体 < >: &等
2014-11-18 18:56 22970作者：zccst 2014-12-10 又 ... -
挖掘input type=file的新知识
2014-11-13 18:23 3102作者：zccst 文件上传，这个问题始终一知半解，今天又近真 ... -
又一次掉进encodeURIComponent的坑里了
2014-11-05 18:21 22476作者：zccst 原坑： get请求 ajax.get ( ... -
DOM元素在浏览器中的位置参数，如offset,ownerDocument
2014-10-08 17:07 4253作者：zccst 2014-10-21 区分clientX ... -
js跨域的多种解决办法
2014-09-20 09:41 942作者：zccst 2015-3-11 JavaScript ... -
div+css布局总结
2014-09-04 10:48 1426作者：zccst 3，position布局 #wrap ... -
文件上传的两种情况及mock时对应处理办法
2014-09-02 19:46 1711作者：zccst 1，给文件一个独立的url，要求文件上传至 ... -
attr与prop的区别
2014-07-09 18:20 965作者：zccst jQuery在1.6.1 ...
相关推荐
DOCTYPE>标签的定义和用法。 准确的说，<!DOCTYPE>并不是HTML标签，它声明web浏览器关于页面使用哪个 HTML 版本进行编写的指令。 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了...
使用正确的DOCTYPE声明对于确保网页的跨浏览器兼容性和遵循Web标准至关重要。例如，Strict模式的DOCTYPE要求更严格的HTML编写规则，不允许使用表现层的HTML元素，如`<center>`或`<font>`，鼓励开发者使用CSS来控制...
2. **Transitional**：过渡类型，允许使用一些呈现相关的属性和元素，对于向CSS过渡的旧代码有所帮助。 3. **Frameset**：用于创建包含框架的文档，它类似于Transitional DTD，但用`frameset`元素替代`body`元素。 ...
正确使用DOCTYPE声明能确保浏览器按照预设的规则解析和展示页面。如果想要验证文档是否符合所声明的DTD，可以使用W3C提供的在线验证工具，如XHTML验证器，来检查文档的语法和结构是否正确。 总结起来，DOCTYPE声明...
在开发过程中，选择合适的DOCTYPE可以帮助确保网页在不同浏览器和设备上的表现一致。同时，随着HTML5的普及，`<!DOCTYPE html>`这一简单的声明已成为标准，它指示浏览器使用最新的标准模式来解析文档，而无需指定...
DOCTYPE>`声明会导致浏览器进入不同的渲染模式，如quirks mode（兼容模式）和standards mode（标准模式）。在标准模式下，浏览器会遵循W3C的标准，提供更一致的跨平台表现。 在实际开发中，选择HTML还是XHTML取决于...
DOCTYPE>` 是一个非常重要的声明，它的主要作用是告诉浏览器文档遵循的HTML或XHTML规范版本，以便浏览器能够正确地解析和渲染页面内容。这个声明位于HTML文档的开头，且必须在 `<html>` 标签之前。 `<!DOCTYPE ...
HTML的!DOCTYPE是什么意思.zip
压缩包内的“DOCTYPE.docx”文件，根据扩展名推测，这可能是一个Microsoft Word文档，其中包含了与DOCTYPE相关的HTML开发信息或者教程。Word文档可以用来详细解释DOCTYPE的作用，以及如何在HTML文件中正确地使用它。...
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">` 这行代码定义了文档类型为XHTML 1.0 Transitional，这是一种过渡性的HTML版本，允许...
HTML（超文本标记语言）是用于构建和呈现网页内容的标准标记语言。...在实际开发中，开发者应当养成良好的编码习惯，仔细检查doctype声明和字符编码的设置，以确保网页在各种环境下都能够正常显示。
DOCTYPE声明位于文档的开头，即`<html>`标签之前，其主要作用是确保浏览器以正确的标准模式解析和渲染页面。 DOCTYPE标签的语法通常如下： ```html <!DOCTYPE html PUBLIC "public_identifier" "URL"> ``` 其中，...
通过了解和正确使用DOCTYPE HTML，开发者能够确保他们的网页在各种浏览器上具有一致的显示效果，提高用户体验，并减少潜在的技术问题。对于那些需要处理大量历史代码或者需要兼容旧版浏览器的开发者来说，理解...
在讨论HTML DOCTYPE的缩写之前，我们先来了解一下DOCTYPE声明的作用以及其在HTML文档中的位置。DOCTYPE声明是一个必须位于HTML...因此，开发者在学习和使用DOCTYPE时，应当掌握正确的知识，并在实际编码中审慎处理。
XML DOCTYPE声明用于定义XML文档的公共标识符和系统标识符，它提供了关于文档结构的信息。在标准的XML文档中，DOCTYPE声明通常位于文档的顶部，紧随XML声明之后，如： ```xml <!DOCTYPE document SYSTEM "document....
在这个例子中，我们学习了HTML文档头的基本组成部分，包括DOCTYPE、HTML文档头、meta标签、Open Graph协议和Viewport Meta标签等。这些组件都是构建一个完整的HTML文档所必需的，能够帮助搜索引擎和浏览器更好地理解...
- `<META>`：提供有关文档的信息，如生成器、作者、关键字和描述。 - `<BODY>`：包含网页的可见内容。 3. **CSS样式**： - `html, body`: 设置整个页面的基本样式，如高度为100%，无内边距和外边距，背景色为...
meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> ...
DOCTYPE HTML.html
3. 过渡性DOCTYPE和未知DOCTYPE： - 过渡性DOCTYPE可能导致浏览器解析行为不一致，比如IE和Opera使用标准模式，而其他浏览器可能使用怪异模式或近似标准模式。 - 未知DOCTYPE的处理同样存在浏览器差异，IE和Opera...