Rumah > hujung hadapan web > html tutorial > DOCTYPE作用以及标准模式和兼容模式的区别详细介绍

DOCTYPE作用以及标准模式和兼容模式的区别详细介绍

高洛峰
Lepaskan: 2017-03-20 16:09:20
asal
2587 orang telah melayarinya

DOCTYPE的作用以及标准模式和兼容模式的区别

  1. 声明必须处于HTML文档的头部,在标签之前,告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。HTML5中不区分大小写

  2. 声明不是一个HTML标签,是一个用于告诉浏览器当前HTMl版本的指令

  3. 现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染,一些浏览器有一个接近标准模型

  4. 在HTML4.01中声明指向一个DTD,由于HTML4.01基于SGML,所以DTD指定了标记规则以保证浏览器正确渲染内容

  5. HTML5不基于SGML,所以不用指定DTD

      标准模式和兼容模式的区别:标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

具体区别:
1.盒模型
  在严格模式中 :width是内容宽度 ,元素真正的宽度 = width;
  在兼容模式中 :width则是=width+padding+border
2.兼容模式下可设置百分比的高度和行内元素的高宽
    在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在兼容模式下,则会生效。
    在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
3.用margin:0 auto设置水平居中在IE下会失效
    使用margin:0 auto在standards模式下可以使元素水平居中,但在兼容模式下却会失效(用text-align属性解决)
    body{text-align:center};#content{text-align:left}
4.兼容模式下Table中的字体属性不能继承上层的设置,white-space:pre会失效,设置图片的padding会失效

  1. 声明必须处于HTML文档的头部,在标签之前,告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。HTML5中不区分大小写

  2. 声明不是一个HTML标签,是一个用于告诉浏览器当前HTMl版本的指令

  3. 现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染,一些浏览器有一个接近标准模型。

  4. 在HTML4.01中声明指向一个DTD,由于HTML4.01基于SGML,所以DTD指定了标记规则以保证浏览器正确渲染内容

  5. HTML5不基于SGML,所以不用指定DTD

      标准模式和兼容模式的区别:标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

具体区别:
1.盒模型
  在严格模式中 :width是内容宽度 ,元素真正的宽度 = width;
  在兼容模式中 :width则是=width+padding+border
2.兼容模式下可设置百分比的高度和行内元素的高宽
    在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在兼容模式下,则会生效。
    在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
3.用margin:0 auto设置水平居中在IE下会失效
    使用margin:0 auto在standards模式下可以使元素水平居中,但在兼容模式下却会失效(用text-align属性解决)
    body{text-align:center};#content{text-align:left}
4.兼容模式下Table中的字体属性不能继承上层的设置,white-space:pre会失效,设置图片的padding会失效

Atas ialah kandungan terperinci DOCTYPE作用以及标准模式和兼容模式的区别详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan