`

H5 新增元素和弃用元素

阅读更多

html5新增了一些语义化更好的标签元素。

 

结构元素
article元素,表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文章。
aside元素,表示article内容之外的内容,辅助信息。
header元素,表示页面中一个内容区块或整个页面的页眉。
hgroup元素,用于对页面中一个区块或整个页面的标题进行组合。
footer元素,表示页面中一个内容区块或整个页面的页脚。
figure元素,表示媒介内容的分组,以及它们的标题。
section元素,表示页面中一个内容区块,比如章节。
nav元素,表示页面中的导航链接。

 

其他元素
video元素,用来定义视频。
audio元素,用来定义音频。
Canvas元素,用来展示图形,该元素本身没有行为,仅提供一块画布。
embed元素,用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等。
mark元素,用来展示高亮的文字。
progress元素,用来展示任何类型的任务的进度。
meter元素,表示度量衡,定义预定义范围内的度量。
time元素,用来展示日期或者时间。
command元素,表示命令按钮。
details元素,用来展示用户要求得到并且可以得到的细节信息。
summary元素,用来为details元素定义可见的标题。
datalist元素,用来展示可选的数据列表,与input元素配合使用,可以制作出输入值的下拉列表。
datagrid元素,也用来展示可选的数据列表,以树形列表的形式来显示。
keygen元素,表示生成密匙。
output元素,表示不同类型的输出。
source元素,为媒介元素定义媒介资源。
menu元素,表示菜单列表。
ruby元素,表示ruby注释, rt元素表示字符的解释或发音。 rp元素在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。
wbr元素,表示软换行。与br元素的区别是:br元素表示此处必须换行,而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行,而当宽度不够时,主动在此处进行换行。
bdi元素,定义文本的文本方向,使其脱离其周围文本的方向设置。
dialog元素,表示对话框或窗口。

 

废除的元素
html5中废除了一些纯表现的元素,只有部分浏览器支持的元素还有一些会对可用性产生负面影响的元素。

 

纯表现元素
纯表现的元素就是那些可以用css替代的元素。basefont、big、center、font、s、strike、tt、u这些元素,他们的功能都是纯粹为页面展示服务的,html5提倡把页面展示性功能放在css样式表中统一处理,所以将这些元素废除,用css样式进行替代。

 

对可用性产生负面影响的元素
对于frameset元素、frame元素与noframes元素,由于frame框架对网页可用性存在负面影响,在html5中已不支持frame框架,只支持iframe框架,html5中同时将frameset、frame和noframes这三个元素废除。

 

只有部分浏览器支持的元素
对于applet、bgsound、blink、marquee等元素,由于只有部分浏览器支持,特别是bgsound元素以及marquee元素,只被IE支持,所以在html5中被废除。其中applet元素可由embed元素或object元素替代,bgsound元素可由audio元素替代,marquee可以由javascript编程的方式替代。

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    HTML5元素周期表

    同时,新增了如`<canvas>`(画布)和`<svg>`(可缩放矢量图形)这样的元素,用于动态图形和交互式内容。`<audio>`和`<video>`元素则使得在网页中嵌入音频和视频变得简单,它们支持多种格式,如MP3、AAC和WebM。 ...

    H5 简单demo示例模板

    3. **多媒体支持**:H5直接支持音频、视频播放,无需Flash插件,`<audio>`和`<video>`标签让媒体元素的使用更加便捷。 4. **Canvas绘图**:提供了一个二维画布,通过JavaScript可以进行动态图形绘制,实现了丰富的...

    Web登录界面和首页,H5

    2. 表单增强:HTML5的元素支持新的属性和元素,如用于显示计算结果,提供下拉选项,和验证输入类型。 3. 本地存储:HTML5的localStorage和sessionStorage允许在浏览器端存储数据,可用于保存用户登录状态,实现页面...

    2022最新鲁班H5页面生成工具源码

    鲁班H5是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度H5等工具。 鲁班H5特征: 1、编辑器 参考线 吸附线、组件对齐 拽改变组件形状 元素: 复制(画布) 元素: 删除(画布) 元素: ...

    H5 picture

    H5引入了`<picture>`元素,允许为不同设备和视口尺寸提供多个源图片,配合`sizes`和`srcset`属性,可以根据设备条件智能选择最合适的图片,优化加载速度和用户体验。 3. **CSS3 图片处理** CSS3 提供了丰富的图片...

    原生 H5 商城静态页面(HTML+ CSS+ JS)

    此外,H5新增了一些元素,如`<input type="date">`用于日期选择,`<canvas>`支持图形绘制,`<video>`和`<audio>`嵌入多媒体,以及`<form>`的`<fieldset>`和`<legend>`增强表单可读性。这些元素大大提升了用户体验和...

    H5手机站页面,列表页+内容页

    CSS3新增了许多功能,如媒体查询(Media Queries)用于实现响应式设计,以及过渡(Transitions)、动画(Animations)和Flexbox或Grid布局,用于创建现代、动态的用户界面。 3. **JavaScript**: `js`文件夹内的脚本...

    h5+CSS3总结

    - **属性值选择器**:使用 `[attr=value]` 形式来选择具有指定属性和属性值的元素。 ```css img[src="example.jpg"] { border: 1px solid black; } /* 选择 src 属性值为 example.jpg 的 img 元素 */ ``` - **...

    H5搭建教程

    1. 新增语义化标签:例如、、、、和等,这些标签有助于提高网页的结构化和可读性。 2. 多媒体支持:HTML5内置了和元素,无需插件即可播放音频和视频。 3. Canvas绘图:提供了一个JavaScript API,用于在网页上动态...

    H5学习资料

    7. **表单控件**:H5对表单元素进行了增强,新增了date、time、email、url、search等输入类型,以及placeholder属性,提高了用户体验。 在H5的学习过程中,CSS(Cascading Style Sheets)也扮演着重要角色。CSS负责...

    h5房产广告源码

    1. HTML5基础:HTML5是构建网页内容的基本语言,新增了许多元素,如`<audio>`和`<video>`,用于内嵌音频和视频,以及`<canvas>`用于动态图形和动画。 2. CSS3:CSS3负责页面的样式和布局,通过选择器、过渡、动画等...

    day01-H5C3-新增音视频 表单标签及选择器.pdf

    本知识点将以H5C3为背景,详细探讨HTML5中新增的常用标签、音视频标签、表单标签和选择器的使用。 首先,HTML5的语义化标签能够增强代码的可读性,并有助于网站SEO。语义化标签主要包括:header(头部)、nav(导航...

    H5移动端上滑加载,带ajax异步请求后台数据,拿来即用

    5. 更新UI:确保新内容正确显示,并可能调整滚动位置,让用户看到新增的内容。 四、优化策略 1. 载入提示:在数据加载过程中,显示加载动画或文字提示,避免用户疑惑。 2. 数据预加载:提前加载下一批数据,减少...

    h5+设计测试代码

    2. **媒体元素**:HTML5新增了和元素,使得网页可以直接内嵌视频和音频内容,无需依赖Flash等第三方插件。 3. **离线存储**:通过离线储存API(AppCache),HTML5允许网页在用户离线时仍能访问部分内容,提高了用户...

    H5技能图谱1.0.rar

    HTML5新增了许多元素,如`<header>`, `<nav>`, `<article>`, `<section>`, `<aside>`, `<footer>`等,这些元素有助于提高代码可读性和网页结构的语义化。此外,学习如何使用新的表单控件,如`<input type="date">`, ...

    H5电商前台模板.7z

    H5是第五代超文本标记语言,它不仅继承了HTML4的优秀特性,还新增了许多功能强大的标签和API,如离线存储、媒体元素、表单控制等,使得网页开发更加便捷且兼容性更强。对于电商网站而言,H5能够实现流畅的动画效果,...

    H5C3精华.zip

    5. **表单控件增强**:新增了多种输入类型(如date、email、range等),以及新的表单属性和元素,如的required属性、元素等,增强了表单验证和用户体验。 6. **Web Workers与Web Storage**:Web Workers允许在后台...

    vue3.0h5模版下载

    3. **Teleport**:Teleport是Vue 3中新增的功能,它允许将一个组件的渲染结果“传送”到DOM树的其他位置,比如用于将模态框、脚部注释等元素移出当前组件树,方便解决嵌套组件中的定位问题。 4. **优化的响应式系统...

    一个H5宽屏WEB源码

    【标题】"一个H5宽屏WEB源码"所涉及的知识点主要集中在现代网页开发领域,特别是关于HTML5、CSS3以及...通过研究和使用这个源码,开发者可以深入理解H5、CSS3和JavaScript的综合应用,提升自己的前端开发技能。

    H5移动端仿淘宝添加收货地址

    - **数据绑定**:使用JavaScript操作DOM元素,将用户输入的数据绑定到对应的表单字段中,例如`document.getElementById('inputName').value`获取姓名输入框的值。 - **表单验证**:在用户提交地址前,需要验证输入...

Global site tag (gtag.js) - Google Analytics