[web前端] 1. 大纲

「已注销」

已于 2022-06-11 10:56:19 修改

阅读量197

点赞数

分类专栏：前端文章标签：前端

于 2021-05-03 15:33:55 首次发布

本文链接：https://blog.csdn.net/besthezhaowen/article/details/116377267

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 第一阶段（后端、服务器端）

1.4 NodeJS（服务器）

1.4.1 语法规范

1. 区分大小写

2. 语句末尾的分号可写可不写

3. 单行注释：//，多行注释：/* */

1.4.2 变量常量

1. 声明变量

var x = 1;

练习：

声明多个变量，分别保存员工编号、姓名、性别、生日、工资、部门编号。

var empNo = 123
var empName = 'zhangsan'
var empSex = 'male'
var empBirthDay = '2012-12-24'
var empSalary = 9876.53
var empDepNo = 12
console.log(empNo, empName, empSex, empBirthDay, empSalary, empDepNo)
//123 zhangsan male 2012-12-24 9876.53 12

2. 关键字

3.预留关键字

class， int，float...

4. 重新赋值

以下不会报错

var a = 1
var a = 2
a = 4
a = 'a'

var b=5, c=7, d;

undefined：

这是作者不经意出现的一个错误，但作者不承认（按理来说应该是null），后来就一直沿用到现在

var a;
console.log(a) //undefined

5. 常量

const PI = 3.14

1.4.3 数据类型

1. 原始类型（没有日期类型）

（1）数值：

整型（4byte），浮点型（8byte）

（2）字符串

不区分单引号和双引号

查询字符的unicode码：

var a ="中";
console.log(a.charCodeAt()) //20013

（3）布尔

true, false

（4）未定义（undefined）

只有一个值undefined

（5）空（null）

只有一个值null

var a = null;
console.log(a, typeof a) //null object

2. 引用类型（函数，对象）

3. 检测数据类型

var a = 3;
console.log(typeof a) //number

4. 数据类型转换

（1）隐式转换

加法运算遵循以下两个规则：

从左到右

字符串 > 数值 > 布尔

1）数字 + 字符串

var a = 1;
var b = 1 + '2'
console.log(b, typeof b) //12 string

2）数字 + 布尔

var a = 1;
var b = true
var c = a + b
console.log(c, typeof c) //2 number

3）布尔 + 字符串

var a = 'a';
var b = true
var c = a + b
console.log(c, typeof c) //atrue string

- * / 算法遵循以下规则：

两边尽力转成数值然后进行计算

var a = '2';
var b = 1
var c = a - b
console.log(c, typeof c) //1 number

如果无法转成数值，则结果为NaN

var a = 'e';
var b = 1
var c = a - b
console.log(c, typeof c) //NaN number

（2）强制转换

1）强制转换为数值型

var a = '12';
var b = Number(a)

console.log(b, typeof b) //12 number

Number(undefined) //NaN

Number(null) //0

2）强制转换为整型

会将前导数值转成整型

undefined，null，bool返回NaN

var a = '32e';
var b = parseInt(a)
console.log(b, typeof b) //32 number

3）强制转换为浮点型

parseFloat

4）数值，布尔转换成字符串

var a = true;
var b = a.toString()

console.log(b, typeof b) //true string

1.5 运算符

1.三等于（===）

类型相同，数值相同才为true

var a = true;
var b = 1;

console.log(a == b);   //true
console.log(a === b);  //false
console.log(a = b);    //1

2. 浏览器端函数（NodeJS没有）

1）警示框

alert('msg')

2）提示框

var a = prompt()
console.log(a)

var b = prompt('pls input your password')
console.log(b)

1.6 函数

1.6.1 分类

系统函数：isNaN/parseInt/parseFloat/Number/prompt/alert

自定义函数

1.6.2 格式

function 函数名称(参数列表){
    函数体
}

示例

function sum (a, b){
	return a + b
}

console.log(sum(1,2)) //3

函数定义的形参和调用函数时传递的实参个数可以不一致，如果实参个数少，则剩余的形参默认设置为undefined；如果实参的个数多，则多余的实参不会在形参中获取，但可以通过其他方式获取传递的全部实参。

1.6.3 作用域

变量或者函数（函数内定义的函数是局部作用域函数）的可访问范围，分为两种：

1. 全局作用域：
在函数外部定义的变量

在函数内部未使用var定义的变量（不建议使用）

2. 局部作用域

在函数内部使用var定义的变量

变量提升：

js程序执行前，会将使用var声明的变量提升到所在作用域的最前边，但赋值还是在原来的位置。

函数提升：

