温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5新增的元素详解

发布时间:2020-06-10 21:55:12 来源:网络 阅读:864 作者:charles_wang888 栏目:移动开发

 HTML5中新增了许多元素

Part1::新增的与结构相关的元素(主要是原来<div>元素的按照其功能进行了细分)

主体结构元素:

  • <section>元素:表示页面的一个内容区块
  • <article>元素:表示页面一块独立内容
  • <aside>元素:表示页面上<article>元素之外的但是与<article>相关的辅助信息
  • <nav>元素:表示页面中导航链接的部分

非主体结构元素:

  • <header>元素:表示页面中一个内容区块<section>或者整个页面的标题
  • <hgroup>元素:表示对于整个页面或者页面一个内容区块<section>的<header>进行组合
  • <footer>元素:表示对整个页面或者页面一个内容区块<session>的页脚
  • <figure>元素:表示一段独立的文档流内容
  • <figcaption>元素:表示<figure>元素的标题

 

Part2:新增的与结构无关的元素

  • <video>元素:用于定义视频,无需<object type="video/ogg">
  • <audio>元素:用于定义音频, 无需<object type="application/ogg">
  • <embed>元素:用于插入各种多媒体,可以各种格式
  • <mark>元素: 用于向用户在视觉上突出显示某些文字
  • <progress>元素:表示运行中的进程
  • <time>元素: 用于表示日期或者时间, 或者两者
  • <ruby>元素: 表示ruby注释
  • <rt>元素:表示字符的解释或者发音
  • <rp>元素:在<ruby>内使用,表示不支持<ruby>元素的浏览器所显示的内容
  • <wbr>元素:表示软换行,可以根据浏览器的窗口或者父级元素的宽度自己决定
  • <canvas>元素:表示画布,然后让脚本把想画的东西画在上面
  • <command>元素:表示命令按钮
  • <details>元素:表示当用户点击某元素时候想要得到的细节信息,常和<summary>元素联合使用
  • <summary>元素:是<details>元素的第一个子元素,表示了<details>的标题
  • <datalist>元素:表明了可以选择的数据列表,以下拉列表形式显示
  • <datagrid>元素:表明了可选的数据列表,但是以树列表的形式显示
  • <keygen>元素:表示生成密钥:
  • <output>元素:表示不同类型的输出
  • <source>元素:表示为<video><audio>等媒体元素定义资源
  • <menu>元素:表示了菜单列表

 

Part3:新增的<input>元素的类型:

  • <email>: 表示必须输入email地址的文本输入框
  • <url>:表示必须输入url地址的文本输入框
  • <number>:表示必须输入数值的文本输入框
  • <range>:表示必须输入一定范围内数字的文本输入框
  • Date Pickers
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI