zoukankan      html  css  js  c++  java
  • 为什么要用<!DOCTYPE>声明

    实例:

    我们常常会看到类似这种代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>文档的标题</title>
    </head>
    <body>
    文档的内容......
    </body>
    </html>

    注解:能够看到最上面有一行关于“DOCTYPE”(文档类型)的声明,它就是告诉浏览器,使用哪种规范来解释这个文档中的规范。你知道假设没有它,浏览器在渲染页面的时候会使用怪异模式(各个浏览器在怪异模式下对各个元素渲染时有差异,因此会导致同一个样式在不同浏览器上看到的效果不同)。


    定义和使用方法

    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

    <!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本号进行编写的指令。

    在 HTML 4.01 中。<!DOCTYPE> 声明引用 DTD,由于 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才干正确地呈现内容。

    HTML5 不基于 SGML。所以不须要引用 DTD。

    提示:请始终向 HTML 文档加入 <!DOCTYPE> 声明。这样浏览器才干获知文档类型。

    HTML 4.01 与 HTML5 之间的差异

    在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中仅仅有一种:

    <!DOCTYPE html>

    HTML 元素和文档类型(Doctype)

    提示和凝视

    凝视:<!DOCTYPE> 声明没有结束标签。

    提示:<!DOCTYPE> 声明对大写和小写不敏感。

    提示:请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档!

    经常使用的 DOCTYPE 声明

    HTML 5

    <!DOCTYPE html>

    HTML 4.01 Strict

    该 DTD 包括全部 HTML 元素和属性,但不包括展示性的和弃用的元素(比方 font)。

    不同意框架集(Framesets)。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    HTML 4.01 Transitional

    该 DTD 包括全部 HTML 元素和属性,包括展示性的和弃用的元素(比方 font)。不同意框架集(Framesets)。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

    HTML 4.01 Frameset

    该 DTD 等同于 HTML 4.01 Transitional,但同意框架集内容。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
    "http://www.w3.org/TR/html4/frameset.dtd">

    XHTML 1.0 Strict

    该 DTD 包括全部 HTML 元素和属性。但不包括展示性的和弃用的元素(比方 font)。不同意框架集(Framesets)。必须以格式正确的 XML 来编写标记。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    XHTML 1.0 Transitional

    该 DTD 包括全部 HTML 元素和属性。包括展示性的和弃用的元素(比方 font)。不同意框架集(Framesets)。

    必须以格式正确的 XML 来编写标记。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    XHTML 1.0 Frameset

    该 DTD 等同于 XHTML 1.0 Transitional,但同意框架集内容。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    XHTML 1.1

    该 DTD 等同于 XHTML 1.0 Strict。但同意加入模型(比如提供对东亚语系的 ruby 支持)。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    总结

    (编写HTML时)声明文档类型:

    <!DOCTYPE html>

    这样声明的优点:

    • 你能够轻松的写下这个doctype,而不用操心会写错。
    • 它是向后兼容的(由于HTML5的doctype就是这样写的),而且现代浏览器都认识它。

    疑问:没有指定dtd将会开启浏览器的怪异模式?

           这样的说法是错的。正确的说法应该是未定义doctype才会开启怪异模式,也就是说你仅仅须要定义就能够让浏览器在严格模式(标准模式)下渲染页面。而不须要指定某个类型dtd。


    回想一下:

           全部的浏览器都有两种模式:怪异模式和严格模式(也有人叫标准模式)。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式,可是IE 6下面版本号永远定在了怪异模式。


    关于两种模式,你须要知道下面几点:

    1. 在标准化之前写的页面是没有doctype的。因此没有doctype的页面是在怪异模式下渲染的
    2. 反过来说。假设web开发者增加的doctype。说明他知道他所要做的事情,大部分的doctype会开启严格模式(标准模式),页面也会依照标准来渲染。

    3. 不论什么新的或者未知的doctype都会开启严格模式(标准模式)。

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

    你能够看看这个清单:http://hsivonen.iki.fi/doctype/

    注意:你能够根本不须要依据你选择的doctype来验证你的页面,仅仅要doctype标签存在就足以开启严格模式(标准模式)了。

    假设仍感到怀疑,那么请前往http://www.quirksmode.org/css/quirksmode.html#link2了解你想知道的内容。

    我们仅仅须要一小段JavaScript代码就能够得到答案。它就是:

    mode=document.compatMode;

    这个代码能够用来推断,当前浏览器是处于怪异模式还是标准模式,该属性的兼容性毋庸置疑,假设你表示怀疑,能够查看http://www.quirksmode.org/dom/w3c_html.html#t11

  • 相关阅读:
    音乐播放器
    对象的单体模式和面向对象
    箭头函数详解及this指向
    ES6的基础语法
    房贷灵活计算器
    [译文] SQL JOIN,你想知道的应该都有
    [Perl] 删除数组中重复元素
    [Qt] 自定义 滚动条 样式
    nodejs之异步思想
    导致人生失败的31种原因(转自csdn博客)
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5371218.html
Copyright © 2011-2022 走看看