前端开发技术复习笔记

第一部分 HTML5 基础（第1章 HTML入门）

一、HTML5 文档整体结构

HTML 是用于搭建网页结构与内容的标记语言，所有标准 HTML5 页面遵循固定骨架。

1. 完整基础模板

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文档标题</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>欢迎内容</h1>
  <p>网页可见文本</p>
  <script src="app.js"></script>
</body>
</html>

2. 核心标签作用

<!DOCTYPE html>：文档类型声明，必须放在第一行，告知浏览器使用 HTML5 标准渲染。
<html>：网页根标签，包裹整个页面所有内容。
<head>：头部区域，存放元数据、资源引用，内容不会直接展示在页面中。
<title>：设置浏览器标签页标题。
<body>：网页主体，存放所有用户可见内容（文本、图片、链接、表单等）。

3. 标签分类

容器标签（双标签） ：有开始和结束标签，内部可嵌套内容，例：<html>、<head>、<body>、<p>。
空标签（单标签） ：无闭合标签、无内部内容，例：<!DOCTYPE>、<br>、<img>。

二、head 内部常用标签与属性

<head> 用于配置网页基础信息、引入样式和脚本：

<meta>：元数据标签，描述网页信息
- charset="UTF-8"：设置网页字符编码，防止乱码
- name="description"：网页简介，用于搜索引擎
- name="keywords"：网页关键词
- name="author"：网页作者
- http-equiv="refresh" content="30"：页面每30秒自动刷新
<link>：引入外部 CSS 样式表，核心属性 rel、href
<script>：引入/编写 JavaScript 脚本，属性：src、async、defer
<base>：统一设置页面内相对路径的基础地址

三、body 内基础文本与排版标签

标题标签 <h1> ~ <h6>
- 共6级标题，<h1> 字号最大、权重最高，<h6> 最小；独占一行。
段落 <p>：包裹段落文本，自带上下间距。
格式化标签
- <b> 加粗、<i> 斜体、<u> 下划线
- <br>：强制换行（单标签）
- <hr>：水平分割线

块级/行内容器

标签	类型	特点	用途
`<div>`	块级元素	独占一行，默认占满父容器宽度	划分页面大区块、布局
`<span>`	行内元素	同行显示，宽度自适应内容	局部文字样式修改、行内分组

四、列表标签

用于展示一组数据，分为有序列表 和无序列表：

有序列表 <ol> + <li>
- 自带数字序号，适用于有先后顺序的内容（步骤、排名）。
html 复制代码
```
<ol>
  <li>起床</li>
  <li>刷牙</li>
</ol>
```
无序列表 <ul> + <li>
- 默认圆点符号，适用于无顺序的分组内容（分类、选项）。
html 复制代码
```
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>
```

五、图片、多媒体与交互标签

1. 图片标签 `<img>`

核心属性：src（图片路径）、alt（图片加载失败时的替代文本）
主流图片格式：GIF（动图/图标）、JPG/JPEG（照片）、PNG（透明高清图）

2. 音视频标签 `` / `<video>`

通用属性：

controls：显示播放、暂停、音量控制面板
autoplay：页面加载后自动播放
loop：播放结束后循环
muted：静音播放
poster（仅video）：视频加载时展示的封面图

3. 进度/数值标签

<meter>：展示区间数值（如分数、磁盘使用率），搭配 min、max、value
<progress>：展示任务进度（如下载进度），搭配 max、value

4. 折叠组件 `<details>` + `<summary>`

无需 JS，纯 HTML 实现展开/折叠；<summary> 是可点击的标题。

5. 内嵌网页 `<iframe>`

在当前页面嵌入另一个独立网页；属性：src、width、height、seamless（无边框）、srcdoc（内嵌HTML内容）。

六、HTML5 语义化标签

语义标签可以直观描述内容含义 ，提升代码可读性、无障碍访问和搜索引擎优化，区别于老式样式标签（如<font>）。

标签	作用
`<header>`	页面/板块头部（Logo、标题、导航）
`<nav>`	导航栏、菜单链接
`<article>`	独立完整内容（博客、新闻、文章）
`<aside>`	侧边栏、广告、备注等附属内容
`<section>`	主题性内容分组
`<footer>`	页脚（版权、联系方式、底部链接）
`<figure>` + `<figcaption>`	图片+图文标题组合

重点：<font> 是旧式样式标签，不属于HTML5语义结构标签。

七、超链接 `<a>`

基础语法：<a href="目标地址" target="_blank">链接文本</a>
href：跳转地址（站内路径/外网URL）
target="_blank"：在新标签页打开链接

八、网页类型与编辑器

