php h5 css,【嘉兴东臣php】h5+css3

充实的一周过去了，这一周我们学习了h5+css3，感觉满满的酷炫，原来我们以前玩的一些游戏就是用这个做的，感觉挺神奇的。虽然知道怎么完成这个工作的，但实际操作就比较难了，就我现在的能力而言是无法完成的，但我相信未来我是可以的。h5主要是画布功能canvas特别重要，可以说h5的核心就是这个。还有css3，他是css的升级版，加了很多功能而已。

html5：

音乐播放器

controls=“controls” 为显示音乐播放器面板

视频播放器

controls="controls" 视频播放器面板

width= 音乐播放器宽度

height= 音乐播放器高度

document.getElementById("XXX").load 重新加载

document.getElementById("XXX").play 播放

document.getElementById("XXX").pause 暂停

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");

ar grd = con.createRadialGradient(开始的圆心x,开始的圆心y,开始的圆半径,结束的圆心x,结束的圆心y,结束的圆半径);//创建一个渐变圆 。 实际上就是一个圆向另一个圆渐变！

grd.addColorStop( 0 ， 开始渐变颜色);

grd.addColorStop( 1， 结束渐变颜色);

con.fillStyle = grd; //实心矩形颜色方案为grd

con.fillRect(x,y,width,height);

HTML5 表单新增特性

数字

  URL

邮箱

颜色拾取

日期选择

范围

input新增常用属性

min 最小

max 最大

placeholder 默认提示

autocomplete 自动提交

autofocus 自动聚焦

novalidate  提交时不要验证(默认自动验证)

css3

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 这两种元素必须具有相同的父元素。

昨天看到一句话挺有意思的送给我自己：你必须往前走，因为你已经没有退路了。在累，不能放弃，想想自己，和自己身后的那些亲人。