LMLPHP后院

HTML5新增加的标签元素

HTML5 新增加了一些语义的标签,能够使得 HTML 文档的结构更加清晰。

  • <article> 定义一个文章标签
  • <aside> 定义页面内容的侧边栏
  • <bdi> 定义格式化为不同方向的文本
  • <details> 定义一些详细信息,用户可以显示和隐藏
  • <summary> 为 details 标签定义一个可见部分
  • <dialog> 定义一个对话框和窗口
  • <figure> 定义独立封闭的内容,比如图片,图标,代码等
  • <figcaption> 在 figure 标签里面定义标题
  • <footer> 定义文档脚部
  • <header> 定义文档头部
  • <main> 定义文档主题区域
  • <mark> 定义标记或者高亮的文本
  • <menuitem> 定义一个菜单项,用户可以从弹出菜单中选择
  • <meter> 定义在可选范围内的标量测量
  • <nav> 定义导航栏
  • <progress> 定义任务进度条
  • <rp> 定义在不支持 ruby 注释的浏览器中显示什么
  • <rt> 定义字符的解释和发音,用于东亚排版
  • <ruby> 定义一个 ruby 注释
  • <section> 在文档中定义一个部分
  • <time> 定义一个时间、日期
  • <wbr> 定义一个自动换行的区域

由以上可见,HTML5 的标准还是姗姗来迟,这些东西在 HTML5 未出来之前,使用 JavaScript 特效一样实现的非常好,并且大部分的 HTML 标签绝大多数网站是不用的。所以对于 HTML5 提供的一些很方便的标签或者表单属性,我觉得应该也没有多少人会用,因为默认的 UI 都很丑陋,并且不能满足绝大多数场景的需求。

下面介绍一些新的在表单中使用的标签。

  • <datalist> 定义预先定义的选择方便输入控制
  • <keygen> 定义密钥队生成器,方便表单使用
  • <output> 定义计算结果的输出

新增加的一些表单 input 标签的 type 属性值。

  • color, date, datetime, datetime-local, email
  • month, number, range, search, tel, time, url, week

新增加的一些表单 input 标签的属性。

  • autocomplete, autofocus, form, formaction, formenctype
  • formmethod, formnovalidate, formtarget, height, width, list
  • min and max, multiple, pattern (regexp), placeholder, required, step

新增的一些图像标签。

  • <canvas> 使用 JavaScript 脚本在运行时绘图
  • <svg> 用于绘制可伸缩矢量图

新增的一些媒体支持标签。

  • <audio> 音频标签
  • <embed> 外部应用插件容器
  • <source> 视频或者音频资源
  • <track> 视频或者音频的曲目
  • <video> 视频或者电影内容
2024-04-19 10:24:15 1713493455 0.002549