H5 新特性

1.语义化标签：article、nav、header、section、aside、footer
2.增强性表单：input的多个type
3.新增表单元素：detalist、keygen、output
4.新增表单属性：placehoder、require、mix和min
5.音频视频：video和audio
6.canvas绘画的
7.地理定位
8拖拽
9.本地存储localStorage和sessionStorage

语义化标签：

header 定义文档的头部区域
footer 定义文档的尾部区域
section 定义文档中的节（section、区段）
nav 定义文档的导航
aside 定义页面的侧边栏内容
article 定义页面独立的内容区域
(这些都是块元素)

增强型表单：

input type 的描述：

color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime 选择一个日期（UTC 时间）
email 包含 e-mail 地址的输入域
month 选择一个月份
number 数值的输入域
range 一定范围内数字值的输入域
search 用于搜索域
tel 定义输入电话号码字段
time 选择一个时间
url URL 地址的输入域
week 选择周和年
新增表单元素：

html5 也新增以下表单元素

表单元素的描述

datalist 元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist 元素的 id 绑定
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
option 元素永远都要设置 value 属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

image.png

keygen 提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段
output 用于不同类型的输出，比如计算或脚本输出

html新增的表单属性：

html5 新增的表单属性

表单属性描述

placehoder 输入框内的提示字符

<input type="text" name="" id="" placeholder="输入内容不能为空">

required 是一个 boolean 属性。要求填写的输入域不能为空
pattern 用于验证 input 元素的值
min 和 max 设置元素最小值与最大值
step 为输入域规定合法的数字间隔
height 和 width 用于 image 类型的 input 标签的图像高度和宽度
autofocus 是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple 是一个 boolean 属性。规定 input 元素中可选择多个值

地理定位

拖拽

html5 新事件：

事件描述

onresize 当调整窗口大小时运行脚本
ondrag 当拖动元素时运行脚本
onscroll 当滚动元素滚动元素的滚动条时运行脚本
onmousewheel 当转动鼠标滚轮时运行脚本
onerror 当错误发生时运行脚本
onplay 当媒介数据将要开始播放时运行脚本
onpause 当媒介数据暂停时运行脚本

块级元素：

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5 新增的 header、section、aside、footer 等

行内元素：

img、a、lable、input、em、big、i、textarea、select、small、sub、sup，strong、button

CSS3 新特性：

选择器：

:last-child 选择元素最后一个孩子
:first-child 选择元素第一个孩子
:nth-child(1) 按照第几个孩子给它设置样式
:nth-child(even) 按照偶数
:nth-child(odd) 按照奇数
:disabled 选择每个禁用的E元素
:checked 选择每个被选中的E元素
:not(selector) 选择非 selector 元素的每个元素
::selection 选择被用户选取的元素部分

伪类元素：

::before {} 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。
::after {} 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。
:first-letter 选择该元素内容的首字母
:first-line 选择该元素内容的首行
::selection 选择被用户选取的元素部分

边框和背景

边框：

border-radius：边框圆角
box-shadow ：盒子阴影
text-shadow：文字阴影
border-image：边框图片

背景：

background-size：规定背景图片的大小

文本效果

属性

text-shadow 向文本添加阴影
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
text
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
text-outline 规定文本的轮廓
text-overflow规定当文本溢出包含元素时发生的事情overflow:hidden(溢出隐藏)、overflow:auto(溢出自适应)、overflow:scrol(溢出滚动条)
text-wrap 规定文本的换行规则
word-break 规定非中日韩文本的换行规则
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
text-decoration 文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线

弹性布局的优点：

1 适应性强，在做不同屏幕分辨率的界面时非常实用

2 可以随意按照宽度、比例划分元素的宽高

3 可以轻松改变元素的显示顺序

