(1.3)HTML5新增的标签

1.结构标签
2.多媒体标签
3.web应用标签
4.其他标签

●结构标签

结构标签(块状元素)——有意义的div

<article> 标记定义一篇文章
<header> 标记定义一个页面或者一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgrounp> 标记定义文件中一个区块的相关信息
<aside> 标记定义页面内容部分的侧边栏
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption>标签定义 figure元素的标题
**<footer> ** 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信

第一点补充:header/section/aside/article/footer这五个标签不要嵌套
第二点补充:header/section/footer 大于aside/article/figure/hgroud/nav
大于div/figcaption

header/section/footer这三个标签的级别最高,一般写在外层.同一层级互不嵌套

●多媒体标签

三类多媒体标签

<video>标记定义一个视频
<audio>标记定义音频内容
<sourse>标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件,比如flash

标签意义

多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件,极大地提升了用户体验。

●web应用标签

状态标签、列表标签、Menu

-状态标签

<meter> 状态标签(实时状态显示:气压、气温)
-HTML5 元素中<meter>标签用于显示给定范围内的数据

**<progress> ** 状态标签(任务过程:安装、加载)

浏览器兼容

<meter> Chrome、Opera
<progress> Chrome、Firefox、Opera

-列表标签

<datalist> 为input标记定义一个下拉列表,配合option
<details> 标记定义一个元素的详细内容,配合summary

-Menu

<menu> 命令列表(目前所有主流浏览器都不支持)
<menuitem> menu命令列表标签(只有Firefox8.0+支持)
<command> menu标记定义一个命令按钮(只有IE9支持)

浏览器兼容

<datalist> Firefox、Opera、Chrome
<details> Chrome

●其他标签

-注释标签

<ruby> 标记定义注释或音标
<rt> 标记定义对ruby的注释内容文本
<rp> 告诉那些不支持ruby元素的浏览器如何去显示

注意:<rp>不要放在<rt>标签内

-其他标签

<mark> 标记定义有标记的文本(黄色选中状态)
<output>标记定义一些输出类型,计算表单结果配合oninput事件
oninput事件可以实时监听文本框的输入变化
注意:type属性为number表示数值型
type属性为range表示范围
<keygen>标记定义表单里一个生成的键值(加密信息传递)
<time> 标记定义一个日期/时间,目前所有主流浏览器都不支持

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 9,586评论 1 25
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,712评论 1 92
  • 源自SeeYouBug博客 地址为:http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲泪成雪阅读 4,999评论 0 15
  • 问答题1 /72浏览器页面有哪三层构成,分别是什么,作用是什么?参考答案构成:结构层、表示层、行为层分别是:HTM...
    _Yfling阅读 4,987评论 0 23
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 5,907评论 1 11

友情链接更多精彩内容