静态网页：内容固定，无后台交互。
动态网页：内容实时生成（新闻、视频网站）。
编辑器：
- 纯文本：记事本、VS Code（后缀 .html/.htm）
- 可视化：Dreamweaver（拖拽式编辑）

第二部分 CSS3 样式（第2章美化网页）

一、CSS 概述

CSS 全称层叠样式表 ，作用：控制网页外观、布局，实现内容与样式分离 ，统一全站风格。

CSS 基础语法：

css 复制代码

选择器 {
  属性: 属性值;
}

二、CSS 三种引入方式 & 优先级（必考）

优先级从高到低 ：行内样式 > 内部样式 > 外部样式 > 浏览器默认样式

行内样式（Inline CSS）
直接写在 HTML 标签的 style 属性中，优先级最高。
html 复制代码
```
<p style="color:red;">文本</p>
```
内部样式（嵌入式）
写在 <head> 的 <style> 标签内，仅当前页面生效 。
html 复制代码
```
<style>
  p { color: blue; }
</style>
```
外部样式（推荐）
单独创建 .css 文件，通过 <link> 引入，多页面共用 ，便于维护。
html 复制代码
```
<link rel="stylesheet" href="style.css">
```

补充：!important 可强行提升样式优先级。

三、CSS 常用选择器

选择器用于精准选中需要美化的 HTML 元素：

元素选择器 ：直接使用标签名，选中所有同名标签

p { }
类选择器 ：以 . 开头，可重复使用，推荐做多类样式

.class名 { }
ID 选择器 ：以 # 开头，页面唯一，多用于 JS 获取元素

#id名 { }
后代选择器 div p：选中 div 内部所有p 标签
子代选择器 div > p：仅选中 div 直接子级 p 标签
相邻兄弟 div + p：选中紧跟在 div 后的第一个 p
通用兄弟 div ~ p：选中 div 之后所有同级 p
选择器分组 ：多个选择器共用一套样式，逗号分隔

h1, p { color: red; }

四、CSS 常用样式属性

1. 字体样式

font-family：字体
font-size：字号
font-style：正常/斜体（normal/italic）
font-weight：字重（加粗 bold）

2. 文本样式

color：文字颜色
text-align：对齐（left/center/right）
text-decoration：装饰线（下划线、删除线、none 去除下划线）
text-transform：大小写转换
letter-spacing：字间距
line-height：行高

3. 背景样式

background-color：背景色
background-image：背景图片

4. 列表样式

list-style-type：修改列表符号（圆点、方块、数字等）

五、元素显示与可见性（高频考点）

display: none
元素彻底隐藏 ，从文档流移除，不占用页面空间。
visibility: hidden
元素隐藏，但保留原有位置和空间。
display: block：转为块级元素，独占一行。
display: inline：转为行内元素，同行显示。

六、定位属性 `position`

控制元素摆放位置，搭配 top/left/right/bottom 使用：

属性值	说明
`static`	默认值，正常文档流，定位失效
`relative`	相对自身原有位置偏移，保留原空间
`absolute`	脱离文档流，相对最近已定位父元素定位
`fixed`	固定定位，相对浏览器视口，页面滚动位置不变

七、浮动与清除浮动

float: left/right：元素向左/右浮动，文字环绕。
clear: both：清除浮动影响，解决布局塌陷。

第三部分 HTML 表格 & 内嵌框架（第3章）

一、表格基础

表格用于展示行列结构化数据。

1. 核心标签

<table>：表格根标签
<caption>：表格标题
<tr>：表格行
<th>：表头单元格（默认加粗、居中）
<td>：普通数据单元格
<thead> / <tbody> / <tfoot>：划分表格头部、主体、底部区域

2. 单元格合并（重点）

colspan="n"：水平合并 n 列（左右合并）
rowspan="n"：垂直合并 n 行（上下合并）

3. 表格 CSS 样式

border：边框
border-collapse: collapse：合并单元格边框
padding：单元格内边距
text-align：内容对齐

二、内嵌框架 `<iframe>`

作用：在当前页面嵌入其他网页。
常用属性：src(地址)、width/height(尺寸)、name(命名，用于链接跳转)、seamless(无边框)。
样式：可设置 border、margin、padding。

第四部分 HTML 表单 & JavaScript 基础（第4章动态网页）

一、表单 `<form>`

表单用于收集用户输入数据，并提交到服务器。

1. 表单核心属性

action：数据提交的目标地址
method：提交方式
- GET：数据拼接在URL后，明文、有长度限制，适合非敏感简单数据
- POST：数据存放在请求体，相对安全、无长度限制，推荐用于密码、表单
required：输入框必填
placeholder：输入框提示文字
pattern：正则表达式校验格式
autocomplete：开启/关闭自动补全

