【嘉兴东臣php】HTML5、CSS3学习周总结

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

标签

<audio> 音乐播放器

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

<source src="链接" type="audio/mpeg"/>----mp3格式-----

</audio>

<video>视频播放器

controls="controls" 为显示视频播放器面板

width=""

height=""

<source src="链接" type="video/mp4"/>----mp4格式------

</video>

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

document.getElementById("").play 播放

document.getElementById("").pause 暂停

表单

<input type="number"/>数字

<input type="url"/>url

<input type="email"/>邮箱

<input type="color"/>颜色拾取

<input type="data"/>日期选择

<input type="range"/>范围

input 常用属性

max 最大

min 最小

placeholder 默认提示

autocomplete 自动提交

autofocus 自动聚焦

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

required="required" input验证不能为空

HTML5 canvas 画布

<canvas></canvas>

canvas本身不能画图，只能借助于javascript画图

由于jquery不能保证完全支持html5的特性，所以建议使用于原生的js语法

canvas 一般的前两个步骤为：

1、var can=document.getElementById("");获取canvas对象

2、var con=can.getContext("2d");获取上下文

fill stroke分别表示实心，空心。

stroke(fill)Text空心(实心)文本

stroke(fill)Style空心(实心)样式

stroke(fill)开始绘制空心(实心)

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=""

con.stroke();

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;

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

5、渐变圆形

var can =document.getElementById("");

var con=can.getContext("2d");

var grd=con.createLinearGradient(x,y,r(开始),x,y,r(结束))

grd.addColorStop(0,开始渐变的颜色)

grd.addColorStop(1,结束渐变的颜色)

con.fillStyle=grd;

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

6、画图

var img=document.getElementById("")图片的id

drawImage(img,x,y)

拖拽：其实是两个动作。

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

drag  drop 

使用步骤：

1、设置被拖拽的事件 onDrag 

2、设置开始拖拽的事件 dragstart

3、设置被放入的事件 onDrop

4、设置开始放入事件 dropover 

地图定位：定位经纬度。 //有浏览器兼容性限制

navigator.geolocation.getcurrentposition( 回调位置函数名)

position.coords.latitude; //纬度

position.coords.longitude; //经度

CSS3 是在CSS2的基础上加了一些特性

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

总结：

    通过这一周的学习，了解了什么叫酷炫，但是酷炫的东西自己却做不出来，只是学了canvas画布的一点皮毛，对于这周所学的，经过练习，发现主要用正弦余弦做的那个loading图并不能转化为自己的东西，所以还是欠缺很多。这周的知识很多都是以记为主，只有多练才能熟练，同时希望自己在下一周的php课程里更加专注。

转载于:https://my.oschina.net/u/2545467/blog/596468