介绍 Html 和 Html 5 的关系与区别

embedded/2024/12/25 0:00:31/

HTML(HyperText Markup Language)是构建网页的标准标记语言,而 HTML5 是 HTML 的最新版本,包含了一些新的功能、元素、API 和属性。HTML5 相对于早期版本的 HTML(比如 HTML4)有许多重要的改进和变化。以下是 HTML 和 HTML5 之间的一些主要区别:

1. 文档类型声明(Doctype)

HTML:HTML4 使用的是较为复杂的 DOCTYPE 声明,如:

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

HTML5:HTML5 使用的是简化的 DOCTYPE 声明:

<!DOCTYPE html>

这个变化使得 HTML5 的文档声明更加简洁易读。

2. 语义化标签

  • HTML:HTML4 中没有很多语义化的标签,网页的结构通常是通过
    和 等标签来构建的,缺乏对页面内容的描述。
  • HTML5:引入了许多新的语义化标签,使得页面结构更加清晰、易读,且对搜索引擎优化(SEO)有帮助。常见的 HTML5 语义标签包括:
<header>:定义页面或部分的头部。
<footer>:定义页面或部分的底部。
<nav>:定义导航链接。
<article>:定义独立的内容块。
<section>:定义文档中的节或部分。
<aside>:定义与页面内容相关的附加信息,如侧边栏。
<figure><figcaption>:定义图像和图像的标题。

3. 多媒体支持

  • HTML:HTML4 没有原生支持音频和视频,通常需要使用插件(如 Flash)来播放多媒体内容。
  • HTML5:HTML5 引入了原生的多媒体元素,直接支持音频和视频播放,使用 和 标签。例如:
<audio controls><source src="audio.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio><video controls><source src="video.mp4" type="video/mp4">Your browser does not support the video element.
</video>

4. 本地存储

  • HTML:HTML4 没有提供本地存储的功能,开发者通常依赖于 cookie 来存储数据,但 cookie 存储的数据量非常有限(通常为 4KB)。
  • HTML5:HTML5 引入了本地存储机制,提供了 localStorage 和 sessionStorage,这使得网页能够在用户的浏览器中存储大量数据,且存储的数据不会被清除直到主动删除:
	 localStorage:无过期时间的数据存储,数据在浏览器关闭后依然存在。sessionStorage:在会话期间存储数据,浏览器窗口关闭时数据会被清除。

5. 新的表单控件

  • HTML:HTML4 的表单控件相对基础,只支持传统的输入类型(如文本框、单选框、复选框、按钮等)。
  • HTML5:HTML5 引入了许多新的表单元素和输入类型,增强了表单功能。例如:
新的输入类型:email、tel、number、date、time、url、range 等。
新的表单控件:<datalist>(提供自动完成的输入框)、<progress>(显示进度条)、<meter>(显示度量数据)等。
<input type="email" placeholder="Enter your email">

6. Canvas 和 SVG

  • HTML:HTML4 没有内建的支持用于绘图和图形的功能。

  • HTML5:引入了 元素,允许开发者使用 JavaScript 绘制图形、图表、动画等。HTML5 还加强了对 SVG(可缩放矢量图形)的支持。

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

7. Web API(Web 应用接口)

  • HTML4:HTML4 没有提供直接的 Web 应用接口。
  • HTML5:HTML5 引入了许多新的 Web API,使得开发者可以实现更多的功能,例如:
Geolocation API:获取用户的位置信息。
Web Workers:实现多线程处理,提升应用性能。
WebSockets:进行实时双向通信。
File API:允许浏览器直接访问文件系统并读取文件。
Offline Storage:用于离线应用,允许将数据缓存到本地。

8. 移除了一些过时的元素和属性

  • HTML:HTML4 中有一些不再推荐使用的元素和属性,如 、
    等。
<font><center><strike> 
  • HTML5:移除了这些过时的元素和属性,推荐使用 CSS 来处理样式和布局。

9. 更好的兼容性

  • HTML5:HTML5 更加注重跨平台和跨设备的兼容性,支持现代浏览器、移动设备、触摸屏等设备,并且能更好地支持响应式设计。