2. 常用 `<input>` 输入类型

text：单行文本
password：密码框（内容隐藏）
radio：单选框（同name为一组，只能选一个）
checkbox：复选框（可多选）
email/url/number：自带浏览器格式校验
date：日期选择器
submit：提交按钮
tel：手机号输入

3. 其他表单标签

<select> + <option>：下拉选择框；<optgroup> 对选项分组
<textarea>：多行文本域
<datalist>：输入联想提示
<label>：绑定输入项，点击文字可聚焦输入框
<fieldset> + <legend>：表单分组

二、JavaScript 基础

JS 为网页添加交互逻辑：表单校验、动态修改页面、响应事件。

1. 引入方式

内部脚本：<script> 标签内编写代码
外部脚本：<script src="js文件路径">

2. 基础语法

变量：var(旧)、let(新)、const(常量)
运算符：算术、赋值、比较、逻辑运算符
函数：可复用代码块，function 函数名(){}
分支判断、循环：实现逻辑与重复执行

3. 页面元素获取（高频）

document.getElementById("id值")：根据ID精准获取页面元素，表单取值、修改样式最常用。

4. 表单校验

HTML 原生校验：依靠 required、type、pattern 实现基础校验。
JavaScript 自定义校验：拦截表单提交，编写复杂规则（如年龄、手机号判断）。
表单常用事件：onsubmit(提交)、onclick(点击)、onchange(内容改变)。

第五部分 jQuery 库（第5章网页视觉特效）

一、jQuery 简介

jQuery 是轻量、跨浏览器的 JavaScript 库 ，口号：写更少代码，做更多事 。

简化 DOM 操作、事件、动画，兼容各浏览器差异。

1. 引入与入口函数

必须先引入 jQuery 文件，再编写代码：

html 复制代码

<script src="jquery.js"></script>
<script>
// 等待DOM加载完成后执行，防止元素未加载报错
$(document).ready(function(){
  // 代码写在这里
});
</script>

二、jQuery 选择器

沿用 CSS 选择器规则：

$("标签名")、$("#id")、$(".类名")、层级选择器

三、内容操作方法

html()：获取/修改元素HTML内容
append() / prepend()：在元素后/前插入内容
remove()：删除元素及子元素
empty()：仅清空子元素

四、事件绑定

常用事件：click(点击)、dblclick(双击)、mouseenter/mouseleave(鼠标移入/移出)、submit(表单提交)

示例：

js 复制代码

$("button").click(function(){
  $("h1").hide();
});

五、动画效果

显隐：hide()、show()、toggle()
滑动：slideUp()、slideDown()、slideToggle()（上下滑动切换）
淡入淡出：fadeIn()、fadeOut()
自定义动画：animate({样式}, 时长)

六、jQuery 插件

Colorbox：图片灯箱、画廊插件，实现弹窗看图、轮播。
Galleria：缩略图画廊插件。

第六部分 Bootstrap 4 前端框架

一、Bootstrap 概述

Bootstrap 是开源移动端优先框架，内置12列弹性网格系统 、现成UI组件，快速开发响应式网页 （适配手机、平板、电脑）。

使用前必须引入：viewport 元标签、Bootstrap CSS、jQuery、Popper、Bootstrap JS。

二、12列网格系统（核心）

网页行 row 均分为12份，通过列类控制布局：

容器
- .container：固定宽度响应式容器
- .container-fluid：全屏通栏容器

基础结构

html 复制代码

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">左栏</div>
    <div class="col-md-6">右栏</div>
  </div>
</div>

响应式断点（屏幕尺寸对应前缀）
- .col-：超小屏（手机）
- .col-sm-：小屏（横屏手机）
- .col-md-：中屏（平板）
- .col-lg-：大屏（笔记本）
- .col-xl-：超大屏（桌面）
辅助网格类：.offset-(列偏移)、.order-(列排序)、.no-gutters(去除间距)

三、常用内置组件

按钮
基础类 .btn + 样式类：.btn-primary(主色)、.btn-success(成功)、.btn-danger(危险)；
尺寸：.btn-sm(小按钮)、.btn-lg(大按钮)。
表单
.form-control：美化输入框；.form-group：表单分组；.form-inline：行内表单。
导航栏 .navbar：响应式导航，支持折叠。
其他组件
- .badge：角标/数字标签
- .progress：进度条
- .dropdown：下拉菜单
- .list-group：列表组
- .breadcrumb：面包屑导航

四、间距工具类

简写规则：属性+方位-尺寸

