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

news2024/12/21 14:07:14

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.coloradmin.cn/o/2263262.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python使用Flask框架创建一个简单的动态日历

0. 运行效果 运行代码&#xff0c;然后在浏览器中访问 http://127.0.0.1:5000/&#xff0c;将看到一个动态日历&#xff0c;能够通过点击按钮切换月份。 1. 安装 Flask 首先&#xff0c;确保你已经安装了Flask。如果没有&#xff0c;可以使用以下命令安装&#xff1a; pip i…

一键优化Linux服务器性能(One Click Optimization of Linux Server Performance)

服务器上线之一键优化Linux服务器性能 以下是一个简单的Shell脚本&#xff0c;用于执行服务器上线优化的一些基本步骤。请注意&#xff0c;这个脚本是基于一个通用的Linux服务器配置&#xff0c;您可能需要根据您的具体需求和环境进行调整。 功能如下&#xff1a; 1.关闭SEL…

【电脑技巧】将键盘的方向键映射为alt+i、k、j、l

最近感觉方向键太远了&#xff0c;想找个方法修改键盘映射&#xff0c;有几种方式可以实现 使用powertoys的键盘映射&#xff08;软件太大了&#xff0c;只为键盘映射不值得下这个&#xff09;使用autohotkey&#xff08;通过脚本的方式&#xff0c;可以打包成exe文件&#xf…

apache-tomcat-6.0.44.exe Win10

apache-tomcat-6.0.44.exe Win10

文件防泄漏 | 文件防泄漏软件解决方案分享,网络数据泄露防护系统

文件防泄漏 | 文件防泄漏软件解决方案分享&#xff0c;网络数据泄露防护系统 企业面临的一大挑战是数据安全和隐私保护。 网络数据泄露不仅会导致经济损失&#xff0c;还会损害企业的声誉和客户关系。 为了应对这一挑战&#xff0c;域智盾软件应运而生&#xff0c;成为众多企…

11篇--图像边缘检测

图像梯度 要学习图像边缘检测&#xff0c;要先了解图像梯度的概念&#xff0c;我们正是通过梯度值来区分边缘像素点的 处于边缘附近的像素点与周围像素点的差距很大&#xff08;不然不会有边缘呈现&#xff09;&#xff0c;所以给边缘附近的的梯度之变化很快&#xff0c;通过…

细说STM32F407单片机轮询方式读写SPI FLASH W25Q16BV

目录 一、工程配置 1、时钟、DEBUG 2、GPIO 3、SPI2 4、USART6 5、NVIC 二、软件设计 1、FALSH &#xff08;1&#xff09;w25flash.h &#xff08;2&#xff09; w25flash.c 1&#xff09;W25Q16基本操作指令 2&#xff09;计算地址的辅助功能函数 3&#xff09;器…

.net core在linux导出excel,System.Drawing.Common is not supported on this platform

使用框架 .NET7 导出组件 Aspose.Cells for .NET 5.3.1 asp.net core mvc 如果使用Aspose.Cells导出excel时&#xff0c;报错 &#xff1a; System.Drawing.Common is not supported on this platform 平台特定实现&#xff1a; 对于Windows平台&#xff0c;System.Drawing.C…

岁末回望,追梦远方

又到了岁末年初&#xff0c;按惯例&#xff0c;风云我都会写一篇长长的感悟&#xff0c;给自己辞旧的总结复盘&#xff0c;迎新的追梦定调&#xff0c;今年赋诗一首&#xff0c;畅想一下诗和远方&#xff0c;简洁而又虚无&#xff0c;缥缈中坚定初心。 岁末回首步履深&#xf…

作业Day4: 链表函数封装 ; 思维导图

目录 作业&#xff1a;实现链表剩下的操作&#xff1a; 任意位置删除 按位置修改 按值查找返回地址 反转 销毁 运行结果 思维导图 作业&#xff1a;实现链表剩下的操作&#xff1a; 1>任意位置删除 2>按位置修改 3>按值查找返回地址 4>反转 5>销毁 任意…

