【H5 前端开发笔记】第 03 期：HTML的历史、书写规范与文档类型声明＜!DOCTYPE＞详解

🚀 个人主页 极客小俊

✍🏻 作者简介：程序猿、设计师、技术分享

🐋 希望大家多多支持, 我们一起学习和进步！

🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

HTML的历史与文档类型声明<!DOCTYPE>

在讲HTML文档声明之前,我们现在应该来了解一下HTML的历史了!

认识HTML的历史

1993年6月: HTML1.0作为一个草案发布, 由互联网工程工作小组(IETF)发布的, 但不是很完善! 并且这个版本还未公开给用户使用的!

互联网工程工作小组（Internet Engineering Task Force ，简称IETF）其实就是负责互联网标准的开发和发展的推动的一个组织!

1995年11月: 互联网工程工作小组发布了 HTML2.0发布, 在2000年6月发布之后被宣布过时!

但在这个期间各大浏览器厂商内部都有自己对应的HTML的使用版本这样子就产生了一个问题，也就是不同的浏览器所给定的HTML解析标准是不同的，最终产生浏览器显示有兼容性问题!

1997年1月: 由W3C组织统一标准进行发布HTML 3.2版本,也就是说各大浏览器可以通过这一标准对HTML进行解析!

1997年12月: W3C组织更新发布了HTML 4.0版本

1999年12月: W3C组织对HTML 4.0进行微小改进发布了HTML 4.01,

注意：这个版本就一直延续到现在还有人在使用!

例如:有些朋友利用 Dreamweaver CS6 新建的网页时, 就有人选择的HTML 4.01版本的标准, 如下图

2000年 W3C组织发布了XHTML1.0

XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）
XHTML 它的目的是想取代 HTML

为什么HTML前面多了一个X?

解释:

因为在之前的版本中HTML语法的各种书写规范非常松散、导致了很多程序员在写HTML的时候，非常随意,千差万别

但显示出来的页面效果是一样，源代码却有所不同! 最后导致网页的维护和兼容性都产生了一定的问题,

所以W3C就发现了HTML这个弊端, 从而当时也产生了一种 指可扩展标记语言 XML 它比HTML更加严谨!

所以W3C当时本身想直接从HTML过渡到XML! 但一下子很多开发和用户一时间无法适用XML的一种设计方式, 然后W3C就想出来了

一种在HTML和XML中间过渡的一种设计方式就叫做了 XHTML!

HTML5的由来了解

在2000年底 W3C就不在定义HTML的标准就一直在定义XHTML的标准了, 一直到2004年在这4年之间都是使用的XHTML标准

但是在这个时候W3C就想都已经过渡了4年了就想直接过渡到XML了, 但最终因为很多用户和开发者已经适应了XHTML所以这个理想终究未能实现! 所以之后的一段时间里都是在使用XHTML这个标准 ,

这个时候就有几个浏览器厂商觉得W3C定义的这个XHTML标准不好用! 他们想用回HTML, 这三个厂商分别如下:

Mozilla 火狐

Opera欧朋

ios 苹果safari

所以由他们三家浏览器厂商: Opera欧朋、Mozilla基金会、苹果、这些浏览器厂商组成了一个WHATWG组织,

WHATWG成立的原因是W3C意图放弃HTML，而力图发展XML! 因为W3C使用XHTML就是为了最终过渡到XML!

来开始定义我们现在所知道的HTML5

2014年10: 根据以上的历史问题最后由 W3C组织和WHATWG小组共同定义了一个新的HTML版本标准也就是: HTML5.0

常见使用的HTML版本

根据上面的历史问题我们可以得知现目前所见到的一些HTML版本有:

1999年的HTML4.01
2000年的XHTML1.0 或者 XHTML1.1
2014年的HTML5

文档类型声明<!DOCTYPE> 标签

知道了HTML的历史之后那么我们可以看下面的一段简单的HTML代码

html 复制代码

<html>
    <head>
        <title>这是第一个网页</title>
    </head>
    <body>
        <h1>
            Hello world
        </h1>
    </body>
