茶.H5&C3

第一天												
标签		他们有兼容性,老版本浏览器不兼容ie8										
	header	表示头部区域			container	包装,容器						
	nav	表示导航区域										
	main	表示主体区域										
	section	主体里的某个小区域										
	aside	主体里小区域的边栏										
	article	主体里小区域的文章										
	footer	表示尾部区域										
"兼容方法,建议用第三种,导入第三方插件.                <!--[if lte IE 8]>
    <script src=""html5shiv.js""></script>
<![endif]-->"												
自定义属性的话要加前缀 data-    (行内)												
怎么取到值	JS原生：元素.dataset.属性名											
	jquery：$(元素).data('属性名')											
												
	audio	播放音频										
	video	播放视频										
		controls	显示控件(播放按钮.进度条.音量)									
		autoplay	自动播放	谷歌最新浏览器不支持,可以加上muted属性.								
		muted	静音									
		loop	循环播放									
	source 	播放格式的兼容										
	.volume	相当于a v的value值										
												
form表单   <input  type="">												
	email	输入邮箱,.现在看不出差别，但是提交的时候会自动验证是不是邮箱格式										
	number	输入数字.移动端会弹出数字键盘										
	color	出现一个颜色选择的输入框										
	url	用来输入网址的输入类型,提交的时候自动检测输入的内容是不是网址										
	tel	用来输入电话买电脑端看不出差别,移动端游差别,弹出键盘类似的数字键盘										
	date	时间框										
	range	滑块		默认值是50,最小值是0,最大值是100  max改最大值,min改最小值								
	required	必填项			不用带值							
	pattern	输入正则表达式的属性										
	autofocus	谁加了这个属性页面打开焦点显示在哪里			不用带值							
	multiple	可以多文件上传,配合file			不用带值							
												
												
事件												
	oninput	正在输入事件,对于滑块而言,就是在滑动的时候就触发的事件										
	oninvalid	当验证失败时触发的事件										
												
选择符	某元素+xx	找到某元素下面的兄弟元素			相邻选择符							
	某元素~xx	找到某元素后面的所以兄弟元素（不包括自己）			兄弟选择符							
												
属性选择器	ele[attr]	代表找到attr这个属性的元素										
	ele[attr=值]	代表attr属性等于这个值的元素										
	ele[attr^=值]	代表attr属性以这个值开头的元素										
	ele[attr$=值]	代表attr属性以这个值结尾的元素										
	ele[attr*=值]	代表attr属性包含这个值得元素										
												
伪类选择器	:first-child	找到第一元素的标签										
	:last-child	找到最后一个元素的标签										
	:nth-child()	找到n个元素的标签		以上这三个  要满足又是第一又是这个标签的才符号条件					odd:奇数			
	:first-of-type	找到第一个元素										
	:last-of-type	找到最后一个元素的标签										
	:nth-of-type()	找到第n个元素的标签										
伪元素选择器												
	::first-letter	找到首字母										
	::first-line	第一行										
	::selection	鼠标选中的哪行										
	::placeholder	选择到的占位符										
	::before	在不改变改变结构代码的基础上,在元素前面新添加一个元素显示,默认是行内元素,必须带有content属性										
	::after	同上,在元素后面添加一个元素显示										
												
盒子模型	 box-sizing:	border-box	内聚									
		content-box	外聚									
过渡的动画效果	transition:		参数1：参与过渡的属性，一般写all代表所有属性都参与   参数2：动画的持续时间     参数3：动画的延迟时间    参数4：动画的效果 (linear匀速 steps分步进行)      最好写在元素的普通样式里									
	.classList.	add	h5里面新增的一个jsapi, dom元素.classList 可以获取到元素所有的类,得到的也是一个伪数组，但是这个伪数组里有add方法，和remove方法，可以让你添加一个类或移出一个类									
		remove										
2D变换  transform			如果既要旋转又要平移，要注意旋转后的方向问题     可以给多个变换，多个变换之间空格隔开，写在前面先变换									
	rotate(值deg);	旋转：rotate();传入角度										
	translate()	平移：translate();传入平移的x轴，和y轴距离，只传一个代表只走x方向										
	scale();	缩放：scale(); 传入倍数，不要加单位，小于1缩放，大于1放大，等于1不变，如果只传1个参数，代表宽高都缩放，如果传两个，一个代表宽，一个代表高										
	skew()	扭曲：skew();传入角度，其实就是倾斜成平行四边形，这个一般不用										
3D变换												
	perspective	视距		translateZ	Z轴移动距离							
	rotateX(值deg)	X轴旋转										
	rotateY()	Y轴旋转										
	rotateZ()	Z轴旋转										
												
