软件开发框架期末复习重点（精简归纳版）

Fri, 19 Jun 2026 00:00:00 +0000

前言

这是一份软件开发框架课程的期末复习重点，涵盖了 HTML、CSS、JavaScript 和 jQuery 四大板块的核心知识点。精简归纳，方便考前快速回顾。

一、HTML 核心知识点

1. 图片标签 `<img>` 属性

属性	说明
`src`	图片路径（URL）
`alt`	替代文本（图片无法显示时展示，辅助屏幕阅读器）
`title`	鼠标悬停时的提示文字
`width` / `height`	设置图片宽高
`border`	边框（已不推荐，建议用 CSS）

2. 表单 `<form>` 创建与常用控件

控件	说明
`<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; — 简单但有副作用

伪类清除法（推荐）：

.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(函数, 毫秒)`	每隔指定时间重复执行

示例：

// 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	各类选择器	基本/层次/过滤/属性选择器的灵活运用

祝考试顺利！

JQuery on 清风客