前端系列-1 HTML+JS+CSS基础

前端系列-1 HTML+JS+CSS基础
背景：

前端系列会收集碎片化的前端知识点，作为自己工作和学习时的字典，欢迎读者收藏和使用。
笔者是后端开发😶前端涉猎不深，因此文章重在广度和实用，对原理和性能不会过多深究。

1.html

1.1 html5网页结构
```
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题title>
        <link rel="icon"  href="data:image/png;base64,i..." type="image/x-icon">
  <link rel="shortcut icon" href="data:image/png;base64,...=" type="image/x-icon">
    head>
    
    <body>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
```
1.2 html标签中包括head标签和body标签：

（1）head标签中可以定义字符编码格式，以及网页的标题和图标;
（2）页面显示的内容需要在body中定义。

1.3 在html中引入js：

(1) 内部插入的代码格式如下：
```
<script type="text/javascript">
 // JavaScript代码
script>
1
2
3
```
(2) 引入js外部文件
```
<script type="text/javascript" src="文件路径">
1
```
一般在body标签底部引入，以保证所有的DOM元素都被加载后再加载JS文件;
注意加载多个JS文件时，如果有依赖关系，需要保证被依赖的文件先被引入。因此会先引入jquery等三方库，再引入业务js文件。

1.4 在html中引入样式：

(1) 内联样式
```
<h1 style="margin-left: 40px;">内联样式h1>
1
```
直接在DOM元素中使用style属性进行样式设置，优先级最高；不利于维护。

(2) 内嵌样式
```
<head>
    <title>内嵌样式title>
    <style>
        h1 {
            margin-left: 40px;
        }
    style>
head>
1
2
3
4
5
6
7
8
```
在head中通过style标签引入。

(3) 外部样式表
```
<link rel="stylesheet" href="./css/index.css">
1
```
通过link标签的href引入。

(4) 导入样式表
```
<link rel="stylesheet" href="./css/index.css">
1
```
在index.css文件中：
```
@import "1.css";
@import "2.css";
@import "3.css";
@import "4.css";
1
2
3
4
```
注意：在一个html文件中引入的多个样式表，如果选择器重复了，后者会覆盖前者。

1.5 常见元素:块和内联

DOM元素整体上可以分为块元素和内联元素两类。块元素可用于布局，内联元素可用于显示。二者主要区别在于：
(1) 块元素可以包含块元素、内联元素、文本；内联元素只能包含内联元素和文本；
(2) 块与其他元素之间有换行；内联元素不会换行；
(3) 块元素可以设置高度(height)和宽度(width), 内联元素不能设置;
常见的块级元素有： div, p/h, table/form, ul/ol, hr
常见的内联元素有： span, a, img, input/textarea, br

1.6 Dom原生语法

jquery出现后，基本不会再用DOM的原生语句。
```
(1)获取DOM对象
#返回拥有指定id的对象
document.getElementById('id属性值');
#返回拥有指定类型的对象集合
document.getElementsByClassName('class属性值');
#返回拥有指定标签名的对象集合
document.getElementsByTagName('标签名');
...
1
2
3
4
5
6
7
8
```
2.javascript

