HTML+CSS+js复习总结
老师用两周的时间给我们复习了一些以前学过的内容，下面我对这两周所复习的内容做一个总结
1、基础标签
标题
段落
图片 ![]()
超链接anchor target="_blank"表示新开一个窗口 锚点 #v-
列表 无序列表unorderd list - list iteam
有序列表order list
布局 division 划分
文本节点 span（和div类似，但是span是行内元素，某个字需要添加样式如颜色，则可以用span）
2、form表单
表单
3、盒子模型div
盒模型：width/height/border/margin外边距/padding内边距
/*padding有三个值时：上 左右 下，padding四个值时：上右下左*/
/*margin: 0 auto;让整个盒子居中*/
4、表格table
5、浮动float
/*定位(position)
* position:fixed;(固定定位：相对于浏览器定位)
* position:relative(相对定位：相对于该元素自身所在的位置定位)
* position：absolute(绝对定位：相对于该元素有定位属性的父元素去定位，
* 如果父元素都没有定位属性，相对于body定位)
* position:static;(不定位)*/
/*overflow(溢出处理)
*hidden（溢出隐藏）
*scroll（出现滚动条）
*auto（自动）
*/
overflow: hidden;/*溢出处理*/
background-color: rgba(255,0,0,0.5);/*red+green+blue,每两位代表一种颜色，a代表透明的0~1*/
/*opacity: 0.5;透明度（0~1）越大越不透明*/
6、CSS基础
/*选择器优先级：id(100)>类选择器(10)>标签选择器(1)*/
/*内部样式*/
/*标签选择器:选中页内所有该类标签*/
/*div{
width: 200px;
height: 200px;
border: 2px solid red;
}*/
*{
/*通配符选择器（设置所有标签）*/
}
.a,.b{
/*群组选择器（当两个有共同处的时候可以使用群组选择器）*/
}
/*相邻兄弟选择器
.bread+p(设置bread下的p标签)*/
div[class=a]{
/*属性选择器*/
}
.nav>li{/*设置nav标签下的第一级li*/}
7、二级导航
/*行内元素/块级元素*/
/*行内元素：img/input/a/span(a/span等行内元素是不能设置宽高的)
*块级元素：div/ul/li/ol/p/form/table
*display:none(隐藏)
* /block(显示)
*inline
* inline-bloce
* (inline快元素变成行内元素，可以使两个div在一行显示。block行内元素变成块级元素)
inline-block让元素在一行显示
*/
/*每个换行占一个空格，ul设为0使每个换行都不占空间*/
/*tab往后缩进，shift+tab是往前缩进*/
vertical-align: top;
/*display默认是底对齐，vertical可以设置顶对齐*/
8、JavaScript
JavaScript包括:
ECMAscript(基本语法)
DOM(文档对象模型)
BOM(浏览器对象模型)
//声明变量
var num = 10;
//全局变量（声明在所有函数之外的变量
//局部变量（函数内部，通过var声明的变量
//基本数据类型
//Number、String、Boolean、Undefined、Null
var flag = true;
var str = 'abcd';
var num = 100;
console.log(typeof flag);//boolean
console.log(typeof str);//string
console.log(typeof num);//number
var u;
console.log(typeof u);//undefined
//运算符
+= %= ?: && || !
//流程控制语句
//顺序结构 分支结构 循环结构
9、对象
//对象的声明(一系列属性和方法的集合)
//this是调用当前方法的对象
var obj={
name:'张',
age:18,
height:182,
say:function(){
console.log(this.name);
}
};
//对象的访问
console.log(obj.name);
obj.say();
//添加属性或方法
obj.weight=99;
console.log(obj);
//修改
obj.name='李';
console.log(obj);
//遍历(for in循环)
for(var item in obj){
if(typeof obj[item]!=="function"){
document.write(obj[item]+'
');
}
}
//删除属性
delete obj.name;
// var obj=new Object();//Object() 构造函数 最终返回的是一个对象
10、
//函数声明
//函数名以英文字母或$开头，不能是关键字
//函数的调用
// fn();
//函数的参数(函数声明时是形参，调用时是实参)
//函数的返回值（返回一个值，或之间跳出整个函数）
//函数return
//函数的返回值
//ruturn和break一样，遇到return将会跳出，return后面的语句将不会执行
11、排序
// 数组的声明
var arr = [1,2,3,4,5];
// 数组的访问
// console.log(arr[0]);
// 数组的方法
// push:在数组末尾添加元素，并返回数组的长度；
// var newArr = arr.push(3,4,5);
// console.log(newArr);
// console.log(arr);
// pop:删除数组末尾的元素，并返回删除的元素
// var ele = arr.pop();
// console.log(ele,arr);
// arr.shift arr.unshift
// splice：从某一位开始删，删除几个，在该位添加
// var ele = arr.splice(1,0,100,90);
// console.log(arr,ele);
//arr.indexOf():返回该元素的下标索引，如果不存在返回-1//index 索引
12、DOM(document object model:文档对象模型)
//DOM树
//节点类型：文本节点 元素节点 属性节点
//获取元素
//document.getElementById();//ID
//document.getElementsByClassName();类名
//document.getElementsByTagName();标签
//通过节点关系获取
//console.log(nav.childNodes);
// console.log(nav.children);
// console.log(nav.parentNode);
// console.log(nav.firstChild);
// console.log(nav.firstElementChild.nextElementSibling);
//事件：onclick点击事件 onmouseover鼠标滑入 onmouseout鼠标滑出
//onmousemove鼠标移动 onmouseup鼠标按下
//绑定事件 三要素：绑定的元素、事件类型、事件处理函数
console.log(innerHTML);//inner获取它里面的内容
this.innerHTML="hello"//点谁谁里面的内容就会变成hello
//键盘事件：onkeydown onkeyup
//判断是否是回车键
if(e.keyCode == 13) {
//事件流：事件冒泡
if(e.target.nodeName == 'BUTTON') {//判断是否为按钮
13、BOM
BOM
window对象下的方法
alert()
confirm()
close()
open()
setInterval()
setTimeout()
clearInterval()
clearTimeout()
onload
window下的对象
history
back()
forward()
go()
location
hash
search
port
host
href
screen
width
height
availHeight
availWidth
navigator
userAgent
document
/window对象是最根上的对象
console.log(window);
//window对象下的方法
//alert();//window.alert() window对象下的方法可以省去window
var a=100;//声明的变量是加到window对象上
var win=open('https://www.baidu.com/');//打开指定网址的窗口
//延迟执行
// setTimeout(function(){//设置时间周期
// win.close();
// },3000)//时间间隔 单位毫秒
14、Date
//构造函数 Object Array String Date
var da=new Date();
// console.log(da);//获取当前系统的时间
// console.log(da.toLocaleString());//获取当前系统的时间 显示更明显
setInterval(function(){//让时间自己动
//每隔一定的时间走一次
var date=new Date();
box.innerHTML=date.toLocaleString()//date.toLocaleString()这个函数返回一个字符串
// var mon=date.getMonth()//month永远比当前小1；
// var day=date.getDay();//星期 周日显示的是0；
//只要时间
// var h=date.getHours();
// var m=date.getMinutes();
// var s=date.getSeconds();
// box.innerHTML=h+'-'+m+'-'+s;
},1000)