HTML5
1.用于
酷炫网站制。游戏开发(小,不卡,轻便,代码写的速度快)。移动开发。应用开发。地理定位
2.优点
① 跨平台
PC。windows。IOS。Android都可用。
② 兼容性
③ 世界知名浏览器厂商的支持(微软、Google、苹果、opera、Mozilla)
(iOS不支持Java,Java有平台的限制,只需一个浏览器去解析就可用)
3.什么是html5
HTML+CSS+JavaScript+HTML5+CSS3+API
h5的meta已简化成一行<metacharset=UTF-8>
不同浏览器的支持情况,坚持支不支持的 http://caniuse.com
第1==HTML5新增的元素/属性
一、新增的结构元素/标签(语义化)
1. header
页面或页面中某一区块的页眉,通常是一些引导或导航信息
2. nav
页面导航的链接组
3. section
页面中的一个内容区块,通常由内容及其标题组成
4. article
代表一个独立的完整的相关内容块,可独立于页面其他内容使用
5. aside
非正文内容
与页面主要内容是分开的,被删除不会影响到网页的内容
6. footer
页面或页面中某一区块的脚注
(logo一般用h1)
二、新增网页元素/标签
1. video
定义视频,如影片片段或其它视频流
2. audio
定义音频,如音乐或其它音频流
3. canvas
定义图形
4. datalist
定义可选数据的列表
5. time
标签定义时间或日期
eg:<time>10:45</time><!--搜索引擎--><br/>
6. mark
在视觉上向用户呈现那些需要突出的文字
(自动加背景颜色)
eg:<mark>I am markmark</mark>
7. progress
运行中的进度(进程)
eg:<progress></progress><br/>
<progress value="50" max="100"></progress>
三、h5废除的元素
能用css替代的元素,big,center,font,s,u,strike。不再使用frame框架?
只有部分浏览器支持的元素,applet,blink,bgsound(背景音乐),marquee(左右滚动的)等。其他…………
四、新增全局属性
(全网页可用的)
1. contentEditable
规定是否允许用户编辑内容
eg: <p class="green" contentEditable="true">这是一个可编辑的段落</p>
2. designMode
整个页面是否可编辑
eg: document.designMode="on";
(on可被编辑的,off不可被编辑)
3. hidden
规定对元素进行隐藏
eg:<p hidden="hidden">隐藏了的</p>
4. spellcheck
是否对元素进行拼写或语法检查
(true检查,false不检查)
eg:<p contentEditable="true" spellcheck="true">进行语法检查</p>
5. tabindex
规定元素的tab键迭制次序(按Tab键获取光标的顺序)
(基本元素可被编辑的,如index里的text,password等,最先获取光标)
eg:<p tabindex="3">第三</p><p tabindex="1">第一</p><p tabindex="2">第二</p>
五、废除的属性
(改用css样式)
table(align,bgcolor,border,cellpadding,width)html(version) a/link(charset) lor(clear)、img(align)
第2==CSS3高级选择器
1. first-of-type
p:first-of-type,选择属性其父元素的首个<p>元素的每个<p>元素
第一个这种类型的孩子,所有层级里的第一个p
2. last-of-type
p:last-of-type,最后<p>元素的每个<p>元素
3. first-child
p:first-child,第一个子元素的每个<p>元素
第一个且符合要求p,要是第一个儿子不是p就不符合
4. last-child
p:last-child,最后一个子元素的每个<p>元素
5. nth-child(n) (下标从1开始 )
p:nth-child(n),选择属性其父元素的第n个子元素的每个<p>元素
6. :before
p:before,在每个<p>元素之前插入内容(content:)
7. :after
p:after,在每个<p>元素之后插入内容
eg:ul li:nth-child(odd){ background-color:lawngreen;} ul li:nth-child(even){ background-color:orangered;}
nth-child(1)=first-child;
clear:after{clear:both}???????
第3==HTML5表单
target{掌控新增表单元素、属性
用html5进行表单验证}
一、新增input类型
(type=“”)
1. email
电子邮件地址文本框,提交表单时会自动验证email值
2. url
网页的url,自动验证url值
3. number
只包含数值的字段,能够设定对所接受的数字的限定(即number的属性)
最大值max
最小值min
数字间隔step
默认值value
以上可填入的只有数字2,7,12,17
4. range
滑动条,特定值范围内的数值选择器
eg:<input type="range" value="3" step="2" max="12"/>
5. search
搜索框(用于搜索引擎)
6. Date pickers(日期选择器)
拥有多个可供选取日期的新输入类型
① date:可选择年/月/日
② month:选择年/月
③ week:选择年/第几周
④ time:选择时间,小时和分钟,上午/下午 12:00
⑤ datetime:选择时间,年/月/日,UTC时间
(UTC,世界统一时间,协调世界时,universal time coordinated)
⑥ datetime-local:选择时间,年/月/日/时间,本地时间
二、新增的input属性
1. autofocus
页面加载时自动获得焦点
优先,不可能同时获得光标,从上到下
eg:<input type=”tel” autofocus/>
2. required
规定输入域不能为空
eg:<input type=”email” required/>
required=”required”
3. placeholder
提供一种提示,输入域为空时显示,获得焦点时消失
eg:<p>数值:<input type="number" placeholder="请输入数字"/></p>
4. pattern
规定验证input域(输入域)的模式,正则表达式
eg:<input type=”tel” pattern=”^1[34578] [0-9] {9}$”/>
5. height、width
仅适用于image类型的input标签的图像高度和宽度
eg:<input id="nick" type="text" name="nick" placeholder="英文、数字长度为6-10个字符" required="required" pattern="[a-zA-Z0-9]{6,10}" autofocus="autofocus"/>
三、新增的form属性
6. autocomplete
规定form或input域应该拥有自动完成功能
值为on或off
eg:<input autocomplete=”on”>
7. novalidate(不验证)
规定在提交表单时不验证form或input域
eg:<form novalidate=”novalidate”></form>
四、validity属性
validity属性用于获取表单元素的validityState对象,该对象包含8个方面的验证结果
eg:var validityState=document.getElementById("uname").validity;
五、validityState对象
validity获取到的。使验证提示更人性化
1. valueMissing
必填的表单值为空。
目的:确保表单中的值已填写
用法:将表单元素设置required属性,则为必填项
若必填项输入值为空,valueMissing属性将返回true
eg:<input type="text" required="required"/>
2. typeMismatch
输入值与type类型不匹配
目的:确保输入值与预期类型相匹配(url,email,Tel)
用法:指定表单控件的type特性值
输入值不符合对应的表单类型,valueMissing属性将返回true
3. patternMismatch
输入值与Pettern特性的正则不匹配
目的:根据表单元素设置的格式规则验证输入是否为有效格式
用法:将表单元素设置pattern属性,赋予适当的匹配规则
输入值符合验证模式规则,patternMismatch属性将返回false
4. tooLong
输入内容超过限定长度
5. rangeUnderflow
输入值太小,小于min特性的值
6. rangeOverflow
输入值太大,大于max特性的值
7. stepMismatch
跨步,输入值不符合step特性规则
8. customError
使用自定义验证错误提示信息
eg:<script> var f=document.querySelector("form"); 获取表单对象 var n=document.querySelector("#nick"); 获取id为nick的对象 var vali=n.validity; 获取nick对象的8个validityState对象 console.log(vali); console查看这8个validityState对象 </script>
六 、ADD
1. querySelector:获取一个
querySelectorAll:获取一组
id,class或标签都可以
eg:var f=document.querySelector("form");
2. setCustomvalidity()方法
JS里设置自定义的错误提示语
eg:if(vali.valueMissing){ n.setCustomvalidity("昵称不能为空");}
3. invalid事件(验证未通过事件)
只要发生表单验证,所有未通过验证的表单元素都会触发/受到一个invalid事件。通过了就不管了
4. addEventListener()绑定事件
有3个参数,事件,回调函数,监听异常
(“事件”,function(event){},true)
5. style里表单伪类。
input:valid{}伪类,验证通过的时候的样式。用于匹配输入值合法的元素
input:invalid{}伪类,验证未通过时的样式。用于匹配输入值非法的元素
eg:input:valid{border:1px solid green;}
input:invalid{border:1px solid red;}
6. event对象----target事件属性
target事件属性可返回事件的目标节点(触发该事件的节点)
如生成事件的元素,文档或窗口
如nick验证不通过就会触发到invalid
7. 快捷键(div*5+Tab----5个<div></div>
只有一个属性时,属性值可以不用引号。)
ALL eg:
<script> var f=document.querySelector("form"); //获取表单对象 f.addEventListner("invalid",function(event){ //给表单绑定invalid事件 var elm=event.target; //获取未通过验证的元素 var vali=elm.validity; //获取未通过验证元素的validityState var name=elm.name; //获取未通过验证元素的属性name switch(name){ case "nick": //当属性name为nick时判断 if(vali.valueMissing){ elm.setCustomValidity("昵称不能为空"); }else if(vali.patternMismatch){elm.setCustomValidity("昵称必须为……"); }else{elm.setCustomValidity("");} break; case "email": if(vali.valueMissing){elm.setCustomValidity("邮箱不能为空"); }else if(vali.patternMismatch){elm.setCustomValidity("邮箱必须包含@"); }else{elm.setCustomValidity("");} break;} },true) </script>
第4==CSS3基础
target{设置边框圆角,背景和文本效果;
理解并会使用css3自定义字体;
设置背景和网页元素的透明度}
1、css3模块
边框和背景。文本效果和字体。2D/3D。过渡和动画。多列和用户界面。
2、浏览器对CSS3的支持(兼容)
div{ -webkit-transform: rotate(30deg); 谷歌chrome和苹果Safari内核一样 -moz-transform: rotate(30deg); Mozilla的火狐Firefox -ms-transform: rotate(30deg); 微软的IE9以下? -o-transform: rotate(30deg); 挪威Opera transform: rotate(30deg);}
一、边框border
1. border-radius
用于创建圆角边框。边角半径
eg:border-radius:30% 40% 50% 60%;(左上,右上,右下,左下)
border-radius:50px/25px; /*两组值,水平半径/垂直半径*/
非圆角:?
border-radius: 2em 1em 4em / 0.5em 3em;
等价于((左上,右上左下,右下)/(左上右下,右上左下))
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
2. border-image
使用图片创建边框,前提是有边框
属性:
① border-image-source
边框图片的路径
② border-image-slice
图片边框向内偏移
③ border-image-width
图片边框的宽度
④ border-image-outset
边框图像区域超出边框的量
⑤ border-image-repeat
图像是否应该平铺、铺满或拉伸
3. border-shadow
用于向边框添加阴影
二、盒阴影box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
详细学习资料:http://blog.csdn.net/freshlover/article/details/7610269
1. h-shadow
必需,水平阴影的位置,正值往右,负左
2. v-shadow
必需,垂直阴影位置,正值往下,负上
3. blur
可选,模糊距离/半径,渐变范围
值只能是正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊。
由不透明到完全透明的距离
4. spread
可选,阴影的大小/扩展半径。
值为正,则整个阴影都延展扩大,值为负时,则缩小。
让阴影在设定的距离内(blur),阴影不完全透明(即阴影效果为不透明到半透明)
5. color
可选,阴影颜色。
各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色,建议不要省略此参数。
6. inset
可选。外部阴影变为内部阴影,默认outset外部
可以设置一个以上的盒阴影。当给同一个元素使用多个阴影属性时,需注意其顺序,最先写的阴影将显示在最顶层
eg:box-shadow:0 5px 5px rgba(0,0,0,.5),0 0 10px 10px rgba(0,0,0,.6);
选择器{box-shadow:-10px 0 10px red, /*左边阴影*/ 10px 0 10px yellow, /*右边阴影*/ 0 -10px 10px blue, /*顶部阴影*/ 0 10px 10px green; /*底边阴影*/}
三、文本效果text
1. text-shadow
文本阴影效果
2. word-wrap
允许长单词换行到下一行。设置了宽度,文字超出不会自动换行,因此需要设置word-wrap
3. text-transform
设置文本的大小写状态
值:capitalize首字母大写。uppercase大写。lowercase小写。none。inherit。
四、背景background
1. background-size
规定背景图片大小
eg:background-size:20px; 按宽度等比缩放
background-size:cover; 把整个容器铺满(失真)
background-size:contain; 保持图片本身的宽高,不压缩变形
2. background-origin
规定背景图片的定位区域
3. background-clip
绘制区域。
background-origin和background-clip的值
① padding-box:
内边距。背景图像相对于内边距框来定位(默认值)。背景被裁剪到内边距框。
② border-box:
边框。相对于边框盒来定位。被裁剪到边框盒。
③ content-box:
内容区。相对于内容框来定位。被裁剪到内容框。
五、自定义字体font
@font-face{ font-family:myname; /* 给它取了一个叫myname的名字*/ src:url(fonts/webfont.eot); /*引用系统里没有的字体,不同类型给不同浏览器进行支持*/ src:url(fonts/webfont.svg); /* IE》eot。chrome》ttf.ott。opera》svg.ttf*/ src:url(fonts/webfont.ttf); src:url(fonts/webfont.woff); font-weight:normal; /* 可选*/ font-style:normal; } /*选择器*/{ font-family:myname; /*调用自定义字体。使用叫myname字体的样式*/}
六、透明度
值0-1,0全透,1不透
1. rgba
eg:background:rgba(0,0,0,.5);
2. opacity
eg:{opacity:0.8;(取值0-1) filter:alpha(opacity=80);}(针对IE8及更早版本,最好两个一起写。取值0-100)
3. transparent
eg:background-color:transparent;
4. add
IE的私有属性filter:alpha(opacity)
filter:alpha(opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。 FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。 Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。 StartX和StartY:代表渐变透明效果的开始X和Y坐标。 FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。
filter(滤镜,过滤)
background-color:transparent与opacity:0;
background-color:transparent只是背景透明,不会被子元素继承,background-color属性不会继承。
/*设置元素的背景颜色为透明,也就是说transparent是一种颜色,为透明色,和red是红色的一样意思*/
opacity:0元素透明,包括内容。设置的透明度会被子元素继承,而且无法取消。
/* 设置元素的透明度为0,表示完全透明。*/
七、调整大小resize
规定是否可由用户调整元素的大小:
1. horizontal
水平方向/宽,用户可调整宽度
2. vertical:垂直方向/高
3. none:不可调整
4. both:水平垂直都可
如果希望此属性生效,需设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。
Firefox 4+、Safari 以及 Chrome 支持 resize 属性。
eg:div{ border:1px red solid; width:100px; resize:horizontal; overflow:auto; }
第5==CSS3高级特效
target{2D,3D制作页面效果
2D转换对元素进行移动缩放、转动拉伸
3D在空间中改变元素的形状、位置和大小}
一、2D变形
属性transform
作用:对元素进行移动、缩放、倾斜、翻转、拉长或拉伸
1. translate()位移
元素从当前位置移动至给定的位置
translate(x,y)沿x和y轴移动元素
translateX(n)沿x轴移动
translateY(n)沿y轴移动
translate()只有一个值时是X轴动,Y轴不动。translate(n)=translateX(n)
eg:transform:translate(300px);
2. rotate()旋转
元素顺时针旋转给定的角度。负值表示逆时针旋转
只一个值,只旋转不改变形状
eg:transform:rotate(30deg); (以元素的中心为中心点进行旋转)
3. scale()斜拉伸
放大/缩小。倍数。元素的大小会增加或减少,根据给定的宽高
scale(x,y)改变元素的宽度和高度
scaleX(n)改宽度
scaleY(n)改高度
取负值时会先翻转再缩放
eg:transform:scale(-2); 高宽放大两倍同时x,y轴一起翻转
transform:scaleY(-2); Y轴(高度)放大两倍同时y轴翻转
transform:scaleX(2); X轴(宽度)变大两倍,不翻转
transform:scaleX(0.2); X轴(高度)变大两倍,不翻转
4. skew()翻转
元素翻转给定的角度,根据给定的水平线和垂直线
skew(x-angle,y-angle)倾斜转换
skewX(deg)
skewY(deg)
eg:transform:skew(30deg,30deg);
只一个值的时候也是X轴翻转,y轴不翻转,即skew(deg)=skewX(deg),y轴还是垂直于浏览器X轴
5. matrix矩阵
把所有的2D方法组合在一起
有6个参数,使元素能够旋转缩放移动倾斜
transform:matrix(a,b,c,d,e,f);
ax+cy+e为变换后的水平坐标,bx+dy+f表示变换后的垂直位置。
二、3D转换
二二、transform属性
1. transform-origin
允许改变转换的中心点(起始的中心点)
变形元素其默认变形源点是其本身的中心位置
eg:transform-origin:20px 30px;
(20表示相对左上角源点水平方向的距离,30表示相对左上角源点垂直方向的距离,源点从元素的中心移到了以元素为(0,0)原点的(20,30)坐标点的位置)
值:
left(左中),right,bottom,top
top right(右上角),top left, bottom left, bottom right
以上针对2D
3D transform-origin的值:
eg:transform-origin:x-axis,y-axis,z-axis
x-axis: X轴的值:right,left,center,length,%(默认50%)
y-axis: Y轴的值:right,left,center,length,%(默认50%)
y-axis: Z轴的值length(px)(默认0)
2. transform-style(舞台)
嵌套元素在3D空间如何显示。设置3D效果的元素的父级一定要设置
值:
1. flat:平面效果,子元素将不保留其3D效果
2. preserve-3d:3d转化,子元素将保留3D效果
3. perspective(视角)
规定3D元素的透视效果(距离/角度不同,看到的就不同)
值:
1. number:元素距离视图的距离,单位px
2. none:默认值,与0相同,不设置透视?????
4. perspective-origin
规定3D元素的底部位置????
5. backface-visibility
元素在面对屏幕时是否可见????
二二、3D转换方法
(transform属性下)
1. translate位移
translateX(x),translateY(y),translateZ(z),translate3d(x,y,z
2. rotate旋转
rotateX(x-deg),rotateY(y-deg),rotateZ(z-deg),rotate3d() rotate3d(x,y,z,a)
x,y,z取值0-1之间,矢量值,a为度数
eg:rotate3d(0,1,0,30deg)= = rotateY(30deg);
3. scale缩放
scaleX(x),scaleY(y),scaleZ(z),scale3d()
scaleZ(z)单独使用无效,要配合其他变形函数一起使用
eg:transform:scaleZ(5);×
transform: scaleZ(5) rotateX(30deg);√
4. 矩阵matrix3d()
定义3D转换,使用16个值的4*4矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)