HTML5 新增

一、HTML5语义化标签

section: 页面中的一个区块（大区块）
article 元素 表示一块与上下文无关的独立内容
aside 元素在article 之外的，与article 内容相关的辅助信息。
header 元素表示页面中一个内容区块或整个页面的标题（header可以嵌套header）
footer 元素表示页面中一个内容区块或整个页面的脚注
nav 元素表示页面中导航链接部分
figure 元素表示一段独立的内容
figcaption
使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main 元素表示页面中的主要的内容(ie不兼容)
hgroup 标题的一个分组 ( hgroup 里包含 h1-h6)
mark 定义高亮显示的文本(span) (行内标签)
time 时间
dialog 标记定义一一个对话框(会话框)类似微信
open
embed 标记定义外部的可交互的内容或插件比如flash
内嵌网页或者文件…

二、HTML5多媒体标签

属性

• controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
• autoplay属性：如果出现该属性，则视频在就绪后马上播放。
• loop属性：重复播放属性。
• muted属性：静音属性。
• poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

type属性值：
用于视频：video/ogg video/mp4 video/webm
用于音频：audio/ogg audio/mpeg

三、表单控件

1、控件类型：
type="url”     限制用户必须输入url类型
type=“range”    产生一个滑动条表 单
type=“number”     显示一个数字文本输入框
type=“search”    产生一个搜索意义的表单
type=“color”     生成一个颜色选择的表单
/* 以下不建议使用 */
type-="time”    限制用户必须输入时间类型
type=“month”    限制用户必须输入月类型
type="week”    限制用户必须输入周类型
type=“datetime-local”    选取本地时间
type=“date”

2、HTML5新增表单属性:
required    监测是否为空。
min    最小
max    大
step    步幅确定一个法定值。-30369 （每一帧的值）
list    必须结合datalist标签,绑定datalist id名称。
autocomplete    是否自动提示信息属性值on ( 默认值) off (关闭提示)表单元素要必须有name属性
placeholder    文本框的提示信息
autofocus    自动聚焦。一个页面只能一个。
pattern    后面的属性值是一个正则表达式。
novalidate    取消验证
multiple    选择(上传)多个

output    表示不同类型的输出 ,比如脚本的输出
for :    定义输出域相关的一个或多个元素。
form:    定义输入字段所属的一个或多个表群。

四、怪异盒模型

盒子模型: 组成content padding border margin
标准盒子模型的计算: content + padding+ border

怪异盒子模型:
content包含 paadding border
设置盒子模型 box-sizing
border-box 怪异盒子模型
content-box 标准盒子模型默认值

五、弹性盒

弹性盒
display:
flex 块级弹性盒
inline-flex 行内弹性盒
目的：控制子元素的排列方式

    特点：  1.所有的子元素都能设置宽高度
                    2. 所有的子元素默认沿 X 轴排列 
                    3.只有一个子元素时，给子元素添加margin:0 auto ,子元素居中

    flex-direction:    属性决定主轴的方向(即项目的排列方向)
                    row             x轴排列
                    row- reverse    x轴反向排列
                    column          Y轴排列
                    column-reverse  Y轴反向排列
    flex-wrap:子元素是否换行
                wrap    换行
                nowrap  不换行
                wrap-reverse    反向换行

    justify-content: 主轴的对齐方式  （写给父元素）
                    flex-start      默认值  主轴的起点对齐
                    flex-end        主轴末端对齐
                    center          主轴居中 
                    space-between   主轴两端对齐
                    space-around    主 轴自动分配间距每个子元素的左右相等
                    space-evenly    主轴自动分配间距每个间距相等

    align-items:   属性定义项目在交叉轴上(侧轴)如何对齐。（多行）
                flex-start
                flex-end
                center
                baseline    基线对齐- 般情况与flex-start相同（5条基线）
                stretch     (默认值)拉伸 

    align-content:   属性定义了多根轴线(行与行之间)的对齐方式。对于单行子元素，
        该属性不起作用。
                    flex-start      默认值主 轴的起点对齐
                    flex-end        主轴末端对齐
                    center          主轴居中 
                    space-around    主 轴自动分配间距每个子元素的左右相等
                    space-evenly    主轴自动分配间距每 个间距相等
                    stretch         拉伸
                    align- capntent 在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，
                    该属性不起作用

弹性盒模型–项目元素属性 (子元素)

align-self:属性     设置子元素的对齐方式
    auto       默认值。元素继承了它的父容器的align-items 属性。如果没有父容器则为  "stretch"。
    stretch         元素被拉伸以适应容器。
    center     元素位于容器的中心。
    flex-start      元素位于容器的开头。
    flex-end       元素位于容器的结尾。

order属性 子元素的排位顺序
number 排序优先级,数字越大越往后排,默认为0 ,支持负数。

flex属性：复合属性。设置或检索弹性盒模型对象的子元素如何分配空间

flex-grow   一个数字,规定项目将相对于其他灵活的项目进行扩展的量(放大的比例) ,
        默认为0 ,即如果存在剩余空间也不放大。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量(缩小比例) ,
        默认为1 ,即如果空间不足该项目将缩小。。
flex-basis 项目的长度