前端整理--二次整理整合
html
超文本标记语言 html
1 双标签 <></>
2 单标签 <meta > <img >标签：语义化
常见的标签
标题标签 h1~h6
画线 <hr />
段落标签 <p>..</p>
换行标签 <br />div/span
----尽量用有语义标签，其次才是divb strong
（无） (语义)
i em ————倾斜s del ————划线
u ins ————下划线
img --src:图片路径 alt:替换文本 --title:悬停文本 width,height--宽高像素
<img src="路径" alt="..."/>
路径分为：
绝对路径:带盘符或者网址等
相对路径：
资源和当前文件在同一目录 直接写文件名
资源和当前文件在同一文件夹下 写资源所在目录/文件名
当前文件的上一级目录与资源所在目录 ../资源所在目录/文件名
<table border="1" align="center" cellspacing="0" width="500" height="300" cellpadding="6">
cellspacing=0 : 单元格之间的空格
cellpadding=6 : 单元格之间的间隙
<caption> 标题
<thead> tr th
<tbody> tr td
<tfooter>
align="center" 文本局中
tbody tr:nth-child(2n) {
background-color: pink;}
<a href = "javascript:alert(22);">点我</a>1
<a href = "javascript:;">点我</a>1
其他防止页面跳转的实现方式：
1、<a href="#" >test</a>；
点击链接，页面默认上滚到页的顶du部，zhi 但可以加上 onclick="return false"，防止上滚到页的顶部。
2、<a href="####" >test</a>；
使用2个到4个#，见的大多是"####"，也有使用"#all"等其他的。一个无意义的标签指定，不做任dao何处理。
3、<a href="javascript：void(0);" >test</a>；
javascript:void(0) 表示一个死链接，执行空事件。
表单
<form action="">
<!-- 如果要提交到服务端，一定要写name -->
<!-- value 提示 -->
<p>用户名：<input type="text" name="uname" value="请输入用户名"></p>
<p>密码：<input type="password"></p>
<p><textarea name="" id="" cols="30" rows="10">留言：</textarea></p>
<p>
<input type="radio" name="sex" id="" checked>男
<input type="radio" name="sex" id="">女
<label for="male">male</label>
<input type="radio" name="" id="male">
</p>
<p>
<input type="checkbox" name="hhobbies" id="" checked>跑步
<input type="checkbox" name="hhobbies" id="">篮球
<input type="checkbox" name="hhobbies" id="">足球
</p>
<p>
<select name="" id="">
<option value="">--请选择省份--</option>
<option value="">江苏省</option>
<option value="">湖南省</option>
</select>
<select multiple size="2">
<option value="">--请选择学习课程--</option>
<option value="">英语</option>
<option value="">数学</option>、
<option value="">化学</option>
</select>
</p>
<p>
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<!-- 图片提交按钮 -->
<input type="image" src="" alt="">
</p>
</form>
<label> 用户名：<input type="text" name="username"></label>
<label for="pwd"> 密码：<input type="password" name="" id="pwd"></label>
CSS
overflow: scroll;
border-collapse: collapse; 细线表格
盒子 :
盒子实际宽 width+左右padding+左右border
/*对行内元素 设置上下外边距无效 左右可以设置*/
任何标签都可以看作一个盒子
width 内容的宽度
height 内容的高度
border 边框
margin 外边距
padding 内边距
border: 4px solid red; 四个方向都是4px宽 实线 红色边框
border从方向展开相当于 border-left border-right border-bottom border-top
从三要素展开 相当于border-width border-style border-color
padding
如何保证盒子总宽不变 宽度剩余法;padding对行内元素；块元素内边距问题；而margin仅支持外边距
margin：
text-align: center; //可以让文本 行内元素 行内块元素在盒子里面水平居中
margin: 0 auto; 可以让有宽度的块级元素水平居中
对行内元素 设置上下外边距无效 左右可以设置：margin-left ;margin-right
// 重置浏览器样式
* {
padding: 0;
margin: 0;
}
浮动:解决行内块元素之间空格问题
float: left;
display: inline-block;
标准流 默认状态： css元素的划分(块级元素、行内元素。。。)和特征都是在标准流前提下成立
[1]空白折叠现象
[2]高矮不齐,底边对齐——图片、文字同时存在
[3]自动换行，一行不满，换行写
display: inline-block;
float: left;
特点：
【1】两个元素并排了，且都设置了宽度和高度。{标准流中只能满足其一}
【2】浮动元素互相贴靠{有足够的空间，老三会靠着老二，如果没有足够的空间老三就会靠着老大，如果没有足够的空间，那么就会去贴左墙。}
【3】文字环绕(了解){让div浮动，p不浮动。div挡住了p,但是p中的字不会被挡住，形成自围效果。}
--浮动元素影响的是自己和后面的元素
清除浮动元素对后面元素影响的方法
【1】隔墙法-给浮动的元素的父亲增加一个高度 缺点 儿子的高度有时候不确定 所以高度设置固定 不灵活
.box1 {
height: 260px;
}
【2】额外标签法
clear:left; clear:right;
clear:both
在浮动元素末尾加一个空标签(一般是块级元素) 给这个标签设置clear: both 缺点 会影响页面的结构
.clear {
clear: both;
}
【3】给浮动元素的父亲增加overflow: hidden
overflow:hidden overflow:auto overflow:scroll
【4】使用after伪元素清除浮动
.clearfix:after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
【5】双伪元素清除浮动
.clearfix {
*zoom: 1
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
定位
相对定位
元素
1 相对于自己标准流的位置进行局部的位置微调
2 相对定位的元素还是标准流的元素
所以：left: 20px; === right: -20px;
注意：行内元素是否没有宽高，宽高由字体多少和大小决定。但行内 元素可以设置边框和背景颜色
行内元素区域包括边框大小和字体大小和 子元素（块级元素）决定的。
绝对定位：
position: absolute
1 一个绝对定位元素是body儿子，此时参考点就是body左上角
2 在工程上，一般采用子绝父相，也就是儿子设置绝对定位，父亲设置为
相对定位，父亲设置相对定位，此时儿子绝对定位的参考点就是以最近的带有定位的祖先元素为准
3 绝对定位的元素脱离标准流
/*失效 因为绝对定位的元素脱标*//* margin: 0 auto; */
闭包（closure）是⼀个可调⽤的对象，它记录了⼀些信息，⽽这些信息来⾃于创建它的作⽤域。ex:内部类
⽅法签名是指⽅法名和参数列表，⽽⽅法返回值类型不是⽅法签名的⼀部分，⼀个类中的⽅法签名必须唯⼀。
断言是为了方便调试程序，并不是发布程序的组成部分
如果想调用一个方法，首先要有一个对象，但是null并不是一个对象，内存中都没有它的空间，所以null是不能够调用length
由⼦类声明的⼦类对象也可以赋值给⽗类定义的对象变量，这种⼀个对象变量可以指向多个实际类型的现象我们称为多态（polymorphism）
在执⾏的时候能够⾃动地选择实际所属对象的⽅法进⾏执⾏，这种现象叫动态 绑定（dynamic binding）
⽗类中某些域或者⽅法允许被⼦类访问，只需要将这些域或⽅法声明为 protected
=======================
内部类之所以可以访问包含它的外围类的属性和⽅法，实际上是因为每⼀个内部类对象都持有⼀个指向包含它的外围类对象的引⽤。这个外围类的引⽤是在内部类的构造器中设置。编译器修改了所有内部类的构造器，添
加了⼀个外围类引⽤的参数，和之前对类实例⽅法调⽤时的 this 隐藏参数类似。
在内部类中使⽤外围类引⽤的正规语法：OuterClass.this 表示外围类引⽤；如果未使⽤此前缀时，默认访问内部类定义的属性和⽅法，内部类不存在相同的属性和⽅法时则访问外围类的属性和⽅法局部内部类：不能使⽤ public、protected 或 private 访问修饰符进⾏声明，它的作⽤域被限定在声明这个局部类的块中
内部类其实是⼀种编译器现象，与虚拟机⽆关，编译器将会把内部类编译成⽂件名为【外围类名 + $ + 内部类名】形式的单独的常规⽂件，⽽虚拟机则对此⼀⽆所知；⽽对于匿名内部类，编译器会产⽣⼀个数字作为其标
识符，因此“内部类名”部分会是⼀个数字。
在HTML，分为文本级、容器级。
文本级:p、span、a、b、i、u、em
容器级:div、h系列、li、dt、dd在CSS当中，P特殊为块级；其他同理。
