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

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.mzph.cn/web/63681.shtml

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

相关文章

【win10+RAGFlow+Ollama】搭建本地大模型助手(教程+源码)

一、RAGFlow简介 RAGFlow是一个基于对文档深入理解的开源RAG&#xff08;Retrieval-augmented Generation&#xff0c;检索增强生成&#xff09;引擎。 主要作用&#xff1a; 让用户创建自有知识库&#xff0c;根据设定的参数对知识库中的文件进行切块处理&#xff0c;用户向大…

qwt 之 QwtPlotPicker

QwtPlotMarker 和 QwtPlotPicker 是 Qwt 库中用于增强 QwtPlot 功能的两个重要类。它们分别用于在图中添加标记和实现交互式的选择或拖动功能。 QwtPlotPicker 提供了交互式的选择工具&#xff0c;它允许用户通过鼠标点击或拖动来选择图表中的数据点或区域。这对于实现缩放、平…

C/C++圣诞树

系列文章 序号直达链接1C/C爱心代码2C/C跳动的爱心3C/C李峋同款跳动的爱心代码4C/C满屏飘字表白代码5C/C大雪纷飞代码6C/C烟花代码7C/C黑客帝国同款字母雨8C/C樱花树代码9C/C奥特曼代码10C/C精美圣诞树11C/C俄罗斯方块12C/C贪吃蛇13C/C孤单又灿烂的神-鬼怪14C/C闪烁的爱心15C…

lua dofile 传参数

cat 1.lua arg[1] 111 arg[2] 222 dofile(./2.lua) cat 2.lua print("First argument is: " .. arg[1]) print("Second argument is: " .. arg[2]) 执行 lua 1.lua&#xff0c;结果为&#xff1a; First argument is: 111 Second argument is: 222 l…

电商数据流通的未来:API接口的智能化与自动化趋势

在数字化时代&#xff0c;电子商务行业正在以前所未有的速度发展&#xff0c;而API&#xff08;应用程序编程接口&#xff09;接口作为电商领域的重要组成部分&#xff0c;其应用和发展趋势也日益受到关注。API接口作为电商系统与外部服务或平台交互的桥梁&#xff0c;对电商数…

投标心态:如何在“标海战术”中保持清醒的头脑?

在竞争激烈的市场环境下&#xff0c;“标海战术”——即大规模参与投标——已经成为许多企业争取市场份额的重要策略。然而&#xff0c;盲目追求投标数量可能导致资源浪费、团队疲劳以及战略目标的模糊化。在这种高强度的竞争模式中&#xff0c;如何保持清醒的头脑&#xff0c;…

【苍穹外卖】学习心得体会-随笔

前言 写了很久&#xff0c;终于可以完整运行项目了&#xff0c;记录下这几天的心得体会回顾一下知识点 第一天、Git 分布式版本控制工具 一、Git概述 定义&#xff1a;是分布式版本控制工具&#xff0c;用于管理软件开发中的源代码文件&#xff0c;像Java类、xml文件、html…

windows C#-使用构造函数

实例化类或结构时&#xff0c;将会调用其构造函数。 构造函数与该类或结构具有相同名称&#xff0c;并且通常初始化新对象的数据成员。 在下面的示例中&#xff0c;通过使用简单构造函数定义了一个名为 Taxi 的类。 然后使用 new 运算符对该类进行实例化。 在为新对象分配内存…

研发效能DevOps: Vite 使用 Element Plus

目录 一、实验 1.环境 2.初始化前端项目 3.安装 vue-route 4.安装 pinia 5.安装 axios 6.安装 Element Plus 7.gitee创建工程 8. 配置路由映射 9.Vite 使用 Element Plus 二、问题 1.README.md 文档推送到gitee未自动换行 2.访问login页面显示空白 3.表单输入账户…

5G 模组 RG500Q常用AT命令

