HTML5新增内容详解

HTML5新增内容

1.1 语义化元素

HTML5新增了语义化的元素：

• <header>：头部元素

• <nav>：导航元素

• <section>：定义文档某个区域的元素

• <article>：内容元素

• <aside>：侧边栏元素

• <footer>：尾部元素

display: block

1.2 video/audio

• HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放

  • 基本使用 src

      <video src="./assets/fcrs.mp4" width="600" controls></video>
  

  • 其他属性

  

  • 支持的格式

  

  • 适配性写法

    在<video>元素中间的内容，是针对浏览器不支持此元素时候的降级处理

    • 内容一：通过<source>元素指定更多视频格式的源

    • 内容二：通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容

  <video src="./assets/fcrs.mp4" width="600" controls muted>
      <source src="./asset/fcrs.ogg">
      <source src="./asset/fcrs.webm">
  
      <p>当前您的浏览不支持视频的播放, 请更换更好用的浏览器!</p>
  
  </video>
  

• HTML <audio> 元素用于在文档中嵌入音频内容, 和<video>的用法非常类似

  • 基本使用 src

      <audio src="./assets/yhbk.mp3" controls autoplay muted></audio>
  

  • 其他属性

  

  • 支持的格式

    • 参考官网

  

  • 适配性写法（同<video>）

1.3 input新增特性

• 新增的属性

  • placeholder：输入框的占位文字
  • multiple：多个值
  • autofocus：自动聚焦

    <!-- 1.表单新增的属性 -->
    <input type="text" placeholder="占位文本" autofocus>
  
    <select multiple>
      <option value="">苹果</option>
      <option value="">香蕉</option>
      <option value="">句子</option>
    </select>
  
    <input type="text">
  

  

• type新增的类型

  • color

  • date

  • time

  • ...

    <input type="color">
    <input type="date">
    <input type="range" min="0" max="1000">
    

• 查看MDN文档

1.4 全局属性 data-*

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:

• data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到

• 通常用于HTML和JavaScript数据之间的传递

• 在小程序中, 就是通过data- 来传递数据的

  <!-- age不生效 -->
  <div class="box" age="18" data-name="why" data-age="18" data-height="1.88"></div>
  
  <script>
      const boxEl = document.querySelector(".box")
      console.log(boxEl.dataset)
  </script>