HTML5-2(新增标签)

简介: HTML5-2(新增标签)

HTML5新增加了27个标签元素,废弃了16个标签元素,主要包括结构标签,级块性标签,行内语义性标签,交互性标签


一.结构性标签



负责Web上下文结构的定义,确保HTML文档,包括:


  • article 文章主体内容(一片博客,一片论坛帖子,一段用户评论,插件)
  • header 标记头部区域内容
  • footer 标记脚部区域内容
  • section 区域章节表述
  • nav 菜单导航,链接导航


二.块级性标签



完成Web页面区域的划分,确保内容的有效分隔,包括:


  • aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
  • figure 对多个元素组合展示的元素,常与figcaption联合使用
  • code 表示一段代码
  • dialog 人与人之间的对话,包含dtdd两个组合元素(dt用于表示说话者,dd用于表示说话者的内容)


三.行内语义性标签


完成Web页面具体内容的引用和表述,丰富展示内容,包括:


  • meter特定范围内的数值,如工资,数量,百分比
  • time   时间值
  • progress 进度条,可用max,min,step进行控制,完成对进度的表示和监听
  • video 视频元素,用于支持缓冲预加载和多种视频媒体格式


<video src="source/BigBuck.m4v" controls="controls"></video>


image.png

audio 音频元素,用于视频播放,支持缓冲预加载和多种音频媒体格式


<audio src="source/music.m4a" controls="controls"></audio>

image.png

四.交互性标签



功能性内容的表达,有一定的内容和数据的关联,是各种事件的你基础,包括如下:


  • detail 表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示
  • datagrid 控制客户数据与显示,可用于动态脚本及时更新
  • menu 用于交互菜单
  • command 来处理命令按钮


目录
相关文章
|
1月前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
33 1
|
1月前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
25天前
HTML_表单标签
HTML_表单标签
16 0
|
12天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
14天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
14天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
16天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
25天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0
|
25天前
HTML_行内标签
HTML_行内标签
15 0
|
25天前
|
前端开发 JavaScript 开发者
html标签的样式
【4月更文挑战第19天】html标签的样式
14 2