php专周总结,【嘉兴东臣php】HTML5、CSS3学习周总结
HTML5是HTML4的升级版,不是特定的的开发语言。
标签
音乐播放器
controls="controls" 为显示音乐播放器面板
----mp3格式-----
视频播放器
controls="controls" 为显示视频播放器面板
width=""
height=""
----mp4格式------
document.getElementById("").load 重新加载
document.getElementById("").play 播放
document.getElementById("").pause 暂停
表单
数字
url
邮箱
颜色拾取
日期选择
范围
input 常用属性
max 最大
min 最小
placeholder 默认提示
autocomplete 自动提交
autofocus 自动聚焦
novalidata 提交时不要验证(默认自动验证)
required="required" input验证不能为空
HTML5 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课程里更加专注。
php专周总结,【嘉兴东臣php】HTML5、CSS3学习周总结相关推荐
- html css周志,【嘉兴东臣php】HTML+CSS+JS周总结
总结: 通过一个星期的学习,了解了XHTML与HTML的区别,学习了CSS+JS,对于这些感觉还不是特别熟悉,下面是我对一周所学所做的总结以及还不是很清楚的地方. 一:XHTML 1.XHTML 就是 ...
- 【嘉兴东臣PHP】 PHP函数
PHP变量:变量是存储信息的容器 PHP 变量规则: 变量以 $ 符号开头,其后是变量的名称 变量名称必须以字母或下划线开头 变量名称不能以数字开头 变量名称只能包含字母数字字符和下划线(A-z.0- ...
- HTML5+CSS3知识点-周5.md
HTML5 一.HTML5简介 HTML5是html的最新的标准(版本) 浏览器支持:ie9+对html5新特性部分支持,新的主流浏览器(chrome.火狐\safari) 向前向后兼容,语法变化: ...
- 中国奇人周兴和——记四川星河建材有限公司董事长周兴和(上)
本文摘自于2011年10月8日<四川经济日报>专题报道."金 钱 只是一个数字,容易让人淡忘,不是我追求的目标.我追求的是给人们.给社会留下记忆,所以我专心搞创造发明,研究一种新 ...
- Java 获取当前时间之后的第一个周几,java获取当前日期的下一个周几
Java 获取当前时间之后的第一个周几,java获取当前日期的下一个周几 //获得入参的日期 Calendar cd = Calendar.getInstance(); cd.setTime(date ...
- 稍稍乱入的CNN,本文依然是学习周莫烦视频的笔记。
稍稍乱入的CNN,本文依然是学习周莫烦视频的笔记. 还有 google 在 udacity 上的 CNN 教程. CNN(Convolutional Neural Networks) 卷积神经网络简单 ...
- android 界面组件,安卓开发学习周第三篇——Android中的UI组件
原标题:安卓开发学习周第三篇--Android中的UI组件 在Android APP中,所有的用户界面元素都是由View和ViewGroup的对象构成的.View是绘制在屏幕上的用户能与之交互的一个对 ...
- mysql 以周为单位记录数据_mysql 按月/按周汇总统计函数 DATE_FORMAT() 函数
MySQL DATE_FORMAT() 函数 定义和用法 DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据. 语法 DATE_FORMAT(date,format) date 参数是 ...
- 根据指定时间范围取得对应(第几)周信息,以及一年当中所有周时间范围列表信息(可用于学期第几周,年第几周)
<?php error_reporting(E_ALL);/*** 日期控件* 取得一年中周信息以及学期中周信息,根据指定时间取得周信息**/ class Week{private $term_ ...
最新文章
- 中计算散度的函数_理解 Kullback–Leibler 散度的近似
- charles代理以及关于其抓取https信息的操作
- 傻瓜式操作Nagios图解
- 基于源码仿建视频解析网站
- 基于TerraExplorer Pro的校园三维浏览系统开发(转载)
- 凉凉!面试阿里我被Redis技术专题给搞的昏倒在地~
- java如何实现e的次方_Java开发如何更改MySQL数据库datadir目录之MySQL数据库索引实现...
- 经典面试题(47):以下代码将输出的结果是什么?
- ADO.NET与ORM的比较(4):EntityFramework实现CRUD
- thinkphp5 事务回滚_卓象程序员:ThinkPHP5实现事务功能
- TYVJ 4354 多重背包二进制优化
- C1083: 无法打开包括文件: “stdafx.h”: No such file or directory
- 区块链3.0时代:你现在所有的认知将会被颠覆
- 【语音识别】基于matlab隐马尔可夫模型(HMM)孤立字语音识别【含Matlab源码 576期】
- cmd中,执行java命令与javac命令的区别
- 解读主流CDN厂商的节点数据
- java IE11浏览器文件下载的文件名乱码
- java学习之路-练习题:编写一个计算速度的程序,距离时间常量。
- L1正则项-稀疏性-特征选择
- keygen_Laravel随机密钥与Keygen
热门文章
- java怎么插入oracle数据库timenstamp,Sybase数据库技术,数据库恢复专家
- 你会接受师兄的追求吗?
- 国一B题方案解析:轴距仅210mm的四旋翼有多稳?
- 软件测试团队分为哪些人员,产品团队、开发团队和测试团队是什么关系?
- python value函数_python 函数基础
- spring spring c3p0 mysql配置_Spring通过c3p0配置bean连接数据库
- html登录后记住用户名,完成登录功能,用session记住用户名
- Javascript中使用正则表达式进行数据验证
- 修改浏览器下拉条颜色和粗细
- 3984: 玩具(toy)