m = margin(外边距)，p = padding(内边距)
方位：t上、b下、l左、r右、x左右、y上下
示例：.mt-3(上外边距)、.px-2(左右内边距)、.mx-auto(水平居中)

五、图标

Bootstrap4 无内置图标，搭配 Font Awesome 图标库使用。

第七部分 Vue 3 框架（核心重点）

一、Vue 简介

Vue 是渐进式 JavaScript 框架 ，专注视图层，轻量、易上手，适合开发单页应用(SPA)。

核心优势：组件化、数据驱动、虚拟DOM。

二、Vue 核心特性

响应式系统：数据变化，页面自动更新。
组件化：页面拆分为独立可复用组件，各司其职。
虚拟DOM：内存中的虚拟节点，对比差异后只更新局部DOM，提升性能。
声明式渲染：模板绑定数据，无需手动操作DOM。

三、虚拟 DOM 工作流程

首次渲染：根据模板生成虚拟DOM，渲染为真实DOM。
数据修改：生成新虚拟DOM。
对比(diff)：新旧虚拟DOM比对，找出变化部分。
补丁(patch)：仅将差异更新到真实DOM，减少DOM操作。

四、Vue CLI 项目搭建与目录

前置：安装 Node.js + npm
常用命令
- npm install -g @vue/cli：全局安装Vue脚手架
- vue create 项目名：创建Vue项目
- npm run serve：启动本地开发服务
- npm run build：打包上线
项目目录
- main.js：项目入口文件，创建并挂载Vue实例
- App.vue：根组件
- src：源码目录（组件、路由、状态）
- public：静态资源

五、Vue 基础指令（必考）

指令	简写	作用
{``{ }}	-	插值表达式，渲染文本数据
`v-bind`	`:`	绑定HTML属性
`v-on`	`@`	绑定DOM事件（点击、鼠标等）
`v-model`	-	双向数据绑定（多用于表单）
`v-for`	-	循环渲染列表，必须加 `:key`
`v-if / v-else / v-else-if`	-	条件渲染（移除/重建DOM）
`v-show`	-	条件显示（切换display，DOM保留）
`v-once`	-	元素仅渲染一次，后续数据变化不更新

区分 v-if 和 v-show：

频繁切换 → 用 v-show

初始渲染、很少切换 → 用 v-if

六、Vue 组件

1. 单文件组件 `.vue` 结构

vue 复制代码

<template>
  <!-- HTML 结构 -->
</template>
<script>
  // JS 逻辑
</script>
<style scoped>
  /* 样式 scoped：仅当前组件生效 */
</style>

2. 组件 data 规则（重中之重）

Vue 组件中 data 必须是一个函数，返回对象。

正确：data(){ return { 数据 } } → 每个组件实例拥有独立数据
错误：data: { 数据 } → 所有实例共用一份数据，互相干扰

3. 组件注册方式

局部注册 （推荐）
在当前组件内导入并注册，仅当前组件可用，避免命名冲突。
全局注册
在 main.js 中通过 app.component() 注册，整个项目任意组件均可使用，适合通用按钮、弹窗等。

4. 动态组件

使用 <component :is="组件名"> 动态切换渲染组件，常用于标签页、步骤条。

七、Vue 事件处理

1. 基础事件

@click 点击、@mouseover 鼠标移入、@mouseout 鼠标移出等原生DOM事件。

2. 事件修饰符

.once：事件只执行一次
.prevent：阻止浏览器默认行为（跳转、表单提交）
.stop：阻止事件冒泡

3. 按键修饰符

监听键盘按键：@keyup.enter(回车)、@keyup.ctrl.enter(组合键)，支持 tab、space、上下左右等。

4. 自定义事件（子组件 → 父组件传值）

子组件：this.$emit('自定义事件名', 数据) 派发事件
父组件：@自定义事件名="处理函数" 监听并接收数据

八、列表渲染 `v-for`

语法：v-for="item in 数组" :key="唯一标识"

:key 提升渲染效率，避免列表错乱。
支持遍历数组、对象。

九、过渡与动画

Vue 内置 <transition> 标签实现元素显隐动画：

基础过渡：淡入淡出（opacity）、位移动画（translate）
帧动画：使用 CSS @keyframes 实现旋转、翻转等复杂效果
自定义过渡类：对接 Animate.css 等第三方动画库，快速使用现成动画

过渡标准类名

v-enter：进入初始状态
v-enter-active：进入过渡过程
v-enter-to：进入结束状态
v-leave：离开初始状态
v-leave-active：离开过渡过程
v-leave-to：离开结束状态

前端开发技术复习笔记