js程序执行前，会将使用function声明的函数提升到所在作用域的最前边，在调用时才会真正执行函数内的代码。

1.6.4 匿名函数

没有名称的函数：function(){}

创建函数:

（1）函数声明

function fn1(){}

（2）函数表达式

var fn2 = function(){}

函数声明创建函数存在提升，可以在任意位置创建；函数表达式使用变量创建，只存在变量提升，不存在函数提升，只能先创建后调用，

全局污染问题：

不管是变量还是函数，它的名称都是全局的，会造成全局污染

1. 对于变量，可以将变量定义在局部环境中

2. 对于函数，可以使用匿名函数，并采用自调用方式进行匿名函数的调用

(function(){
	console.log(1) //1
})();

1.6.5 函数回调

将函数以实参的形式进行传递

function allMax(fmax, a, b){
	return fmax(a, b)
}

var a = allMax(function(a, b) {
	return a > b ? a : b
}, 1, 3)
console.log(a)

1.6.6 全局函数

全局对象下定义的函数

parseInt/parseFloat/isNaN/encodeURI/decodeURI/isFinite/eval

function max(a, b){
	return a > b ? a : b
}

console.log(eval('max(2, 8)')) //8

1.7 对象

1.7.1 分类

1. 内置对象

js提供的

2. 宿主对象：根据不同的执行环境进行划分的

DOM对象，http对象

3. 自定义对象

1.7.2 创建自定义对象

1. 对象字面量

var person = {
	ename:'xiaolan', 
	age:23,
	'user name' : 'a'
}
console.log(person)
console.log(person.ename)
console.log(person['user name'])

2. 内置构造函数

var car = new Object()
car.size = 100
console.log(car)

遍历属性：

var car = new Object()
car.size = 100
car.name = 'benz'
car.color = 'red'
for(var key in car){
	console.log(key, car[key])
}

判断某个属性是否存在：

console.log(car.brand === undefined)
console.log(car.hasOwnProperty('brand'))
console.log('size' in car)

对象的成员方法

var car = new Object()
car.size = 100
car.name = 'benz'
car.color = 'red'
car.run = function(city){
	console.log('car run in ' + city)
}

car.run('shanghai')

3. 自定义构造函数

1.8 数组

1.8.1 创建数组

1. 数组字面量

var emps = ['a', 'b', 'c']
emps[10] = 'd'

console.log(emps) //[ 'a', 'b', 'c', <7 empty items>, 'd' ]

2. 内置构造函数

var emps = new Array('a', 'b')
console.log(emps)

指定初始化大小

var emps = new Array(1)
emps[3] = 'c'
console.log(emps)

1.8.2 关联数组

以字符串作为下标，而不是以数字作为下标（索引）

var emps = []
emps['age'] = 12
console.log(emps) //[ age: 12 ]

还可以将关联数组和下标数组混用：

var arr = [1,2]
arr['name'] = 's'

console.log(arr) //[ 1, 2, name: 's' ]

1.8.3 for in遍历数组

var emps = []
emps['age'] = 12
emps['name'] = 'zhangsan'

for(var key in emps){
	console.log(key, emps[key])
}

//age 12
//name zhangsan

var emps = [1, 2, 3]

for(var key in emps){
	console.log(key, emps[key])
}

//0 1
//1 2
//2 3

1.8.4 数组API

1. 数组转字符串

toString

join(seperator)

2. 拼接(原数组不变，返回拼接后的新数组)

var arr3 = arr1.concat(arr2)

var arr3 = arr1.concat(arr2)
for(var key in arr3){
	console.log(key, arr3[key])
}

3. 截取（原数组不变，返回截取到的数组）

slice(start, end)

4. 删除（原数组被删除指定元素，返回被删除的元素数组）

splice(start, count[, addV1, addV2...])

5. reverse反转（原数组被反转）

6. sort排序（原数组被排序）

7. 末尾加元素（原数组中增加元素，返回增加元素后的数组长度）

push

8. 末尾删除元素（原数组中删除元素）

pop

9. 数组头部增加元素（原数组中增加元素）

unshift

10. 数组头部删除元素（原数组中删除元素）

shift

1.8.5 二维数组

var cities = []
cities['shanghai'] = ['pudong', 'minhang', 'huangpu']
cities['sz'] = ['futian', 'baoshui', 'xiangshan']

for(var key in cities){
	console.log(cities[key])
}

//[ 'pudong', 'minhang', 'huangpu' ]
//[ 'futian', 'baoshui', 'xiangshan' ]

1.9 字符串

字符串是原始类型，但是它有包装类型（对象）。js有三种包装对象：字符串包装对象（String），布尔包装（Boolean）对象和数值包装对象（Number）。