</html>

以上的代码并不能让我们开发者知道使用的是那个HTML版本! 你并不知道它属于HTML4.01 还是XHTML 还是HTML5 ? 这里就引出一个

问题也就是文档类型声明

所以: 为了帮助浏览器来识别我们写的HTML文档类型版本我们的网页中就要加上一个标签: <!DOCTYPE>标签

HTML4.01、XHTML 、HTML5 文档类型的声明是不一样的! 接下来我们详细说一下每一种类型声明的细节

HTML4.01文档类型声明

HTML4.01过渡版 Transitional 声明代码如下:

html 复制代码

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

HTML4.01严格版 Strict 声明代码如下:

html 复制代码

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

HTML 4.01 框架集版 Frameset 声明代码如下:

html 复制代码

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

那么如果说我们的网页采用的是HTML4.01的文档类型，那么就把 <!DOCTYPE>文档声明加在如下位置:

html 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>这是第一个网页</title>
    </head>
    <body>
        <h1>
            Hello world
        </h1>
    </body>
</html>

如果使用的是HTML4.01 通常都是使用: 过渡版Transitional文档类型来定义

XHTML1.0文档类型声明

XHTML 1.0 过渡版 Transitional 声明代码如下：

html 复制代码

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

XHTML 1.0 严格版 Strict 声明代码如下：

html 复制代码

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

XHTML 1.0 框架集版 Frameset 声明代码如下：

html 复制代码

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

那么如果说我们的网页采用的是XHTML1.0的文档类型，那么就把 <!DOCTYPE>文档声明加在如下位置:

html 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>这是第一个网页</title>
    </head>
    <body>
        <h1>
            Hello world
        </h1>
    </body>
</html>

HTML 5文档类型声明

因为HTML4.01文档类型声明与XHTML1.0文档类型声明太过于复杂，而且容易书写错误，所以HTML 5文档声明就设计的比较简单，也容易被记住，代码如下：

html 复制代码

<!DOCTYPE html>

那么如果说我们的网页采用的是HTML 5的文档类型，那么就把 <!DOCTYPE>文档声明加在如下位置:

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>这是第一个网页</title>
    </head>
    <body>
        <h1>
            Hello world
        </h1>
    </body>
</html>

HTML语法书写规范

浏览器再解析HTML的时候, 会最大限度的去正确解析一个页面!

也就是说，你有不符合语法规范的内容,浏览器都会为你自动修正~

但又时候也会修正错误，所以最好是按照以下规范进行书写HTML代码! 养成编码良好习惯!

规范如下

HTML中不区分大小写,开发中一般都是使用小写

HTML中的注释不能嵌套

HTML标签必须结构完整,要么成对出现,要么单标签要有结束斜杠/

HTML标签可以嵌套，但不能交叉嵌套

HTML标签中的属性必须有值,并且值也要加引号! 单引号双引号都可以!

注意:

在我们编写网页时，一定要将文档声明写在网页的最上面。

如果不写文档声明，会导致有些浏览器会进入一个怪异模式，进入怪异模式后，浏览器解释网页会导致页面无法正常显示。

所以为了避免进入怪异模式，一定要写文档声明。

关于文档模式 我会在后面的CSS章节详细说明~

教程持续更新~~一定要关注哦! 🫰🫰🫰

"👍点赞" "✍️评论" "收藏❤️"
大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方，🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法，
欢迎一起交流学习❤️❤️💛💛💚💚

更多好玩好用好看的干货教程可以点击下方 关注❤️微信公众号 ❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

【H5 前端开发笔记】第 03 期：HTML的历史、书写规范与文档类型声明＜!DOCTYPE＞ 详解

HTML的历史与文档类型声明<!DOCTYPE>

认识HTML的历史

常见使用的HTML版本

文档类型声明<!DOCTYPE> 标签

HTML语法书写规范

【H5 前端开发笔记】第 03 期：HTML的历史、书写规范与文档类型声明＜!DOCTYPE＞详解