<!DOCTYPE html>很重要

噩梦开始的源头:之前写html或者jsp页面,从来不注意doctype的声明,也不太明白doctype的作用。直到最近碰到了一个非常奇葩的bug:某一个页面在IE7和8,Chrome,ff等下正常,但是在IE9下显示有问题,我就开始找啊找,各种调试,各种log,终于在httpWatch里边找到了答案:DOCTYPE未声明。于是我给页面添加了<!DOCTYPE html>,果然奏效了。

下面我就尽可能简洁扼要的说一下DOCTYPE的作用和用法。

1作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

document.compatMode:
BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,

这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的

标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

2 使用:<!DOCTYPE html>

2.1 使用也很简单,就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了

2.2 jsp的话,添加在<%@ page %>的下一行。

2.3 不用区分大小写哦

引用原文:http://angrycoder.iteye.com/blog/1757539

时间: 2024-10-28 08:44:05

<!DOCTYPE html>很重要的相关文章

web文档类型DOCTYPE html很重要

之前写html或者jsp页面,从来不注意DOCTYPE 的声明,也不太明白DOCTYPE 的作用.直到最近碰到了一个非常奇葩的bug:某一个页面在IE7和8,Chrome,ff等下正常,但是在IE9下显示有问题,我就开始找啊找,各种调试,终于在httpWatch里边找到了答案:DOCTYPE未声明.于是我给页面添加了<!DOCTYPE html>,果然奏效了. 下面我就尽可能简洁扼要的说一下DOCTYPE的作用和用法. 1作用:声明文档的解析类型(document.compatMode),避免

22个HTML5的初级技巧

Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰.因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助. 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了. HTML5的简短的DOCTYPE声明是让Firefox.Chrome等

浏览器解析模式

DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD).通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的位置,根元素 html 的起始标签之前,前面没有任何内容,不区分大小写.因为浏览器必须在解析 HTML 文档正文之前就确定当前文档的类型,以决定其需要采用的渲染模式.不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析.尤其是在 IE 系列浏览器中,由 DOCTYPE 所决定的 HTML 页面的渲

HTML5学习笔记(1):HTML5介绍与语法

HTML5介绍 HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性(例如<nav>网站导航块和<footer>).新型的标签有利于搜索引擎和语义分析,同时更好地帮助小屏幕装置和视障人士使用,除此之外,也提供了一些新的功能,比如视频音频用的<video>和<audio>,总结而言,有如下几大特点: 取消了一些HTML4里过时的元素和属性标记 其中包括纯粹显示效果的标记,如<font>和<center>,它们

Html5入门应用技巧,初学者必读

Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰.因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助. 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""> HTML5的Doctype声明很短,看到这个声

document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中加了:<!DOCTYPE html> 很明显在谷歌浏览器中两个值不是一个概念. 页面中不加:<!DOCTYPE html> 发现两个的值掉了个个! 所以这里有几个问题要搞明白: 1.<!DOCTYPE html>是什么 <!DOCTYPE> 声明不是 HTML

HTML5入门指引HTML5的初级技巧

Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰.因此,为了应对即将到来的HTML5,本文总结了几个实用HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助. 新的Doctype声明XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用

每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?

1.作用 该标签告知浏览器文档所使用的 HTML 规范.告诉浏览器按照何种规范解析页面 2.常用的DOCTYPE声明 HTML5 <!DOCTYPE html> HTML 4.0.1 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3.注意事项 3.1.<!DOCTYPE> 声明对大小

Doctype的作用以及严格模式和混杂模式的区别

<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现.标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行.在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作.HTML5 为什么只需要写 <!DOCTYPE HTML>?HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要docty