var str1 = new String(1) //String对象
var str2 = String(1)  //string类型
var str3 = '2'  //string类型

1. 字符串API

（1）字符长度

length

（2）获取字符

charAt(index)

[index]

（3）获取下标

indexOf

lastIndexOf

（4）大小写转换

toUpperCase

toLowerCase

（5）截取字符串

slice

substr

substring

（6）分割成数组

split

（7）匹配模式

1）search(/xxx/i) //正则表达式方式

2）match //只能使用正则

3）replace

1.10 Math对象

不需要创建，可以直接使用

1.11 Date对象

1. 对象创建

new Date('2022/3/15 10:36:56')

new Date(2022, 5, 19, 10, 36, 56) //月份 0 - 11

new Date() //当前系统时间

new Date(毫秒数)

2. API

d.getFullYear

d.getMonth //0 - 11

d.getDate

d.getHours

d.getMinutes

d.getSeconds

d.getMilliseconds

d.getDay //0 - 6

d.getTime //距离计算机元年的毫秒数

d.toLocaleString

d.toLocaleDateString

d.toLocaleTimeString

1.12 Number对象

Number() //转成数值

new Number() //转成数值对象

1. API

toFixed() //取小数点后的n位

1.13 Bolean对象

!!值 //转成boolean

1.14 异常

1. 错误类型

（1）语法错误（SyntaxError）：错误的使用了中文符号，缺少括号等，这种错误会导致所有代码不执行；

（2）引用错误（ReferenceError）：使用了未声明的变量，错误之前的代码会执行；

（3）类型错误（TypeError），属性当作方法使用，错误之前的代码会执行；

（4）范围错误（RangeError），数组的长度使用负数，错误之前的代码会执行；

2. 自定义错误

console.log(1)
var a = 'aa'
if(isNaN(a)){
	throw 'pls enter a num'
}

console.log(2)

3. 异常捕获

console.log(1)
try{
	var a = new Array(-1)
	
}catch(err){
	console.log('error: ' + err)
}

console.log(2)

==============NodeJS================

1.15 ES6

《ECMAScript6入门》

1.15.1 块级作用域

1. 先声明后使用

console.log(a)  //没有变量提升，ReferenceError
let a = 'a'

2. 大括号之内的位块作用域

1.15.2 参数默认值

function sum(a, b, c = 1){
	return a + b + c
}

console.log(sum(1, 3))

1.15.3 箭头函数

简化函数回调

let arr = [23,9,45,78,6]
console.log(arr.sort((a, b) => a - b)) //[ 6, 9, 23, 45, 78 ]

1.15.4 模板字符串

var year = 2022
var month = 5
var date = 7
var hour = 13
var dayOfWeek = '六'
console.log(`今天是${year}年${month}月${date}日${hour > 12 ? '上午' : '下午'}
   星期${dayOfWeek}
`)
//今天是2022年5月7日上午
//   星期六

1.16 NodeJS

ES对象 = 内置对象

1.16.1 nodejs特点

1.16.2 全局对象

1. global

（1）nodejs

全局对象：global

在交互模式下，定义的变量和函数，默认是全局的，可以使用global.xxx来调用；

但在脚本模式下，定义的变量和函数不是全局的，不能使用global.xxx调用

（2）js（浏览器）

全局对象：window

定义的变量和函数，默认是全局的，可以使用window.xxx来调用

查看API
1. nodejs.org/docs
2. nodejs.cn/docs

2. process：进程

process.arch //操作系统架构，如x64
process.platform  //操作系统，如win32
process.env  //环境变量
process.version //nodejs版本
process.pid  //当前进程编号
process.kill(4956)  //杀死进程4956

3. console

console.log()
console.info()
console.warn()
console.error()

//console耗时统计
console.time('for')
for(let i = 0; i < 10000; i++){
	i += 2
}

console.timeEnd('for')  //for: 0.164ms

4. buffer

var buf = Buffer.alloc(5, 'abcde')  //开辟长度位5的缓冲区，存储abcde
console.log(buf)  //<Buffer 61 62 63 64 65>
console.log(String(buf))  //abcde
console.log(buf.toString())  //abcde

5. 模块

一个独立的功能体

在NodeJS下，模块分成3大类：核心模块，自定义模块，第三方模块。

在NodeJS下，每个文件就是一个模块，NodeJS自动为每个文件添加构造函数，所有代码被该构造函数所包含：

//(function (exports, require, module, __filename, __dirname) {

  var a = 123;
  function fn(){}


//});

参数介绍：

1）exports：它是一个对象，他与module对象中的exports对象指向了同一个内存地址，也就是说，我们在导出模块中的变量和方法时，可以直接使用exports，也可以使用module.exports；

