web前端开发，零基础入门到精通，收藏这篇就够了

最新推荐文章于 2026-02-04 06:29:50 发布

原创最新推荐文章于 2026-02-04 06:29:50 发布 · 769 阅读

29 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

计算机

程序员

前端

1. 概述

    Web 前端开发是构建和优化网站用户界面的过程，主要包括实现用户界面的结构（HTML）、样式（CSS）和交互（JavaScript）功能。前端开发的目标是确保网站在各种设备和浏览器上都能良好地运行，并提供最佳的用户体验。

1.1 Web前端开发概述

Web	即Web系统，指以网站形式呈现并通过浏览器进行访问的系统，它旨在实现特定的功能或服务。
前端	网页上为用户呈现的部分。
开发	即代码编写。

1.2 网站与网页

网站 web site	网页 web page
互联网上用于展示特定内容的相关网页的集合。	网站中的一页，一个网站中的网页通过“超链接”的方式被组织在一起。

    **主页 homepage**：进入网站看到的第一个网页，主页的文件名通常是index。

    **网页元素**：Logo站标、导航栏、文字超链接、banner广告横幅、表单等。

    **网站**：是一个包含多个网页文件及相关资源的文件夹。

    **网页**：是网站中的单个文件，通常以HTML格式存在。

    **浏览器**：负责解析网页源代码，并将其渲染为可视化的网页内容。

1.3 Web前端开发技术

