【嘉兴东臣php】H5,CSS3总结

            这周主要的学习的内容就是为HTML5，有HTML5的表单，HTML5的画布，还有就是css3这一块。在第一天我们跟着老黄试着做了一个音乐播放器的练习。接下来主要学习的就是画布这一块，画圆，画线，画矩形。主要在画布这一块我们做了众多的练习，还是有点难度的，总的来说主要就是多打多练习多看多动脑。

HTML5 是HTML4的升级版。不是特定的开发语言。

目前支持的浏览器有 safari、opera 、firefox 、 chrome、ie  但是较老的版本不支持。

标签：
<audio> 音乐播放器
    controls=“controls” 为显示音乐播放器面板
    
    <source src="链接" type="audio/mpeg（mp3,ogg）"/>
</audio>

<video> 视频播放器
    controls="controls" 视频播放器面板
    width= 音乐播放器宽度
    height= 音乐播放器高度
    <source src="链接" type="video/mp4"/>
</video>

document.getElementById("XXX").load 重新加载
document.getElementById("XXX").play 播放
document.getElementById("XXX").pause 暂停

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  提交时不要验证(默认自动验证)

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控件不能为空。

CSS3:严格意义上说 不是一门新语言，只是在CSS2.0的基础上新增了一些特性。

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/2545459/blog/596784