HTML +CSS 一些回顾笔记
# HTML
标签（空格分隔）： HTML
---
块状元素：(标签 html body h1-h6 p div ul ol li dl dt dd table) 1、矩形形式独占一行，2、能够设置宽高。
内联元素：（标签 span a b i img br meta title style）1、由内容撑大，不能设置宽高。
可变元素：<iframe></iframe>镜像其他页面
<xmp>能让所有标签在页面中显示
编辑属性<div contenteditable="ture"></div>
# CSS
盒子模型：一个元素在页面中所占位置大小叫做盒子模型
（标准盒模型 怪异盒模型）
包含的样式：width height margin padding border content
CSS引用：
1、外链 3
2、内嵌 2
3、行内 1
4、@import导入 上面这三，谁在下面谁work
<head>
<style type="text/css">
@import url('css1.css');不加'' IE7不支持
</style>
</head>
#选择器
1、id 1
2、class 2
3、标签 3
4、通配符 4
margin 外边距
四个值 上右下左（逆时针）
三个值 上 左右 下
两个值 上下 左右
一个值 上下左右
#常用文本样式：
word-wrap: break-word;文字择行
text-algin-last: center/left/right;文字的最后一行居中
#定位
position:
static 默认的定位 (没有定位)
relative 相对定位 （不脱离文档流）
absolute 绝对定位 (脱离文档流)
fixed 窗口定位 (IE6不兼容)
inherit 继承父级定位
#居中
方法一：
width:200px;
height:300px;
margin: auto;
position: absolute;
top: 0;bottom:0;left: 0;right: 0;
方法二：
.d1 {
width:200px;
height:200px;
position:absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-right: -100px;
}
.d2 {
wid
}
<div class="d1">
<div class="d2"> <\div>
</div>
# %百分比单位 根据父级计算
width width
height height
margin width
left width
top height
他会根据父级有定位去定位如果没有，就追随window(html)
内转块：
display: block;
display: inline-block;
float: left;
position:fixed/absolute;
display:table;
块转内：
display: inline;
css伪类：
:hover 触碰
:active 点击
:link 未访问
:visited 访问过
# JavaScript
全局变量 依托于window下的变量。
<script type="text/javascript">
var a = 10;
//这里的onload等价于window.onload
onload = function(){
alert(a);
}
</script>
##变量
- 列表项
- 不能以数字开头
- 只能以美元$和下划线_开头
- 命名：
- 驼峰命名法
- _下划线命名法
##判断数据格式的一个方法：typeof()
--------------------
typeof(a); === typeof a;
关于this
1、在谁的作用域下谁就是this
以下是等价的
<script type="text/javascript"> a = 20; // window.a = 20; var a = 5; // window.a = 5; this.a = 10; // window.a = 10; window.a = 15; // window.a = 15; alert(a); //15 </script>
------
JS的 基本数据类型： 数字、字符串、布尔值、undefined、null 共5种， 复杂数据类型：object
--------------------------------------------------------
<script type="text/javascript"> var a = {}; var b ; var c = "javascript"; var d = true; var e = 123; console.log(typeof(a));//object console.log(typeof(b));//undefined console.log(typeof(c));//string console.log(typeof(d));//boolean console.log(typeof(e));//number </script>
#变量类型测试：
<script type="text/javascript"> var a = 'abc'; var b = 'abc'; var c = new String('abc'); var d = [1,2,3]; var e = [1,2,3]; var f = new Array(1,2,3); var g = new Array(1,2,3); console.log(a == b);//true console.log(a === b);//true console.log(a == c);//true console.log(a === c);//false 数据类型不一样 console.log(f == g);//false 比较的字面量，但是这两个对象的引用值不一样 console.log(e == f);//false console.log(e === f);//false console.log(d == e);//false 数组本身就是对象 console.log(d === e);//false console.log(d == f);//false console.log(d === f);//false </script>
#奇怪的例子
1、关于数组1
<script type="text/javascript"> var a = [1,2,3]; var b = a; a.push(1);//1,2,3,1 </script>
2、关于数组2
<script type="text/javascript"> var c = [1,2,3]; function a(b){ b.push(1); }; a(c);//1231 </script> <script type="text/javascript"> var c = [1,2,3]; function a(b){ b = [5,6,7]; }; a(c);//123 </script>
3、关于function
function show(a,b,c){}; console.log(show.length); //3
4、undefined 和 null
var a; console.log(typeof(a)); //undefined console.log(a == null); //true console.log(a === null); //false console.log(a > null); //false console.log(a < null); //false
5、判断全局变量
<script type="text/javascript"> alert(self); //[object window] alert(self == this); //true </script> <script type="text/javascript"> self.a = 20; this.a = 15; alert(a); //15 </script>
6、其他
----
<script type="text/javascript"> window.alert(alert); // function alert() { [native code] }这是个啥东东？？？ </script>
2、
<script type="text/javascript"> var json = { 'a':10,'b':'15' }; window.alert(json); // [object Object] ??? </script>
3、
<script type="text/javascript"> var arr = [1,2,3]; window.alert(arr); // 1,2,3 </script>
4、console.log()/warn()/error();
<script type="text/javascript"> var json = {'zhangsan':'10','leo':'100'}; console.warn (1); console.error(1); console.log(json); </script>
5、
<script type="text/javascript">
console.log(console);
</script>
6、JS跨界
alert(screen.width);//等价于window.screen.width console.log(screen);