exports === module.exports

2）require：用于引入其他模块，它是一个方法；

3）module：它是一个对象，代表当前模块，它里面有一个重要的对象，即exports对象；

4）__filename：当前模块的全限定名（__dirname + 模块名称）

5）__dirname：当前模块的绝对目录路径

（1）编写07_1.js，内部引入07_2.js模块

引入模块时，首先会执行被因为模块里的所有代码，但默认情况下，被引入模块里定义的变量和函数都是局部的，因此无法在引入模块中直接使用。

可以使用module（代表当前模块对象）的exports对象来公开变量和函数，exports时module中的一个对象。

require中引入的模块如果是js模块，那么可以省略".js"

07_2.js
var name = 'Jerry';
function max(a, b){
	return a > b ? a : b;
}

module.exports.ename = name;  //等同于exports.ename = name;
module.exports.max = max;     //等同于exports.max= max;
  
========================================
07_1.js
var a = require('./07_2.js')  //等同于var a = require('./07_2')
console.log(a)           //{ ename: 'Jerry', max: [Function: max] }
console.log(a.ename)     //Jerry
console.log(a.max(1, 2)) //2

练习：

创建两个模块：main.js和cirecle.js, 在cirecle.js下创建两个函数，传递圆半径，计算圆的周长和面积，然后导出这两个函数。在main.js模块下引入cirecle.js模块，然后调用者两个函数。

function length(r) {return Math.PI * 2 * r}
function area(r) {return Math.PI * r * r}

module.exports.length = length;
module.exports.area = area;

//直接导出对象，这种情况下exports和module.exports不再相同
module.exports = {
	ename : 'john'
};

//直接导出匿名函数
module.exports.length = function(r){return Math.PI * 2 * r};

（2）引入目录形式模块

1）引入模块中需要使用require('./xxx')，然后会在该目录下寻找package.json

2）如果没有json文件，则查找该目录下是否有index.js，有则引入

3）如果有json文件，则按照json文件的描述进行引入

{
  "main" : "web.js"  //属性名称必需使用双引号，属性值如果是字符串，必需使用双引号
}

以路径开头

不以路径开头

文件模块

require('./circle.js')

常用于引入自定义模块，后缀.js可以省略

require('querystring')

常用于引入核心模块

目录模块

require('./02_2')

会到02_2目录下查找package.json文件中的main属性对应的文件，如果找不到则引入index.js，如果没有index.js则报错

require('02_2')

会到当前目录下的node_modules文件夹中查找02_2目录，如果找不到，则往上一级目录查找，直到顶级目录，最好没找到则报错。常用于引入第三方模块

6. 包和npm

包（package）就是一个目录模块，通常是第三方模块。

npm是管理包的工具(下载第三方包)，在安装nodejs时，npm也一起被安装了 npm -v

全球最大的第三方包下载地址：www.npmjs.com

第三方包下载安装过程：

npm init -y        //生成package.json文件，记录安装的包
npm install mysql  //安装好之后，会在package.json中记录dependencies信息
npm install        //在package.json所在的目录下执行该语句，会自动下载所有依赖包

7. 核心模块

（1）querystring

浏览器向服务器发送请求时传递数据的一种方式

const querystring = require('querystring')

var querystr = 'keyword=手机&enc=utf-8';
var obj = querystring.parse(querystr);
console.log(obj);
console.log(querystring.stringify(obj));

（2）url模块

parse(str) //解析url

format(obj) //将obj格式化成url

protocol
hostname
port
pathname
query

（3）全局函数

1）一次性定时器（js & nodejs）

var alert = global.setTimeout(() => console.log('aaa'), 3000);  //3000ms后执行function函数
clearTimeout(alert);  //清楚定时任务

2）周期性定时器（js & nodejs）

var timer = setInterval(回调函数，间隔毫秒数)
clearInterval(timer)

3）立即执行（nodejs）

var timer = setImmediate(回调函数)   //事件队列中执行回调函数
clearImmediate(timer)

nodejs是单线程语言，所有的代码必需顺序执行，但当遇到定时器的回调函数时，会将回调函数放入事件队列中，直到主程序的所有程序执行完毕，才会接着执行事件队列中的回调函数（回调函数中一般时比较耗时的逻辑）。

4. processTick（NodeJS）

process.nextTick(() => console.log(a)) //回调函数不会放入事件队列，而是放在主程序的最后

（4）fs模块

1）fs.stat(path, (err, stats) => {callback...}), var stats = fs.statSync(path)

2）fs.mkdir(path, err => {}), fs.mkdirSync()