结构：HTML	样式：CSS	行为：JavaScript
从语义的角度，描述页面结构	从审美的角度，美化页面	从交互的角度，提升用户体验

    前端技术标准：W3C(万维网联盟: the World Wide Web Consortium)

    W3C标准：[W3C](https://www.w3.org/ "W3C")

    W3C教程：[w3school 在线教程](http://www.w3school.com.cn/ "w3school 在线教程")

    MDN :  [学习 Web 开发 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn "学习 Web 开发 | MDN")

2. HTML基础

2.1 HTML概述

2.1.1 HTML语言

    HTML（HyperText MarkUp Language）:"**超文本标记语言**"，它是制作网页的标准语言。

    注：**HTML不区分大小写**，<div>, <DIV> , 和 <DiV>在HTML中都被视为相同的标签。HTML5规范建议使用小写字母，这样可以保持代码一致性并提升可读性。

2.1.2 HTML标签、元素

    HTML标签或元素是由**尖括号**包围的标识符，例如<title>, 它们通常成对出现，包括一个**开始标签**和一个**结束标签**，用于定义和包含网页中的特定内容或功能。

2.1.3 HTML标签、属性

    HTML标签可以包含多个属性，**属性之间的顺序不影响其功能**。每个属性由名称和值组成，名称和值之间用等号分隔，属性之间用空格分隔。即使属性的顺序不同，浏览器仍会按照相应的规则正确解析和呈现这些属性。

2.2 HTML文件结构

2.2.1 HTML

    **.htm** 或 **.html** 文件

2.2.2 HTML5

2.3 字符集与编码

    字符（Character）：文字、符号

    字符集（Charaset）：字符的集合

    编码：将字符和二进制码对应起来

ASCⅡ	数字、英文字母、符号
GB2312	简体中文
Unicode	所有语言
UTF-8	所有语言，占用空间更小

    注：**乱码问题**

    当源文件保存时的编码，与源文件声明中<meta charset="编码方式">，编码方式不一致时，就会出现乱码问题。

2.4 HTML 常用标签

标题	h1~h6
段落	p
段内换行	br
空格字符
预留格式	pre
行内组合	span
水平线	hr
注释	<!-- 注释内容 -->
超链接	a
插入图片	img
区域	div
列表	ul ol li
表格	table tr td
表单	form

    表单是一个用于收集用户信息的区域，通常包含多种输入元素，以便用户填写和提交数据。

常见的表单元素包括：

文本框：用于输入单行文本。
按钮：用于触发提交或其他操作。
单选按钮：允许用户从多个选项中选择一个。
复选框：允许用户选择一个或多个选项。
下拉列表：提供一个可展开的列表，让用户从中选择一个选项。

文本域：用于输入多行文本，例如评论或反馈。

这些元素共同构成了一个完整的表单，使用户能够方便地输入和提交信息。

2.5 Web语义化

    **Web语义化**指的是在网页设计和开发中使用具有明确意义的HTML标签，以便浏览器和搜索引擎更好地理解网页内容的结构和含义。这种做法不仅有助于提高网页的可访问性和搜索引擎优化（SEO），还使得代码更加清晰和易于维护。

常见的Web语义化标签包括：

<header>：定义文档或部分的头部区域，通常包含网站的导航、标题或标识。
<nav>：定义导航链接的区域，通常包含站点的主要导航菜单。
<main>：定义文档的主要内容区域，通常是页面的核心内容部分，与侧边栏、头部和底部区域区分开。
<article>：定义独立的内容块，如文章、博客帖子或新闻报道，通常可以单独分发和重用。
<section>：定义文档中的一个章节或部分，通常用于将内容分成逻辑组。
<aside>：定义与主要内容间接相关的附加信息，如侧边栏、广告或引用。
<footer>：定义文档或部分的底部区域，通常包含版权信息、联系信息或版权声明。

3. CSS

3.1 基本概念

    **CSS（Cascading Style Sheets，层叠样式表）** 是一种用于描述网页文档外观和格式的样式表语言。它主要用于控制HTML文档的排版、颜色、布局等视觉效果。CSS使得网页设计师和开发者能够将样式与内容分离，从而更好地维护和更新网站。

选择器（Selectors）：用于指定哪些HTML元素应该应用样式。例如，.class, #id, element等。
属性（Properties）：定义具体的样式规则，例如 color, font-size, margin, padding 等。
值（Values）：给属性指定具体的样式值。例如，color: red; 中的 red 就是值。

3.2 基本语法

    CSS的基本语法结构如下：

selector {
  property: value;
}

    例如，要将所有段落的文本颜色设置为蓝色，可以使用以下CSS规则：

p {
  color: blue;
}

3.3 常见属性

字体	`font-family`, `font-size`, `font-weight`, `font-style`
文本	`color`, `text-align`, `text-decoration`, `line-height`
布局	`margin`, `padding`, `border`, `width`, `height`
背景	`background-color`, `background-image`, `background-size`
定位	`position`, `top`, `right`, `bottom`, `left`
显示和隐藏	`display`, `visibility`, `opacity`

3.4 布局模型

盒模型（Box Model）：定义了每个HTML元素的布局，包括内容区、内边距（padding）、边框（border）和外边距（margin）。
流式布局（Flow Layout）：默认的布局方式，元素按顺序从上到下、从左到右排列。
弹性布局（Flexbox）：提供了更强大的布局能力，可以在一个容器中灵活地对齐和分配空间。
网格布局（Grid Layout）：基于二维网格的布局系统，允许开发者创建复杂的布局结构。
定位（Positioning）：包括静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。

3.5 引入方式

内联样式（Inline Styles）：直接在HTML元素中使用style属性添加样式。
```
<p style="color: red;">这是红色的文本。</p>
```
内部样式表（Internal Stylesheet）：在HTML文档的<head>部分使用<style>标签定义样式。
```
<style>
  p {
    color: green;
  }
</style>
```

外部样式表（External Stylesheet）：将CSS样式定义在独立的CSS文件中，并通过<link>标签引入。

<link rel="stylesheet" href="styles.css">

CSS使得网页设计更具灵活性和可维护性，通过分离内容与样式，开发者可以更轻松地进行样式调整和设计优化。

4. JavaScript基础

4.1 基本概念

    **JavaScript** 是一种运行于JavaScript解释器/引擎中的**解释型**脚本语言，主要用于在网页中实现动态功能和交互。它使得网页不仅仅是静态内容，而是可以响应用户操作和事件。

    运行环境：

            1、独立安装的JS解释器(NodeJS)

            2、嵌入在\[浏览器\]内核中的JS解释器

    **解释型**：运行之前是不需要编译的，运行之前不会检查错误，直到碰到错误为止。

    **编译型**：对源码进行编译，还能检查语法错误。(C/c++)

完整的JS是由三部分组成
1、核心（ECMAScript）
2、文档对象模型（DOM,Document Object Model）
浏览器对象模型（BOM,Browser Object Model）

4.2 基本语法

4.2.1 变量声明

变量名命名规则
1、不允许使用 JS 的关键字和保留关键字
2、由字母、数字、下划线以及$组成
3、不能以数字开头
4、尽量见名知意

5、可以采用“驼峰命名法”

    变量名为合成词时，第一个单词全小写，从第二个单词开始，每个单词首字符变大写（eg： var stuName;）

    如果只有一个单词作为变量名，全小写（eg：var age;）

let name = "Alice";
const age = 25;

var：传统的变量声明方式，有函数作用域。
let：块级作用域，更现代的变量声明方式。
const：用于声明常量，块级作用域，值不可修改。

4.2.2 数据类型

基本数据类型：Number（数字），String（字符串），Boolean（布尔值），undefined，null，Symbol（ES6 新增），BigInt（用于大整数）
对象类型：Object（对象），Array（数组），Function（函数），Date（日期），RegExp（正则表达式）

let number = 10;           // Number
let name = "Alice";        // String
let isActive = true;       // Boolean
let user = { name: "Alice", age: 25 }; // Object
let numbers = [1, 2, 3, 4]; // Array

4.2.3 运算符

算术运算符：+, -, *, /, %
比较运算符：==, ===, !=, !==, >, <, >=, <=
逻辑运算符：&&（与），||（或），!（非）
赋值运算符：=, +=, -=, *=, /=

let a = 5;
let b = 10;
let result = a + b; // 15

4.3 控制结构

4.3.1 条件语句

if, else if, else

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

**switch**

4.3.2 循环语句

for：用于重复执行代码块。
while：当条件为真时重复执行代码块。
do...while：先执行一次代码块，再判断条件。

for (let i = 0; i < 5; i++) {
  console.log(i); // 输出 0 到 4
}

while (condition) {
  // 当 condition 为 true 时执行的代码
}

condition：一个布尔表达式。如果 condition 为 true，则执行 while 语句块中的代码。如果为 false，则退出循环。

do {
  // 循环体代码
} while (condition);

do：关键字，表示开始循环体。
condition：布尔表达式。如果 condition 为 true，则继续执行循环体中的代码；如果为 false，则退出循环。

4.4 函数

4.4.1 定义函数

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // 输出 "Hello, Alice!"

4.4.2 箭头函数（ES6）

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Bob")); // 输出 "Hello, Bob!"

4.5 事件处理

    **添加事件监听器**：

document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了！");
});

