笔记--前端知识点总结与回顾

1、为什么要有HTML？
"Hello"
"<h1>Hello</h1>"
- 浏览器渲染时使用一套HTML规则，
- 学习规则
2、服务器端写HTML时，
在任何语言的WEB框架中：html就做模版

- .html
- .tpl template
- .chmtl
3、发送请求和相应请求时
请求：
请求头


请求内容
响应：
...
4、HTML规则
- html/head/body/title/meta
- div/p/a/h/span/b/br/hr/em/ul/ol/li/img/table
- input/form/textarea/select
- style/script/link

注意：
a.
<form action='url' method='GET' enctype='...'>
<input type='file' name='f' />
<input type='submit' />

</form>
b.
<form action='url' method='GET' enctype='...'>
男：<input type='radio' name='gender' value='1' />
女：<input type='radio' name='gender' value='2' />
<input type='submit' />
</form>

<form action='url' method='GET' enctype='...'>
男：<input type='checkbox' name='gender' value='1' />
女：<input type='checkbox' name='gender' value='2' />
男女：<input type='checkbox' name='gender' value='3' />
人妖：<input type='checkbox' name='gender' value='5' />
<input type='submit' />
</form>

gender. [1,2,5]

c. select

5、CSS

选择器
#id ｛｝
.class {}
div{}

.c1 #id a{}
.c{
background-color:red;
}
.c1{
font-size: 56px;
}
.c2{
font-size: 18px;
}
<a class='c c1'></a>
.c1,#i1{

}
举例：

颜色color，大小，高度height、宽度width、内外边距margin，padding、边框border、浮动float、定位position、字体font、居中text-Alain、
超出overflow、下划线、显示display、分层、透明度opacity
:hover,:after,:before,圆角border-radius

重要：
float， 清除浮动：:after
a. 已知外层高度
内元素浮动时
b. 未知外层高度 (等于在其最后添加一个空的不占高度的标签)
- 原始：沉底位置 <div style='clear:both;'></div>
- 牛逼：
.clearfix:after{
content: '.'; 必须有东西 没东西撑不起来
display: block; 保证在最后一排
clear: both; 保证两遍没有浮动
visibility: hidden; 不显示
height: 0; 高度也不显示
}

<div class='afsd clearfix'> 用的时候再通过js把上边的类添加到标签中，保证前端的完整性

<div class='float'></div>
<div class='float'></div>
<div class='float'></div>
<div class='float'></div>
<div class='float'></div>
<div class='float'></div>
<div class='float'></div>
<div class='float'></div>
<div class='float'></div>

</div>
c. hover的应用 对汽车之家一样的回到顶部的按钮
.c1{
background-color:red;
}
.c1:hover{
background-color:pink;
}
// 当鼠标放在c1上时，c1下的c2才生效
.c1:hover .c2{

}

6、JavaScript
a. 基本数据类型
b. var
c. 对象
d. 作用域，作用域链
- 作用域链在函数被解释的过程中已经创建（函数做为作用域）
- 提前声明

public void func(){

if(1==1){
string name = "alex";
}
print(name)

}
# 直接报错 ，name未定义
# Java/C# 代码块做为作用域


def func():
if 1==1:
name = "alex"
print(name)
# Python 函数做为作用域


function func(){

}
############### 1、JavaScript中以函数做为作用域 ##############

<script>
xo = 'alex';

function f1(){

var xo = 'eric';

function f2(){

console.log(xo);
}

return f2

}

var xxxxx = f1()
xxxxx()

// eirc

</script>

############### 2、JavaScript函数在被调用之前（解释器解释过程中），作用域链已经存在 ##############

<script>
xo = 'alex';

function f1(){

var xo = 'eric';

function f2(){

console.log(xo);
}

var xo = '666';

return f2

}

var xxxxx = f1()
xxxxx()

// 666

</script>


function func(){
var ox;
console.log(ox);
}

function func(){
console.log(ox); // undefined
var ox = 'alex';
}

func()
############### 3、JavaScript 声明提前 ##############
function func(){
console.log(ox);
var ox = ' '
var ox = ' '
}

func()

7、jQuery

- 找元素（直接，间接）
- 操作 （属性..）