<HTML> 标签
头部：head
<title>（标题） <metacharset=’utf-8’>（中文）
<linkrel="stylesheet" type="text/css" href="xxx.css">（引入css）
<metaname="author" content="xxx">（作者）
<metaname="keywords" content="英雄联盟官方网站">（网页搜索关键词）
<metaname="description" content="电子竞技网络">（关键词下的内容介绍）
<link rel="icon"type="image/x-icon" href="img/LOL_a.png">（网页小图标）
身体：body （标签）
<h1>（标题+字号 1~6） <p>（文本标签） <span>（文本内嵌标签）
<pre>（文本预处理） <div>（‘块’标签） <sup>（上标）<sub>（下标）
<a href=""></a>（链接a） <img src="" alt="图片替换文本" />（图片）
<br/>（换行标签） <hr/>（水平分割线） <samp><code>（等宽）
<ul><li></li></ul>（无序列表） <ol><li></li></ol>（有序列表）
<dl><dt><dd></dd></dt></dl>（自定义列表）
<i>（斜体）<em>（斜体） <b>（加粗） <s>（删除线）<u>（下划线）
<textarea>（text文字域）<strong> ( 加粗 )
<form>（表单）method 请求方式 post get
action 连接后台（php，网址）
enctype上传文件（“multipart/form-data”）
<input>type类型｛”text”:文字,’’password”:密码,”file”:文件,’’checkbox”:复选框,’’radio”:单选框,’’button”:普通按钮,’’submit’:提交按钮,’’reset”:重置按钮,’’hidden”:隐藏域,’’image’:图像按钮，“date”:日期表，“time”:时间，“color”：颜色表｝
placeholder=“xxx” （暗字）
size=“xxx+px” （文字的宽度）
maxlength=“xxx” （文字输入最大数值）
value=”xxx”（文字，用于按钮）
Outline：none(消除选中框蓝边)
<select><option></option></select>菜单列表（selected,默认选中）
<table> （表格） cellspacing(单元格间距) num+px
cellpadding(单元格间距+边框) num+px
border-collapse(取消重叠的边框) collapse
<caption>（表格标题）align (水平对齐) center(居中) left(左) right(右)
<th></th>(表格的标题) <tr></tr>(表格行标记)<td></td>(表格列标记)
<frameset>（页面分割框架）rows(上下分割窗口)(50%,15%,35%)
cols(左右分割窗口) (50%,15%,35%)
scrolling(框架滚动显示) (yes,no,auto) （多媒体页面）
<marquee>xxx<marquee> （弹幕）
direction(滚动的方向) up,down,left,rigth
behavior(滚动的方式) scroll（循环）,slide（滚一次）,alternate（交替滚动）
scrollamount(滚动的速度) xxx秒 (5000=5秒)
scrolldelay(延迟滚动) xxx秒(5000=5秒)
loop(滚动循环) width,height(滚动的范围)
<embed></embed>(音乐播放器) autostart(自动播放) true ， false
loop(循环的次数) num(次数)
脚：<footer></footer>
Css:属性
ID: # +id名 Class： . +class名
颜色： rgba(x,x,x,x) #ff0000 red color x:透明度
外边距：margin： 上 下 左 右 auto 表示自动，(margin-left,right,top,bottom) 内边距：padding: 上 下 左 右 auto 表示自动，(padding-left,right,top,bottom)
边框：border : 边框 厚度样式 颜色 border-radius:100%(圆角)
样式（solid实线,dashed虚线,dotted点线）
块与内联：（转换）display：inline（内联），display：block（块，出现）
display：inline-block (内联+块) display:hidden(隐藏)
float:left/right(左浮动/右浮动) clear:left/right（清除浮动）
filter:alpha(opacity:xx)===opacity(0~1) (透明度)
z-index(层级) min-width(最小宽度，用于背景图片)
list-style:none （取消li的样式）
鼠标的样式:cursor: pointer (小手样式) text(文本样式) move(移动样式)
自定义样式：cursor:url() 注意：图片格式必须以 cur格式
文字 : font-size（字体大小） font-family（字体样式‘宋体’） line-height（字体行高） text-align（字体位置）
text-indent（首字母缩进em单位） font-wight:bold（字体加粗） letter-spacing（字母之间间距）
word-spacing（单词之间间距） visibility：hidden（文字隐藏，不删除） visibility: visible (显现)
font-style字体样式 {italic（倾斜），normal（普通），inherit（继承父级）}
background背景： repeat{repeat(重复背景图片)，no-repeat(不重复)，repeat-x(横向重复)，repeat-y(纵向重复)}
url (引入图片) ， image（背景图片），color(颜色)
position（背景图片的位置 x y），attachment{scroll(滚动)，fixed（固定）}， size(àcover(背景全部覆盖))
伪类： ：link{color:red}(没有点击链接的样式) ：visited｛color：red｝(访问过后的连接样式)
：hover{color:green}(鼠标悬停样式) ：active｛color：black｝（点击不松开鼠标样式）
overflow(溢出处理)：èauto(显示滚动条)，hidden(超出隐藏)，visible(显现)，scroll（滑动），overflow-x:auto(竖直滑动)， overflow-y:auto(水平滑动)
定位： position：relative(相对定位) position：absolute（绝对定位） position：fixed（固定）
阴影：box-shadow : 左右偏移 上下偏移 阴影偏移大小 颜色
A(标签)： a：text- decoration(取消a标签样式) title(给连接时候提示文字)
target {_parent(在上一级窗口打开)，_blank(新窗口打开)，_self(同一个窗口打开)，_top(在IE窗口打开)}
css动画:
2D:transformètranslate(x,y)（平移）--rotate(x,y,deg)（旋转）--scale(num)（缩放）---skew(x,y)（倾斜）
3D: transform-orgin (转换元素的位置：x，y) Perspective(视差) 值à num
Transform:è translate3d(x,y,z)--scale3d(num,num,num)—rotate3d(x,y,z,deg)
Transition(过度)：
Transition-property(用来指定某个元素)ànone(没有属性)---all(所有属性)---indent(元素属性)
Transition-duration（是指定元素变化的时间单位S）
Transition-timing-function(元素转变的速度)
àease(逐渐变慢，默认值) àlinear(匀速)àease-in(加速)
àease-out(减速) àease-in-out(先加速后减速)
Transition-delay（指来定义一个动画开始执行时间S单位）
transition：变化属性（all）,时间（2s）,变化速度（linear），执行时间（4s）
动画：Animation（案例）
<div id=”box”></div>
Css:#box{ animation:自定义名( donhua) 时间（2s）变化速度（linear）执行时间（ 3s）;}
@keyframes donhua
｛0%｛width: 50px;height: 50px;｝100%｛width: 150px;height: 150px;｝｝
Css选择器
:before p:before (P元素之前插入)
:after p: after (P元素之后插入)
JaveScript
引入JS文件 <scripttype="text/javascript" src="xxx.js"></script>
一（事件名称）：
onclick(鼠标点击) ondblclick(双击点击) onfocus(获得焦点) onblur(失去焦点) onmouseover(鼠标悬停) onmouseout（鼠标移出 onload（文档加载完成） onunload(关闭网页) onreset(重置表单事件) onsubmit（表单提交事件）oonkeyup(按着键盘的某个键触发) onresize(窗口大小发生改变时触发) onscroll（滚动时触发）
nkeydown（某个键盘的键被按下）
onkeypress（某个键盘的键被按下或按住）
onmousedown（某个鼠标按键被按下）
onmousemove（鼠标被移动） onmouseup（某个鼠标按键被松开）
二（基础语句&运算符&循环）：
变量： var a= 1; console.log(a) alert(a);
常量：const a= 1;
获取对象： <div id=”box1”></div>
var box1 = document. getElementById('box1')
<div id=”box2”></div>
var box2 = document.getElementsByClassName('box2')[0]
<li>1</li> <li>2</li> <li>3</li> <li>4</li>
var list = document.getElementsByTagName('li')
数据类型：1.字符串 var a = “你好” （双引号或者单引号为字符串）
2.数字 var a =12 (数字类型)
3.布尔 var a =true/false (仅有俩种)
4.数组 var arr=[‘xx’,’xx’,’xx’] (数组类型)
5.对象 var a = {name:’xxx’,age:18,sex:’男’} (对象类型)
6.Null (未定义) 7.Undefied (空 无)
可以用 typeof 查看某个变量是什么类型
函数：function
1>function num(自定义名字) （a,b）｛ console.log(a+b)｝ num(12,1) 输出è 13 （传参）
2>function num（a,b）｛var c = a+b; return c ｝console.log(num(2,4)) 输出è 6 我们得到是return c 的值
运算符：简单介绍几种
++ (递曾) - - (递减) %(余数) += (x += y è x= x+y)
=(赋值) == (等于) === (全等) ！=(不等于)
&&（and和）||（or或）！（not）
三目运算符：A?B:C if(A=1)?true:false
循环： 1. （如果） If () {} else {}
Var a= 3;
2. switch (a){case 1 : 执行代码1 ，break；
case 2 ： 执行代码2，break；
default：执行代码3 （都不是1跟2）}
3.for(vari = 0; i<XXX.length; i++){}
var x;var txt=” ”;
varperson = {name:”yang”,age:18}
4.for(x in person){ txt += person[x]}
console.log(txt)è yang18(得到了对象中的所有的值 遍历)
三（字符串）：
var str = " "; var str = new String(); 创建声明一个字符串
str.length ----计算字符串长度
str.charAt(num) ----- 查看某个位置的字符是那个
str.charCodeAt()-----查看字符串在计算机中的编码
str.fromCharCode()----解析计算中的编码
str.indexOf(" xx", 起始值) -----可以获取字母所在位置，返回 -1为无
str.lastIndexOf("xx", 起始值)-----从最后一位字符开始查找，与上面相反
重点：字符串的截取 str.substring(a,b)
假如a为5，且只有一个参数时----将前面5位字符截取
a为0，b 为 5 ----- 从0开始截取五个字符
四（数组）：
var arr = [ ]; vararr = new Array(); 创建声明一个数组
arr.push() ----给数组添加内容，可以添加数字，文字，其他数组
arr.sort() ----数组打乱顺序后排序
数组的截取： var arr = [1,2,3,4,5]; var a =arr.splice(2)
console.log(arr)è[1,2]; console.log(a)è[3,4,5]
arr只保留俩个值
arr.splice(0,1) 从第0个开始删除1个值
数组的拼接
var a= [1,2]; var b = [3,4]
a.concat(b)è [1,2,3,4] 这是数组的拼接，可以用一个变量接受
数组的去重：
var arr = [1,4,4,3,2,5,6,1]; arr.sort( ) //数组排序
for(var i = 0; i < arr.length; i++) {
for( var j = i+1; j < arr.length; j++ ) {
if ( arr [ i ] == arr [ j ] ){
arr.splice(j,1); //删除重复的值
j - -; //减去对应的下标
}
｝（第二个循环结束）
五（时间对象，number）：
Math.pow(a,b) === a的b次方 Math.sqrt(a)===根号a
Math.floor()（下） 取整数 Math.ceil()(上)取整数
Math.random()----0~1之间随机的小数 Math.round() 四舍五入
var t = newDate() 创建一个时间对象（于当前时间一致）
t.getFullYear() 年 t.getMonth()+1 月 t.getDate() 日
t.getSeconds() 秒 t.getHours() 时 t.getMinutes() 分
t.getDay() 星期
天：Math.floor(t/86400); 时：Math.floor(t%86400/3600);
分：Math.floor(t%86400/3600/60); 秒：t%60;
六（JSON）：重点
var obj = newObject() var obj = { }; 创建声明一个JSON对象
JSON写的几种类型：
1. varobj = {name:’’yang”,age:18} obj.nameè yang
2. varobj = {url:[“1.jpg”,”2.jpg”],text:[“xxx”,”xxx”]} obj.url[0]è1.jpg
数组中的JSON获取方式：
3. vararr = [{name:”yang”},{age:18}] arr[2].age è 18
可以给JSON对象直接添加属性跟值 obj.sex=”男”
重点：
字符串à数组 str.split() 数组à字符串 arr.join()
字符串àJSON var obj =JSON.parse(str)
JSONà字符串 var str = JSON.stringify(obj)
七（节点）在JQ中很多获取元素的方法所以节点这块我简单写一下
父节点：parentNode 兄弟姐妹节点：nextSibling 子节点：childNodes
子节点的类型三种： 标签==1，属性元素==2，文本==3
测试子节点类型 XXX.childNodes[0].nodeType
第一个子节点：xxx.firstChild() 最后一个子节点：xxx.lastChild()
八（元素）
获取元素（标签）的属性
获取元素的ID:box.getAttribute(“id”)
给元素添加属性：box.setAttribute(“class”,”box1”)
删除元素的属性：box.removeAttibute(“class”,”box1”)
获取元素的宽高
Box.style.width Box.style.height // 宽高
Box.clientWidth Box.clientHeight // 宽高+padding
Box.offsetWidth Box.offsetWidth // 宽高+padding+border
创建元素
1. 创建 document.createElement(“li”) //用变量去接受
2. 添加元素 父级.appendChild() //() 里面添加这个变量
3. 删除元素 父级.removeChild() //()添加要删除的元素
4. 替换元素 父级.replaceChild (新节点，被替换的节点)
克隆元素
<divid=”box”><a href=”#”>xxx</a></div>
var box = document.get……ById(“box”);
var clone = box.cloneNode(true) //用变量接受克隆的box
document.body.qppendChild(clone) // 插入body中
八（定时器）
setInterval(函数，毫秒)
clearInterval（+用变量接受定时器） -----清除定时器
setTimeout(函数，毫秒) -----执行一次的定时器
九（事件）重点
焦点事件：（补充）
1. onfocus:当元素获取到焦点的时候触发
2. onblur:当元素失去焦点的时候触发
3. obj.focus():给指定的元素添加焦点事件
4. obj.blur(): 取消指定元素的焦点事件
5. obj.select() 选择指定元素里面的文本内容
event事件：event.clientX event.clientY
鼠标点击屏幕时的坐标：
document.onclick = function(ev){var ev = ev || event;
Console.log(event.clientX); // 鼠标点击屏幕的X坐标
Console.log(event.clientY); //鼠标点击屏幕的Y坐标 }
事件冒泡：
当一个元素接受到事件的时候，会把他接受到的所有传播给他的父级，一直到顶层window事件 。
阻止事件冒泡：ev.cancelBubble =true;
事件捕获：
当一个对象需要绑定俩个函数时，会被第二个替换掉；
obj.addEventListener(事件名称，函数名称，是否捕获)
第三个参数 ture：捕获事件 false：不捕获事件
封装事件捕获函数：
Function bind (obj,evname,fn){
If(obj.addEventListener){obj.addEventListener(evname,fn)}
Else{obj.attachEvent(“on”+evname,fn)}
}
十（函数）重点难点
1.改变内容：
innerHTML/TEXT
<h1>xxxxx</h1> var h = document.getElementsByTagName(‘h1”)
h[0].οnclick= function(){ this.innerHTML=”520快乐”}
2.改变样式：
xx.style.border = ‘1px solid black’
xx.style.background= “red”;
3.改变类：
css: box1{ background :red} box2{ background :green }
<divclass=”box1” id=”box”></div>
var box = document.get…..Id(“box”);
box.onclick = function(){this.className = ”box2”}
4.执行环境：
全局变量就是在函数外的var变量，函数内部变量外界访问不到只能通过return 来访问函数内部的变量。
函数内部称为局部变量
5.调用方式：
直接调用： 函数名（）
对象方法： obj.函数名（）
构造器： new 函数名（）
6.函数表达式：
var add = function (a,b) {console.log(a+b)} add(1,2)
(function ( ){ }) ( ) // 自己调用自己
return function ( ){ } // 直接return 自己调用
7.apply/call:（this指向）
Function foo (a,b){console.log(a,b,this)}
使用call:foo(100,1,2) è 1,2, Number(100);
使用apply：foo(true,[1,2])è3,4 ,Boolean(true)
//使用apply传参要用数组进行传入
8.bind（方法绑定this）重点!重点!重点!
this.x = 9 // 全局变量
var foo = {x:81, get:function(){return this.x }}
foo.get()è输出这个对象中的函数 结果： 81；
如果 var get1 = foo.get() //用一个变量去接受对象中的函数
输出： 9 这里的变量接受的是全局的变量
var get2 =get.bind(foo), //get函数绑定的是foo对象内的函数
输出： 81
bind方法绑定参数：
function add(a,b,c){return a+b+c}
var fun =add.bind(undefined,100) // 用bind改变参数a
fun(1,2) è输出： 103 // 可以继续调用bind方法去改变参数b
9.函数的闭包 重点！重点！重点！
方法一：function outer(){var a = 30 }
//分析函数： 直接返回了一个内部函数。
console.log(outer())è输出: return function() { return a }
要获取内部函数的a值
var fun =auter();
console.log(fun())è输出: 30;
注释：我们的fun变量接受的是function() { return a }
方法二：var obj = (function(){
var a = 12;
function x( ){ a++; alert(a)}
function y( ){ a++; alert(a)}
return{ b:x( ), c:y( ) }
})( )
obj.b() obj.c()
//直接调用了变量obj里面的俩个函数可以理解成：给变量obj赋值了俩个属性，这俩个属性是函数。
10.函数的参数传递
<div>1</div> <div>2</div> <div>3</div>
var box = document.getElementsByTagName('div');
//获取了三个div
for(var i = 0; i<box.lenght;i++){
box[i].onclick = (function(i){
alert(i)
}(i)
}
分析函数：i 的值 [ 0，1，2 ]
首先这是一个自己调用自己的函数 function(i){} //这里的i 是一个参数只是负责传递的
或者理解成 只是一个变量而已，没有值
function(i){}(i) // (i)第二个i 就是传递 [0,1,2]
11.面向对象（oop）重点！重点！重点！
function person () { } //创建一个空的函数
person.prototype= { name:”yang”,age:18,
eat:function(){
alert(“能吃”)
}
}// 给空函数添加一个类
var a= new person() // 将空函数赋值给变量a
a.nameè输出: yang a.ageè输出:18 a.eatè输出:能吃
12.面向对象（继承）重点！重点！重点！
function person (name,age){this.name = name this.age =age }
person.prototype.h =function(){console.log(this.name+this.age)}
//person的原型属性h （给person添加了一个类）
function student(name,age,className){
person.call(this,name,age)// 这里的this 是改变成自己
this.className= className;
// 函数student 拥有了person类
}
prototype
Student ==>>>>> person函数
var a = new student(“杨”，20，“web班”)----console.log(a)
输出: {name:’杨’，age:20,className:’web班’}// 得到一个对象
将student继承 person的原型（类）
student.prototype = Object.create(person.prototype)
student.Prototype.constructo = student
a.h( )è输出 杨 20
还可以更改原型链：
student.prototype.b= function(subject){
console.log(this.name+’现在学’+subject)
}
a.b(“web前端”) è输出：杨 现在学 web前端
