html5 表单新增的type属性（表单提交才可以触发）

<!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->

    <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->

    <!--url验证只能输入合法的网址：必须包含http://-->

    <!--number：只能输入数字(包含小数点)，不能输入其它的字符
    max:最大值
    min:最小值
    value:默认值-->

    <!--search：可以提供更人性化的输入体验-->

    <!--range:范围-->(<input type="range" max="100" min="0" value="50">)

    <!--date：日期：年月日-->    <!--time:时间：时分秒-->

    <!--required:必须输入，如果没有输入则会阻止当前数据提交-->
    <!--pattern:正则表达式验证-->

---------------------------------------------------------------------------------------------

H5新增的Demo

  一， /*querySelector:获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素*/  例子:  var javaLi=document.querySelector(" ");

 二，/*querySelectorAll获取满足条件的所有元素--数组*/

 var allLi=document.querySelectorAll("li");

 三，/*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/

document.getElementById("userName").oninput=fuction(){ }

--------------------------------------------------------------------------------------------

H5显示全屏事件

  /*全屏操作的主要方法和属性
    * 1.requestFullScreen():开启全屏显示
    *   不同浏览器需要添加不同的前缀
    *   chrome:webkit   firefox:moz   ie:ms   opera:o
    * 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
    * 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/

-----------------------------------------------------------------------------------------------

H5拖拽事件

 <!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->

例如：<p id="pe" draggable="true">试着把我拖过去</p>

CSS3

border-radius 属性用于创建圆角

参数：【参数一】所有角都使用半径为5px的圆角

======================================================

box-shadow 用于向方框添加阴影：

参数意思：

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow    必需。水平阴影的位置。允许负值。   

• v-shadow    必需。垂直阴影的位置。允许负值。      

• blur    可选。模糊距离。   

• spread    可选。阴影的尺寸。    

• color    可选。阴影的颜色。请参阅 CSS 颜色值。   

• inset    可选。将外部阴影 (outset) 改为内部阴影。

======================================================

border-image 属性，您可以使用图片来创建边框

border-image 用 image 做边界， 三个参数，（1）图片的URL地址， 例如： url(my-image.gif) (2) 图片的宽度。 30 是 宽度，单位是像素。也可用 百分比。 （3）图片叠放方法 Repeat -- 重复， Round -- 取整数个数，允许略为拉伸，充满宽度, Stretch -- 拉伸

=======================================================

text-shadow 可向文本应用阴影

参数: 4个参数   【一】长px 或者百分比 【二】宽 px 或者百分比 【三】高 px 或者百分比 【四】颜色

=====================================================

TransFrom  变形，转换，改变

用法：transform：rotate();旋转的意思，括弧写你想旋转多少度，单位是deg（度）

transform：skew( )；skew,单词的意思是倾斜，括弧里同上，单位依旧是多少 deg;

transform：scale();比例的意思，括弧里填写数值，“1.5”代表放大1.5倍，大于1.0为放大，小于则缩小；

-transform：scale（a); 元素X和Y均缩放a倍；
-transform: scale（a，b）；X方向缩放a倍，Y方向缩放b倍；
-transform：scale X（a）； X方向缩放a倍，Y方向不变；
-transform：scale Y（b）；Y方向缩放b倍，X方向不变；

transform：translate();含义是变动，位移

transform-origin(x,y);（x,y）值可以是%，em，px；也可以是字符值，left，right，center；Y和X一样除了百分值外还可以设置top，center，bottom；

========================================================

文字换行    用法： word-wrap:break-word

========================================================

div:hover{ width:300px;}  鼠标移入移出改变样式

========================================================

过渡  css属性

(1) transition-property  规定设置过渡效果的 CSS 属性的名称。

(2)transition-duration 规定完成过渡效果需要多少秒或毫秒。

(3)transition-timing-function 规定速度效果的速度曲线。

可选参数:

     ease(逐渐慢下来)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(x1,y1,x2,y2); [x1,y1,x2,y2]参数大小由0-1之间

(4) transition-delay   过渡前停留的时间

========================================================