【东臣PHP】HTML5
这周学习HTML5,可以做很多很炫的东西。
1.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 暂停
用这个模拟了一个音乐播放器
2.
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 提交时不要验证(默认自动验证)
3.
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);
用这个模拟了一个loading图形
4.
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/2545456/blog/596508
- 【Html5】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
- html5 PHP 日期选择框datetime-local取出数据有T 的解决办法
- 最佳PHP,HTML5和CSS框架大荟萃
- PHP使用HTML5 FileApi实现Ajax上传文件功能示例
- HTML5表单与PHP交互
- PHP & HTML5 学习 第一课 Why learn
- 画板社交工具开发分享——HTML5 canvas控件、PHP、社交分享学习(四)
- HTML5基础14----PHP环境搭建
- HTML5、php、python优缺点都是什么?
- php html5 文件上传 (原创)
- [H5]HTML5表单和PHP环境搭建
- php和html5的混合编写
- php+html5使用FormData对象提交表单及上传图片的方法
- php 学习记录 formdata 文件上传 ajax html5
- 【嘉兴东臣php】HTML5、CSS3学习周总结
- PHP实现将HTML5中Canvas图像保存到服务器的方法
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- HTML5基础15----HTML5表单与PHP交互
- php+html5实现无刷新图片上传教程
- PHP输出PDF打印HTML5+CSS3打印格式控制