4.6 DOM 操作

    DOM（文档对象模型）操作是指通过 JavaScript 对 HTML 文档中的元素进行访问和修改的过程。

4.6.1 选择元素

document.getElementById(id)
- 根据 ID 选择元素。
- 示例：```
  const element = document.getElementById(‘myId’);
document.getElementsByClassName(className)
- 根据类名选择元素，返回一个 HTMLCollection。
- 示例：```
  const elements = document.getElementsByClassName(‘myClass’);
document.getElementsByTagName(tagName)
- 根据标签名选择元素，返回一个 HTMLCollection。
- 示例：```
  const elements = document.getElementsByTagName(‘div’);
document.querySelector(selector)
- 根据 CSS 选择器选择第一个匹配的元素。
- 示例：```
  const element = document.querySelector(‘.myClass’);
document.querySelectorAll(selector)
- 根据 CSS 选择器选择所有匹配的元素，返回一个 NodeList。
- 示例：```
  const elements = document.querySelectorAll(‘div.myClass’);

4.6.2 修改元素

element.innerHTML
- 获取或设置元素的 HTML 内容。
- 示例：```
  element.innerHTML = ‘
  新内容
  ’;
element.textContent
- 获取或设置元素的文本内容。
- 示例：```
  element.textContent = ‘新文本内容’;
element.setAttribute(attributeName, value)
- 设置元素的属性。
- 示例：```
  element.setAttribute(‘class’, ‘newClass’);
element.style
- 修改元素的 CSS 样式。
- 示例：```
  element.style.color = ‘red’;

4.6.3 添加和删除元素

document.createElement(tagName)
- 创建一个新的 HTML 元素。
- 示例：```
  const newDiv = document.createElement(‘div’);
element.appendChild(newChild)
- 将新的子元素添加到指定元素中。
- 示例：```
  element.appendChild(newDiv);
element.removeChild(child)
- 从指定元素中删除一个子元素。
- 示例：```
  element.removeChild(oldChild);
element.insertBefore(newNode, referenceNode)
- 在指定元素的前面插入一个新的子元素。
- 示例：```
  element.insertBefore(newDiv, referenceElement);

4.6.4 事件处理

element.addEventListener(event, function)
- 为元素添加事件监听器。
- 示例：```
  element.addEventListener(‘click’, function() {
  alert(‘元素被点击了！’);
  });
element.removeEventListener(event, function)
- 移除事件监听器。
- 示例：```
  element.removeEventListener(‘click’, handlerFunction);

4.6.5 类名操作

element.classList
- 访问元素的类名列表，可以方便地添加、删除或切换类名。
- 示例：```
  element.classList.add(‘newClass’); // 添加类名
  element.classList.remove(‘oldClass’); // 删除类名
  element.classList.toggle(‘toggleClass’); // 切换类名

4.6.6 获取和设置位置与尺寸

