美文网首页从零开始学前端
(1.3)HTML5新增的标签

(1.3)HTML5新增的标签

作者: 越IT | 来源:发表于2017-01-07 14:27 被阅读21次

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> 标记定义一个日期/时间,目前所有主流浏览器都不支持

相关文章

  • (1.3)HTML5新增的标签

    1.结构标签2.多媒体标签3.web应用标签4.其他标签 ●结构标签 结构标签(块状元素)——有意义的div 标记...

  • 初识HTML5

    html5 ≈ html5新增标签以及规范 html5 ≈ html5新增标签 + css3 + JavaScri...

  • HTML5新增标签

    HTML5新增标签

  • HTML HTML5新增标签属性整理

    HTML5 新增属性详解 HTML5 新增标签详解 HTML5 新增全局属性详解

    h5+css黑马笔记

    HTML5 新增标签 新增了那些语义化标签header --- 头部标签nav --- 导航...

  • HTML5 新增标签

    HTML5新增标签 HTML5新增了27个标签元素,废除了16个标签元素,主要包括结构性标签、级块性标签、行内语义...

  • HTML5详解

    01-HTML5新增语义化标签 HTML5语义化标签的兼容 HTML5新增表单控件和表单属性 HTML5表单验证反...

  • H5新增语义化标签

    HTML5 新增标签 什么是语义化 新增了那些语义化标签header --- 头部标签nav ...

  • html5的新增标签

    html5的新增标签的类型有: 结构标签 媒体组合标签 表单控件 一.新增的结构标签有### article 页面...

  • HTML5简介

    HTML5 HTML5的内容主要分为三个部分: 新增的属性、新增的标签、API。 1. 新增的属性 新增的属性包括...

网友评论

    本文标题:(1.3)HTML5新增的标签

    本文链接:https://www.haomeiwen.com/subject/eratbttx.html