javascript作为脚本语言，语法与Java存在相似之处。如：注释使用双斜线(//), 使用分号(;)作为表达式的结尾…

2.1 常用类型

常用类型有：String，Number，Boolean, 数组，对象类型.

2.1.1 String

字符串可以使用单引号或者双引号包裹，可以使用加号(+)对字符串进行拼接。

创建方式如下：
```
var str1 = "str1";
var str2 = 'str1';
var str3 = new String("str1");
var str4 = "s"+"tr"+new String("4");
1
2
3
4
```
常用API:
```
// 判断string字符串是否以str开头, 返回true或false
string.startsWith(str)

// 判断string字符串是否以str开头，返回true或false
string.endsWith(str)

// 返回字符串string中第start+1位开始的长度为len字符串内容。
string.substr(start,len)

// 替换字符串内容方法:将str1替换为str2
string.replace(str1, str2)
1
2
3
4
5
6
7
8
9
10
11
```
其他与java用法基本一致。

2.1.2 Number

可以表示整数，也可以表示小数；数值太大或者太小可以用科学计数法表示。
```
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123
1
2
```
Number类型中有个比较特殊对象NAN，表示非数值。
```
typeof NaN; // "number"
1
```
NaN对象不等于任何对象，包括自己：
```
NaN == NaN //false
1
```
可以使用js内置的函数isNaN()来判断：
```
var nan = NaN;
isNaN(nan); // true
Number.isNaN(NaN); // true
1
2
3
```
当字符串不能转换为数字时，返回NaN表示解析失败；undefined和NaN的算术操作会返回NaN; 数学函数的无效参数如负数的平方根、负数的对数时会返回NaN；在js中存在无限大, 无限大乘以0会返回NaN：
```
var result = 1/0; //Infinity
var resultN = -1/0; //-Infinity
isNaN(result * 0); // true
1
2
3
```
2.1.3 Boolean

只有两个值：true和false; 注意大小写敏感。

2.1.4 数组

js中的数组中不要求元素类型相同，但尽量保持元素类型一致以方便维护。

创建方式如下：
```
var test_arr = ["a", 1, null];
var cars=new Array("ET7","ES8","EC6");
1
2
```
常用API:
```
//1.使用下标进行取值和赋值
cars[0]="Saab";
//2.添加、删除最后一个元素
list.push("banana");
list.pop();
//3.添加、删除第一个元素
scores.shift();
scores.unshift(76);
1
2
3
4
5
6
7
8
```
其他与java用法基本一致。

2.1.5 对象类型
```
var car = {
    name:"EC6", 
    a:4.5, 
    color:"blue"
};
// 有以下两种方式获取对象
car.name;
car["name"];
1
2
3
4
5
6
7
8
```
2.1.6 typeof 运算符

可以返回对象的大致类型，结果是字符串
```
typeof new String("str1"); // "object"

typeof "str2"; // "string"

typeof 123e5; // "number"

var b3 = true; 
typeof b3; // "boolean"

var arr_4 = ["a", 1, null];
typeof arr_4; // "object"

var object5 = {
    name:"EC6", 
    a:4.5, 
    color:"blue"
};
typeof object5; // "object"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```
2.2 空对象

js中存在两个空对象，null和undefined，有以下区别：
(1) null是Object类型；undefined是Undefined
```
typeof null; // "object"
typeof undefined // "undefined"
1
2
```
(2) undefined表示缺少了预期的值或参数；使用var声明变量，未赋值时为undefined, 当函数为传参时为undefined，未定义函数返回值时-返回undefined；

(3) null通常用于显式地表示空或无效的对象、数组或变量; 清空一个变量或者释放一个对象的引用时，可以将其设置为null。

2.3 变量和作用域

在ES5及之前的js版本中使用var声明变量，在ES6中引入了let和const; 常见浏览器对这两个关键字兼容，可直接使用。

2.3.1 var关键字
- 函数级作用域：变量的作用域限制在声明的函数内部，从函数外部访问会报错。
- 变量提升：变量声明会被提升到作用域的顶部。
- 可以重复声明：后面的声明会覆盖前面。
2.3.2 let关键字
- 块级作用域：变量的作用域为所在代码块，即从代码块外部访问会报错。
- 不可重复声明：同一个作用域内，不可以多次使用let对同一个变量反复声明。
- 没有变量提升：let声明的变量在声明语句之后才能使用。
2.3.3 const关键字
- 常量：被赋值后不可修改。
- 块级作用域：与let相同，块级作用域。
- 不可重复声明：同一个作用域内，多次使用const声明同一个变量会报错。
let和const的特性和限制可以将var中可能引入发热误操作显示地提前到开发阶段，从而避免bug的产生；因此开发过程中，建议使用let和const替代var。

2.4 字符串和JSON常见操作
```
//1.JSON.stringify()将对象转换为JSON格式字符串
var obj = {name:"seong", age: 28}
var objStr = JSON.stringify(obj);
console.log(objStr);
//2.JSON.parse()将JSON格式字符串转为对象
var obj2 = JSON.parse(objStr)
1
2
3
4
5
6
```
2.5 if 和 switch-case;
```
if (条件表达式 1) {
    // 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
    // 条件表达式 2 为真时执行的代码
} else if (条件表达式N) {
    // 条件表达式 N 为真时执行的代码
} else {
    // 所有条件表达式都为假时要执行的代码
}
1
2
3
4
5
6
7
8
9
```
if-else语法与Java基本相同, 需要注意条件表达式为变量时，零值转为false,非零值转为true;
```
let scoreLevel = "A";
switch(scoreLevel){
    case "A":
        //...
        break;
    case "B":
        //...
        break;
    default:
        //...
}
1
2
3
4
5
6
7
8
9
10
11
```
switch-case语法与Java相同, 穿透和break用法也相同。

2.6 try-catch异常处理;
```
try {
 //...
} catch(err) {
    //...
   console.writeln( err.name+ err.message);
} finally {
    //...
}
1
2
3
4
5
6
7
8
```
异常对象中有name和message信息。

2.7 for循环和while循环
```
for (var i = 1; i <= 5; i++) {
 if (i == 3) {
  break;
 }
 console.log('提示信息：' + i);
}

continue、break

var num = 1;
while (num <= 10) {
 console.log(num + '\n');
 num++; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```
for和while用法同Java, continue和break用法也相同。

2.8 与或非

与(&&) ，或(||)，非(!)，与Java完全相同

 2.9 是否相等;

== 仅判断值是否相等；=== 判断值和类型是否相等。
```
var str1 = "1";
var int1 = 1;
console.log(str1 == int1);  // true
console.log(str1 === int1); // false
1
2
3
4
```
3.css

3.1 盒子模型

HTML中每个元素都是盒子模型，每个盒子模型包括4个部分：content、padding、border、margin，如下图所示：

3.1.1 内容content

content 作为元素的内容部分，常见样式如下：
【1】width和height
块级元素和内联元素有所区别：内联元素不可设置，宽/高属性由其内容(文本、图片大小)决定；块级元素可设置宽/高，默认宽度为父元素的100%，高度默认由内容(元素内容或者子元素高度之和)决定。
```
<div style="width:200px;height:100px;background-color:orange">div>
1
```
显示如下：

说明：
在设置width和height时可使用倍数(em),像素(px),百分比(%)三种类型。

【2】display
none：隐藏元素且不占用任何空间；
block：设置为块级元素，允许设置width和height；
inline-block：设置为内联元素，不会独占一行，同时可以设置宽度和高度。

【3】background-color和background-image
background-color用于设置背景色，background-image用于设置背景图片；
```
/* 将div的背景颜色设置为红色 */  
div {  
    background-color: #ff0000; 
}

div {  
    background-image: url('background.jpg');
}
1
2
3
4
5
6
7
8
```
说明：当同时设置背景色和背景图片时，仅背景图片生效。
其中：
CSS样式的颜色属性可以使用
（1）关键字，如"red"，“blue”；
（2）十六进制值：如"#ff0000"，"#00ff00"等；
（3）RGB，如rgb(255,0,0)，第一个数字表示红色，第二个数字表示绿色，第三个数字表示蓝色。

【4】color, font-size, text-align,overflow
color用于设置文本颜色；font-size用于设置本文大小；

text-align用于设置文本的水平对齐方式，常见取值有：
（1）left：文本内容将相对于元素的左边界对齐。
（2）right：文本内容将相对于元素的右边界对齐。
（3）center：文本内容将居中对齐。
（4）justify：文本内容将被对齐到左右两端，并在每行结束时调整单词间距，使其占据整个行宽。

overflow表示当内容超过盒子内容区指定的width和height时的显示方式，常见取值有：
（1）hidden:隐藏
（2）visible正常显示
（3）scroll显示滚动条；

3.1.2 内边距padding

内边距是内容区和边框之间的空间,可通过padding对内边距进行设置：
```
div {  
    padding: 10px;  
}
1
2
3
```
此时，padding作用于上下左右四侧，可通过下面的方式分别进行设置：
```
div {  
    padding-top: 1px;  
    padding-right: 10px;  
    padding-bottom: 1px;  
    padding-left: 3px;  
}
1
2
3
4
5
6
```
说明：设置盒子背景色属性时，背景色会延伸到填充区域。
注意：内联元素可以设置水平方向的内边距，不可设置垂直方向的内边距。

3.1.3 边框border

边框是环绕内容区和填充的边界，可以设置的属性有border-style、border-width和border-color ；
【1】border-style
边框样式，常见有：solid(实线), 虚线(dashed), 点线(dotted), 双线(double)
```
div {  
    border-style: solid;  /* 设置div的边框样式为实线 */  
}
1
2
3
```
【2】border-width
边框宽度，可通过px设置；
```
div {  
    border-width: 2px;  /* 设置div的边框宽度为2像素 */  
}
1
2
3
```
【3】border-color
用于设置边框颜色，默认无颜色
```
div {  
    border-color: #ff0000;  /* 设置div的边框颜色为红色 */  
}
1
2
3
```
说明：这三个属性可以一起使用，顺序无关紧要，如下所示：
```
div {  
    border: solid 2px #FF0000;
}
1
2
3
```
3.1.4 外边距margin

外边距是边框之外的空间,可通过margin对内边距进行设置：
```
div {  
    margin: 10px;  
}
1
2
3
```
此时，margin作用于上下左右四侧，可通过如下的方式分别进行设置：
```
div {  
    margin-top: 1px;  
    margin-right: 10px;  
    margin-bottom: 1px;  
    margin-left: 3px;  
}
1
2
3
4
5
6
```
注意：内联元素可以设置水平方向的外边距，不可设置垂直方向的外边距。
说明：多个元素之间的外边距，不是取和，而是取并集。

3.2 定位与浮动

【1】position
css使用position确定元素的定位方式，有以下几种：
（1）static
默认定位方式，即文档流。
```
<head>
    <style>
        #node-1 {
            width: 500px;
            height: 100px;
            background-color: red;
        }

        #node-2 {
            width: 400px;
            height: 200px;
            background-color: orange;
        }

        #node-3 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    style>
head>

<body>
	<div id="node-1">div>
	<div id="node-2">div>
	<div id="node-3">div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
```
文档流显示如下：

分析：node-1(红色)、 node-2(橙色)、 node-3(黄色)分别各占一行，紧密排列

（2）relative
相对于原来的位置进行浮动；保留占用的空间。
将node-2节点的样式修改为：
```
#node-2 {
	width: 400px;
	height: 200px;
	background-color: orange;
	
	position: relative;
	top:100px;
	left: 100px;
}
1
2
3
4
5
6
7
8
9
```
显示为：

分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间保持，node-2(橙色)根据top和left相对原空间进行偏移。

（3）absolute
相对已定位的父节点(否则相对浏览器)进行浮动；不保留占用的空间。

将node-2节点的样式修改为：
```
#node-2 {
	width: 400px;
	height: 200px;
	background-color: orange;
	
	position: absolute;
	top:100px;
	left: 100px;
}
1
2
3
4
5
6
7
8
9
```
显示为：

分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间不保持，node-2(橙色)根据top和left相对浏览器左上角进行偏移。

（4）fixed
相对浏览器)进行浮动；不保留占用的空间。

