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是绘画容器，没有绘画能力，如果想实现绘画需结合脚本完成