阅读量:0
HTML5 引入了新的语义元素、图形和多媒体支持，增强了表单功能，并提供了更好的兼容性和性能。
HTML5和HTML4之间存在显著的差异，这些差异不仅体现在语法和标签上，还涉及到了标准、语义化、多媒体支持以及存储技术等多个方面，以下是对两者区别的详细分析：
声明部分的变化
在HTML4中，DOCTYPE声明较为复杂，分为过渡定义类型、严格定义类型和框架定义类型三种，过渡定义类型的声明为<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，而在HTML5中，DOCTYPE声明变得非常简单，统一为<!DOCTYPE html>，这一变化使得HTML文档的结构更加清晰，同时也减少了浏览器解析时可能出现的错误。
指定字符编码
在HTML4中，字符编码通常通过meta标签来指定，如<meta httpequiv="ContentType" content="text/html; charset=UTF8">，而在HTML5中，可以直接在<meta>标签中追加charset属性来指定字符编码，如<meta charset="UTF8">，这种方式更加简洁，也更符合现代网页开发的趋势。
标签的书写改变
HTML5在标签的书写方面进行了简化，许多标签可以省略结束标记，甚至有些标签可以完全省略，但仍然保持其在文档结构中的存在。<li>、<dt>等标签可以省略结束标记，而<html>、<head>、<body>等标签甚至可以完全省略，这种灵活性使得HTML5代码更加简洁，易于编写和维护。
新增和废除的标签
HTML5新增了许多与结构相关的标签，如<section>、<article>、<aside>、<header>、<footer>、<nav>、<figure>等，这些标签使得文档结构更加清晰，语义化更强，HTML5也废除了一些过时或不常用的标签，如<big>、<u>、<font>、<center>等，以减少样式与结构的混淆，HTML5还增加了对多媒体的支持，通过<audio>和<video>标签可以直接在网页中嵌入音频和视频内容。
属性方面的增强
HTML5增强了表单元素的属性，如新增了email、url、number等多种输入类型，使得表单验证更加方便，一些属性名也可以默认具有boolean值，如只写属性名而不指定属性值时，表示属性值为true，HTML5还引入了WebStorage和IndexedDB等存储技术，允许在客户端创建数据库表并存储数据。
表格对比
| 特性 | HTML 4 | HTML 5 |
| DOCTYPE声明 | | |
| 字符编码 | | |
| 标签省略 | 不可省略 | 可以省略（如 |
| 新增标签 | 无 | |
| 废除标签 | 无 | |
| 多媒体支持 | 无 | |
| 表单增强 | 无 | email, url, number 等输入类型 |
| 存储技术 | 无 | WebStorage, IndexedDB |
FAQs
1. HTML5中的<!DOCTYPE html>声明有什么作用？
<!DOCTYPE html>是HTML5的DOCTYPE声明，它告诉浏览器使用HTML5规范来解析页面，这个声明非常简单且统一，有助于确保页面在不同浏览器中的正确显示。
2. HTML5相比HTML4有哪些优势？
HTML5相比HTML4具有多方面的优势，它提供了更简洁的DOCTYPE声明和字符编码方式；它新增了许多语义化更强的标签和属性，使得文档结构更加清晰；它支持多媒体内容的直接嵌入，无需依赖第三方插件；它还引入了多种存储技术，增强了客户端的数据存储能力，这些改进使得HTML5成为了构建现代Web应用的首选语言。
HTML 5 与 HTML 4 的主要区别
1. 标签语义化
HTML 4：标签的使用较为通用，很多标签的功能性不强，如<div> 和<span>。
HTML 5：引入了更多的语义化标签，如<article>,<section>,<nav>,<header>,<footer> 等，使页面结构更清晰。
2. 新增标签
HTML 4：仅有有限的标签，如<div>,<span>,<p>,<a>,<img> 等。
HTML 5：增加了许多新标签，如<canvas>,<audio>,<video>,<time>,<mark>,<meter> 等。
3. 语义化属性
HTML 4：属性较为有限，如class,id,name,title 等。
HTML 5：引入了更多的语义化属性，如placeholder,readonly,autofocus,required 等。
4. 事件处理
HTML 4：事件处理主要通过 JavaScript 实现。
HTML 5：增加了对事件处理的内置支持，如onload,onerror,ontouchstart 等。
5. 多媒体支持
HTML 4：主要依赖第三方插件（如 Flash）来支持多媒体。
HTML 5：原生支持音频和视频，通过<audio> 和<video> 标签实现。
6. 表单元素
HTML 4：表单元素相对简单。
HTML 5：增加了许多新的表单元素，如<input type="email">,<input type="tel">,<input type="date"> 等。
7. 性能优化
HTML 4：对性能优化的支持有限。
HTML 5：提供了更好的性能优化，如离线存储（通过<manifest> 标签），应用程序缓存等。
8. 移动设备支持
HTML 4：对移动设备的支持较差。
HTML 5：更好地适应移动设备，支持触屏操作等。
9. 兼容性
HTML 4：与旧浏览器的兼容性较好。
HTML 5：虽然增加了许多新特性，但对旧浏览器的兼容性可能较差。
10. 语义化结构
HTML 4：结构较为松散。
HTML 5：强调语义化结构，有助于搜索引擎优化（SEO）。
通过以上对比，可以看出 HTML 5 相比于 HTML 4 在标签语义化、新特性、性能优化等方面都有很大的改进。
