当前位置: 首页 > 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:能够处理不准确的语法。当标签未正确结束时会自动补全标签。

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

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

相关文章:

  • 13.计算机视觉
  • Shopee买家通系统全自动化操作简单方便又快速
  • 解决恶意IP地址攻击:保卫网络安全的有效方法
  • 大数据-玩转数据-Python Sftp Mysql 数据
  • 支持CT、MR三维后处理的医学PACS源码
  • 【Luogu】 P5642 人造情感(emotion)
  • AUTOSAR汽车电子嵌入式编程精讲300篇-基于车联网的商用车载终端系统的研究与设计
  • 关于多个elementui的cascader级联组件页面滚动渲染样式导致卡顿问题
  • SQLSmith: Databend 如何利用随机化测试检测 Bug
  • MySQL 8 - 处理 NULL 值 - is null、=null、is not null、<> null 、!= null
  • Jupyter Notebook的使用
  • 数据结构【DS】B树
  • Postman如何导出接口的几种方法?
  • Ubuntu Studio 23.10发布
  • 【开源】基于SpringBoot的天然气工程运维系统的设计和实现
  • JS 中的深拷贝与浅拷贝
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 【译】React性能工程(下) -- 深入研究React性能调试
  • Apache的80端口被占用以及访问时报错403
  • Github访问慢解决办法
  • Markdown 语法简单说明
  • SQLServer插入数据
  • Terraform入门 - 3. 变更基础设施
  • vue.js框架原理浅析
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • yii2中session跨域名的问题
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 扩展资源服务器解决oauth2 性能瓶颈
  • ​Java并发新构件之Exchanger
  • #{} 和 ${}区别
  • #在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • $.ajax()方法详解
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (done) ROC曲线 和 AUC值 分别是什么?
  • (附源码)spring boot智能服药提醒app 毕业设计 102151
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (转)VC++中ondraw在什么时候调用的
  • *上位机的定义
  • .axf 转化 .bin文件 的方法
  • .dat文件写入byte类型数组_用Python从Abaqus导出txt、dat数据
  • .NET Core中的去虚
  • .NET 的静态构造函数是否线程安全?答案是肯定的!
  • .net 微服务 服务保护 自动重试 Polly
  • .net和php怎么连接,php和apache之间如何连接
  • .NET命名规范和开发约定
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)
  • .stream().map与.stream().flatMap的使用
  • ?php echo $logosrc[0];?,如何在一行中显示logo和标题?
  • @FeignClient注解,fallback和fallbackFactory
  • @Not - Empty-Null-Blank
  • @staticmethod和@classmethod的作用与区别
  • [] 与 [[]], -gt 与 > 的比较
  • [Android]How to use FFmpeg to decode Android f...
  • [BZOJ 4034][HAOI2015]T2 [树链剖分]
  • [CareerCup] 17.8 Contiguous Sequence with Largest Sum 连续子序列之和最大