html4和html5的区别

最新推荐文章于 2023-01-02 21:27:42 发布

菜鸡爱上编程

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量3.8k

点赞数 4

分类专栏： html必会文章标签： html5 html

本文链接：https://blog.csdn.net/qq_43205326/article/details/110728516

版权

html必会专栏收录该内容

4 篇文章 0 订阅

订阅专栏

开篇

在我看来，刚入坑的前端的朋友，一般都不会想说学习更新前的知识，毕竟前端现在无论是框架，还是，各种原生的html，css，js都有很快的更新。
学过时的知识有什么用，现在不都是新知识吗，但是有的时候，你不知道也是会吃亏的
比如说：你面试时候，突然问你html4和html5的区别是什么。额。。。这。。。嗯。。。

前言

本篇文章主要是总结了html4和html5的区别，只是常见以及常用的区别

一、声明部分的变化

DOCTYPE声明
声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。
【过渡定义类型】：HTML4.01文档过渡定义类型，此类型定义的文档，对于标记和属性的语法要求并不是很严格，可以使用HTML中的标签与元素包括一些修饰性标签（例如：u、b等标签），不可以使用框架。

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

【严格定义类型】：HTML4.01文档严格定义类型，此类型定义的文档，对于文档内的代码要求比较严格，不允许使用任何表现层的标记和属性（例如：u、b等标签），不可以使用框架。

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

【框架定义类型】：HTML4.01文档框架定义类型，除 frameset 元素取代了 body 元素之外，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架。

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

文本来源于《HTML5布局之路》

二、指定字符编码

1、指定字符编码
在 HTML4 中，使用 meta 标签的形式指定文件中的字符编码，如下所示：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >

2、在 HTML5 中，可以使用对标签直接追加 charset 属性的方式来指定字符编码，如下所示：

<meta charset="UTF-8">

三、在标签的书写方面的改变

可以省略标记的元素
在 HTML5 中，标签的标记分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。让我们来针对这三类情况列举一个标签清单，其中包括 HTML5 中的新标签。

不允许写结束标记的标签有：

area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

可以省略结束标记的标签有：

li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

可以省略全部标记的标签有：

html、head、body、colgroup、tbody。

例如“
…”的书写方式是错误的，正确的书写方式为“
”。当然，HTML5之前的版本中
这种写法可以被沿用。

例如将body标签省略不写时，但它在文档结构中还是存在的，可以使用document.body进行访问。

具有boolean值的属性
对于具有boolean值的属性，例如 disabled 与 readonly 等，当只写属性而不指定属性值时，表示属性值为true；如果想要将属性值设为flase，可以不使用该属性。另外，要想将属性值设为true时，也可以将属性名设定为属值，或将空字符串设定为属性值。属性值的设定方法可以参考下面的示例：

<!--只写属性不写属性值代表属性为true-->
<input type="checkbox" checked>
<!--不写属性代表属性为false-->
<input type="checkbox">
<!--属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串，代表属性为true-->
<input type="checkbox" checked="">

举个栗子：

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5 标记示例</title>
<p>这段代码是根据HTML5语法
<br/>编写出来的。
1、该代码完全是用 HTML5 写成的；
2、省略了<html>、<head>、<body>等标签；
3、DOCTYPE申明使用了 HTML5 支持的简洁申明方式；
4、用<meta>标签的 charset 属性指定字符编码；
5、省略了<p>标签的结束标记；
6、使用<标签/>的方式来结束<title>标签以及<br>标签。

四、新增和废除的标签

在 HTML5 中，新增了以下与结构相关的标签：
section标签
section 标签表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。
article标签
article 标签表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章或报纸中的一篇文章。
aside标签
aside 标签表示 article 标签的内容之外、并与article 标签的内容相关的辅助信息。
header标签
header 标签表示页面中的一个内容区块或整个页面的标题。
hgroup标签
hgroup 标签用于对整个页面或页面中一个内容区块的标题进行组合。
footer标签
footer 标签表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者的版权或联系信息。
nav标签
nav标签表示页面中导航链接的部分。
figure标签
figure 标签表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用 figcaption 标签为 figure 标签组添加标题。

