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课程里更加专注。