mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4mobile wallpaper 5mobile wallpaper 6mobile wallpaper 7mobile wallpaper 8mobile wallpaper 9mobile wallpaper 10mobile wallpaper 11mobile wallpaper 12mobile wallpaper 13mobile wallpaper 14
4125 字
11 分钟
Web前端基础
2026-07-01

Web前端基础#

这份笔记覆盖了一条很完整的前端入门主线:先理解 Web 和 HTTP,再进入 HTML、CSS、JavaScript,最后补上 TypeScript 的基础类型系统。
重新整理后,它更适合作为一篇前端初学阶段可以反复翻阅的基础速查笔记。

一、先理解 Web 前端到底在做什么#

1. Web 是什么#

  • Web 即万维网(World Wide Web),可以通过浏览器访问网页和网站
  • 前端开发主要负责浏览器中展示出来的页面内容和交互效果

2. Web 标准由哪几部分组成#

Web 标准主要由 W3C(World Wide Web Consortium)等组织制定,核心可以分成三部分:

  • HTML:负责页面结构和内容
  • CSS:负责页面样式和布局
  • JavaScript:负责页面行为和交互

二、HTTP 是前后端通信的基础#

1. HTTP 是什么#

HTTP 全称 HyperText Transfer Protocol,即超文本传输协议,用来规定浏览器和服务器之间如何传输数据。

2. HTTP 的典型特点#

  • 基于 TCP,传输可靠
  • 基于请求-响应模型:一次请求对应一次响应
  • 是无状态协议:每次请求彼此独立,服务器默认不会记住上一次请求的状态

无状态的影响:

  • 缺点:多次请求之间不能天然共享数据
  • 优点:实现简单、处理速度快

3. HTTP 请求报文怎么组成#

HTTP 请求一般由三部分组成:

  • 请求行
  • 请求头
  • 请求体

示例:

POST /brand HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0
Accept: application/json, text/plain, */*
Content-Type: application/json;charset=UTF-8
Content-Length: 161
{"status":1,"brandName":"黑马","companyName":"黑马程序员"}

请求行#

请求报文第一行,格式如下:

请求方式 资源路径 协议版本

例如:

GET /brand/findAll?name=OPPO&status=1 HTTP/1.1

请求头#

从第二行开始,格式通常是 key: value

常见请求头:

请求头作用
Host请求的主机名
User-Agent浏览器或客户端信息
Accept告诉服务器当前客户端能接收的数据类型
Accept-Language告诉服务器客户端偏好的语言
Accept-Encoding告诉服务器客户端支持的压缩方式
Content-Type请求体的数据类型
Content-Length请求体大小,单位是字节
Cookie携带会话相关信息

请求体#

  • GET 请求通常没有请求体,请求参数一般拼接在 URL 后面
  • POST 请求通常把数据放在请求体中

GETPOST 的区别#

对比项GETPOST
参数位置一般拼接在 URL 后一般放在请求体中
请求体通常没有通常有
大小限制受 URL 长度影响一般更灵活
典型用途查询数据提交数据

4. HTTP 响应报文怎么组成#

HTTP 响应也由三部分组成:

  • 响应行
  • 响应头
  • 响应体

示例:

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 120
Connection: keep-alive
[{"id":1,"brandName":"阿里巴巴","companyName":"腾讯计算机系统有限公司"}]

响应行#

响应报文第一行,通常包含:

  • 协议版本
  • 状态码
  • 状态描述

响应头#

从第二行开始,格式也是 key: value

常见响应头:

响应头作用
Content-Type响应内容类型,例如 text/htmlapplication/json
Content-Length响应体长度
Content-Encoding响应压缩方式,例如 gzip
Cache-Control缓存策略
Set-Cookie告诉浏览器设置 Cookie

响应体#

响应体是服务器返回的真正数据,例如:

  • HTML 页面
  • JSON 数据
  • 图片、音频、视频等二进制资源

5. 先记住这些常见状态码#

状态码分类#

范围含义
1xx请求已接收,继续处理
2xx请求成功
3xx重定向
4xx客户端错误
5xx服务器错误

常见状态码示例#

状态码含义说明
200OK请求成功
302Found临时重定向
304Not Modified资源未修改,可使用缓存
400Bad Request请求有语法或参数错误
403Forbidden没有权限访问
404Not Found请求资源不存在
405Method Not Allowed请求方式不被允许
429Too Many Requests请求过于频繁
500Internal Server Error服务器内部错误
503Service Unavailable服务器暂时不可用

三、HTML 负责页面结构和内容#

1. HTML 是什么#

HTML 全称 HyperText Markup Language,即超文本标记语言。

  • “超文本”表示它不仅能描述文本,还能描述图片、音频、视频、链接等内容
  • “标记语言”表示它通过标签来组织页面结构

2. HTML 的基本结构#

常见页面骨架如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

说明:

  • <!DOCTYPE html>:声明当前文档是 HTML5
  • <html>:整个页面根标签
  • <head>:页面的配置信息
  • <body>:页面真正展示的内容

3. HTML 的基本特点#

  • 标签不区分大小写,但实际开发中建议统一小写
  • 属性值既可以用单引号,也可以用双引号
  • 语法相对宽松,但仍然建议写规范

4. 常用文本与结构标签#

标签作用
<h1><h6>标题
<p>段落
<br>换行
<hr>分割线
<b> / <strong>文本加粗
&nbsp;空格占位符

示例:

<h1>标题一</h1>
<p>这是一个段落。</p>
<hr>
<strong>这是一段加粗文本</strong>

5. 图片、音频、视频与超链接#

图片 img#

<img src="image/1.jpg" width="80%" alt="示例图片">

常用属性:

  • src:资源路径
  • width:宽度
  • height:高度
  • alt:图片无法加载时的替代文本

路径说明:

  • ./:当前目录
  • ../:上一级目录

音频与视频#

  • <audio>:音频
  • <video>:视频

超链接 a#

<a href="https://www.yuanshen.com/#/" target="_blank">原神官网</a>

常用属性:

  • href:目标地址
  • target:打开方式
  • _self:当前页面打开
  • _blank:新页面打开

6. 表格#

表格适合展示行列结构的数据。

常用标签:

  • <table>:整个表格
  • <tr>:一行
  • <th>:表头单元格,默认加粗且居中
  • <td>:普通单元格

常用属性:

  • border:边框宽度
  • width:表格宽度
  • cellspacing:单元格间距

示例:

<table border="1" cellspacing="0" width="600">
<tr>
<th>序号</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
</tr>
</table>

7. 表单#

表单用于采集用户输入的数据,例如登录、注册、搜索。

表单标签 form#

<form action="/login" method="post">
用户名:<input type="text" name="username">
<br><br>
密码:<input type="password" name="password">
<input type="submit" value="提交">
</form>

常用属性:

  • action:表单提交地址
  • method:提交方式,常见是 getpost

常见表单项#

  • <input>:输入项,通过 type 决定类型
  • <select>:下拉框
  • <option>:下拉框选项
  • <textarea>:多行文本输入

常见 input 类型:

  • text
  • password
  • radio
  • checkbox
  • file
  • submit
  • button

8. 块级元素与行内元素#

块级元素#

常见代表:div

特点:

  • 默认独占一行
  • 宽度默认撑满父元素
  • 高度默认由内容撑开

行内元素#

常见代表:span

特点:

  • 一行可以出现多个
  • 宽高默认由内容决定
  • 默认情况下直接设置宽高通常不生效

四、CSS 负责页面样式和布局#

1. CSS 是什么#

CSS 全称 Cascading Style Sheets,即层叠样式表,用来控制页面外观和布局。

2. CSS 的三种引入方式#

行内样式#

直接写在标签的 style 属性里。

<h1 style="color: black;">标题一</h1>

特点:书写方便,但不利于复用和维护,不推荐大量使用。

内部样式#

写在页面的 <style> 标签中,通常放在 <head> 里。

<style>
h1 {
color: red;
}
</style>

外部样式#

写在独立的 .css 文件中,再通过 <link> 引入。

<link rel="stylesheet" href="news.css">
h1 {
color: #00f;
}

3. 常见选择器#

  • 元素选择器:直接写标签名,例如 h1
  • 类选择器:以 . 开头,例如 .title
  • ID 选择器:以 # 开头,例如 #time

优先级从低到高通常是:

元素选择器 < 类选择器 < ID 选择器

4. 常用样式属性#

属性作用
color文本颜色
font-size字体大小
text-decoration文本修饰,例如去掉下划线
line-height行高
text-indent首行缩进
text-align文本水平对齐
width / height宽高
background-color背景颜色
border边框
margin外边距
padding内边距

5. 盒子模型#

页面中几乎所有元素都可以看成一个盒子。

盒子模型由四部分组成:

  • content:内容区域
  • padding:内边距
  • border:边框
  • margin:外边距

理解盒子模型后,更容易处理:

  • 元素间距
  • 内容大小
  • 页面布局

6. divspan 的常见区别#

标签默认类型特点
div块级元素独占一行,常用于布局
span行内元素一行可多个,常用于包裹局部文本

五、JavaScript 负责交互和行为#

1. JavaScript 是什么#

JavaScript 是运行在浏览器中的脚本语言,主要用来控制网页行为,让页面具备交互能力。

特点:

  • 跨平台
  • 弱类型
  • 解释执行

2. JavaScript 的引入方式#

内部脚本#

<script>
alert('Hello JavaScript');
</script>

外部脚本#

<script src="demo.js"></script>

说明:

  • 外部 JS 文件中只写 JavaScript 代码,不写 <script> 标签
  • <script> 标签不能自闭合
  • 通常把脚本写在 body 底部,能减少对页面渲染的阻塞

3. JavaScript 基本语法#

  • 区分大小写
  • 分号可以省略,但建议保持统一
  • 使用 {} 表示代码块

注释:

  • 单行注释://
  • 多行注释:/* ... */

