html，css，js实战过程中的笔记

断断续续地前端学习有一年半了，慢慢地有了自己的一套学习方法，从一开始的看书，问人，上慕课的各种小课程，做笔记。下面是自己的笔记，比较杂乱还没有整理过，上传到慕课手记在线保存一下。

DOM探秘事件
1.注意js的位置，一般会是另外一个文件
2.跨浏览器的事件处理：恰当的使用能力检测。封装在一个对象内，eventUtil
3.事件对象event，含属性和方法
属性：type target

---

QQ登陆界面
1.z-index Z轴上的距离，值为正数，在顶层；为负数在底层。
2.cursor 光标样式，鼠标移到特定区域，显示出特定的光标样式。
3.autocomplete 自动完成功能，即如qq登陆过的账号再次输入时会有自动提示供选择。
4.ime-mode 该属性用于控制文本域输入法状态
5.tabindex 规定元素的 tab 键控制次序
6.-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
7.border-radius 定义圆角属性
8.shadow 阴影
9.background:url(../images/nav_bg.png) no-repeat -20px -150px；
背景：【背景图片链接】【平铺方式（无平铺）】【距左边边距（数值或left或百分比）】【距顶端边距（数值或top或百分比）】
10.getElementsByTagName 获取HTML中元素，如：input。得到的元素如果在HTML中有多个，则是一个数组。
11.凡是js中需要添加事件的元素先通过id或class取得該元素存放在变量中。
12.class可以有多个。
13.Math.random()会产生一个[0,1)的数，包含小数
Math.floor(Math.random()*6)会对由上面的语句产生的数值进行向下取整
14.键盘事件 document.onkeyup 事件会在键盘按键被松开时发生。
15.console.log("内容")可用于在开发平台输出相关内容。
16.加一个定时器前先关掉一个定时器。
js动画效果
1.匀速运动中，起初margin，padding没有设置0，使得盒子移到达不到目标效果
2.若盒子有border值，当前offsetWidth的值是包含border的，比style中的width要大些。所以在操作中，要获取sytle中的样式值，选用getStyle（obj，attr）函数
3.链式运动和同时运动
4.JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。var json = '{"a": "Hello", "b": "World"}';类似数组的用法但其本质是字符串就简化了数据的传输。
5.取TagName时得到的都会是数组，且一般获取时先找到它所在的大盒子id=‘Box’，然后Box.getElementsByTagName来取
函数
getStyle（obj，attr）
网页必备
/清零/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,h7,form,fieldset,table,tb,img,div,dl,dt,dd,input
{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{resize:none;}
a{text-decoration:none;}

/清除浮动/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}

图片中的图标可以合并在一张图中。将所需背景图都指向改图。
并用background-position控制其位置。
css样式中，从盒子考虑，颜色，大小，宽度。从标签具体元素，位置，大小，背景。
值得注意
问题：声明了doctype就无法用document.body