HTML5 新增内容总结

一:HTML5 新增的 语义化元素

• < header > : 头部元素
• < nav >: 导航元素
• < section >: 定义文档某个区域的 元素
• < article > : 内容元素
• < aside > : 侧边栏元素
• < footer >:尾部元素

这些元素的特点是

• 相对于之前通过id 或者 class 来区分 这些模块的实现来说,使用这些元素 更具备 语义化
• 通过这些元素编写的对应的模块,可以让搜索引擎更好的检索到对应的模块的内容,有利于 SEO

需要注意的是 这些元素 从本质上讲 和普通的 div 并没有特别大的区别,它们没有添加 对应的 css样式什么的,只是更加语义化了 而已.

二:HTML5 增加的 媒体类型的支持:

音频:< audio > 视频 < video>

HTML5 新增元素 - video

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

<video src="./video/test.mp4" controls></video>

video 常见的属性:

需要注意的是,只单独设置 自动播放autoplay,大部分浏览器是不会自动播放视频的,因为浏览器认为这样会 影响用户体验,此时可以与muted 静音属性 配合,以达到自动播放的目的

每个视频都有自己的格式,浏览器的video 并非支持所有的视频格式

video 的兼容性写法

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

• 内容一: 通过 < source >元素制定更多视频格式的源;
• 内容二: 通过 p/div 等元素指定 在浏览器不支持 video 元素的情况下 显示的内容.

<video src="test.mp4" controls width="500" autoplay muted>
    <source src="./videos/test.webm">
    <p>你的浏览器 不支持 HTML5 的video 元素,请更换浏览器查看!</p>
</video>

HTML5 新增元素 - audio

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

< audio src = "./media/test.mp3" controls autoplay muted></audio>

audio 常见属性

注意:同样存在 autoplay 问题,解决办法同 video

audio 支持的音频格式

每个音频都会有自己的格式,浏览器的audio 并非支持所有的视频格式

具体支持的格式 可以通过链接查看:

developer.mozilla.org/en-US/docs/...

可以的肯定的是 绝大部分浏览器都支持 mp3 格式的音频,建议 video 直接上.mp4 格式,audio 直接上 .mp3 格式.

< audio > 元素的兼容性处理

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

<audio src="../mdeia/test.mp3" controls autoplay muted>
    <source src="./media/test.ogg">
    <p>你的浏览器不支持HMTL5的audio 元素,请更换浏览器查看!</p>
</audio>

三:HTML5 : input 元素的 拓展内容

HTML5 对 input 元素也进行了 拓展,具体特性如下:

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

另外 对于 input 的type 值也有很多拓展:

• date
• time
• number
• tel
• color
• email 具体使用 可以查看MDN 文档: developer.mozilla.org/zh-CN/docs/...

四:HTML5 新增的全局属性 data-*

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

• data 设置的 属性可以在JavaScript 的DOM 操作中通过dataset 轻松获取到
• 通用用于 HTML 和JavaScript 数据之间的传递.
• 在小程序中,就是通过data-* 来传递数据的

data-* 使用demo

<div class="box" title="test" data-name="kebi" data-age="18"></div>
<script>
  const boxEl = document.getElementsByClassName("box");
  console.log(boxEl[0].dataset);
</script>

打印结果 :{name: 'kebi', age: '18'}