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

ops/2024/12/22 11:17:50/

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/ops/144005.html

相关文章

Linux下部署MySQL8.0集群 - 主从复制(一主两从)

目录 一、部署前准备 1、查看系统信息 # 查看系统版本 cat /etc/red* # 查看系统位数 getconf LONG_BIT[rootlocalhost ~]# cat /etc/red* CentOS Linux release 7.5.1804 (Core) [rootlocalhost ~]# getconf LONG_BIT 642、下载对应安装包 进入MySQL官网&#xff1a;https:…

【Python】【数据分析】深入探索 Python 数据可视化:Plotly 绘图库全面解析

这里写目录标题 引言一、Plotly 概述二、安装 Plotly三、Plotly 的结构与功能模块3.1 Plotly Graph Objects3.2 Plotly Express3.3 Plotly Subplots 四、Plotly 图表类型五、Plotly 图表自定义与美化5.1 自定义图表标题和坐标轴5.2 自定义颜色和样式5.3 添加注释和文本5.4 图表…

MySQL专题:日志及MVCC

MySQL是一种广泛应用的关系型数据库管理系统&#xff0c;以其高性能和灵活性著称。在保证数据安全性和一致性方面&#xff0c;MySQL通过日志和多版本并发控制&#xff08;MVCC&#xff09;提供了强有力的支持。本文将深入解析日志和MVCC的原理及其在实际应用中的作用。 日志&a…

SpringBoot 启动类 SpringApplication 一 构造器方法

SpringApplication SpringBootApplication ComponentScan(basePackages { "com.example.*" }) public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args); // Spirngboot程序入口} } public st…

计算机毕业设计hadoop+spark视频推荐系统 短视频推荐系统 视频流量预测系统 短视频爬虫 视频数据分析 视频可视化 视频大数据 大数据

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

《第十二部分》1.STM32之RTC实时时钟介绍---BKP实验

本章将介绍一种计数计时的外设 RTC实时时钟-----Whappy STM32提供了4中时钟来源&#xff01; 函数名功能作用void BKP_DeInit(void);复位备份区域寄存器配置&#xff0c;将备份域的所有寄存器恢复到默认状态。void BKP_TamperPinLevelConfig(uint16_t BKP_TamperPinLevel);配置…

ubuntu批量依赖库拷贝(ldd)

背景 如何将程序依赖的动态库拷贝到指定的目录&#xff1f; 例子 通过LDD查看依赖的动态库。 $ ldd extract_gpulinux-vdso.so.1 (0x00007ffd931e4000)libopencv_cudacodec.so.4.1 > /home/joyner/disk1/mmaction/third_party/opencv-4.1.0/build/lib/libopencv_cudacod…

可编辑46PPT | AI+智能中台企业架构设计_重新定义制造

荐言分享&#xff1a;随着信息技术的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;逐渐成为推动企业数字化转型和提升竞争力的关键力量。AI中台作为一种新兴的技术框架&#xff0c;通过整合不同的AI技术和资源&#xff0c;实现了AI能力的快速研发、共享复用与灵活部…