5G 模组 RG500Q常用AT命令 5G 模组 RG500Q常用AT命令 at ATQNWPREFCFG\"mode_pref\",nr5g && sleep 1 at ATQNWPREFCFG\"nr5g_band\",79 && sleep 1 at atqnwlock\"commo…

NVIDIA DeepStream插件之Gst-nvtracker

NVIDIA DeepStream插件之Gst-nvtracker 1. 源由2. 基础知识3. Gst-nvtracker插件3.1 插件参数3.2 插件API接口 4. 分析问题5. 总结6. 参考资料 1. 源由 这篇的主要目的是稍微吐槽下NVIDIA的设计&#xff0c;当然其实他们做的还是不错的&#xff08;从系统架构设计角度看&#…

进程内存转储工具|内存镜像提取-取证工具

1.内存转储&#xff0c;内存转储&#xff08;Memory Dump&#xff09;是将计算机的物理内存&#xff08;RAM&#xff09;内容复制到一个文件中的过程&#xff0c;这个文件通常被称为“内存转储文件”或“核心转储文件”&#xff08;Core Dump&#xff09;,内存转储的主要目的是…

Lua语言入门 - Lua 面向对象

Lua 面向对象 面向对象编程&#xff08;Object Oriented Programming&#xff0c;OOP&#xff09;是一种非常流行的计算机编程架构&#xff0c;通过创建和操作对象来设计应用程序。 以下几种编程语言都支持面向对象编程&#xff1a; CJavaObjective-CSmalltalkC#Ruby Lua 是…

Pyqt6在lineEdit中输入文件名称并创建或删除JSON文件

1、创建JSON文件 代码 import osdef addModulekeyWordFile(self):if "" ! self.lineEdit_module.text():moduleFile self.lineEdit_module.text() .jsonelse:self.toolLogPrinting(请输入模块名称)returnfilePath modulekeyWordFileDir moduleFileif os.path.e…

【Leetcode 热题 100】236. 二叉树的最近公共祖先

问题背景 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 最近公共祖先的定义为&#xff1a;对于有根树 T T T 的两个节点 p p p、 q q q&#xff0c;最近公共祖先表示为一个节点 x x x&#xff0c;满足 x x x 是 p p p、 q q q 的祖先且 x x x 的深度尽可能大…

数据结构--堆的向上调整和向下调整

文章目录 1.完全二叉树2.堆向上调整3.堆向下调整4.测试代码 1.完全二叉树 下面的这个就是对于我们的完全二叉树的这个逻辑结构和物理结构的说明&#xff1a; 逻辑结构就是我们自己认为的进行购想出来的&#xff1b; 但是这个物理结构却是我们的这个数据结构在内存里面的真是…

智能挂号系统设计典范:SSM 结合 Vue 在医院的应用实现

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

“魔法糖果盒的秘密:用朴素贝叶斯算法猜糖果颜色”

想象一下&#xff0c;你有一个神奇的糖果盒&#xff0c;这个糖果盒里有两种糖果&#xff1a;红色的和蓝色的。你闭上眼睛&#xff0c;从盒子里拿出一个糖果&#xff0c;然后尝一尝&#xff0c;你想知道这个糖果是红色的还是蓝色的。朴素贝叶斯算法就像是一个魔法规则&#xff0…

Transform组件的用法

文章目录 1. 概念介绍2. 使用方法3. 示例代码我们在上一章回中介绍了Checkbox Widget相关的内容,本章回中将介绍Transform Widget.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在这里说的Transform是一种容器类widget,它和Container组件类似。它可以包含其它的组件…

go面试问题

1 Go的内存逃逸如何分析 go build -gcflags-m main_pointer.go 2 http状态码 300 请求的资源可包括多个位置&#xff0c;相应可返回一个资源特征与地址的列表用于用户终端&#xff08;例如&#xff1a;浏览器&#xff09;选择 301 永久移动。请求的资源已被永久的移动到新U…