前言
这是一份软件开发框架课程的期末复习重点，涵盖了 HTML、CSS、JavaScript 和 jQuery 四大板块的核心知识点。精简归纳，方便考前快速回顾。
一、HTML 核心知识点
1. 图片标签 <img> 属性
| 属性 |
说明 |
src |
图片路径（URL） |
alt |
替代文本（图片无法显示时展示，辅助屏幕阅读器） |
title |
鼠标悬停时的提示文字 |
width / height |
设置图片宽高 |
border |
边框（已不推荐，建议用 CSS） |
| 控件 |
说明 |
<input type="text"> |
单行文本输入框 |
<input type="password"> |
密码输入框（内容隐藏） |
<input type="radio"> |
单选框（一组选一个） |
<input type="checkbox"> |
复选框（一组选多个） |
<input type="submit"> |
提交按钮 |
<input type="reset"> |
重置按钮 |
<textarea> |
多行文本输入框 |
<select> + <option> |
下拉列表框 |
<button> |
通用按钮（可触发 JS） |
<label> |
为控件提供描述标签 |
3. 列表创建
- 无序列表：
<ul><li>...</li></ul>（圆点符号）
- 有序列表：
<ol><li>...</li></ol>（数字序号）
- 定义列表：
<dl><dt>术语</dt><dd>描述</dd></dl>
- 嵌套列表：在
<li> 内再嵌套 <ul> 或 <ol>
二、CSS 核心知识点
1. 基础选择器
| 选择器 |
语法 |
说明 |
| 元素选择器 |
div |
选择所有指定标签 |
| 类选择器 |
.className |
选择带该类名的元素 |
| ID 选择器 |
#idName |
选择唯一 ID 元素 |
| 通配符选择器 |
* |
选择所有元素 |
| 属性选择器 |
[type="text"] |
根据属性选择 |
| 伪类选择器 |
:hover, :focus, :first-child |
特定状态选择 |
| 伪元素选择器 |
::before, ::after |
创建虚拟元素 |
2. 文本样式与对齐
| 属性 |
说明 |
font-family |
字体 |
font-size |
字体大小 |
color |
文字颜色 |
font-weight |
粗细（normal / bold / 100~900） |
font-style |
样式（normal / italic） |
text-decoration |
装饰（underline / overline 等） |
text-align |
水平对齐（left / right / center / justify） |
vertical-align |
垂直对齐（行内/表格用；块级推荐 Flexbox） |
3. 内边距与外边距
- 内边距
padding：内容到边框的距离
- 外边距
margin：元素到外部的距离
- 简写顺序：
上 右 下 左（如 padding: 10px 20px 10px 20px）
4. 行内元素 vs 块级元素
| 类型 |
代表 |
特点 |
| 行内元素 |
span, a, img, strong, em |
不换行，不能设宽高（替换元素除外） |
| 块级元素 |
div, p, h1~h6, ul, ol, li |
独占一行，可设宽高 |
转换方式：
display: block; → 行内转块display: inline; → 块转行内display: inline-block; → 行内块（不换行但可设宽高）
5. 浮动（Float）及清除方法
引发问题：父元素高度塌陷、浮动覆盖其他内容
清除方案（推荐度从低到高）：
- 浮动元素后加空
<div style="clear:both;"> — 冗余
- 给父元素设固定高度 — 不灵活
- 父元素加
overflow: hidden; — 简单但有副作用
- 伪类清除法（推荐）：
1
2
3
4
5
|
.clearfix::after {
content: "";
display: block;
clear: both;
}
|
6. 盒子模型（Box Model）
由内到外：
1
|
内容（content） → 内边距（padding） → 边框（border） → 外边距（margin）
|
box-sizing 值 |
说明 |
content-box（默认） |
宽高仅指内容区域 |
border-box |
宽高包含 padding 和 border（更直观） |
7. 定位方式（Position）
| 值 |
说明 |
static |
默认，正常文档流 |
relative |
相对自身原位置偏移，仍占文档空间 |
absolute |
相对最近已定位祖先，脱离文档流 |
fixed |
相对视口固定，脱离文档流 |
堆叠顺序：使用 z-index（数值越大越靠上）
三、JavaScript 核心知识点
1. 数据类型
| 分类 |
类型 |
| 基本类型（值类型） |
Number, String, Boolean, Undefined, Null, Symbol |
| 引用类型（对象类型） |
Object, Array, Function, Date, RegExp 等 |
2. 常用数组操作
| 操作 |
方法 |
| 访问 |
arr[0] |
| 修改 |
arr[0] = 新值 |
| 末尾添加 |
push(元素) |
| 开头添加 |
unshift(元素) |
| 任意位置增/删 |
splice(索引, 删除个数, 添加的元素...) |
| 末尾删除 |
pop() |
| 开头删除 |
shift() |
| 查找索引 |
indexOf(元素) |
| 遍历 |
for 循环 或 forEach() |
| 连接数组 |
concat(另一个数组) |
| 转字符串 |
toString() |
3. 相等判断
| 运算符 |
说明 |
示例 |
==（宽松相等） |
比较值，会进行类型转换 |
"5" == 5 → true |
===（严格相等） |
比较值和类型，均相同才为 true（推荐使用） |
"5" === 5 → false |
4. 函数定义与定时函数
基本写法：
1
2
3
|
function 函数名(参数1, 参数2) {
// 函数体
}
|
定时函数：
| 方法 |
说明 |
setTimeout(函数, 毫秒) |
延迟执行一次 |
setInterval(函数, 毫秒) |
每隔指定时间重复执行 |
示例：
1
2
3
4
5
|
// 5 秒后执行一次
var timer = setTimeout(() => { console.log("执行"); }, 5000);
// 每 2 秒重复执行
var interval = setInterval(() => { console.log("周期执行"); }, 2000);
|
四、jQuery 选择器
1. 基本选择器
| 选择器 |
说明 |
$("#id") |
ID 选择 |
$(".class") |
类选择 |
$("element") |
标签选择 |
$("*") |
全选 |
2. 层次选择器
| 选择器 |
说明 |
$("祖先 后代") |
后代选择 |
$("父 > 子") |
子代选择 |
$("前 + 后") |
紧邻兄弟 |
$("前 ~ 后面所有") |
后面所有兄弟 |
3. 过滤选择器
| 分类 |
选择器 |
| 基本过滤 |
:first, :last, :even, :odd, :eq(index) |
| 内容过滤 |
:contains('文本') |
| 可见性过滤 |
:visible, :hidden |
| 属性过滤 |
[type='text'] |
| 子元素过滤 |
:nth-child(n) |
| 表单过滤 |
:input, :enabled, :disabled, :checked |
4. 属性选择器
| 选择器 |
说明 |
[attribute] |
拥有该属性 |
[attribute=value] |
属性等于某值 |
[attribute!=value] |
属性不等于某值 |
[attribute^=value] |
属性以某值开头 |
[attribute$=value] |
属性以某值结尾 |
[attribute*=value] |
属性包含某值 |
总结
| 板块 |
核心内容 |
考试重点 |
| HTML |
标签属性、表单控件、列表 |
<img> 属性、<form> 各类 input、列表嵌套 |
| CSS |
选择器、盒模型、定位、浮动 |
选择器优先级、position 区别、清除浮动 |
| JavaScript |
数据类型、数组操作、定时器 |
== vs ===、数组方法、setTimeout/setInterval |
| jQuery |
各类选择器 |
基本/层次/过滤/属性选择器的灵活运用 |
祝考试顺利！
