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.mzph.cn/news/118931.shtml

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

相关文章

华为NAT配置实例(含dhcp、ospf配置)

一、网络拓朴如下&#xff1a; 二、要求&#xff1a;PC1 能访问到Server1 三、思路&#xff1a; R2配置DHCP&#xff0c;R2和R1配OSPF&#xff0c;R1出NAT 四、主要配置&#xff1a; R2的DHCP和OSPF&#xff1a; ip pool 1gateway-list 10.1.1.1 network 10.1.1.0 mask 25…

Leetcode—7.整数反转【中等】

2023每日刷题&#xff08;十&#xff09; Leetcode—7.整数反转 关于为什么要设long变量 参考自这篇博客 long可以表示-2147483648而且只占4个字节&#xff0c;所以能满足题目要求 复杂逻辑版实现代码 int reverse(int x){int arr[32] {0};long y;int flag 1;if(x <…

JS操作DOM及CSS

JS创造于1994年&#xff0c;其目的是为浏览器显示的文档赋予动态行为。 1 Web编程基础 本节讲解如何编写Web应用中的js程序&#xff0c;如果将这些程序加载到浏览器&#xff0c;以及如何获取输入、产出输出&#xff0c;如何运行响应事件的异步代码。 1.1 js 脚本 虽然现在不…

什么是 Node.js

目标 什么是 Node.js&#xff0c;有什么用&#xff0c;为何能独立执行 JS 代码&#xff0c;演示安装和执行 JS 文件内代码 讲解 Node.js 是一个独立的 JavaScript 运行环境&#xff0c;能独立执行 JS 代码&#xff0c;因为这个特点&#xff0c;它可以用来编写服务器后端的应用…

k8s-实战——zookeeper的部署

文章目录 ZooKeeper简介zkyaml文件pvc.yaml创建PVCzk.yaml创建zk集群服务zk集群检查检查zk集群状态问题记录解决方式ZooKeeper简介 Apache ZooKeeper 是一个分布式的开源协调服务,用于分布式系统。 ZooKeeper 允许你读取、写入数据和发现数据更新。 数据按层次结构组织在文件…

mybatisPlus逻辑删除注解@TableLogic

当我做了一个实体类&#xff0c;字段为del_flag的逻辑删除字段&#xff0c;要通过这个字段控制数据库中的数据逻辑删除。 重写mapper中的deleteById&#xff0c; 先按id查出数据&#xff0c;在更新此数据中的del_flag字段为1&#xff0c;调用update方法更新数据。 这种方式我…

多继承的实例介绍

一、多继承同名覆盖 子类中的成员与父类中的成员同名问题&#xff0c;通过作用域分辨符&#xff08;&#xff1a;&#xff1a;&#xff09;进行限定类的访问&#xff0c;从而实现对不同类中的同名成员各自赋值。 #include<iostream> using namespace std; class A{//父…

算法----递增的三元子序列

题目 给你一个整数数组 nums &#xff0c;判断这个数组中是否存在长度为 3 的递增子序列。 如果存在这样的三元组下标 (i, j, k) 且满足 i < j < k &#xff0c;使得 nums[i] < nums[j] < nums[k] &#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false…

54. 螺旋矩阵

54. 螺旋矩阵 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;__54螺旋矩阵 原题链接&#xff1a; 54. 螺旋矩阵 https://leetcode.cn/problems/spiral-matrix/description/ 完成情况&#xff1a; 解题思路&#xff1a; 跟59题。很类似…

python实验16_网络爬虫

实验16&#xff1a;网络爬虫 1.实验目标及要求 &#xff08;1&#xff09;掌握简单爬虫方法。 2. 实验主要内容 爬取中国票房网 ① 爬取中国票房网&#xff08;www.cbooo.cn)2019年票房排行榜前20名的电影相关数据 代码部分: import time from selenium.webdriver impor…

力扣labuladong——一刷day06

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣322. 零钱兑换二、力扣509. 斐波那契数三、力扣46. 全排列四、力扣51. N 皇后五、力扣52. N 皇后 II 前言 一、力扣322. 零钱兑换 class Solution {pu…

VUE3新组件 — Vue3

1. 新组件 1) Fragment(片断) 在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用 <template><h2>aaaa</h2><h2>aaaa</h2> </template>2) T…

成为CSS选择器大师,让你的网页瞬间提升品味!

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、选…

【tg】9 : InstanceImpl 、 虚拟的音频渲染设备FakeAudioDeviceModuleImpl

代码分布 WebRTC-Manager 线程:manager线程 G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\InstanceImpl.h Manager 使用的是 WebRTC-Manager 线程 InstanceImpl 对Manager 的封装和调用 #

pycharm转移缓存目录

原来的缓存目录为C:\Users\86176\AppData\Local\JetBrains&#xff0c;各种配置文件、缓存文件随着pycharm的使用堆积在这里&#xff0c;导致C盘逐渐爆满。 因此需要将缓存目录转移至D盘。首先需要了解缓存目录的知识。 PyCharm 和其他 JetBrains 的 IDE 通常会有两个关键的目…

Ansible playbook的block

环境 控制节点&#xff1a;Ubuntu 22.04Ansible 2.10.8管理节点&#xff1a;CentOS 8 block 顾名思义&#xff0c;通过block可以把task按逻辑划分到不同的“块”里面&#xff0c;实现“块操作”。此外&#xff0c;block还提供了错误处理功能。 task分组 下面的例子&#x…

FPGA与人工智能泛谈-01

文章目录 前言一、FPGA(Field Programmable Gate Array)是什么?二、与GPU的对比1.GPU特点2. FPGA的优势三、人工智能实现的基础架构总结前言 人工智能技术的快速发展正从各个方面改变人类的生活、工作及教育等各个方面,其中人工智能算法的演进又是其中的关键一步,其中会涉及…

Nodejs和Node-red的关系

NPM相关知识 npm概念 npm&#xff1a;Node Package Manager&#xff0c;Node包管理器。是Node.js默认的&#xff0c;以JavaScript编写的软件包管理系统。 npm工作原理 npm的操作原理是各个官网使用npm publish把代码提交到npm的服务器&#xff0c;其他人想要使用这些代码&am…

适用于 Linux 和 Unix 的特权访问管理

凭据、SSH 密钥、服务帐户、数字签名、文件系统等内容构成了Linux 环境的关键部分&#xff0c;虽然大多数PAM供应商为基于Windows的环境提供无缝的特权访问管理&#xff0c;但它们的通用性不足以为Linux&#xff0c;Unix和*nix环境扩展相同的功能和功能。 Linux 中的root权限是…

微信小程序获取用户信息

个人博客 微信小程序获取用户信息 个人微信公众号&#xff0c;求关注&#xff0c;求收藏&#xff0c;求指错。 文章概叙 本文主要讲的是小程序获取用户信息的&#xff0c;更新测试时间是2023-10-25 更改原因 首先&#xff0c;官网上的解释是这样的&#xff0c;为了安全合…