首页 > 其他分享 >HTML5 新特性及已移除元素

HTML5 新特性及已移除元素

时间:2024-03-26 18:29:21浏览次数:27  
标签:元素 表单 HTML5 移除 引入 页面

HTML5 作为 HTML 的最新标准,引入了一系列新特性和改进,旨在提供更为丰富和强大的 Web 内容。然而,随着新特性的引入,HTML5 也对一些过时或不再推荐使用的元素进行了移除。

新特性

  • 语义化标签: HTML5 引入了一系列新的语义化标签,如 <header>, <footer>, <nav>, <article>, <section> 等,用于更清晰地描述页面内容的结构。这些标签有助于提高页面的可读性和可访问性。
  • 多媒体支持: 用于媒介回放的 <video><audio> 元素,使得在网页上嵌入音频和视频变得更加简单,无需依赖第三方插件。
  • Canvas 绘图: HTML5 引入了 <canvas> 元素,使得通过 JavaScript 来绘制图形、动画和图表变得更加方便。
  • 本地存储: HTML5 提供了本地存储能力,包括 Web Storage(LocalStorage 和 SessionStorage)和 IndexedDB,使得 Web 应用能够在客户端存储数据,提高了离线应用的体验和性能。
    • localStorage 长期存储数据, 浏览器关闭后数据不丢失
    • sessionStorage 的数据在浏览器关闭后自动删除
  • 表单增强: HTML5 引入了一些新的表单元素和属性,如 <input type="date">, <input type="email">, <input type="url">, <input type="number">, <input type="range"> 等,简化了表单输入和验证。
  • 语义化内容: HTML5 引入了一些新的语义化元素,如 <figure><figcaption><time><mark> 等,有助于更准确地描述页面内容,提高页面的可访问性和 SEO。
  • 响应式设计支持: HTML5 提供了更多的元素和 API,以支持响应式设计和移动设备优化,如 <meta> 标签中的 viewport 属性、媒体查询等。这使得开发的网站能够在不同的设备上呈现出最佳的布局和样式。
  • 新的技术: webworkerwebsocketGeolocation

移除的元素

  • 过时的表单元素:如 <acronym>, <applet>, <dir>, <frame>, <frameset>, <noframes>, <isindex> 等也被移除了。
  • 过时的引用元素:如 <basefont>, <big>, <center>, <font>, <strike>, <tt> 等也被移除了。
  • 嵌套的表单: HTML5 不再允许嵌套的表单,即 <form> 元素不能再嵌套在另一个 <form> 元素内部。

总的来说,HTML5 的新特性和改进为开发者创造了更为便捷和强大的开发环境,同时移除过时的元素也有助于减少不必要的复杂性,提升了 HTML 的整体质量和规范性。

标签:元素,表单,HTML5,移除,引入,页面
From: https://blog.csdn.net/weixin_44695700/article/details/137021921

相关文章

  • 【算法】【树】二叉搜索树中第K小的元素
    1 题目给定一个二叉搜索树的根节点 root ,和一个整数 k ,请你设计一个算法查找其中第 k 个最小元素(从1开始计数)。示例1:输入:root=[3,1,4,null,2],k=1输出:1示例2:输入:root=[5,3,6,2,4,null,null,1],k=3输出:3提示:树中的节点数为 n 。1<=k<=......
  • flex布局,目前主流,其他的了解一下就行。下面实现让元素去容器的两端。和垂直居中。
    <style>.div{width:100px;height:100px;background-color:red;}.divdiv{width:20px;height:20px;background-color:blue;}</style><divclass="div"style="......
  • OpenCV模板匹配(匹配图片中对应元素)
    OpenCV模板匹配(匹配图片中对应元素)模板匹配方法单个元素进行匹配并绘制矩形框效果代码模板匹配方法模板是被查找目标的图像,查找模板在原始图像中的哪个位置的过程就叫模板匹配。OpenCV提供的matchTemplate()方法就是模板匹配方法,其语法如下:result=cv2.matchTemp......
  • 使用selenium轻松实现元素拖拽
    前言在进行Web自动化测试或实现用户交互功能时,模拟元素的拖拽操作是一项常见的需求。通过Selenium,一种流行的Web自动化测试工具,我们可以轻松地实现这一功能,使得测试和用户交互更加真实和高效。元素拖拽功能的重要性在许多Web应用程序中,用户可以通过拖拽操作来调整页面布局、拖......
  • 排序算法练习——最大间距:给定一个未排序的数组,找到排序后相邻元素之间的最大差值
    最大间距:给定一个未排序的数组,找到排序后相邻元素之间的最大差值。解决这个问题可以使用桶排序的思想。具体步骤如下:找到数组中的最大值和最小值。根据数组的长度,将数组划分成一定数量的桶,每个桶存放一定范围内的元素。计算每个桶内元素的最小值和最大值。遍历桶,计算相邻......
  • 想实现Canvas元素拖拽?速来一探究竟,你也可以轻松做到!
    元素拖拽是一种常见的交互设计模式,在许多场景下都有应用:地图打标、画板图形拖拽、可视化组件拖拽、交互式表格等。实现元素拖拽的核心在于监听和响应鼠标事件,模拟canvas元素事件,并同步更新Canvas绘制。主要需实现:创建元素坐标转换(鼠标事件坐标和canvas坐标转换)事件监听、元......
  • 变形元素旋转css阴影
    一、css3transform变换translate(x,y)设置盒子的位移scale(x,y)设置盒子缩放roate(dog)设置盒子的旋转skew(x-angle,y-angle)设置盒子的斜切perspective 设置透视距离transform-styoleflat:preserved-3d设置盒子是否按3d空间显示translateXtranslateYtranslateZ设......
  • 八大元素,让你的网站科技感拉满,极易落地执行。
    Hello,我是大千UI工场,这篇分享各类网页UI的设计风格,就从大家最喜欢的科技感开始吧,欢迎友友们持续关注,我将持续更新,如有设计需求,可以私信我。在网页UI中,科技感是指通过设计元素和视觉效果来传达现代科技、创新和未来感的一种感觉。科技感的设计可以让网页看起来更加现代化、高端......
  • 单链表删除相同的元素
    #include<iostream>#include<stdlib.h>usingnamespacestd;#defineerror-1#defineok1typedefintStatus;typedefintElemType;typedefstructLNode{ ElemTypedata; LNode*next;}LNode,*LinkList;StatusCreateList(LinkList&L,int......
  • TreeMap从添加第二个元素开始,需要进行排序,原始类继承Comparable<Student>接口实现comp
    重写compareTo方法,关于o的理解@OverridepublicintcompareTo(Studento){//关于o,是红黑树中从第二个开始进入的元素,需//要和已存在的元素比较,该o是在第二个add//调用时,传入这里的Student对象。//根据题设,先用年龄排序in......