将node-2节点的样式修改为：
```
#node-2 {
	width: 400px;
	height: 200px;
	background-color: orange;
	
	position: fixed;
	top:100px;
	left: 100px;
}
1
2
3
4
5
6
7
8
9
```
显示为：

分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间不保持，node-2(橙色)根据top和left相对浏览器左上角进行偏移。

【2】float
使用float属性可以使元素脱离原文档流，float属性取值范围如下：
（1）left：使元素浮动到左侧；
（2）right：使元素浮动到右侧；
（3）none：默认值，元素不浮动；
```
<head>
    <style>
        #node-1 {
            width: 500px;
            height: 100px;
            background-color: red;
            /*float: left;*/
        }

        #node-2 {
            width: 400px;
            height: 200px;
            background-color: orange;
            /*float: left;*/
        }

        #node-3 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            /*float: left;*/
        }
    style>
head>

<body>
<div style="width:1200px; border: black 5px solid">
    <div id="node-1">div>
    <div id="node-2">div>
    <div id="node-3">div>
div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
```
显示如下：

分析：node-1(红色)、node-2(橙色) 、node-3(黄色) 分别各占一行，父节点因未设置hight从而高度为三个字节点之和。

对node-2(橙色)和node-3(黄色)节点样式添加 float: left;，显示如下：

