HTML5的新增元素

文章目录

- HTML5新增元素

HTML5新增元素

新增语义化元素

在HMTL5之前，我们的网站分布层级通常包括哪些部分呢？

header、nav、main、footer

但是这样做有一个弊端：

我们往往过多的使用div, 通过id或class来区分元素；

对于浏览器来说这些元素不够语义化；

对于搜索引擎来说, 不利于SEO的优化；

HTML5新增了语义化的元素：

<header>：头部元素

<nav>：导航元素

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

<article>：内容元素

<aside>：侧边栏元素

<footer>：尾部元素

其他的新增元素

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

在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题;

比如无法很好的支持HTML/CSS特性, 兼容性问题等等;

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

音频：<audio>

视频：<video>

Video和Audio使用方式有两个：

一方面我们可以直接通过元素使用video和autio；

x另一方面我们可以通过JavaScript的API对其进行控制；

video元素

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

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

video常见的属性

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

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

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

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

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

<video src="../video/fcrs.mp4" controls>
  <!-- 指定更多的视频格式源 -->
  <source src="../video/fcrs.webm">
  <!-- 当浏览器不支持时, 显式的文本 -->
  <p>您的浏览器不支持HTML5的video元素</p>
</video>

audio元素

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

<audio src="../media/aaa.mp3"></audio>

常见属性

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

每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式具体的支持的格式可以通过下面的链接查看:

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

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

<audio src="../media/aaa.mp3">
  <!-- 不支持时更换其他音频源 -->
  <source src="../media/aaa.ogg">
  <!-- 都不支持时, 显式的文本 -->
  <p>您的浏览器不支持HTML5的audio元素</p>
</audio>

input元素扩展

HTML5对input元素也进行了扩展，在之前我们已经学习过的其中几个属性也是HTML5的特性：

placeholder：输入框的占位文字

multiple：多个值

autofocus：最多输入的内容

<!-- 1.表单新增的属性 -->
<input type="text" placeholder="占位文本" autofocus>

<select multiple>
  <option value="">苹果</option>
  <option value="">香蕉</option>
  <option value="">句子</option>
</select>

<input type="text" autofocus>

另外对于input的type值也有很多扩展：

date

time

number

tel

color

email

等等…

<!-- 2.input的type类型 -->
<input type="color">
<input type="date">
<input type="range" min="0" max="1000">

MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

新增全局属性 data-*

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

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

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

<div class="box" age="18" data-name="why" data-age="18" data-height="1.88"></div>

<h1 class="title"></h1>

<script>
  const boxEl = document.querySelector(".box")
  console.log(boxEl.dataset)
</script>