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
- 找元素（直接，间接）
- 操作 （属性..）