当前位置: 首页 > news >正文

HTML5和HTML的区别

HTML5的概念分为广义和狭义两种。

  • 狭义的概念HTML5是指HTML语言的第5个版本,而HTML是指5之前的版本。

  • 广义的概念HTML5是指由HTML5、CSS3、JavaScript所组成的开发环境。而HTML是指HTML语言本身。

1、HTML5与HTML狭义上具体的区别

1)声明文件类型区别

HTML:文档声明比较长,很难记忆

<!--html的声明-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--xhtml的声明-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5:文档声明简单,方便记忆

<!DOCTYPE html>

2)结构语义区别

html:没有体现结构语义化的标签,如:<div id="nav"></div>

html5:添加了许多具有语义化的标签,如:<article>、<aside>、<audio>、<bdi>...。相对于HTML,HTML5中新增和修改了一些元素。

3)绘图区别

HTML:指可伸缩矢量图形,使用img标签添加固定的图像,用于定义网络的基于矢量的图形。

HTML5:HTML5的canvas元素使用脚本(通常使用JavaScript)在网页上绘制图像,可以控制画布每一个像素。

4)动画实现的区别

HTML:需要使用插件实现,一般为Flash,而且不同的浏览器对插件的支持有兼容问题,现代浏览器已经默认不支持Flash

HTML5:使用canvas元素配合JavaScript可实现动画,

5)音频和视频的支持

HTML:如果不使用Flash播放器支持,它不支持音频和视频,而Flash有兼容问题。

HTML5:使用<audio>和<video>标签来支持音频和视频控制。

6)对响应式的支持

HTML不能通过标签属性支持响应式

HTML5可通过标签属性支持响应式,比如img标签的srcset属性可以同时设置多张图像,然后根据视口不大小选择显示不同的图像。还有通过meta标签设置视口属性,实现网页布局的响应式

<!--视口设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--srcset设置-->
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

7)表单元素

HTML:input标签的类型较少,通过表单操作时,表单元素必须在表单中

HTML5:扩展了input标签的类型,如邮箱验证、数字、日期等,同时还增加了一些其它标签,如datalist。通过表单操作时,可通过表单元素的form属性与表单关联

<form id="f1"></form>
<button formaction="add" form="f1">提交</button>
<input type="text" name="name" form="f1">

8)语法的处理

HTML:无法处理不准确的语法。当标签未正确结束时不会补全标签。

HTML5:能够处理不准确的语法。当标签未正确结束时会自动补全标签。

更多学习视频和专栏文章请到哔站个人空间: 布道师学院的个人空间-布道师学院个人主页-哔哩哔哩视频

更多资源和项目下载请到:”开源吧(找实战项目和毕设项目的好网站)“ ​ :开源吧

http://www.lryc.cn/news/206824.html

相关文章:

  • 【Amazon】跨AWS账号级别迁移弹性IP地址操作流程
  • 2023-python pdf转换为PPT代码
  • 学会场景提问,让AI“小助手”为我所用
  • 前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)
  • 对文件夹内的所有图像进行随机调整对比度和应用高斯滤波
  • ios上架上传构建版本的windows工具
  • arcgis js api 4.x加载geoserver发布的地方坐标系(自定义坐标系)的wms服务
  • 人工智能的发展方向:探索智能未来的无限可能
  • 【23秋软工第7周作业】项目选题
  • 谷歌云的利润增长才刚刚开始
  • 【Golang】简记操作:Centos安装、卸载、升级Golang运行环境
  • 开启生成式AI的探索之旅,亚马逊云科技分享生成式AI热门案例
  • 【Python机器学习】零基础掌握IsolationForest集成学习
  • GNN图神经网络入门
  • node 第十二天 npm补充 详解package-lock.json在团队协作中的作用
  • 解决Visual studio 未能正确加载...包问题
  • Baumer工业相机堡盟工业相机如何使用BGAPISDK生成视频(C++)
  • CentOS 搭建本地 yum 源方式 安装 httpd 服务
  • 第二篇 渲染框架2.x
  • k8s-----25、资源调度-ResourceQuota资源配额、资源限制limitrange、服务质量QoS
  • Pytorch使用torchvision.datasets.ImageFolder读取数据集,数据集的内容排列状况
  • uni-app:引用文件的方法
  • 软件测试必备:如何编写测试用例?
  • windows安装数据库MySQL
  • 2023CCF中国开源大会 | 麒麟信安作为首批合作伙伴入驻全国信创开源广场
  • python网络爬虫实例
  • ArcGIS中如何为跨带数据投影?
  • 如何在Ubuntu中安装libevent库
  • 领域高口碑 | 中科院1区TOP,Elsevier出版社,仅1个月Accept!稳定检索40年!
  • RDBMS 的历史回顾