DOCTYPE解读

DOCTYPE解读

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

DOCTYPE的作用?标准模式和兼容模式各有什么区别?为什么html5只需要写<!doctype html>

參考文档:https://www.cnblogs.com/wuqiutong/p/5986191.html

DOCTYPE的作用

  1. <!doctype> 声明位于 HTML 文档第一行, 处于<html> 标签之前,用于告诉浏览器该以什么文档标准去解析这个文档
  2. DOCTYPE 声明不存在或者不正确会导致文档以兼容模式呈现

标准模式 VS 兼容模式

  1. 标准模式(standards):又称严格模式,指浏览器按照 W3C 标准解析代码,排版和 JS 的运行都是以浏览器支持的最高标准运行
  2. 兼容模式(quirks):又称怪异模式或者混杂模式,指浏览器以自己的方式解析代码
  3. 区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关
    1. 标准模式呈现:有 URL 的过渡 DTD
    2. 混杂模式呈现:
      1. 没有 URL 的过渡 DTD
      2. 没有DTD或者格式不正确
    3. HTML5中不是基于SGML的,没有DTD,没有标准和兼容模式之分,所以只需要写<!doctype html>

具体到两种模式解析上的不同点

  1. 盒模型的高宽包含内边距padding和边框border, 在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在IE5.5及以下的浏览器及其他版本的Quirks模式下,IE的宽度和高度还包含了paddingborder
  2. Standards模式下,给span等行内元素设置wdithheight都不会生效,而在quirks模式下,则会生效
  3. standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的
  4. 使用margin:0 autostandards模式下可以使元素水平居中,但在quirks模式下却会失效,quirks模式下的解决办法,用text-align属性:body{text-align:center};#content{text-align:left}
  5. quirks模式下设置图片的padding会失效
  6. quirks模式下Table中的字体属性不能继承上层的设置
  7. quirks模式下white-space:pre会失效

DOCTYPE 的文档类型

我们去编译器里快速生成这些各种类型的声明来看看

1. HTML5(一种)

1
<!DOCTYPE html>

2. HTML 4.01(三种):

严格模式包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);过渡模式包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);框架模式等同于过渡模式,但允许框架集内容

HTML 4.01 Strict

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

HTML 4.01 Transitional

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

HTML 4.01 Frameset

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

3、XHTML 1.0(四种)

前三种模式同上,XHML 必须以格式正确的 XML 来编写标记

XHTML 1.0 Strict

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

XHTML 1.0 Transitional

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

XHTML 1.0 Frameset

1
<!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,但允许添加模型

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

XHTML、HTML VS HTML5

  1. 文档声明不同,具体见上面一节DOCTYPE 的文档类型
  2. HTML 没有提供结构语义化的标签,而HTML5提供了很多新的语义化的标签
  3. XHML VS HTML
    1. 相比较 HTML 而言,XHTML 更加严格
    2. XHTML 所有的标记都必须要有一个相应的结束标记
    3. XHTML 所有标签的元素和属性的名字都必须使用小写
    4. 所有的 XML 标记都必须合理嵌套
    5. XHTML 所有的属性必须用引号括起来
    6. XHTML 文档图片必须有说明文字

名词解释

以上有一些名词,可能平时会少注意一些,但是以后肯定是有用的,我去百度查了下,大概总结如下,同时也贴了相关链接在本文中,遇到问题方便查找

DTD

文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则

  1. 文档类型定义可定义合法的标准通用标记语言可扩展标记语言文档构建模块
  2. 它使用一系列合法的元素来定义文档的结构
  3. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用

SGML

SGML(Standard Generalized Markup Language,即标准通用标记语言)

详细见智库百科

主要特点

  1. 它可以支持众多的文档结构类型,例如布告、技术手册、章节目录、设计规范、各种信函等
  2. 它可以创建与特定的软硬件无关的文档,因此很容易与使用不同计算机系统的用户交换文档

主要构成

  1. SGML声明(SGML Declaration)
  2. 文档类型定义(Document Type Definition,DTD)
  3. 文档实例(Document Instance)

RSS

简易信息聚合(也叫聚合内容)是一种RSS基于XML标准,在互联网上被广泛采用的内容包装和投递协议

RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用

详细见[RSS简易信息聚合]

本文标题:DOCTYPE解读

文章作者:王工头

发布时间:2019年01月23日 - 21:18:32

最后更新:2019年01月25日 - 13:22:33

原始链接:https://qqqww.com/DOCTYPE解读/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------