【嘉兴东臣php】HTML5 CSS3总结

总结:代码是打出来的。

HTML5 表单新增特性

<input type="number"/> 数字
<input type="url"/>  URL
<input type="email"/> 邮箱
<input type="color"/> 颜色拾取
<input type="date"/> 日期选择
<input type="range"/> 范围

input新增常用属性
min 最小
max 最大
placeholder 默认提示
autocomplete 自动提交
autofocus 自动聚焦
novalidate  提交时不要验证(默认自动验证)

HTML5 canvas 画布

<canvas></canvas>
例如：<canvas id="" width= height=></canvas>

canvas 本身不能画图，只能借助于javascript画图。
由于jquery并不能保证完全支持html5的特性，所以建议使用原生的JS语法。

canvas一般前2个步骤为：
 1、var can = document.getElementById("") //获取canvas对象
 2、var con = can.getContext("2d");//获取上下文。
注意：一般canvas通过上下文去画图，根据图形的特殊性，矩形，圆，线段等统一归类为2d

注意：在canvas画布上画图形之前，要给canvas一定的尺寸之后，再定义在画布上显示的东西，例如：去看电影，幕布就是canvas，显示的电影图像就是我们要去画的矩形、圆形 等。

注意：在canvas中，画图大致有2个类型：实心和空心。
分别用fill和stroke 表示。常用语法如下：
1、stroke(fill)Text 空心(实心)文本 
2、stroke(fill)Style 空心(实心)样式
3、stroke(fill) 开始绘制空心(实心)图
4、stroke(fill)Rect 空心(实心)坐标

canvas基本分类：
 1、画矩形。
  var can = document.getElementById("");
  var con = can.getContext("2d");
  con.fillStyle = "" //设置颜色
  con.fillRect(x,y,width,height) //设置矩形显示的尺寸 

 2、画线段。
  var can = document.getElementById("");
  var con = can.getContext("2d");
  con.moveTo(x,y); //起始坐标位置
  con.lineTo(x,y); //结束坐标位置

 3、画圆。
  var can = document.getElementById("");
  var con = can.getContext("2d");
  con.beginPath();//开始画圆
  con.arc(圆心x,圆心y，半径r，开始弧度，结束弧度)；//顺时针
  con.strokeStyle = "white"; //设置空心圆颜色.
  con.stroken(); //开始绘制
  con.closePath();//结束画圆
 
 4、渐变 矩形。
  var can = document.getElementById("");
  var con = can.getContext("2d");
  var grd = con.createLinearGradient(开始x,开始y,结束x,结束y);//创建一个渐变矩形
  grd.addColorStop( 0 ， 开始渐变颜色);
  grd.addColorStop( 1， 结束渐变颜色);
  
  con.fillStyle = grd; //实心矩形颜色方案为grd
  con.fillRect(x,y,width,height);//这个渐变图形在画布上的坐标。

 5、渐变 圆形。
  var can = document.getElementById("");
  var con = can.getContext("2d");
      var grd = con.createRadialGradient(开始的圆心x,开始的圆心y,开始的圆半径,结束的圆心x,结束的圆心y,结束的圆半径);//创建一个渐变圆 。 实际上就是一个圆向另一个圆渐变！
  grd.addColorStop( 0 ， 开始渐变颜色);
  grd.addColorStop( 1， 结束渐变颜色);
  
  con.fillStyle = grd; //实心矩形颜色方案为grd
  con.fillRect(x,y,width,height);

Canvas 画布，就像电影中的幕布一样。

<canvas></canvas>

一般请设置ID，设置 width ，height 幕布尺寸。

一般canvas的步骤：
1、获取canvas元素。
var con = document.getElementById("")
2、获取上下文
var context = con.getContext("2d");
2d 平面图形。2.5d  3d  +

fill 实心 stroke 空心

fillStyle
fillText
fill
fillRect
clearRect(x,y,width,height) 实际上就是橡皮擦,清除某一块区域的内容

一：画矩形
fillStyle = "颜色";
fillRect( x, y, width , height);

二: 画线段
moveTo(x,y);
lineTo(x1,y1);
fillStyle = "颜色";
lineWidth = "100";

三: 画圆
beginPath()
arc( 圆心x,圆心y,r(半径)，起始弧度，结束弧度, true/false(顺时针/逆时针))
closePath()

四：渐变
createlinearGradient(起始x0,起始y350, 结束x300, 结束y0); //矩形渐变
createRadialGradient(起始的圆心x，起始的圆心y，其实的半径，结束的圆心x，结束的圆心y，结束的半径) //圆的渐变 ，其实就是由一个圆，向另一个圆渐变，通常为同心圆。

五：画图
drawImage("",)

HTML5表单：
1、<input type="number"/>
2、<input type="url"/>
3、<input type="email"/>
4、<input type="color"/>
5、<input type="date"/>
6、<input type="range"/>

常用的属性：
1、placeholder 当input内容为空时，默认值。
2、autofocus 自动聚焦。
3、autocomlete 自动提交。
4、novalidate 不会主动验证
5、required=“required”  input控件不能为空。

练习一：
基于昨天完成的loading进度条，如果我需要清空画布，重新画，怎么完成？

练习二：
我就是要它不停的转。空心里面百分比，如果可以能否给转的圆，加入渐变？

拖拽：其实是两个动作。

在HTML5中，特指把一个控件拖拽到另一个控件中。

drag  drop
使用步骤：
1、设置被拖拽的事件 onDrag
2、设置开始拖拽的事件 dragstart
3、设置被放入的事件 onDrop
4、设置开始放入事件 dropover

CSS3 有如下特性：
1、:in-range 范围内
2、:out-range 范围外
3、:valid 通过
4、:invalid 没有通过
5、:enabled  可以填写
6、:disabled 禁用元素
7、:required 必填选项
8、:optional 可选(默认)
9、:read-only: 只读
10、:nth-of-type 选择器
 
11、[属性^=值] 选择器匹配元素属性值带指定的值开始的元素。
注意：从最开始匹配，从左往右

12、[属性$=值] 选择器同理，匹配元素属性值带指定的值结尾的元素。
注意：从最后开始匹配，但是还是从左往右数

13、[属性*=值] 选择器匹配元素属性值包含指定值的元素。
注意：只要出现匹配值，就会被匹配

14、元素1~元素2 选择器匹配出现在 元素1 后面的 元素2。元素1 和 元素2 这两种元素必须具有相同的父元素。

转载于:https://my.oschina.net/u/2551059/blog/596573