10. 离线支持

  • HTML:HTML4 不支持离线应用。
  • HTML5:HTML5 引入了 AppCache 和 Service Workers,支持离线应用,使得应用在没有网络连接时依然能正常运行。

11. 总结

  • HTML 是构建网页的基础标准,它提供了网页结构和内容的基本定义。
  • HTML5 是 HTML 的最新版本,加入了许多新的功能和元素,如新的语义标签、音视频支持、表单控件、Canvas、Web API、离线支持等,使得开发更为现代化、功能更强大。

HTML5 的引入使得网页和应用变得更加丰富,支持多媒体、图形、动画、数据存储等功能,提升了用户体验,并且让开发者能够更方便地构建跨平台的网页和应用。


http://www.ppmy.cn/embedded/148469.html

相关文章

【CSS in Depth 2 精译_085】14.2:CSS 蒙版的用法

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 14 章 蒙版、形状与剪切】 ✔️ 14.1 滤镜 14.1.1 滤镜的类型14.1.2 背景滤镜 14.2 蒙版 ✔️ 14.2.1 带渐变效果的蒙版特效 ✔️14.2.2 基于亮度来定义蒙版 ✔️14…

将HTML转换为PDF:使用Spire.Doc的详细指南(一) 试用版

目录 引言 1. 为什么选择 Spire.Doc&#xff1f; 1.1 主要特点 1.2 适用场景 2. 准备工作 2.1 引入 Spire.Doc 依赖 2.2 禁用 SSL 证书验证 3. 实现功能 3.1 主类结构 3.2 代码解析 4. 处理图像 5. 性能优化 5.1 异步下载图像 示例代码 5.2 批量处理优化 示例代…

探索:为什么数组数据后端确要求前端传递,拼接的字符呢

你们好&#xff0c;我是金金金。 前言 撰写本文是因为好奇&#xff0c;好奇为什么,拼接的字符串数据过去能直接变成数组&#xff0c;好奇为什么让传,拼接的字符串而不是直接传递数组数据&#xff0c;好奇… 探索 首先看get请求&#xff0c;get请求参数一般都是携带在路径后面的…

汽车IVI中控开发入门及进阶(44):杰发科智能座舱芯片

概述: 杰发科技自成立以来,一直专注于汽车电子芯片及相关系统的研发与设计。 产品布局: 合作伙伴: 杰发科技不断提升产品设计能力和产品工艺,确保产品达 到更高的质量标准。目前杰发科技已通过ISO9001质 量管理体系与CMMIL3认证。 杰发科技长期合作的供应商(芯片代工厂、…

【蓝桥杯python研究生组备赛】001 递归+二分+前缀和

题目1 【深基2.例12】上学迟到 题目描述 学校和 yyy 的家之间的距离为 s s s 米&#xff0c;而 yyy 以 v v v 米每分钟的速度匀速走向学校。 在上学的路上&#xff0c;yyy 还要额外花费 10 10 10 分钟的时间进行垃圾分类。 学校要求必须在上午 8:00 \textrm{8:00} 8:0…

面向高精度网络的时间同步安全管理架构

论文标题&#xff1a;A Security Management Architecture for Time Synchronization Towards High Precision Networks 中文标题&#xff1a;面向高精度网络的时间同步安全管理架构 作者信息&#xff1a; 李红星&#xff0c;李登魁&#xff0c;张小东&#xff0c;寿国柱&am…

【Leetcode 每日一题】2545. 根据第 K 场考试的分数排序

问题背景 班里有 m m m 位学生&#xff0c;共计划组织 n n n 场考试。给你一个下标从 0 0 0 开始、大小为 m n m \times n mn 的整数矩阵 s c o r e score score&#xff0c;其中每一行对应一位学生&#xff0c;而 s c o r e [ i ] [ j ] score[i][j] score[i][j] 表示…

基于Spring Boot的远程教育网站

一、系统背景与意义 随着互联网技术的飞速发展和普及&#xff0c;远程教育已成为现代教育体系中的重要组成部分。它打破了时间和空间的限制&#xff0c;让学习者可以随时随地进行学习。基于Spring Boot的远程教育网站正是为了满足这一需求而设计的&#xff0c;它利用互联网技术…