盒子阴影	box-shadow		"参数1：阴影水平方向的偏移，值越大越往右
  参数2：阴影垂直方向的偏移，值越大越往下
  参数3：高斯模糊度，值越大越模糊
  参数4：阴影的宽度
  参数5：阴影的颜色  还有个属性inset给添加就是内阴影"									
												
背景	background		"参数1：图片路径 (url)
                参数2：是否平铺（如果盒子比图片大，默认就是平铺）
                
                        "									
			参数3：背景图片的定位，第一个值是x方向，第二个值是y方向，可以写像素值，也可以写方向（left,right.top.bottom） 参数3后面打一个 / 代表设置图片的大小,可以给具体的像素值，也可以给百分比，还可以给两个特殊的值：cover, contain									
			"cover和contain都是按比例缩放，就不会变形
cover是按比例缩放，只要有一边缩放到盒子里面了，就会停止缩放
cover:覆盖的意思  必须要图片覆盖满盒子
ontain是按比例缩放，是两边都要缩放到盒子里面才停止缩放
contain：包含的意思  必须要盒子包裹住整个图片
注意：如果要指定图片的宽高，必须前面要有位置"									
线性渐变	linear-gradient	"参数1：渐变的方向   也可以传角度，0deg是从下到上，值越大就是角度顺时针旋转
  参数2：第一个颜色
  参数3：第二个颜色"									background: linear-gradient(to right, orange, orangered, red, blue, yellow);	
		"颜色后面加百分比，代表位置      如果是第一个颜色，就代表颜色的结束位置
                后面还有颜色，就代表颜色的开始位置"										拓展:outline: none            清除元素的轮廓线
		"如果要多种颜色不带渐变
       第一个颜色给的百分比是代表结束位置
   第二个颜色给的百分比代表开始位置
如果再给这个颜色写一次，就代表结束"										
径性渐变	radial-gradient										background: radial-gradient(100px at center,orange 30%,orangered 30%,red,blue);	
												
伸缩布局												
	display:flex	让这个盒子内的元素应用伸缩布局										
												
	justify-content:	主轴方向的排列										
	flex-start	在主轴起点对齐										
	flex-end	在主轴终点对齐										
	center	在主轴居中										
	space-around	左右有间距,并子元素和子元素之间也有间距										
	space-between	左右没有间距,子元素和子元素之间有间距										
												
	align-items	统一设置副轴上的排列			值:flex-start   flex-end   center							
	align-self	单独设置这个元素在副轴上的位置										
												
	flex-direction:	修改主轴方向,有下面4个值										
	row 	默认值，代表x轴方向为主轴，起点就是左边										
	column	代表修改主轴为y轴，起点为上边										
	row-reverse	代表x轴为主轴，起点是右边										
	column-reverse	代表修改主轴为y轴，起点为下边										
												
	flex-wrap:	wrap		允许换行								
	flex:	设置这个元素在主轴上占的份数										
												
动画	animation:	"参数1：动画名字
参数2：动画的持续时间
参数3：动画的次数
参数4：动画效果"						例:animation:shake2 1.5s infinite(运行次数无线次) steps(11)(分步骤);				
	 @keyframes   XXX动画名{}											
												
												
												
												
												
												
												
												
												
												
												
地理定位												
	获取经纬度											
	.coords.latitude		维度									
	.coords.longitude		经度									
	" navigator.geolocation.getCurrentPosition(function (loc) {
}"											
		创建这个函数调用它的.coords的经纬可以相应得到值,在套进百度的模板里面										
												
												
												
												
												
本地储存window.localStorage 			存在浏览器,关闭浏览器还存在									
	.setItem()	保存										
	getItem()	获取										
	removeItem()	删除										
关于复杂数据怎么存取?												
	保存的时候,先把JS数组,对象转换成JSON字符串				JSON.stringify							
	取出的时候再把JSON字符串装换成JS对象				JSON.parse							
	localStorage.clear()		清除所有									
												
	sessionStorage			存在浏览器,关闭浏览器就不存在								
	.setItem()	保存										
	getItem()	获取		他也有这三个属性								
	removeItem()	删除										
												
拖拽												
	ondragstart：拖拽开始事件											
	draggable="true		那个元素想要被拖拽就要添加这个属性									
	.ondra 拖拽中事件											
	ondragend：拖拽结束事件											
	.ondragover	监听有没有元素在我的地盘上拖动的事件			默认无法将数据,元素放置到其他元素中,所有要清除默认事件(e)							
	.ondrop 	" 就是当拖拽的元素在我的范围内，并且松手了就会调用的事件
    //要想调用ondrop事件，就必须先加一个ondragover事件，并且再在over事件里阻止事件的默认行为"