HTML5中的新特性

通过这篇文章,学习HTML5新增了哪些新特性及使用方法。

语义化标签

  • <header> 定义 section 或 page 的页眉
  • <footer> 定义 section 或 page 的页脚
  • <section> 定义 section
  • <article> 定义文章
  • <aside> 定义页面内容之外的内容
  • <nav> 定义导航链接
    image

  • <canvas> 定义图形

  • <audio> 定义声音
  • <video> 定义视频
  • <source> 定义媒介源

  • <details> 定义元素的细节

  • <summary> 为 details 元素定义可见的标题


    这里是标题

    • 明细1

    • 明细2


    1
    2
    3
    4
    5
    6
    7
    <details>
    <summary>这里是标题</summary>
    <ul>
    <li>明细1</li>
    <li>明细2</li>
    </ul>
    </details>
  • <figcaption> 定义 figure 元素的标题

  • <figure> 定义媒介内容的分组,以及它们的标题


    Blog头像

    1
    2
    3
    4
    <figure style="margin:0;">
    <img src="https://blog.maxmeng.top/images/avatar.jpg" width="350" height="234" />
    <figcaption>Blog头像</figcaption>
    </figure>
  • <mark> 定义有记号的文本
    自带黄色背景的mark标签

    1
    <mark>自带黄色背景的mark标签</mark>
  • <meter> 定义预定义范围内的度量
    十分之三

    1
    <meter value="3" min="0" max="10">十分之三</meter>
  • <progress> 定义任何类型的任务的进度

    1
    <progress value="22" max="100"></progress>
  • <time> 定义日期/时间

    我们在每天早上 开始工作

    1
    <p>我们在每天早上 <time>9:00</time> 开始工作</p>

表单增强

input新增的type类型

  • number 数字
  • url 网址
  • email 邮箱
  • color 颜色选择框
  • date 日期选择框(yyyy-mm-dd)
  • time 时间选择框(hh:mm)
  • range 滑块
  • search 搜索
  • week 周
  • month 月

新属性

  • autocomplete 是否保存用户输入值默认为on,关闭提示选择off
  • autofocus 自动获取焦点
  • required 必填项目
  • pattern 正则验证 pattern=”\d{1,5}”
  • placeholder 输入框提示信息