HTML（2）——HTML的发展历程以及文档类型

每月一号准时摆烂

已于 2022-07-19 02:14:24 修改

阅读量253

点赞数 4

分类专栏： HTML 文章标签：前端 html

于 2022-07-19 02:10:28 首次发布

本文链接：https://blog.csdn.net/qq_54186956/article/details/125863582

版权

HTML 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

XHTML和HTML5相较于HTML4的区别

DOCTYPE与浏览器的渲染方式

DTD类型

1999年W3C组织发布了HTML4.01版本，这两个版本是最广泛使用的标准;2000年，W3C组织发布了XHTML1.0版本；2008年，W3C发布了HTML5的工作草案。

XHTML和HTML5相较于HTML4的区别

XHTML是可扩展标记语言，相比较于HTML4，实际上是HTML4的升级版本，在用法与HTML4十分相似。XHTML新增了以下特点：

用户可以扩展元素，从而达到扩展功能的目的。
能够很好地与HTML进行沟通，兼容了不同地浏览器。

但是XHTML同样有一点的缺陷，比如XHTML的标签必须闭合，同时所有属性必须小写，并且标签必须带有引号，这对于开发者来说不利于编写。

HTML5奉行的是“不破坏web的原则”，HTML5能够向下兼容，以前存在的网页同样能够正常地显示。HTML5新增了语义化标签，header、aside、article、footer，其中header一遍用于定义文档的页眉，用于介绍文档的信息；aside标签是网页的附属信息部分；article用于构建页面的正文内容；footer用于定义页脚的注释内容；利用如下图所示为就是一个比较简单的使用上述几个标签做的静态网页：

除了上面讲述的几个标签之外，HTML5还新增了section标签用于表示页面中的内容区块；hgroup标签用于对于整个页面中或者部分区域进行标题进行组合；nav标签用于导航链接部分；figure标签用于表示网站制作页面上一块独立的内容。

同时HTML5废除了HTML4的部分标签，例如：acronym、basefont、frame、frameset、isindex等。

DOCTYPE与浏览器的渲染方式

DOCTYPE是Document Type的英文简写，简单来说就是告诉浏览器采用什么方式来渲染页面。

浏览器的主要渲染方式有三种：Quirks Model（怪异模式）、Standards Mode（标准模式）以及Almost Standards Mode（几乎标准模式）。

标准HTML5的DOCTYPE会触发浏览器以标准模式显示页面。浏览器根据DOCTYPE来识别使用那种解析模式。

怪异模式下，浏览器使用自己的怪异模式解析渲染页面，而标准模式下，浏览器使用W3C的标准俩解析渲染模式。例如：在怪异模式下，盒模型为怪异模式，宽高包括padding和border，默认的浮动图片的水平margin是3px而不是0；而标准模式的宽高包含padding和border。

DTD类型

HTML4.01中规定了三种DTD类型：严格型（Strict）、过渡性（Transitional）和框架型（Frameset）。DTD指定是文档定义类型（Document Type Definition）是一套为了进行数据交换而建立的关于标记符的语法规则。它是标准通用标记语言（SGML）和可扩展标记语言（XML）1.0版本规格的一部分，文档可以根据某种DTD语法验证格式是否符合此规则。文档定义标准可以保证标准通用标记语言、可标记语言格式的合法性。而三种HTML4.01DTD类型的写法如下所示：

（1）严格型：

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

（2）过渡型

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

（3）框架型

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01 Frameset//EN”
“http;//www.w3.org/TR/html4/frameset.dtd”>

HTML5对于DTD的定义就较为简单，如下所示：

<!DOCTYPE html>

相较于HTML4.01，HTML5不是基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器行为。

不难看出，HTML5相较于HTML4变得更加简介，HTML5的新元素减少了web的难度，从而降低了web的开发难度。

注：上述静态页面的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #container{
            width: 100%;
            height: 700px;
        }
        #header{
            width: 100%; 
            height: 150px;
            background-color: aqua;
            text-align: center;
        }
        #aside{
            width: 20%;
            height: 500px;
            background-color: burlywood;
            float: left;
            text-align: center;
        }
        #article{
            width: 80%;
            height: 500px;
            float: left;
            text-align: center;
            background-color: azure;
        }
        #footer{
            width: 100%;
            height: 50px;
            float: left;
            text-align: center;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            <h3>header</h3>
        </div>
        <div id="aside">
            <h3>aside</h3>
        </div>
        <div id="article">
            <h3>article</h3>
        </div>
        <div id="footer">
            <h3>footer</h3>
        </div>
    </div>
</body>
</html>