HTML5和移动端适配

HTML5是HTML最新版本
新增标签

<header></header>头部信息
<section></section>段、中间区域
<footer></footer>底部信息
<progress max="100" value="80"></progress>进度条
<meter max="100" value="80"></meter> 度量衡
<nav></nav>导航
<article></article>文章
<aside></aside>侧边栏
对话框
<dialog>充值成功</dialog> 对话框 提示框
默认是隐藏不显示，因为自带display：none；设置为display：block；才显示。


详细信息列表<details></details>
<details open="open">
<summary>新冠疫情已经过去</summary>
<p>方法你们可能的麦克风发给你是官方</p>
</details>
open="open" 默认展开属性
summary在details显示的标题
音频
<audio src="img/aigei.mp3" controls="controls"></audio>
audio属性:
1、src=""必须属性放音频路径
2、controls="controls"必须属性,不写不显示音频插件
3、 auto play="autoplay"自动播放,由于官方建议不主动播放,所以自动播放效果需要后期脚本控制
4、loop-"loop"循坏播放
5、preload="auto"自动,刷新页面,网络好,就就加载,网络不好,就不加载
preload="metadata"加载
preload="none"不加载
视频
<video src="img/6f27a.mp4" controls="controls" width="500" poster="img/213911.png"></video>
video属性
1、src=""必须属性放音频路径
2、controls="controls"必须属性,设置才显示视频的播放按钮,不写不显示
3、 auto play="autoplay"自动播放
4、loop-"loop"循坏播放
5、muted="muted"静音播放
6、preload="auto"自动,网络好,就加载,网络不好,就不加载
preload="metadata"加载
preload="none"不加载
poster="img/213911.png"视频封面 路径不显示
<canvas></canvas>画布
<figure></figure>图表

盒子模型：标准盒模型和怪异模型
标准盒模型从内到外：content-padding-border-margin-position
怪异（ie）盒模型：content包含padding和border，外面是margin
标准盒模型切换怪异盒模型
box-sizing：content-box切换标准盒模型
box-xiaing：border-box 切换怪异盒模型

移动端布局
1.百分比布局
2.rem布局

适配

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">