4 弹性布局实现快捷，易维护

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent-div{
            display: flex;
            width: 100%;
            height: 300px;
        }
        .left-div{
            height: 100%;
            flex: 1;
            background:green;
        }
        .center-div{
            height: 100%;
            width: 200px;
            background: blue;
        }
        .right-div{
            flex: 1;
            height: 100%;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="parent-div">
        <div class="left-div"></div>
        <div class="center-div"></div>
        <div class="right-div"></div>
    </div>
</body>
</html>

中间盒子宽度固定，左右盒子自适应

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent-div{
            display: flex;  /*给父级添加弹性盒*/
            width: 100%;
            height: 300px;
        }
        .left-div{
            height: 100%;
            flex: 1;        /*左侧盒子占一份*/
            background:green;
        }
        .center-div{
            height: 100%;
            width: 200px;  /*中间盒子设置宽200px*/
            background: blue;
        }
        .right-div{
            flex: 1; /*左侧盒子占一份*/
            height: 100%;
            background: pink;
        }
    </style>

弹性盒子属性：

父级属性：

flex-wrap: nowrap; /换行/
flex-wrap: wrap; /不换行/
justify-content: space-between; /左右靠边中间盒子之间距离相等/
justify-content: space-around; /每个两侧盒的间隔相等。所以，盒子之间的间隔比盒子与边框的间隔大一倍。/
justify-content: space-evenly; /每个盒子之间的距离都相等/
justify-content: flex-start; /左对齐/
justify-content: flex-end; /右对齐/

子级属性：

align-items: center; /居中/
align-content: space-around;/每个两侧盒的间隔相等。所以，盒子之间的间隔比盒子与边框的间隔大一倍。/
align-content: space-between;/上下靠边中间盒子之间距离相等/
align-items: flex-end; /底部对齐/
align-items: flex-start; /顶部对齐/

 <style>
        *{
            margin: 0;
            padding: 0;
        }
       .parent-div{
            display: flex;  /*给父级添加弹性盒*/
            flex-direction: row; /*弹性盒方向：主轴方向X轴  */
            flex-direction: column;  /* 弹性盒方向：主轴Y轴方向 */
            flex-direction: row-reverse;/* 弹性盒方向：主轴方向X轴 倒叙 */
            flex-direction: column-reverse;
            justify-content: space-between;  /*左右靠边  中间盒子之间距离相等*/
            justify-content: space-around;   /*每个两侧盒的间隔相等。所以，盒子之间的间隔比盒子与边框的间隔大一倍。*/
            justify-content: space-evenly;    /*每个盒子之间的距离都相等*/
            justify-content: flex-start;   /*左对齐*/
            justify-content: flex-end;      /*右对齐*/
            width: 100%;
            height: 200px;
        }
        .left-div{
            height: 100%;
            /* flex: 1;        左侧盒子占一份 */
            background:green;
            width: 200px;
            align-items: center;        /*居中*/
            align-content: space-around;/*每个两侧盒的间隔相等。所以，盒子之间的间隔比盒子与边框的间隔大一倍。*/
            align-content: space-between;/*上下靠边  中间盒子之间距离相等*/
            align-items: flex-end;      /*底部对齐*/
            align-items: flex-start;    /*顶部对齐*/
        }
        .center-div{
            height: 100%;
            width: 200px;  /*中间盒子设置宽200px*/
            background: blue;
        }
        .right-div{
            flex: 1; /*左侧盒子占一份*/
            height: 100%;
            background: pink;
        }
    </style>

2D/3D 转换

2D 转换（transform）

translate()：元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数。 transform: translate(50px, 100px);
rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);
matrix()：把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D 转换

rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
perspective：规定 3D 元素的透视效果

动画、过渡

过渡效果（transition），使页面变化更平滑，以下参数可直接写在 transition 后面
transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
transition-duration：过渡动画的一个持续时间。
transition-timing-function：在延续时间段，动画变化的速率，常见的有： - ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
transition-delay：延迟多久后开始动画

动画（animation）

先定义 @keyframes 规则（0%，100% | from，to）
然后定义 animation，以下参数可直接写在 animation 后面

animation-name: 定义动画名称
animation-duration: 指定元素播放动画所持续的时间长
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )：指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
animation-delay: 指定元素动画开始时间
animation-iteration-count: infinite | number：指定元素播放动画的循环次数
animation-direction: normal | alternate：指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）
animation-play-state: running | paused ：控制元素动画的播放状态

canvas使用：

1、需要有一个ID ，画布的尺寸；

<canvas id='myCanvas' width='500' height='500'></canvas>

2、通过ID获取canvas的Dom对象，获取context；

var canvasDom=document.getElementById('myCanvas')
var ctx=canvasDom.getContext('2d')

操作context两种默认方式：1，绘制线（stroke）2，填充（fill）；

<script>
    var canvasDom=document.getElementById('canvas')
    var context=canvasDom.getContext('2d')
    ctx.moveTO(x,y)//移动x,y
    ctx.lineTo(x,y)//连线至x ，y
    ctx.stroke();//描边；
    ctx.lineWidth='10' //绘制出的线粗细；
    ctx.fillRect(x,y,width,height)//填充矩形；
    ctx.clearRect(x,y,width,height)//清除画布区域；清除重复绘制的现象
    ctx.beginPath()//----)开辟新路径；
    ctx.closePath()//----闭合路径；
    ctx.stroke()//----描边；
    ctx.fill();//----填充；
    ctx.lineWidth='10'//----线宽；
    ctx.lineJoin//----连接点样式；
    ctx.lineCap//----线头样式；
    ctx.strokeStyle='red'//----描边颜色；
    ctx.fillStyle='blue'//----填充颜色；
</script>

视频

<video src='文件路径' controls='controls'(控制器，可简写为controls) autoplay='autoplay'(自动播放，可简写为autoplay) loop='loop'(重复次数) poster='封面图路径 'width='' height=''></video>

音频

 <audio src='文件路径' controls='controls'(控制器，可简写为controls) autoplay='autoplay'(自动播放，可简写为autoplay) loop='loop'(重复次数) ></audio>

H5 CSS3 新特性