2020-12-09 HTML5+CSS新增特性

HTML5新增

表单新增

datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

<input type="text" list="search" />
<datalist id="search">
<option  value="111" />
<option  value="222" />
<option  value="111222" />
</datalist>

新增控件

color、date、datetime、month、week、url、email、tel、number、range（应该包含一定范围内数字值的输入域）、search

媒体元素

音频

视频

cavans

 <canvas width="200" height="200" id="one"></canvas>
var one=document.getElementById("one");
var ctx=one.getContext("2d"); //创建2d 画布
ctx.moveTo(20,0);//开始点
ctx.lineTo(200,200); //结束点
ctx.strokeStyle="red"//线条颜色
ctx.stroke();//画线

ctx.moveTo(0,100);//开始点
ctx.lineTo(200,100); //结束点
ctx.stroke();//画线


// 矩形
ctx.strokeRect(20,20,100,50); //空心 x ,y ,宽,高

ctx.fillStyle="red";//填充颜色
ctx.fillRect(100,100,100,50);//实心 -- 默认颜色黑色


// 画圆
ctx.beginPath();//开始 --画笔放下
ctx.arc(70,18,60,0,Math.PI,false); 
//ctx.arc(x,y,半径,开始角度,结束角度,顺时针逆时针)
// Math.PI  180deg
// ctx.stroke();
ctx.fill();

ctx.closePath(); //结束 --画笔抬起

拖放

   drag    拖
            drop    放
        dragable=true
            拖动元素（图片）
                开始拖动    ： dragstart
                拖动过程中  ：  drag
                结束拖动    ：  dragend
            目标元素 （div）
                进入目标    ：dragenter
                在目标元素上 ：dragover
                释放        ：drop
                离开目标    ：dragleave

本地储存

localStorage\ sessionStorage

CSS3新增特性

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

选择器

属性选择器

​ [ 属性名/自定义属性 = “值” ]{

​ }

​ =等于 ^开头 $结尾 ~词列表包含 *包含

结构伪类

​ :nth-child()

​ :nth-of-type()

​ :first-child

​ :first-of-type

​ :last-child

​ :last-of-type

伪类

​ :disabled

​ :enabled

​ :checked

​ ::selection

​ :not()

​ :read-only

​ :required

盒模型

边框

​ border-radius

​ box-shadow

​ border-image

背景

​ background-image

​ background-size
​ background-origin
​ background-clip

渐变（Gradients）

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

文本

​ text-shadow

​ box-shadow
​ text-overflow
​ word-wrap
​ word-break

文字特效

@font-face{

	font-family: "字体名字";

​ src: url(“字体地址”)

}

2D

transform: translate(100px,100px);  位移
transform: scale(0); 缩放
transform: skewX(30deg);
transform: skewY(30deg); 倾斜
transform: rotate(30deg); 旋转

3D

transform: rotateX(30deg); 旋转
transform: rotateY(30deg); 旋转

动画

创建动画
 @keyframes 动画名称{
 		from{}
 		to{}
 }
  @keyframes 动画名称{
 		0%{}
 		1%{}
 		....
 }
调用动画
animation:动画名称	动画时间 动画方式（匀速、先快后慢。。） 延迟时间  动画次数（infinite）反向（alternate）

多列

column-count: 4；

用户界面

resize:both  /horizontal 水平/vertical垂直