同步方法如果报错会影响在它之后的代码执行，但异步方法因为是放在事件队列中，如果报错也只会影响异步函数自身。

3）fs.rmdir(path, err => {}), fs.rmdirSync()

4）fs.readdir(path, (err, result) => {}), var result = fs.readdir(path)

5）文件不存在，创建文件然后写入；如果文件存在，则清空文件，然后写入：

fs.writeFile(path, data, (err) => {})

6）追加写入：

fs.appendFile(path, data, (err) => {})

7）文件读取：

fs.readFile(path, (err, data) => {})

8）文件删除：

fs.unlink(path. err => {})

9）文件是否存在：

var exists = fs.existsSync(path)

10）文件流

1. 可读流

var stream = fs.createReadStream(path)

const fs = require('fs');

var stream = fs.createReadStream('a.txt');
stream.setEncoding('utf8');
stream.on('data', chunk => console.log(chunk)); //监听是否有数据事件
stream.on('end', () =>{})  //监听结束事件

2. 可写流

fs.createWriteStream(path) //往path写

readStream.pipe(writeStream) //将读流通过管道接入写流

（5）http协议

1）http.get(url, res => {})

const http = require('http');
http.get('http://www.baidu.com', res => {
	console.log(res.statusCode);
	res.on('data', chunk => console.log(chunk.toString()));
});

2）http服务端

const http = require('http');
var app = http.createServer();

app.listen(8080);//监听端口8080
app.on('request', (req, res) => {
	console.log(req.url, req.method, req.headers);
	//res.write('this is home page');
    res.writeHead(302, {Location:'http://www.baidu.com'});  //跳转

	res.end();  //结束并发送内容到客户端
});  //监听request事件

3）压缩

require("zlib");
var gzip = zlib.createGzip();'
fs.createReadStream(path).pipe(gzip).pipe(res);
res.writeHead(200, {
    "Content-Encoding" : "gzip",
    "Content-Type" : "text/html"
});

4）express

const express = require('express');
var app = express();
app.listen(8080);

app.get('/login', (req, res) => {
    console.log(req.method, req.url, req.headers);  //获取req的请求方法，url和请求头信息
    console.log(req.query);  //获取req的请求信息
    console.log(req.query);  //获取req的请求信息
    res.send(content);  //返回string内容
});

app.get('/login', (req, res) => {
    res.sendFile(path);  //返回文件
});

app.get('/index', (req, res) => {
    res.redirect(url);  //重定向
});

app.get('/detail/:price', (req, res) => { //路径参数
    console.log(req.params);
});

app.post('/login', (req, res) => {  //post请求
    req.on('data', mydata => console.log(querystring.parse(mydata.toString())));
    
    res.send('登录成功');
})

5）路由器

定义路由器：user.js

const express = require('express');

var router = express.Router();
router.get("/list", (req.res) => res.send('这是用户列表'));
router.get("/update", (req.res) => res.send('这是用户更新'));
...

module.exports=router;

web服务器引入router模块：web.js

const express = require('express');
const userRouter = require('./user');


var app = express();
app.listen(8080);

//挂载，在url前边加'/user'
app.use('/user', userRouter)

6）中间件

express的五个中间件：应用级中间件，路由级中间件，内置中间件，第三方中间件，错误处理中间件。

（1）应用级中间件：就是自定义写的中间件，使用时统一使用app.use()来使用中间件

const express = require('express');


var app = express();
app.listen(8080);

//第一个参数：拦截的url，也就是这个中间件给谁使用
//第二个参数：回调函数
app.use('/reg', (req, res, next) => {
    if(!req.params.username){
        res.send('用户名不能为空'); //验证不通过，直接返回
    } else {
        next(); //执行下一个中间件
    }
})

（2）内置中间件

//把所有的静态资源托管到public目录下，当浏览器请求静态资源会自动到public目录下寻找，不需要再创建单独的路由相应文件，如果没有这个中间件，需要使用res.sendFile(path)
//路径：1.绝对路径；2.相对于启动nodejs的路径
app.use( express.static('public') )

（3）第三方中间件

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({
    extended : false //不适用第三方的qs模块，而是使用核心模块querystring类解析查询字符串为对象
    
}));

app.post('/login', (req, res) => {
    console.log(req.body);  //获取body信息，且自动转成了对象
    res.send('登录成功');
});

获取请求参数总结：

7）数据库

const mysql = require('mysql');
var connection = mysql.createConnection({
    host : 'localhost',
    post : 3306,
    user : 'root',
    password : 'root',
    database : 'tedu'    
});

connection.connect();