2、新增的其他标签
除了结构标签外，在 HTML5 中，还新增了以下标签：
video标签

<video src="movie.ogg" controls>video标签</video>

HTML4 中代码示例：

<object type="video/ogg" data="movie.ogv">
    <param name="src" value="movie.ogv">
</object>

audio标签
audio 标签定义音频，比如音乐或其他音频流。
HTML5 中代码示例：

<audio src="someaudio.wav">audio标签</audio>

HTML4 中代码示例：

<object type="application/ogg" data="someaudio.wav">
    <param name="src" value="someaudio.wav">
</object>

canvas标签
canvas 标签表示图形，比如图表和其他图像。这个标签本身没有行为，仅提供一块画布，但它把一个绘图 API 展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。
HTML5 中代码示例：

<canvas id="myCanvas" width="200" height="200"></canvas>

HTML4 中代码示例：

<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

embed标签
embed 标签用来插入各种多媒体，格式可以是 midi、wav、aiff、au、mp3等。
HTML5 中代码示例：

<embed src="horse.wav" />

HTML4 中代码示例：

<object data="flash.swf" type="application/x-shockwave-flash"></object>

mark标签
mark 标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark 标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5 中代码示例：

<mark>...</mark>

progress标签
progress 标签表示一个进度条，可以使用 progress 标签来显示那些执行耗时较长的操作，提升用户体验。
HTML5 中代码示例：

<progress value="22" max="100"></progress>

六、新增表单控件

email、url、number、range、date、month、week、datetime、dateTime-local、search、color、tel
HTML5 中新增了很多 input 标签的类型，现列举如下：
email 类型表示必须输入 E-mail 地址的文本输入框。
url 类型表示必须输入URL地址的文本输入框。
number 类型表示必须输入数值的文本输入框。
range 类型表示必须输入一定范围内数字值的文本输入框。
Date Pickers
<input type="date" />----选取日、月、年
<input type="month" />----选取月、年
<input type="week" />----选取周和年
<input type="time" />----选取时间（小时和分钟）
<input type="datetime" />----选取时间、日、月、年（UTC时间）
<input type="datetime-local" />----选取时间、日、月、年（本地时间）

五、废除的标签

由于各种原因，在 HTML5 中废除了很多标签，简单介绍如下。

1、能使用CSS替代的标签
对于 basefont、big、center、font、s、strike、tt、u这些标签，由于它们的功能都是纯粹为画面展示服务的，在 HTML5 中提倡把画面展示型功能放在 CSS 样式表中统一编辑，所以将这些标签废除了，并使用添加或编辑 CSS 样式表的方式进行替代。

2、不再使用frame框架
对于 frameset 标签、frame 标签与 noframes 标签，由于 frame 框架对网页可用性存在负面影响，在 HTML5 中已不支持 frame 框架，只支持 iframe 框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上这三个标签废除。

3、只有部分浏览器支持的标签
对于 applet、bgsound、blink、marquee 等标签，由于只有部分浏览器支持这些标签，特别是 bgsound 标签以及 marquee 标签，只被 IE 所支持，所以在 HTML5 中被废除。其中 applet 标签可由 embed 标签或 object 标签替代，bgsound 标签可由 audio 标签替代，marquee 可以由 JavaScript 编程的方式所替代。

4、其他被废除的标签

废除 rb 标签，使用 ruby 标签替代
废除 acronym 标签，使用 abbr 标签替代
废除dir 标签，使用 ul 标签替代
废除 isindex 标签，使用 form 标签与 input 标签相结合的方式替代
废除 listing 标签，使用 pre 标签替代
废除 xmp 标签，使用 code 标签替代
废除 nextid 标签，使用 GUIDS 替代
废除 plaintext 标签，使用“text/plian”MIME类型替代