HTML5和HTML的区别-CSDN博客

本文链接：https://blog.csdn.net/ouyangqing/article/details/134049597

本文详细比较了HTML5与HTML4在声明文件类型、结构语义、绘图、动画、音频视频支持、响应式设计、表单元素和语法处理等方面的差异，展示了HTML5的进化和增强特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5的概念分为广义和狭义两种。

狭义的概念HTML５是指HTML语言的第5个版本，而HTML是指５之前的版本。
广义的概念HTML5是指由HTML５、CSS3、JavaScript所组成的开发环境。而HTML是指HTML语言本身。

1、HTML５与HTML狭义上具体的区别

1）声明文件类型区别

HTML：文档声明比较长，很难记忆

<!--html的声明-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--xhtml的声明-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5：文档声明简单，方便记忆

<!DOCTYPE html>

2）结构语义区别

html：没有体现结构语义化的标签，如：<div id="nav"></div>

html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...。相对于HTML，HTML5中新增和修改了一些元素。

3）绘图区别

HTML：指可伸缩矢量图形，使用img标签添加固定的图像，用于定义网络的基于矢量的图形。

HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。

4）动画实现的区别

HTML：需要使用插件实现，一般为Flash，而且不同的浏览器对插件的支持有兼容问题，现代浏览器已经默认不支持Flash

HTML5：使用canvas元素配合JavaScript可实现动画，

5）音频和视频的支持

HTML：如果不使用Flash播放器支持，它不支持音频和视频，而Flash有兼容问题。

HTML5：使用<audio>和<video>标签来支持音频和视频控制。

6）对响应式的支持

HTML不能通过标签属性支持响应式

HTML5可通过标签属性支持响应式，比如img标签的srcset属性可以同时设置多张图像，然后根据视口不大小选择显示不同的图像。还有通过meta标签设置视口属性，实现网页布局的响应式

<!--视口设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--srcset设置-->
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

7）表单元素

HTML：input标签的类型较少，通过表单操作时，表单元素必须在表单中

HTML5：扩展了input标签的类型，如邮箱验证、数字、日期等，同时还增加了一些其它标签，如datalist。通过表单操作时，可通过表单元素的form属性与表单关联

<form id="f1"></form>
<button formaction="add" form="f1">提交</button>
<input type="text" name="name" form="f1">

8）语法的处理

HTML：无法处理不准确的语法。当标签未正确结束时不会补全标签。

HTML5：能够处理不准确的语法。当标签未正确结束时会自动补全标签。

更多学习视频和专栏文章请到哔站个人空间：布道师学院的个人空间-布道师学院个人主页-哔哩哔哩视频

更多资源和项目下载请到：”开源吧（找实战项目和毕设项目的好网站）“ ：开源吧