多个Echart遍历生成 / 词图云

echart官网 安装 如果版本报错推荐安装以下版本 npm install echarts4.8.0 --savenpm uninstall echarts//这个是卸载命令以下安装成功后是局部引入:多个Echart遍历生成 vue3echart单个页面多个图表循环渲染展示:<template><div class"main"><div …

混凝土-钢板结构抗剪性能DIC全场应变测试

混凝土-钢板结构发挥了钢板抗拉及混凝土抗压的特点&#xff0c;为建筑设计、选材、施工等过程带来了更多的可能性。构件将混凝土与钢板结合&#xff0c;从而改善抗剪承载性能&#xff0c;提升建筑性能。 采用3D-DIC非接触式三维全场应变测量技术&#xff0c;对构件的抗剪承载力…

网络安全渗透有什么常见的漏洞吗?

弱口令与密码安全问题 THINKMO 01 暴力破解登录&#xff08;Weak Password Attack&#xff09; 在某次渗透测试中&#xff0c;测试人员发现一个网站的后台管理系统使用了非常简单的密码 admin123&#xff0c;而且用户名也是常见的 admin。那么攻击者就可以通过暴力破解工具&…

音频开发中常见的知识体系

在 Linux 系统中&#xff0c;/dev/snd 目录包含与声音设备相关的文件。每个文件代表系统中的一部分音频硬件或音频控制接口。以下是你列出的文件及其含义&#xff1a; 一.基本术语 样本长度(sample)&#xff1a;样本是记录音频数据最基本的单位&#xff0c;计算机对每个通道采…

Linux setfacl 命令详解

文章目录 Linux setfacl 命令详解一、ACL 和 setfacl 简介二、基本语法三、常用操作1. 查看 ACL2. 为用户设置权限3. 为组设置权限4. 删除 ACL 条目5. 设置默认 ACL6. 递归设置 ACL 四、示例操作1. 创建示例目录和文件2. 设置 ACL3. 验证 ACL 五、注意事项六、总结 Linux setfa…

编程训练系统(代码+数据库+LW)

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了编程训练系统的开发全过程。通过分析编程训练系统管理的不足&#xff0c;创建了一个计算机管理编程训练系统的方案。文章介绍了编程训练系统的系统分析部分&…

提炼关键词的力量:AI驱动下的SEO优化策略

内容概要 在当今数字化营销的环境中&#xff0c;关键词对于提升网站的可见性和流量起着至关重要的作用。企业和个人必须重视有效的关键词策略&#xff0c;以便在竞争激烈的网络市场中脱颖而出。本文将深入探讨如何利用人工智能技术来优化SEO策略&#xff0c;特别是在关键词选择…

【Where语法全解密】.NET开源ORM框架 SqlSugar 系列

文章目录 前言一、普通表达式查询 Where二、根据SQL查询 where三、动态查询四、动态拼表达式查询 &#xff0c;拼拉姆达五、条件拼接查询六、链式条件查询七、根据Class查询&#xff0c;根据实查询八、根据Class中主键查询九、根据字典查询十、查询函数十一、Where中有子查询十…

模型优化之知识蒸馏

文章目录 知识蒸馏优点工作原理示例代码 知识蒸馏优点 把老师模型中的规律迁移到学生模型中&#xff0c;相比从头训练&#xff0c;加快了训练速度。另一方面&#xff0c;如果学生模型的训练精度和老师模型差不多&#xff0c;相当于得到了规模更小的学生模型&#xff0c;起到模…

电脑问题4[非华为电脑安装华为电脑管家华为荣耀手机多屏协助]

非华为电脑安装华为电脑管家华为荣耀手机多屏协助 我是荣耀手机之前一直用的是window的"连接手机"功能,电脑控制手机还蛮好用,但是又不能够没有好的电脑控制手机的功能,后来想了想看了看,竟然安装了华为电脑关键,竟然可以顺利连接上荣耀手机,发现还蛮好用! 本文引用…