分析：当node-2(橙色)和node-3(黄色)浮动后，不再占据原来的空间，父节点高度与node-1(红色)保持一致。

对node-1、node-2、node-3节点样式添加 float: left;，显示如下：

分析：当node-1(红色)、node-2(橙色)和node-3(黄色)浮动后，均不再占据原来的空间，父节点高度为0。

3.3 选择器

 3.3.1 id选择器

使用井号(#)拼接元素id
```
#id{
	witdh: 100px;
}
1
2
3
```
3.3.2 类选择器

使用句号(.)拼接元素id
```
.class{
	witdh: 100px;
}
1
2
3
```
3.3.3 标签选择器

直接使用标签名
```
tag{
	witdh: 100px;
}
1
2
3
```
3.3.4 组合选择器

选择器1 选择器2 {...}表示选择器1下的所有满足选择器2的节点，可以直接相连，也可不连；
选择器1 > 选择器2{...}表示选择选择器1下直接包含的选择器2，而不包含间接包含的选择器2；
选择器1 + 选择器2{...}表示选择器1同级的下一个相邻的选择器2；
选择器1 ~ 选择器2{...}表示与选择器1同级的且在选择器1后面的所有的选择器2；
选择器1选择器2{...}表示同时满足选择器1和选择器2的元素.

4.jquery

4.1 安装和引入

在html中通过script标签引入：
```
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">script>
1
```
也可以将jquery-2.0.2.min.js文件下载到本地后引入，避免每次引用都需要从远程下载。
注意：HTML中导入js时，依赖jquery的js文件需要在jquery之后被引入。

说明：
jQuery代码需要包含在$(document).ready(function(){})内部，为了确保代码在DOM完全加载后才执行。
当页面加载时，浏览器会逐步解析和构建DOM；如果jQuery代码在DOM还没有完全加载时就执行，可能会导致无法找到所需的DOM元素或执行操作。$(document).ready(function(){})会在DOM加载完成后触发，执行内部的代码块。

4.2 操作DOM

4.2.1 获取jquery的DOM对象
```
// 直接使用字符串【用于创建新的DOM节点】
$("
")

// 包装HTML原生DOM对象
const inputMsg = document.getElementById("chat-input");
$(inputMsg)

//使用css选择器获取, 支持id,标签，类选择器【用于操作现有DOM节点】
$("#chat-input")
1
2
3
4
5
6
7
8
9
```
4.2.2 删除节点

remove方法用于删除节点：
```
// 删除id为chat-input的元素
$("#chat-input").remove();
1
2
```
4.2.3 获取/设置节点内容

text方法用于获取或设置节点的内容
```
//设置
$("#chat-input").text('节点内容');
// 获取
var content = $("#chat-input").text();
1
2
3
4
```
4.2.4 设置样式

css方法获取和设置节点样式
```
// 设置背景色
$(".message-box").css("background-color":"red")
// 获取背景色
$(".message-box").css("background-color")
1
2
3
4
```
4.2.5 设置属性

attr方法获取和设置节点属性
```
// 设置背景色
$(".message-box").attr("display":"none")
// 获取背景色
$(".message-box").attr("display")
1
2
3
4
```
说明：属性可以是元素特有的，也可以是用户自定义的，用于储存信息。

4.2.6 隐藏与显示

hide和show方法用于控制节点的隐藏和显示
```
// 隐藏detail-box元素
$("#detail-box").show();

// 显示detail-box元素
$("#appRightBottom").hide();
1
2
3
4
5
```
4.2.7 添加子节点

append方法用于添加子节点
```
const bodyDom = $("新增内容")
// 对id为chat-input元素添加新增内容节点
$("#chat-input").append(bodyDom);
1
2
3
```
4.2.8 获取子节点列表
```
// children()方法获取子节点列表
$("#chat-wrapper").children()

//first()获取第一个子节点
$("#chat-wrapper").children().first()

//last()获取最后一个子节点
$("#chat-wrapper").children().last()
1
2
3
4
5
6
7
8
```
获取子节点后，操作方式同操作节点。

4.3 事件机制

 4.3.1 鼠标事件

单击和双击事件：
```
// 为元素绑定鼠标单击事件
$("#send-btn").click(function(){
	console.log("单机鼠标左键");
});

// 为元素绑定鼠标双击事件
$("#send-btn").dbclick(function(){
	console.log("双机鼠标左键");
});
1
2
3
4
5
6
7
8
9
```
鼠标移入和移出事件：
```
//用户光标进入元素上时触发
$("#send-btn").mouseenter(function(){
	console.log("鼠标移入");
});

// 光标离开元素时触发
$("#send-btn").mouseleave(function(){
	console.log("鼠标移出");
});
1
2
3
4
5
6
7
8
9
```
其他暂不涉及。

4.3.2 键盘事件

keydown 键盘按下时触发，keyup在按键释放时触发，keypress按下并抬起同一个按键时触发。
```
$("#xxx").keydown(function (event) {
	// event.keyCode可获取按键的id
    if (event.ctrlKey && event.keyCode == 13) {
        alert('Ctrl+Enter');
    };
    switch (event.keyCode) {
	    case 37:
	        alert('左');
	        break;
	    case 39:
	        alert('右');
	        break;
	    };
	    return false;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
其他暂不涉及。

4.4 ajax

使用ajax方法调用HTTP接口，如下所示：
```
$.ajax({
    url:  "/aiws/api/queryHistoryById?recordId=0", 
    type: 'GET', 
    async: false, 
    data: '', 
    dataType: 'json', 
    success: function (result) {
         console.log(result)
    }, 
    error: function (msg) {
        console.error(msg)
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
```
其中：url表示服务器接口地址；type表示方法类型，如GET, POST; async表示请求是否异步；data表示发送给服务器的数据；dataType表示接受的数据类型，如果为text将服务器返回的结果解析为字符串；如果为json，会将服务器返回的结果解析为对象类型；success在请求成功时调用，error在请求异常时调用。
相关阅读:
SpringCloud基础6——分布式事务，Seata
鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统
 Java版分布式微服务云开发架构 Spring Cloud+Spring Boot+Mybatis 电子招标采购系统功能清单
 聊聊对Andorid的FileProvider的理解
 mysql实现按照自定义（指定顺序）排序
 除visio以外的几款好用流程图绘制工具
 Mysql索引优化2
Java | extends关键字【面向对象的第二大特征——继承】
[vue3] 富文本
 【目标检测算法】YOLO-V1~V3原理梳理
原文地址：https://blog.csdn.net/Sheng_Q/article/details/133411677

背景：

1.html

1.1 html5网页结构

1.2 html标签中包括head标签和body标签：

1.3 在html中引入js：

1.4 在html中引入样式：

1.5 常见元素:块和内联

1.6 Dom原生语法

2.javascript

2.1 常用类型

2.1.1 String

2.1.2 Number

2.1.3 Boolean

2.1.4 数组

2.1.5 对象类型

2.1.6 typeof 运算符

2.2 空对象

2.3 变量和作用域

2.3.1 var关键字

2.3.2 let关键字

2.3.3 const关键字

2.4 字符串和JSON常见操作

2.5 if 和 switch-case;

2.6 try-catch异常处理;

2.7 for循环和while循环

2.8 与或非

2.9 是否相等;

3.css

3.1 盒子模型

3.1.1 内容content

3.1.2 内边距padding

3.1.3 边框border

3.1.4 外边距margin

3.2 定位与浮动

3.3 选择器

3.3.1 id选择器

3.3.2 类选择器

3.3.3 标签选择器

3.3.4 组合选择器

4.jquery

4.1 安装和引入

4.2 操作DOM

4.2.1 获取jquery的DOM对象

4.2.2 删除节点

4.2.3 获取/设置节点内容

4.2.4 设置样式

4.2.5 设置属性

4.2.6 隐藏与显示

4.2.7 添加子节点

4.2.8 获取子节点列表

4.3 事件机制

4.3.1 鼠标事件

4.3.2 键盘事件

4.4 ajax