html --html 超文本标记语言 --块级元素<h1>--<h6> <p> <blockquote> <pre> <ul> <ol> <li> <dl> <dd> <dt> <div> <table> <tr> <td> <form>
--内嵌元素<a> <img> <iframe> <b> <em> <label> <span> <input> <button> <textArea> <select> <option> css -- css在页面的运用方式 1. 外联样式表 <link rel="stylesheet" type="text/css" href=""> 2. 内嵌样式表 <style type="text/css">.css{}</style> 3. 内联样式表 <div style="color:red"></div>
选择器: ID选择器 # 100 类选择器 . 10 元素选择器 1 style 1000 兄弟选择器 ul+ul 后代选择器 ul li ul~li ul > li 伪元素选择器 : ul:hover ul:link ul:active ul:visited 伪类选择器 : ul:first-child{} ul:last-child ul:before{} ul:after{}
外边距:margin 左外边距：margin-left 内边距:padding 右内边距：padding-right border 边框
display:none|block|inline|inline-block; // 使用none或者block来实现元素的抽离文档流(隐藏)，和回归文档流(显示) //隐藏之后不保留元素原先的位置
visibility:hidden|visible; //设置元素隐藏或者显示 特点：保留元素的位置进行隐藏
float:浮动 float：left; float:right;
clear:both|left|right;
position:static|relative|absolute|fixed; relative:相对定位 默认按照元素原先的位置进行定位 absolute:绝对定位 默认根据页面的body进行定位 //如果绝对定位元素的上一级存在定位元素，则按照父级定位元素的边框进行定位 fixed:固定定位 默认根据浏览器的可视区域边框进行定位
文本属性 字体属性 背景属性
js
javascript: 本身是一种解释型语言(脚本语言) 是由浏览器解释执行的 原始数据类型: boolean,number,string,undifined,null, undefined == null ==判断值是否相等 ===不仅判断值还得判断类型 引用数据类型:var obj = new Object(); var arr = new Array(); var date = new Date(); 原声对象: jacasvript提供的对象（ECMA标准） 内置对象: Global.parseInt() Global.parseFloat() Global.eval() 宿主对象:DOM BOM
NaN: not a number 非数字 //alert("asd"*5); undefined:alert(a+b); var a; function asd(){ var a = 0;} var www = asd();
事件: 各种浏览器的事件处理方式 IE: 事件冒泡 //事件对象是通过window.event;获取 DOM:事件捕获 //事件对象是通过参数传递的方式获取
传统事件: 便于使用以及兼容好 各种浏览器都支持 不能同时给一个元素添加多个响应时间 现代事件: 在不同的浏览器中有不同的写法 现代事件IE： obj.attachEvent("onclick",function); obj.dettachEvent("onclick",function); 现代事件DOM： obj.addEventListener("click","function",false); obj.removeEventListener("click","function",false); 事件类型的分类: 1.HTML事件 onload -- 在页面加载完成后执行什么 onload(); //表示刷新当前页面 2.鼠标事件 mouseover mouseout mouseup mousedown mosuemo 3.键盘事件 keydown keyup keypress event 事件对象 function testEvent(e){ var thisEvent = window.event|e; thisEvent.keyCode thisEvent.clientX thisEvent.clientY thisEvent.srcElement || thisEvent.target; }
DOM 操作元素本身，属性，样式 获取元素对象 1.document.getElementById("id");//返回一个对象 2.document.getElementsByName("name");// 可以是多个 返回对象数组 3.document.getElementsByTagName("li");//可以获取多个。返回一个对象数组
操作元素: <div id="obj">asd</div> var obj =document.getElementById("obj"); obj.firstChild.nodeValue; 得到元素对象中的内容 obj.firstChild.nodeValue = "张三"; //设置元素的文本内容
obj.innerHTML = "";设置当前div的内容 obj.innerHTML;获取当前div中的内容 //innerHTML不支持 select table
操作属性: obj.getAttribute("属性名称");//得到属性值 obj.属性名称; obj["属性名称"];
obj.setAttribute("属性名称","属性值"); obj.属性名称 = 属性值; obj["属性名称"] = 属性值;
removeAttribute("属性名称");//移除指定的属性
操作样式: 获取： 操作外部样式 var cssObj = document.styleSheet[0].cssRules || document.styleSheet[0].rules; cssObj.style.样式属性 操作内联样式表 obj.style.样式属性 设置： obj.style.样式属性= "样式值"; //设置样式的时候没有限制