HTML5

前言：HTML5 的新增特性主要是增加了一些新的语义化标签、新的表单和新的表单属性等。

一、HTML5 新增结构元素

我们之前布局时，全都是使用 div 来做的。但是div 对于搜索引擎来说，不利于网站对访客的易用性，不利于搜索引擎或者爬虫软件建立索引，更 不便于后期的代码维护。而新增的结构元素，增加了语义化，方便后期的维护。

1、结构元素

①<header>：头部标签    <!-- 一般是用在头部信息上 -->
②<main>：主体标签       <!-- 使用main来包裹主体的内容 -->
③<nav>：导航标签         <!-- 一般用于包裹导航的内容 -->
④<section>：正文部分      <!-- section一般可以包裹一个内容区域块 -->
⑤<aside>：侧边栏标签    <!-- aside一般用作侧边栏 -->
⑥<article>：内容标签       <!-- article一般用来包裹正文的内容 -->
⑦<footer>：尾部标签       <!-- 页面或页面中某一个区块的脚注 -->

☆100vw 是整个屏幕的宽度 viewport weight 

            vh 是视口的整个高度  整个屏幕的高度 不算滚动条内的高度 

             calc 是用css 用来计算的方法

            用整个屏幕的高度 - header的高度 - nav的高度 - footer的高度 

        △使用减法 -  左右需要空格 

二、HTML5 新增的网页元素

HTML5 新增的网页元素主要包含有：视频：<video> 、音频：<audio> 。

1、视频<video>

video标签是用于定义视频，如电影片段或其他视频流

<video src="文件地址" controls  autoplay  loop  muted>
        您的浏览器不支持video视频
</video>
 
controls="controls" 或者直接写controls  只有加上这个才会出现控制菜单 
 
 autoplay="autoplay"   直接写controls 可以实现自动播放，但是在部分浏览器会存在兼容问题，自动播放实现不了
 
加上loop属性，可以实现循环播放效
 
 加上muted属性，会自动静音
 
<!-- video 里面的字只有在不支持video 标签的浏览器才会显示在页面上 -->

---

2、音频<audio>

audio标签用于定义音频，如音乐或其他音频流

<audio src="文件地址" controls autoplay="autoplay" loop muted>

</audio>

属性和视频video的属性用法基本一致。