4. 常见输出方式#

  • window.alert():弹出警告框
  • document.write():向页面写内容
  • console.log():向控制台输出

5. 变量与命名规则#

推荐使用:

  • const:值不需要重新赋值时使用
  • let:值需要重新赋值时使用

命名规则:

  • 可以由字母、数字、下划线 _、美元符号 $ 组成
  • 不能以数字开头
  • 建议使用驼峰命名法,例如 userName

6. 数据类型#

JavaScript 中常见数据类型:

  • number
  • string
  • boolean
  • null
  • undefined
  • object

可以通过 typeof 查看变量类型:

console.log(typeof 123); // number
console.log(typeof 'hello'); // string

7. 运算符与类型转换#

常见比较方式:

  • ==:会进行类型转换
  • ===:不会进行类型转换,实际开发更推荐使用
var a = 10;
console.log(a == '10'); // true
console.log(a === '10'); // false

常见转换规则:

  • 字符串转数字:若无法转成数字,结果是 NaN
  • 数字转布尔:0NaNfalse
  • 字符串转布尔:空字符串为 false
  • nullundefined 转布尔都为 false

8. 函数#

函数是一段可以重复调用的代码。

定义方式 1#

function add(a, b) {
return a + b;
}

定义方式 2#

var add = function (a, b) {
return a + b;
};

说明:

  • JavaScript 函数参数不需要写类型
  • 返回值类型也不需要提前声明
  • 函数调用时可以传入任意个参数

9. 常见对象#

数组 Array#

定义方式:

var arr1 = new Array(1, 2, 3);
var arr2 = [1, 2, 3];

常用属性与方法:

  • length:数组长度
  • push():尾部追加元素
  • splice():删除或替换元素
  • forEach():遍历数组
arr2.forEach(function (item) {
console.log(item);
});

字符串 String#

var str = 'hello';
console.log(str.length);
console.log(str.charAt(0));
console.log(str.indexOf('e'));
console.log(str.trim());
console.log(str.substring(1, 3));

自定义对象#

var user = {
name: '张三',
age: 18,
eat: function () {
alert('hello');
}
};
console.log(user.name);
user.eat();

对象方法也可以简写为:

var user = {
eat() {
alert('hello');
}
};

JSON#

JSON 是一种常见的数据交换格式。

var jsonStr = '{"name":"Jerry","value":1}';
var obj = JSON.parse(jsonStr);
var str = JSON.stringify(obj);

10. BOM#

BOM 全称 Browser Object Model,即浏览器对象模型。

常见对象:

  • window
  • navigator
  • screen
  • history
  • location

常用方法:

alert('提示');
confirm('是否继续?');
setInterval(function () {
console.log('周期执行');
}, 2000);
setTimeout(function () {
alert('延迟执行');
}, 3000);

location 常用属性:

  • href:当前地址,也可以用来跳转页面

11. DOM#

DOM 全称 Document Object Model,即文档对象模型。

作用:

  • 修改 HTML 内容
  • 修改 HTML 样式
  • 对事件作出响应
  • 添加或删除节点

常用获取元素方式:

document.getElementById('title');
document.getElementsByTagName('div');
document.getElementsByName('hobby');
document.getElementsByClassName('cls');

12. 事件监听#

常见事件:

  • onclick:点击
  • onblur:失去焦点
  • onfocus:获得焦点
  • onload:页面或资源加载完成
  • onsubmit:表单提交
  • onkeydown:键盘按下
  • onmouseover:鼠标移入
  • onmouseout:鼠标移出

绑定方式 1:标签属性#

<input type="button" value="提交" onclick="onSubmitClick()">
<script>
function onSubmitClick() {
alert('提交');
}
</script>

绑定方式 2:DOM 属性#

<input type="button" value="返回" id="btn2">
<script>
document.getElementById('btn2').onclick = function () {
alert('返回');
};
</script>

