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)
2781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