connection.query('DELETE FROM emp WHERE eid = 3', (err, result) => {})
connection.query('INSERT INTO emp VALUES (?, ?, ?, ?)', [null, 'a', 1, 8000], (err, result) => {})

//直接将对象插入数据库
var emp = {
    ename : 'john',
    age : 12,
    dept : 'fast',
    salary : 1000000
};
connection.query('INSERT INTO emp SET ?', [emp], (err, result) => {});
connection.end();

（1）连接池

const mysql = require('mysql');
var pool = mysql.createPool({
    host : 'localhost',
    post : 3306,
    user : 'root',
    password : 'root',
    database : 'tedu'，
    connectionLimit : 20 //设置连接池大小，设置了这个值就不需要再连接了    
});
pool.query(sql, callback);

2. 第二阶段（前端核心技术）：

2.1 HTML5基础

html5被称为大前端技术，可以开发网页，app，桌面程序，数据可视化，VR...

2.1.1 标记

1. 双标记
<关键字>内容区域
内容区域中的内容是显示在页面上的数据

2. 单标记/空标记
<关键字/>或者<关键字>

2.1.2 嵌套

在一对标签中（内容区域）出现其他标记，从而性能功能叠加

<!--加粗并有超链接功能-->
<a href="">
    <b>aaa</b>
</a>

嵌套标签需要使用缩进展示，在前端中，一个缩进为2个空格。

2.1.3 属性和值

属性和值是对标签的修饰
1. 必需声明在开始标签中

<关键字 属性="值"></关键字>
<关键字 属性="值"/>

2. 一个标签可以有多个属性，属性间使用空格隔开

3. 属性值允许使用双引号，单引号或者不加引号，但推荐使用双引号

<html>
<header></header>
<body>
  <p align=center title="你很长寿" id='desc'>长得丑，活得久</p>

</body>
</html>

4. 属性是有分类的，并不是在任何标签下都能生效

（1）通用属性，标准属性

所有元素都能使用的属性，一共以下4中

title：鼠标悬停时显示的文本

id：定义元素在页面中的唯一标识

class：css中的类选择器

style：css中定义行内样式

2.1.4 注释

<!--注释-->

2.1.5 html学习

学习标签关键字及其功能
学习属性和值及其功能
学习嵌套关系

2.1.6 HTML文档结构

1. html文档构成

（1）文档类型声明

<!DOCTYPE html>  <!--标识这个要使用html5规则解析该文档-->

（2）网页结构

<html>
<head>
  <title>我的页面</title><!--定义网页标题-->
  <meta charset="utf-8"/>  <!--定义网页全局信息-->
  <!--乱码：1.html文档使用utf-8；2. meta设定utf-8-->
  <meta name="description" content=""/>  <!--方便百度搜索-->
  <meta name="Keywords" content=""/>
  <script></script>  <!--定义或引用js文件-->
  <style></style>  <!--定义网页内部样式-->
  <link>  <!--引用外部样式--> 
</head>
<body></body>
</html>

（3）body

1）专有属性：
bgcolor：背景颜色

text：文字颜色

（4）文本标记（***）

1）标题元素

    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

特点：字体加粗，独占一行，上下有垂直间距

属性：

align：设置标记内部内容水平对齐方式，left(default)/center/right.单独成行的标签都可以使用该属性

2）段落元素 paragraph

<p></p>

特点：独占一行，上下有垂直间距

p标签不允许嵌套块级元素（单独成行的标签）

属性：

align：设置标记内部内容水平对齐方式，left(default)/center/right

3）换行标记，水平标记

<br/>
<hr/>

hr属性：

size：设置水平线粗细，取值：5px

width：设置水平线宽度，取值：1000px，或者百分比，如50%，指占父元素宽度的百分比

align：水平线对齐方式

color：水平线颜色

4）预格式化标签

保留html代码中的换行和空格

5）特殊字符

空格： 

小于号：<

大于号：>

版权标记：©

注册商标：®

<!--©<科技有限>版权所有-->

<p>&copy;&lt;科技有限&gt;版权所有</p>

6）文本样式

加粗

斜体

<s></s> <del></del> 删除

下划线

上标（比如2的2次方）

小标

H5推荐使用有语义的标签

7）分区元素

块分区：div

用于做页面布局，数据逻辑分区，样式上并不能看出来。

独立成行。

行分区：span

    <a href="#">
        <span style="color:red">陶晶莹道歉</span>事件_百度百科
    </a>

8）元素显示方式

块级元素：独占一行，div, p, pre, h1-h6

行内元素：能够在一行内显示的元素，span，strong，b，em，...

行内块：

table：

flex：

2.1.7 图片和链接

1. 图片

<img src="图片路径/URL"/>

