HTML5

HTML5是HTML最新版本

HTML5新增标签

<header></header> 头部信息

<footer></footer>底部信息

<section></section>区域 段

<progress></progress>进度条

<progress max="100" value="80"></progress>

重点！！！

修改进度条第一种

progress {
　　　　168px;
　　　　height: 5px;
　　　　background: lightseagreen;
　　　　color: lightpink;/*表示已完成进度的颜色*/
　　　　border-radius: 1em;
　　　　overflow: hidden;
}

进度条样式第二种
progress {
　　　　160px;
　　　　border: 1px solid #0064B4;
　　　　background-color:#e6e6e6;
　　　　color: #0064B4; /*IE10下已完成进度的颜色*/
　　　　border-radius:1em;
}
progress::-webkit-progress-bar { background: #e6e6e6; border-radius:1em;}/*表示在chrome下全部进度的颜色*/

progress::-webkit-progress-value { background: #0064B4; border-radius:1em;}/*表示在chrome下已完成进度的颜色*/

<meter></meter>度量衡

<meter max="100" value="80"></meter>

<nav></nav>导航

<article></aryicle>文章

<aside></aside>侧边栏

<dialog></dialog>对话框

默认是隐藏不显示，因为自带display:none;设置为display:block才显示

<details></details>详细信息列表

<details open="open">

　　　　　　　　<summary>详细信息列表</summary>

　　　　　　　　<p>详细信息列表</p>

　　　　　　　　<img src=" " alt=" ">

</details>

<summary>详细信息列表</summary>是dtails显示的标题

<audio></audio>音频

<audio src=" " controls autoplay="autoplay" muted="muted" loop="loop" preload="auto"></audio>

audio属性：

1.src=" " 必须属性，播放音频路径

2.controls="controls" 必须属性，不写不显示音频插件

3.autoplay="autoplay" 自动播放，由于官方被建议不自动播放，所以自动播放效果需要脚本控制

4.loop="loop" 循环播放

5.preload="auto" 自动，刷新页面，网络好就加载，不好就不加载

preload="metadata" 加载

preload="none" 不加载

<video></video>视频

<video src=" " controls="controls" autoplay="autoplay" loop="loop" mutd="muted" preload="auto" poster="封面路径"></video>

视频属性

1.src=" " 必须属性，播放音频路径

2.controls="controls" 必须属性，不写不显示音频插件

3.autoplay="autoplay" 自动播放，由于官方被建议不自动播放，所以自动播放效果需要脚本控制

4.loop="loop" 循环播放

5.muted="muted"静音播放

6.preload="auto" 自动，刷新页面，网络好就加载，不好就不加载

preload="metadata" 加载

preload="none" 不加载

7.poster="图片路径" 视频封面 路径不提示，需要手动输入图片路径

画布<canvas></canvas>

移动端布局方式

1.百分比

2.rem

！！！移动端适配

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

盒子模型：标准盒模型和怪异盒模型

标准盒模型从内到外：content-padding-border-margin-position

怪异（ie）盒模型：content包含padding和border，外面是margin

标准盒模型切换怪异盒模型

box-sizing:content-box 切换标准盒模型

box-sizing:border-box 切换怪异盒模型

details详细信息

open="open" 设置details默认展开的属性

figure图片，图表

<figure>

　　　　<figcaption>图片，图表</figcaption>

</figure>

figcaption是figure的标题

dialog 提示框 对话框

<dialog style="display:block">提示框<>

默认display:none;要显示设置display:block;

canvas画布

<canvas width="" height=""></canvas>

canvas是绘画容器，没有绘画能力，如果想实现绘画需结合脚本完成