element.getBoundingClientRect()
- 获取元素的大小和相对于视口的位置。
- 示例：```
  const rect = element.getBoundingClientRect();
  console.log(rect.top, rect.left);
element.offsetWidth 和 element.offsetHeight
- 获取元素的宽度和高度，包括内边距和边框。
- 示例：```
  const width = element.offsetWidth;
  const height = element.offsetHeight;

4.7 数组操作

4.7.1 创建数组

使用数组字面量
```
const array = [1, 2, 3, 4, 5];
```

使用 Array 构造函数

const array1 = new Array(5); // 创建一个包含 5 个空位的数组
const array2 = new Array(1, 2, 3); // 创建一个包含 1, 2, 3 的数组

4.7.2 访问和修改元素

访问元素

const value = array[0]; // 访问第一个元素

修改元素

array[1] = 10; // 将第二个元素修改为 10

4.7.3 常用数组方法

push()
- 向数组末尾添加一个或多个元素。
```
array.push(6, 7);
```
pop()
- 从数组末尾删除一个元素，并返回该元素。
```
const lastElement = array.pop();
```
shift()
- 从数组开头删除一个元素，并返回该元素。
```
const firstElement = array.shift();
```
unshift()
- 向数组开头添加一个或多个元素。
```
array.unshift(0, -1);
```
splice(start, deleteCount, item1, item2, ...)
- 从指定位置删除或替换元素，并可以插入新的元素。
```
array.splice(2, 1, 10, 11); // 从索引 2 开始删除 1 个元素，插入 10 和 11
```
slice(start, end)
- 返回数组的一个片段，不修改原数组。
```
const subArray = array.slice(1, 4); // 从索引 1 到 3
```
concat(array1, array2, ...)
- 合并两个或多个数组，返回新数组。
```
const newArray = array.concat([6, 7], [8, 9]);
```
join(separator)
- 将数组元素连接成一个字符串。
```
const str = array.join('-'); // '1-2-3-4-5'
```
reverse()
- 反转数组中的元素顺序。
```
array.reverse();
```

sort(compareFunction)

对数组元素进行排序。

array.sort(); // 默认按字典顺序排序
array.sort((a, b) => a - b); // 按升序排序数字

4.7.4 数组迭代方法

forEach(callback)
- 对数组的每个元素执行一次回调函数。
```
array.forEach(element => console.log(element));
```
map(callback)
- 返回一个新数组，其中每个元素是回调函数返回值的结果。
```
const doubledArray = array.map(element => element * 2);
```
filter(callback)
- 返回一个新数组，其中包含回调函数返回 true 的所有元素。
```
const evenArray = array.filter(element => element % 2 === 0);
```
reduce(callback, initialValue)
- 从数组的第一个元素开始，依次执行回调函数，将结果汇总为一个单一的值。
```
const sum = array.reduce((acc, current) => acc + current, 0);
```
find(callback)
- 返回数组中第一个使回调函数返回 true 的元素。
```
const firstEven = array.find(element => element % 2 === 0);
```
some(callback)
- 如果数组中至少有一个元素使回调函数返回 true，则返回 true，否则返回 false。
```
const hasEven = array.some(element => element % 2 === 0);
```
every(callback)
- 如果数组中的所有元素都使回调函数返回 true，则返回 true，否则返回 false。
```
const allPositive = array.every(element => element > 0);
```
includes(value)
- 判断数组是否包含指定的值，返回 true 或 false。
```
const hasThree = array.includes(3);
```

4.7.5 数组转化方法

toString()
- 将数组转换为字符串。
```
const str = array.toString();
```
toLocaleString()
- 将数组转换为本地化字符串。
```
const localeStr = array.toLocaleString();
```

4.8 对象

    在 JavaScript 中，对象是一种用于存储键值对的集合。对象可以包含各种数据类型的值，包括其他对象。

4.8.1 创建对象

对象字面量

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello!');
  }
};

使用 new Object() 构造函数

const person = new Object();
person.name = 'John';
person.age = 30;

使用 Object.create()

const proto = { greet() { console.log('Hello!'); } };
const person = Object.create(proto);
person.name = 'John';
person.age = 30;

4.8.2 访问和修改对象属性

访问属性

console.log(person.name); // 'John'
console.log(person['age']); // 30

修改属性

person.age = 31;
person['name'] = 'Jane';

添加新属性

person.email = 'john.doe@example.com';

删除属性
```
delete person.email;
```

4.8.3 对象方法