六、JavaScript 进阶先抓住 ES6 常用能力#

1. varletconst#

var 的变量提升#

  • var 声明会提升到当前作用域顶部
  • 赋值不会提升
  • 声明前访问不会报错,但值通常是 undefined
console.log(name); // undefined
var name = '张三';

等价理解为:

var name;
console.log(name);
name = '张三';

let / const 与暂时性死区#

  • letconst 在声明前不能访问
  • 从作用域开始到声明语句之前,这段区域叫暂时性死区(TDZ)
console.log(name); // ReferenceError
let name = '张三';

三者对比#

特性varletconst
声明前访问undefined报错报错
块级作用域不支持支持支持
重复声明允许不允许不允许
重新赋值可以可以不可以

使用建议#

  • 默认优先使用 const
  • 需要重新赋值时使用 let
  • 不建议在新代码中继续使用 var

2. 循环中的 var 陷阱#

for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i); // 5 5 5 5 5
}, 1000);
}
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i); // 0 1 2 3 4
}, 1000);
}

原因:

  • var 没有块级作用域
  • let 每次循环都会形成独立作用域

3. 模板字符串#

模板字符串使用反引号 ` 包裹。

优点:

  • 支持多行
  • 支持变量插值
  • 可读性更好
const name = '张三';
const age = 25;
const info = `姓名:${name}
年龄:${age}`;

4. 箭头函数#

箭头函数是 ES6 提供的简洁函数写法。

const add = (a, b) => a + b;
const double = x => x * 2;
const sayHi = () => console.log('Hi');

特点:

  • 写法更简洁
  • 很适合回调函数
  • this 继承外层作用域

5. 常用数组方法#

forEach()#

用于遍历数组。

const fruits = ['苹果', '香蕉', '橙子'];
fruits.forEach((fruit, index) => {
console.log(`${index}: ${fruit}`);
});

map()#

把旧数组转换成新数组。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

filter()#

筛选满足条件的元素。

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);

find()#

查找第一个满足条件的元素,找不到返回 undefined

const users = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
];
const user = users.find(u => u.id === 2);

some()every()#

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(n => n % 2 === 0);
const allPositive = numbers.every(n => n > 0);

reduce()#

适合做求和、统计、归并。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

6. 解构赋值#

对象解构#

const person = { name: '张三', age: 25, city: '北京' };
const { name, age } = person;
const { name: userName } = person;
const { country = '中国' } = person;

优点:

  • 一次提取多个属性
  • 支持重命名
  • 支持默认值

7. 扩展运算符 ...#

常见用途:

  • 展开数组或对象
  • 合并多个数组或对象
  • 进行浅拷贝
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
const user = { name: '张三', age: 25 };
const newUser = { ...user, city: '北京' };

注意:

  • ... 做的是浅拷贝
  • 嵌套对象或数组中的引用不会被真正复制

8. 条件简化写法#

三元运算符#

const result = score >= 60 ? '及格' : '不及格';

逻辑或 ||#

const name = userInput || '匿名用户';

逻辑与 &&#

isLoggedIn && showMessage();

空值合并 ??#

const value = input ?? '默认值';

区别:

  • || 会把 0false、空字符串也当成假值
  • ?? 只会处理 nullundefined

9. 异步编程#

异步编程允许耗时任务在后台执行,而不阻塞主线程。

常见场景:

  • 网络请求
  • 定时器
  • 文件读写
  • 用户交互事件

Promise#

Promise 表示异步操作的最终结果。

三种状态:

  • pending:等待中,表示异步任务还没有拿到最终结果
  • fulfilled:已完成,表示异步任务执行成功,通常会调用 resolve()
  • rejected:已拒绝,表示异步任务执行失败,通常会调用 reject()

可以把 Promise 理解成“先挂起,后出结果”的过程:

  • Promise 创建出来时,默认先处于 pending
  • 如果任务成功完成,状态会从 pending 变成 fulfilled
  • 如果任务执行失败,状态会从 pending 变成 rejected

要特别注意:Promise 的状态一旦从 pending 变成 fulfilledrejected,就不会再改变,也不能再回到 pending
也就是说,它的状态流转只有两条路径:

  • pending -> fulfilled
  • pending -> rejected

在实际使用中:

  • then() 主要处理成功结果
  • catch() 主要处理失败结果
  • finally() 不管成功还是失败都会执行,常用于收尾操作
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
resolve('操作成功');
} else {
reject('操作失败');
}
}, 1000);
});
promise
.then(result => console.log(result))
.catch(error => console.error(error));

Promise 的优点:

  • 避免回调地狱
  • 错误处理更统一
  • 代码结构更清晰

async / await#

这是基于 Promise 的更推荐写法。

async function fetchData() {
try {
const response = await fetch('https://api.example.com/users');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('请求失败:', error);
}
}
fetchData();

七、TypeScript 是对 JavaScript 的类型增强#

1. 什么是 TypeScript#

TypeScript 可以理解为:

TypeScript = JavaScript + 静态类型系统

特点:

  • 是 JavaScript 的超集
  • 代码不能直接在浏览器运行
  • 需要先编译成 JavaScript

2. 为什么使用 TypeScript#

  • 编译阶段就能发现很多类型错误
  • IDE 自动补全和提示更强
  • 重构更安全
  • 类型本身也能当作文档

3. TypeScript 与 JavaScript 的关系#

JavaScript 代码 -> 可直接运行
TypeScript 代码 -> 编译成 JavaScript -> 再运行

4. 常用类型#

let count: number = 10;
let userName: string = '张三';
let isAdult: boolean = true;
let numbers: number[] = [1, 2, 3];
let ages: Array<number> = [18, 25, 30];
let value: string | number = 'hello';
value = 123;

5. 特殊类型#

any#

表示任意类型,但会失去类型检查的优势,能不用尽量不用。

let anything: any = '字符串';
anything = 123;
anything = true;

void#

表示函数没有返回值。

function sayHello(): void {
console.log('Hello');
}

never#

表示函数不会正常结束,例如直接抛异常或无限循环。

function error(message: string): never {
throw new Error(message);
}

6. 类型推断#

TypeScript 会根据初始值自动推断类型。

let name = '张三'; // string
let age = 25; // number
let isAdult = true; // boolean

下面这类代码会报错:

let name = '张三';
// name = 123; // 报错

什么时候需要显式标注类型#

  • 变量初始化时类型不明确
  • 函数参数和返回值
  • 对象字面量结构较复杂
  • 需要联合类型时
let userId: string | number;
function add(a: number, b: number): number {
return a + b;
}
const user: {
name: string;
age: number;
} = {
name: '张三',
age: 25
};

7. letconst 的推断差异#

let count = 0; // number
count = 10;
const PI = 3.14;
const title = '张三';

说明:

  • let 更适合普通变量
  • const 更适合常量和值不变的场景

8. 接口 interface#

接口用于描述对象的结构。

interface Person {
name: string;
age: number;
email?: string;
}
const user: Person = {
name: '张三',
age: 25
};

说明:

  • email?: string 表示可选属性
  • 缺少必填属性会报错

9. 只读属性#

interface Product {
readonly id: number;
name: string;
price: number;
}
const product: Product = {
id: 1,
name: '苹果',
price: 9.9
};
// product.id = 2; // 报错
product.name = '香蕉';

10. 用接口描述函数#

interface AddFunction {
(a: number, b: number): number;
}
const add: AddFunction = (a, b) => a + b;

也可以写成:

type AddFunction = (a: number, b: number) => number;

11. interfacetype 怎么选#

  • 定义对象结构,优先考虑 interface
  • 定义联合类型、函数类型别名、基础类型别名,优先考虑 type
  • 需要接口合并或 extends / implements 时,更适合 interface

12. 接口合并#

同名接口会自动合并。

interface User {
id: number;
name: string;
}
interface User {
email: string;
}

合并后等价于:

interface User {
id: number;
name: string;
email: string;
}

八、学习主线#

建议优先掌握下面这些内容:

  1. HTTP 请求与响应报文结构
  2. HTML 常用标签、表格、表单、块级元素与行内元素
  3. CSS 三种引入方式、选择器、盒子模型
  4. JavaScript 的变量、数据类型、函数、DOM、事件
  5. let / constvar 的区别
  6. 数组方法:mapfilterfindreduce
  7. 解构赋值、扩展运算符、箭头函数
  8. Promise 与 async / await
  9. TypeScript 的基础类型、类型推断、接口

九、这篇笔记最适合怎么用#

如果你正处在前端入门阶段,可以按下面这个顺序去消化:

  1. 先学会用 HTTP 理解浏览器和服务端是怎么通信的
  2. 再用 HTML 和 CSS 搭出结构与样式
  3. 接着通过 JavaScript 给页面加上交互行为
  4. 最后用 TypeScript 补上类型约束和工程化基础

这样回头再学 React、Vue、接口联调和前后端分离时,会更容易把新知识挂到已有主线上。

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

Web前端基础
https://wyz.sakura-v.cn/posts/bitstream-summer/web前端基础/
作者
WYZ
发布于
2026-07-01
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录