HTML5 语义化元素

在 HTML5 之前网站的分布层级包含header,nav,main,footer

这种传统方式的弊端

1. 过多的使用div，通过id或者class来区分元素
2. 对于浏览器来说元素不够语义化
3. 对于搜索引擎来说不利于 SEO 优化

在 HTML5 中新增的语义化标签

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

HTML5 中新增的其它元素

在 HTML5 之前如果需要在网页中嵌入视频或者音频需要使用其他插件或者 flash 实现，无法很好的支持 HTML/CSS 特性以及浏览器兼容性问题。在 HTML5 中增加了对媒体类型的支持，video和audio。

使用

1. 直接通过元素标签使用video和audio
2. 通过 JavaScript 的 API 对其控制

video元素

HTML5中video元素用于在网页中嵌入媒体播放器，用于支持文档内的视频播放
<video src=""> controls</video>

video元素常见的属性

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

视频会有很多的格式，video元素并非支持所有的视频格式

video的兼容性写法

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

1. 通过source元素指定更多的视频格式源
2. 通过p/div等元素指定在浏览器不支持video元素的情况下显示的内容

<video src="" controls width="500" autoplay muted>
	<source src="">
    <p>
        您的浏览器不支持HTML5的video元素，请更换浏览器查看
    </p>
</video>

audio元素

audio元素用于在文档中嵌入音频内容，用法和video元素类似

<audio src="" controls autoplay muted></audio>

常见的属性

常见属性	取值方式	属性作用
src	url地址	音频播放的url地址
controls	boolean	是否显示控制栏，包括音量，进度，暂停/恢复播放
autoplay	boolean	是否自动播放，某些浏览器需要添加muted,比如Chrome
muted	boolean	是否静音播放
preload	none/metadata/auto	是否需要预加载,metadata表示预加载元数据

audio并非支持所有的音频格式，具体的支持格式文档可查看

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

audio的兼容性写法

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

<audio src="" controls width="500" autoplay muted>
	<source src="">
    <p>
        您的浏览器不支持HTML5的audio元素，请更换浏览器查看
    </p>
</audio>

input元素的扩展内容

HTML5中也对input元素进行了扩展，前面的placeholder，multiple，autofocus 属性也是HTML5的特性

HTML5中的扩展

• date
• time
• number
• tel
• color
• email
• ...

<input type="text" placeholder="占位文本" autofocus><br/>
<input type="date"><br/>
<input type="time"><br/>
<input type="number"><br/>
<input type="tel"><br/>
<input type="color"><br/>
<input type="email">

新增全局属性 data-*

在HTML5中，新增了全局属性的格式data-*，用于自定义属性

• data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到
• 通常用于HTML和JavaScript数据之间的传递

<div class="box" title="abc" data-name="zs" data-age="18">
 box   
</div>
<script>
const boxEl = document.querySelector('.box')
console.log(boxEl.dataset)
</script>

• 小程序中，就是通过data-来传递数据的，所以该全局属性是重点掌握内容