定义和调用方法```
const person = {
name: ‘John’,
greet() {
console.log('Hello, ’ + this.name);
}
};
person.greet(); // ‘Hello, John’

4.8.4 遍历对象属性

for...in 循环

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ': ' + person[key]);
  }
}

Object.keys(obj)

返回对象的可枚举属性名的数组。

console.log(Object.keys(person)); // ['name', 'age', 'greet']

Object.values(obj)

返回对象的可枚举属性值的数组。

console.log(Object.values(person)); // ['John', 30, [Function: greet]]

Object.entries(obj)

返回对象的键值对数组。

console.log(Object.entries(person)); // [['name', 'John'], ['age', 30], ['greet', [Function: greet]]]

4.8.5 对象操作

Object.assign(target, ...sources)

将一个或多个源对象的属性拷贝到目标对象。

const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }

Object.freeze(obj)

冻结对象，防止修改其属性。

const person = { name: 'John' };
Object.freeze(person);
person.name = 'Jane'; // 不会生效

Object.seal(obj)

密封对象，防止添加和删除属性，但允许修改现有属性。

const person = { name: 'John' };
Object.seal(person);
person.name = 'Jane'; // 可以修改现有属性
delete person.name; // 无效

Object.getPrototypeOf(obj)

返回对象的原型。

const proto = { greet() { console.log('Hello!'); } };
const person = Object.create(proto);
console.log(Object.getPrototypeOf(person) === proto); // true

Object.setPrototypeOf(obj, prototype)

设置对象的原型。

const proto = { greet() { console.log('Hello!'); } };
const person = {};
Object.setPrototypeOf(person, proto);
person.greet(); // 'Hello!'

4.8.6 对象的属性描述符

Object.getOwnPropertyDescriptor(obj, prop)

获取对象属性的描述符。

const person = { name: 'John' };
const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor);

Object.defineProperty(obj, prop, descriptor)

定义对象的属性或修改其描述符。

const person = {};
Object.defineProperty(person, 'name', {
  value: 'John',
  writable: false,
  enumerable: true,
  configurable: false
});

5. 响应式布局

    响应式布局（Responsive Design）是一种网页设计技术，旨在使网站在各种设备上都能良好地显示，无论是桌面电脑、平板还是手机。响应式布局通过动态调整布局和内容，以适应不同的屏幕尺寸和设备特性。下面是实现响应式布局的一些关键技术和方法：

5.1 流式网格布局

    **流式网格布局（Fluid Grid Layout）**

使用百分比宽度：代替固定的像素宽度，使用百分比来设置元素的宽度，使其能够根据父容器的宽度进行调整。```
.container {
width: 100%;
}
.column {
width: 50%; /* 使列宽度占据容器的一半 */
}

5.2 媒体查询

    **媒体查询（Media Queries）**

基本用法：根据不同的屏幕尺寸、分辨率或其他特性应用不同的样式。

@media (max-width: 600px) {
  .container {
    padding: 10px;
  }
  .column {
    width: 100%; /* 在小屏幕上使列宽度占满整个容器 */
  }
}

多个条件：可以组合多个条件来处理更复杂的布局需求。

@media (min-width: 600px) and (max-width: 900px) {
  .container {
    padding: 20px;
  }
}

5.3 弹性盒子布局

    **弹性盒子布局（Flexbox）**

基础使用：使容器中的项目能够灵活地调整和排列。```
.container {
display: flex;
flex-direction: row; /* 行内排列 /
justify-content: space-between; / 项目之间均匀分布 /
}
.item {
flex: 1; / 每个项目占据相等的空间 */
}

5.4 网格布局

    **网格布局（CSS Grid Layout）**

基础用法：创建复杂的布局结构，能够更精确地控制行和列。```
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建3列，每列宽度相等 /
gap: 10px; / 设置网格间隙 /
}
.item {
grid-column: span 1; / 每个项目占据1列 */
}

5.5 视口单位

     **视口单位（Viewport Units）**

vw 和 vh：使用视口宽度和高度单位来设置元素的尺寸。```
.container {
width: 100vw; /* 宽度占据整个视口宽度 /
height: 100vh; / 高度占据整个视口高度 */
}

5.6 响应式图片

使用 max-width：确保图片不会超出其容器的宽度。

img {
  max-width: 100%;
  height: auto; /* 保持图片的宽高比 */
}

srcset 和 sizes：为不同分辨率提供不同的图片资源。

<img src="small.jpg" srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive Image">

5.7 移动优先设计

    **移动优先设计（Mobile First Design）**

先设计移动设备版本：先实现适合小屏幕的设计，然后使用媒体查询添加对大屏幕的支持。```
/* 移动设备样式 */
.container {
padding: 10px;
}

@media (min-width: 768px) {
.container {
padding: 20px;
}
}

@media (min-width: 1200px) {
.container {
padding: 30px;
}
}