1）url：

绝对路径：

网络资源必需使用绝对路径

本机资源可以使用绝对路径，但在项目中不允许使用绝对路径，因为代码写在服务器，但运行在浏览器上，如果写成绝对路径，就需要浏览器存放图片的地址与服务器存放图片的地址相同。

相对路径：

参照系：访问资源的html文件。

兄弟关系，直接写文件名

子级目录，先进入兄弟文件夹，再引入文件

父级目录，先通过../进入父级文件夹，再引入文件

2）属性

src：source

title：鼠标悬停显示的内容

alt：图片资源出现错误时显示的内容

width：设置图片的宽度

height：设置图片的高度

2.链接

<a href="" target="_self"></a>

href：
  跳转的url, www.baidu.com
  要下载的文件, ../xxx.zip
  发邮件, mailto:xxx@163.com
  返回页面顶部，#
  执行js，javascript:alter(1)
  锚点，#xxx
target:
  _self：当前页面直接跳转，默认值
  —blank：在新页面跳转

（1）锚点

1）定义锚点（H4）：

<a name="xxx"></a>

在h5中可以不定义锚点，而是使用标签的id号直接作为调转锚点

2）链接到锚点：

<a href="#xxx"></a>

如果是连接到其他页面的锚点，需要写上对应的url

<a href="xxx.html#id"></a>

2.1.8 表格

<table>
    <tr>  <!--第1行-->
        <td></td>
        <td></td>
    </tr>
    <tr>  <!--第2行-->
        <td></td>
        <td></td>
    </tr>
</table>

1. table属性：

border: 边框
bordercolor: 边框颜色
width：表格宽度
height：表格高度
align：表格本身的对齐方式
bgcolor：表格背景色
cellpadding：单元格内边距，内边框到内容的距离
cellspacing：单元格外边距，边框到边框的距离

<table width="400px" height="400px"
           bgcolor="yellow" border="1px" align="center"
           cellpadding="5px" cellspacing="10px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>
    </table>

2. tr属性

align：设置整行单元格内容的水平对齐方式，如果单元格设置了值，该值会被覆盖
valign：设置整行单元格内容的垂直对齐方式，top，middle，bottom，如果单元格设置了值，该值会被覆盖
bgcolor：设置整行单元格的背景色，，如果单元格设置了值，该值会被覆盖

3. td属性

width：宽度，会影响整列，整列的数据都要保持一致
height：高度，会影响整行，整行的高度都要保持一致
由于这种特性，表格的渲染方式和其他标签的渲染方式不同，表格的渲染需要全加载全部数据到内存中，然后再一次性进行渲染
align：单元格的水平对齐方式
valign：单元格的垂直对齐方式
bgcolor：单元格背景色
colspan：跨列
rowspan：跨行

4. 不规则表格（跨行，跨列）

（1）跨列：colspan

从指定单元格开始，横向向右合并N个单元格，被合并的单元格需要被删除

（2）跨行：rowspan

从指定单元格开始，纵向向下合并N个单元格，被合并的单元格需要被删除

<table width="400px" height="400px"
           bgcolor="yellow" border="1px" align="center"
           cellpadding="5px" cellspacing="10px">
        
        <tr align="right" valign="top">
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr>
            <td  rowspan="2">5</td>
            <td>6</td>
        </tr>
        <tr>
            <td colspan="2">9</td>
        </tr>
    </table>

5. table的可选标签

1. 表格标题，紧跟在table标签之后
  caption
2. 行列标题：
  th：字体加粗，居中

6. 表格的复杂应用

（1）行分组

<table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
</table>

2.1.9 列表

1. 有序列表

<ol>
    <li></li>
    <li></li>
</ol>

ol属性：

type：标识类型，可选值：1, a, A, i, I

start：标识起始值

2.无序列表(页面布局)

<ul>
    <li></li>
    <li></li>
</ul>

属性：

type: disc, circle, square, none

3. 列表嵌套

1）列表中嵌套其他元素

2）列表中嵌套列表

4. 定义列表（对一个名词的解释使用的列表）

<dl>
    <dt>要解释的名词</dt>
    <dd>对名词的说明内容</dd>
</dl>

2.1.10 结构标记

用于网页布局。由于div可读性太差，h5新出了一堆结构标记，用于替代div布局，这些结构标记与div作用一摸一样，但是增加了可读性。

1. header：定义网页或者区域头部

2. footer：定义网页或者区域底部

3. nav：定义导航栏

4. section：定义网页主题

5. aside：定义侧边栏

6. article：定义文字相关内容，如论坛，回帖，用户评论

2.1.11 表单

1. 作用

