W.T.的博客

Every day to be a little better

前端-HTML学习笔记04-HTML5

发表于 更新于 分类于
本文字数： 3.5k 阅读时长 ≈ 3 分钟
语义化标签，音视频元素，data-*

1. 元素的语义化

  • 元素的语义化：用正确的元素做正确的事情

  • 理论上来说，所有的HTML元素，都能实现相同的事情

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
      p{
        margin: 20px 0;
        font-size: 24px;
        font-weight: 700;
      }
    </style>
    <h2>标题</h2>
    <p>标题</p>

  • 标签语义化的好处

    • 方便代码维护
    • 减少让开发者之间的沟通成本
    • 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应
    • 有利于SEO
    • ……

1.1. 无语义的布局标签

  • 场景：实际开发网页时会大量频繁的使用到div和span标签

  • div标签独占一行 

    1
    <div id="container"></div>

  • span标签一行可以显示多个

    1
    <span></span>

1.2. 有语义的布局标签

  • 在HTML5新版本中，推出了一些有语义的布局标签
标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章
  • 注意点
    • 以上标签显示特点和div一致，但是比div多了不同的语义

2. 音视频元素

  • Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易

    • 在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题
    • 比如无法很好的支持HTML/CSS特性, 兼容性问题等等

  • HTML5增加了对媒体类型的支持

    • 音频：audio
    • 视频：video

  • Video和Audio使用方式有两个

    • 一方面可以直接通过元素使用video和autio
    • 另一方面可以通过JavaScript的API对其进行控制

2.1. video

  • video元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
1
<video src="./video/fcrs.mp4" controls width="500" autoplay muted></video>

2.1.1. 常见的属性

常见属性 值的方式 属性作用
src URL地址 视频播放的URL地址
height pixels-像素 设置video宽度
width pixels-像素 设置video高度
controls boolean类型 是否显示控制栏，包括音量，跨帧，暂停/恢复播放
autoplay boolean类型 是否视频自动播放(某些浏览器需要添加muted，比如chrome)
muted boolean类型 是否静音播放
preload none/metadata/auto 是否需要预加载视频.metadata表示预加载元数据(比如视频时长等)
poster URL地址 一海报帧的URL

2.1.2. 支持的视频格式

Codec name (short) Full codec name Browser compatibility1
3GP Third Generation Partnership Firefox for Android
ADTS Audio Data Transport Stream Firefox2
FLAC Free Lossless Audio Codec Chrome 56, Edge 16, Firefox 51, Safari 11
MPEG / MPEG-2 Moving Picture Experts Group (1 and 2) —
MPEG-4 (MP4) Moving Picture Experts Group 4 Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1
Ogg Ogg Chrome 3, Firefox 3.5, Edge 173 (desktop only), Internet Explorer 9, Opera 10.50
QuickTime (MOV) Apple QuickTime movie Only older versions of Safari, plus other browsers that supported Apple’s QuickTime plugin
WebM Web Media Chrome 6, Edge 173 (desktop only), Firefox 4, Opera 10.6, Safari (WebRTC only)

2.1.3. 兼容性写法

  • video元素中间的内容，是针对浏览器不支持此元素时候的降级处理
    • 内容一：通过source元素指定更多视频格式的源
    • 内容二：通过p/div等元素指定在浏览器不支持video元素的情况显示的内容
1
2
3
4
<video src="./video/fcrs.mp4" controls width="500" autoplay muted>
  <source src="./videos/fcrs.webm">
  <p>你的浏览器不支持HTML5的video元素，请更换浏览器查看!</p>
</video>

2.2. audio

  • audio元素用于在文档中嵌入音频内容, 和video的用法非常类似
1
<audio src="./medis/yhbk.mp3" controls autoplay muted></audio>

2.2.1. 常见属性

常见属性 值的方式 属性作用
src URL地址 视频播放的URL地址
controls boolean类型 是否显示控制栏，包括音量，跨帧，暂停/恢复播放
autoplay boolean类型 是否视频自动播放(某些浏览器需要添加muted，比如chrome)
muted boolean类型 是否静音播放
preload none/metadata/auto 是否需要预加载视频.metadata表示预加载元数据(比如视频时长等)

2.2.2. 支持的音频格式

2.2.3. 兼容性写法

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

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

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

  • <audio src="./media/yhbk.mp4" controls autoplay muted>
  <source src="./media/yhbk.ogg">
  <p>你的浏览器不支持HTML5的audio元素，请更换浏览器查看!</p>
</audio>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

      

    # 新增全局属性 data-\*

    - 在HTML5中, 新增一种全局属性的格式 data-\*, 用于自定义数据属性
      - data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到
      - 通常用于HTML和JavaScript数据之间的传递

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

    ```html
    <div class="box" data-name="why">
      box
    </div>

    <script>
      const box = document.querySelector(".box");
      // DOMStringMap {name: 'why'}
      console.log(box.dataset);
      // why
      console.log(box.dataset.name);
    </script>
本文结束  感谢您的阅读