前端day02
1、 html标签
1、 span标签设置宽高
设置宽高后，字体不会发生变化。
2、 盒模型
padding是border里面的距离；
margin 是border边框外头的了属于。
2、CSS
1、权重
数数： id > class > 标签名字
p中只能放行内的 表单标签
2、background
background-position： 相对原来的位置，原来的边框。
background-repeat： 默认水平、垂直都平铺。
屏幕： 一屏一屏的
网页F12代码顺序： 从下向上看的
background: url("http://i1.umei.cc/uploads/tu/201805/9999/04adc186d3.jpg") no-repeat 0 0 ; 综合属性，一行代码
background-attachment: fixed; 让背景图固定定位。
position： 相对原来的位置，相对定位；
fixed：固定定位
背景图上有文字，就是这样实现。
3、定位
相对定位： 做父相子绝的参考，
position：relative 以原来的位置为参考点的；相对定位不做压盖现象；
只有设置了position，才能用top、left等值对其进行定位。
绝对定位：做压盖了，脱离文档流；
单独设置绝对定位，是以页面的左上角为参考点；
页面 > 浏览器，页面还有滚动，浏览器就是显示的那一屏
父相子绝： 以最近的相对父辈盒子做参考点。
脱标了，下边的模块会自动浮上来，自己不会改变，需要设置top等参数改变。
结合图片position，relative + absolute调整位置。
固定定位： 广告、回到顶部
固定定位也脱标了；
大的盒子用浮动去做；小的用定位；
position:fixed;
参考点是浏览器；
z-index： 父亲怂了，儿子再大也不管用；
默认后边的position覆盖前边的；
3、 JS
介绍
ECMAScript
console.log(变量名) 相当于print打印
alert（变量名） 弹出框测试
一个变量，先声明，后定义
typeof 相当于type
特殊情况：var b = 5/0 b是Infinity，无穷大，也是数字类型；
还有一个特殊的数据类型，undefined；
引用数据类型：
Function===def
Object===字典
Araay===list，列表
Date===模块time
比较运算符：
=== 相当于is，比较值和类型，类型即内存地址；
数据类型转换：
var a = 1;
var str = a + '' # 当一个数值和字符串拼接，空不空无所谓，浏览器自动把数值转换成字符串做字符串的拼接。 //隐士转换
var str2 = a.toString()
var a = 1;
console.log(a);
var b = '123asd';
var num = Number(b);
console.log(num); //NaN NOT A NUMBER
console.log(typeof (num)); //number类型还是
console.log(Boolean (num)); //结果是false
var c = 5/0;
console.log(typeof (c)); //number类型还是
console.log(Boolean (c)); //结果是true
未定义的也是false。
var a = 1;
var c = a++;
console.log(a); //先把a=1，赋值给c，在执行a++
console.log(c);
var a = 1;
var c = ++a; //先++，后赋值，先把a+1，然后再赋值给c
流程控制
if、 else if、else
var name='houbinglei';
if(name==='alex'){
console.log('nimei')
}else if(name==='houbinglei'){ # 三个等号判断是否相等。
console.log(name)
}else {
console.log('failed')
}
alert('you must work hard')
while
while循环三步走：
1.初始化循环变量
2.判断循环条件
3.更新循环变量
var i=1;
while(i<=100){
if(i%2===0){
console.log(i)
}
i++;
}
switch：
一个case完了，必须有一个break；
JS中的数组
1 数组的合并 concat()
var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)
2 join() 将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串
var north = ['北京','山东','天津'];
var str = north.join('---');
console.log(str)
3 将数组转换成字符串 toString()
var score = [98,78,76,100,0];
//toString() 直接转换为字符串 每个元素之间使用逗号隔开
var str = score.toString();
console.log(str);//98,78,76,100,0
4 slice(start,end); 返回数组的一段，顾头不顾尾
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]
5 pop 移除数组的最后一个元素
var north = ['北京','山东','天津'];
var del = north.pop();
console.log(del); // 结果是删除的元素，天津
6 push() 向数组最后添加一个元素
相当于append
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.push('小马哥');
console.log(newArr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]
7 reverse() 翻转数组
var names = ['alex','xiaoma','tanhuang','angle'];
//4.反转数组
names.reverse();
console.log(names); // ["angle", "tanhuang", "xiaoma", "alex"]
8 sort对数组排序
9 判断是否为数组：isArray()
JS中的字符串
1 chartAt() 返回指定索引的位置的字符
2 concat 返回字符串值，表示两个或多个字符串的拼接
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str2));//alexex
3 replace(a,b) 将字符串a替换成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
4 indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样
var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1
5 slice(start，end) 左闭右开 分割字符串
6 split('a',1) 以字符串a分割字符串，并返回新的数组。
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]
8 toLowerCase()转小写
9 toUpperCase()转大写
Date
var mydate = new Date();
var time = mydate.toLocaleString(mydate)
console.log(time)
2018/8/22 下午5:25:03
Math内置对象
var a = 123.267;
console.log(Math.ceil(a)); //124
console.log(Math.floor(a)); // 123
求随机数：
200~500之间 min-max min +Math.random()*(max-min)
console.log(200+Math.random()*(500-200));
Math.random() // 0-1之间的数
函数
声明函数： 关键字 function add（）{
//函数名字叫add
}；
所有声明的变量、函数都挂载到全局对象了，window.add。
伪数组
console.log(arguments);
console.log([]);
函数循环arguments：
function hao() {
//伪数组
for(var i = 0; i < arguments.length;i++){
console.log(arguments[i]);
};
document.write("*"); // 往文档对象上写*，文档页面就是html。
4、 DOM
文档对象模型，标签就是对象
window上去解析，顶层对象 ==》 document ==》 html ==》 head+body等
// 1. 找 获取DOM对象
// 2.事件
// 3.驱动程序 执行的动作
var isGreen = true;
oDiv.onclick = function () {
// 驱动程序
console.log(oDiv.style);
//样式操作
if (isGreen) {
oDiv.style.backgroundColor = 'red';
isGreen = false;
}else{
oDiv.style.backgroundColor = 'green';
isGreen = true;
}
// oDiv.style.width = '300px';
// oDiv.style.display = 'none';
};
样式操作
<body>
<button>隐藏</button>
<div class="box" id="name">content</div>
<script>
var ob = document.getElementsByTagName('button')[0];
var odiv = document.getElementById('name');
ob.onclick = function () {
odiv.style.display='none';
}
</script>
</body>
点击隐藏后，相当于在原来的div标签内添加了行内样式。优先级最高。干掉了内接样式
属性操作
className
oDiv.className = 'box'; 替换成box
oDiv.className += ' active'; 字符串拼接，后边加active；
DOM总结
1.获取Window
console.log(window)
2.获取Document
console.log(document)
3.获取html
console.log(document.documentElement);
4.获取body
console.log(document.body);
5.获取DOM的三种方式
id获取： document.getElementById(id的值)
类获取： document.getElementsByClassName('类名');获取的是伪数组
标签获取：document.getElementsByTagName(标签名)
6.事件
onclick 点击事件
onmouseover 鼠标的时候
onmouseout 鼠标离开的时候
鼠标小手： CSS属性，cursor：point；
7.驱动程序
样式的操作
oDiv.style.xxx = '值'
属性操作：
oDiv.id = 'box'
oDiv.className = 'box'
oImg.src = './1.png'
oA.href = 'http://www.baidu.com'
值的操作：
innerText 对文本的操作
innerHTML 对标签和文本的操作
value 对值的操作
点语法： get方法和set方法
oDiv.innerText = '123';
console.log(oDiv.innerText);
数据驱动视图
技巧
阻止a标签默认的跳转：
href = "javascript:void(0)"
如果是href = "#",意思是回到顶部。如果有滚动条。
问题1：
用pycharm打开background的url时候，因为pycharm自己它内部自己加了一个虚拟服务器，你的c盘的图片啊 你要把你的图片放在你打开页面之后的服务器目录下面啊。 不能使用C盘什么的绝对路径。