提供可视化输入控件

收集用户输入信息，并提交请求给服务器（form表单会自动收集信息，然后发送给服务器；但是ajax需要手动收集数据。因此表单和ajax这两种方式是二选一，也就是使用了ajax就不要使用表单，使用了表单就不要使用ajax。）

2. form的组成

前端：提供表单控件，与用户交互的可视化控件

后端：后台的接口对提交的数据进行处理

3. form表单的使用

<form action="接口url" method="提交请求方法"></form>

（1）form属性

1. action
  定义表单提交时发送的动作（向哪个url发送请求）
  如果action不写，或者action没有值，默认把请求发给本页面
2. method
  定义表单的提交方式
  get（默认值），提交内容显示在地址栏，提交的数据大小有限制，最大2kb
  post：没有大小限制，提交的内容不会显示在地址栏
3. enctype
  指定表单的编码方式
  允许将什么样的数据提交给服务器
  （1）text_plain: 允许提交普通字符给服务器
  （2）multipart/form-data: 允许提交文件给服务器
  （3）application/x-www-form-urlencoded: 允许提交任意字符（&*=...）给服务器（文件不允许）

4. 表单控件

（1）分类

1. input标签
  基础9种，h5新标签10种
2. textarea标签
3. select,option标签，下拉选择框
4. 其他元素

（2）input标签

<input type=""/>

属性：

1）type：指定input元素的类型

2）name：为控件定义名称，且为传参的变量名，服务器端取值时会使用到，如果没有name属性，对应的值不会被传递

3）value：控件的值，就是传给服务器的值，它和name组成了键值对；在type为button时，value是按钮上显示的文本；

4）disabled：禁用，文本只读，不可修改，不可提交；它是无值属性，也就是可以不需要赋值，也可以赋值为"disabled".

（3）input详解

1）文本框（type="text", 默认类型）和密码框（type="password"）

特有属性：

maxlength：设置输入的最大长度

readonly：只读，不能改，属于无值属性；可提交（disabled不能提交）

placeholder：占位符，用作提示，用户输入时会自动清空

2）按钮相关：submit，reset，button

submit：将表单种的数据收集整理，并发送给服务器。H5使用button标签替代了submit标签

reset：重置，将当前表单恢复到初始状态

button：按钮，没有功能，一般配合事件触发js脚本

3）单选框（type="radio"）和复选框（type="checkbox"）

name属性还具有分组功能，相同name属性的单选框只能择一选中，且必需设置value属性才能正确传值。

checked：无值属性，就是默认选中

4）隐藏域（type="hidden"）

需要提交给服务器，但是不想给用户展示。

5）文件选择框（type="file"）

form的method必需使用post，enctype必需使用multipart/form-data

特有属性：

multiple：无值属性，可以一次性上传多个文件

（4）多行文本域

textarea

特有属性：

rows, cols, 不精确，根据计算机硬件不同会有不同展示

（5）下拉框

<select name="city">
    <option>上海</option>
    <option>北京</option>
</select>

1. select属性
（1）name
（2）size：选择框内显示几条可选项
（3）multiple：可多选


提交时，使用的是select的name属性作为key；
如果option没有value属性，那么提交的值为option的内容；
如果option有value属性，那么提交的值为option标签的value属性值

（6）其他元素

1）label：替代form中的span标签，文本和表单控件的关联（点击文本也可以选中），

2）fieldset：会使用边框框起来，还可以使用legend标签为fieldset创建标题

3）iframe（浮动框架）：在一个html中引入其他html文本

<iframe src="header.html" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>

（7）H5 input元素

email, search, url, tel, number(属性max, min, step), range(属性max, min, step), color, date, month, week

（2）AJAX

（3）CSS3

（4）bootStrap（简化css3开发）

3. 第三阶段（前端进阶技术）：

（1）JS高级（难）

（2）DOM&BOM

（3）JQuery

（4）VueJS

4. 第四阶段（H5移动开发）：

（1）HTML5

（2）微信开发

（3）HybridAPP

5. 第五阶段（框架技术）：

（1）AngularJS

（2）ReactJS

（3）Python

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[web前端] 1. 大纲

目录1. 第一阶段（服务器端）：2. 第二阶段（前端核心技术）：3. 第三阶段（前端进阶技术）：4. 第四阶段（H5移动开发）：5. 第五阶段（框架技术）：1. 第一阶段（服务器端）：（1）JS基础（2）NodeJS2. 第二阶段（前端核心技术）：（1）HTML （2）AJAX （3）CSS （4）bootStrap3. 第三阶段（前端进阶技术）：（1）JS高级（2）DOM&amp.........
复制链接

扫一扫