Website on Nishizono Mio's Shaddow

JavaScript Learn Part.C

Mon, 16 Feb 2026 17:47:16 +0800

BOM和DOM

BOM包含DOM；
使用document对象，实际上是使用window.document，window一般可省略

DOM编程案例

innerHTML和innerText来操作div和span

通过元素的innerHTML可以设置元素内部（标签对之间）的内容：

divElt.innerHTML = "<font color='red'>整个字符串会被当成HTML内容填充到标签对之间</font>"

通过元素的innerText可以设置元素内部（标签对之间）的内容：

divElt.innerText = "<font color='red'>整个字符串会被当成普通字符串内容填充到标签对之间</font>"

复选框的全选和取消全选

需求：某个复选框选中时，所有复选框选中。

解决办法：

选中即为click事件；
document.getElementsByName()获取同名元素
复选框选中/未选中。关键是checked属性

案例:动态显示表格内容

业务背景：网页显示学生信息表格，一开始只显示表头，点击按钮后显示所有表项。

解决思路：

Java会给出一个JSON格式字符串，包含待显示的数据
JS通过eval()解析数据
通过拼字拼出tbody的html内容
通过属性innerHTML放到表格中，完成显示

正则表达式

什么是正则表达式,有什么用?

正则表达式是一门独立的学科,基本每个语言都支持。
正则表达式不是JS专属的。不过在Js中使用居多。
通常使用正则表达式进行字符串格式匹配。

正则表达式是有一堆特殊的符号组成的一个表达式。每一个特殊的符号都有特殊的代表含义。

例如: qq号的正则表达式。邮箱地址的正则表达式。

邮箱地址格式验证:

程序中有一个邮箱地址的正则表达式。
用户输入了一个邮箱地址。
那么邮箱地址的正则表达式和邮箱地址进行匹配,能匹配成功,表示合法,反之表示不合法。

对于javascript程序员来说,我们对于正则表达式掌握到什么程度呢?

第一:能够看懂正则表达式
第二:简单的正则要会写
第三:要能够独立的从网络当中搜索到你想要的正则表达式(搜索能力要有)，利用手册
第四:要会创建Js的正则表达式对象。
第五:要会调用Js正则表达式对象的方法。

参考手册

常见正则表达式符号

. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束

* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次

\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符

例子：
[a-z]{1}意思是a-z所有字母中任意一个；
[a-z0-9A-Z]{3,}意思是a-z，0-9，A-Z字符集合中出现三个
[1-9][0-9]{4，}就是QQ号的正则表达式
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$就是匹配邮箱地址

JS中创建正则表达式对象

方式一：var regExp = /正则表达式/标记
标记是可选项，可选值：

g: 全局
i: 忽略大小写
m: 不要求掌握

方式二：var regExp = new RegExp("正则表达式", "标记")

正则表达式对象的方法

正则表达式对象的test()方法用于检查字符串是否匹配规则。参考代码

字符串对象可以使用正则表达式：var str = "1970-1-1".replace(/-/g, "/")表示匹配中所有（正则表达式使用g标记）的减号，替换成斜杠

表单验证

需求描述：
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能有数字和字母组成,不能含有其它符号(正则表达式)
(4)密码和确认密码一致
(5)统一失去焦点验证
(6)错误提示信息统一在span标签中提示,并且要求字体12号,红色。
(7)文本框再次获得焦点后,清空错误提示信息
(8)最终表单中所有项均合法方可提交

核心难点：

为了防止用户不听提示而提交，不要用submit按钮，改用button，并用form对象的submit方法提交表单
如何在提交前检查输入是否合法？
- 方法一：让表单元素先对焦focus再失焦blur，从而触发检查，也就是通过JS代码产生事件
提示信息的显示/消失用span控制

案例:网页时钟

需求：点击按钮显示时钟，并且以秒为间隔更新

解决办法：

执行window.setInterval("一段JS代码", milliTime)会开始周期性执行JS代码。特别的，如果代码是一个函数，可以不加引号和括弧，只写函数名。这个函数返回一个值，该值传入window.clearInterval()可以终止此段代码的周期调用。

BOM编程案例

window.open()和close()

window.open(url, opt)打开新窗口

url: 新页面的字符串
opt: ‘_self’为当前窗口打开; 默认值’_blank’; 其他可选值’_parent’, ‘_top’等

window.close()关闭当前页面，可用前提是当前页面是由open()打开的。

窗口设置为顶级窗口

应用场景：网页长时间待机后，工作区子窗口要变成登录页并变成顶级

1
2
3

if (window.top !== window.self) {
    window.top.href = window.self.location
}

前进后退

跳转到前一页面： window.history.back()

跳转到执行一次回退前的页面： window.history.go(1)

发送请求的多种方式

地址栏URL
点击超链接
提交表单
window.open(‘url’)
js代码: 四种效果相同
- window.location.href = 'https://www.baidu.com'
- window.location = 'https://www.baidu.com'
- document.location.href = 'https://www.baidu.com'
- document.location = 'https://www.baidu.com'

附录

JS练习题二

单选题

1 – 执行var arr = new Array(3); arr[5] = 10;后，arr[4]的值是？（）

A. undefined B. null C. 0 D. 报错

2 – Date 对象的getMonth()方法返回值为 5，代表的实际月份是？（）

A. 4 月 B. 5 月 C. 6 月 D. 7 月

3 – 以下关于innerHTML和innerText的区别，说法正确的是？（）

A. innerHTML 会解析 HTML 标签，innerText 仅作为普通文本
B. innerText 会解析 HTML 标签，innerHTML 仅作为普通文本
C. 两者都会解析 HTML 标签
D. 两者都仅作为普通文本

4 – 获取页面中所有name=“hobby"的复选框，正确的方法是？（）

A. document.getElementById ("hobby")
B. document.getElementsByName ("hobby")
C. document.getElementsByTagName ("hobby")
D. document.querySelector ("hobby")

5 – 正则表达式\d的含义是？（）

A. 匹配任意空白符 B. 匹配数字 C. 匹配字母 / 数字 / 下划线 D. 匹配除换行外任意字符

6 – 创建忽略大小写的正则表达式/abc/，正确的写法是？（）

A. var reg = /abc/i 
B. var reg = new RegExp ("abc", "g")
C. var reg = /abc/g 
D. var reg = new RegExp ("abc", "m")

7 – 以下能实现 “每隔 1 秒执行一次showTime()函数” 的代码是？（）

A. window.setTimeout ("showTime ()", 1000)
B. window.setInterval (showTime, 1000)
C. window.setInterval ("showTime ()", 1)
D. window.setTimeout (showTime, 1)

8 – 关闭由window.open()打开的当前窗口，正确的代码是？（）

A. window.close () B. window.stop () C. window.exit () D. window.shut ()

9 – 表单验证中，要判断密码框 (pwd) 和确认密码框 (repwd) 的值一致，正确的判断条件是？（）

A. pwd.value == repwd.value 
B. pwd == repwd
C. pwd.innerText == repwd.innerText 
D. pwd.innerHTML == repwd.innerHTML

10 – 以下代码执行后str的值是？（）

var str = "2026-02-16".replace(/-/g, "/")

A. "2026/02/16" B. "2026-02/16" C. "2026/02-16" D. "20260216"

11 – Date 对象的getTime()方法返回的是？（）

A. 当前时间的小时数 
B. 1970/01/01 00:00:00 到现在的毫秒数
C. 当前时间的分钟数 
D. 当前时间的时间戳（秒数）

12 – 要让下拉列表的选中变化触发事件，应使用的事件名是？（）

A. onclick B. onchange C. onblur D. onfocus

13 – 以下关于 BOM 和 DOM 的关系，正确的是？（）

A. DOM 包含 BOM B. BOM 包含 DOM C. 两者相互独立 D. 两者完全等同

14 – 正则表达式^[1-9][0-9]{4,}$匹配的是？（）

A. 至少 4 位的数字 
B. 至少 5 位的数字（首位非 0）
C. 4-5 位的数字 
D. 任意长度的数字（首位非 0）

15 – 关于数组push方法，以下描述正确的是？（）

A. 向数组开头添加元素，返回新数组长度
B. 向数组末尾添加元素，返回被添加的元素
C. 向数组末尾添加元素，返回新数组长度
D. 向数组开头添加元素，返回被添加的元素

不定项

16 – 以下创建数组的方式，正确的有？（）

A. var arr = {1, 2, 3}; 
B. var arr = Array ();
C. var arr = new Array (5); 
D. var arr = new Array ("a", "b");

17 – 关于数组方法，以下说法正确的有？（）

A. pop () 方法会删除数组最后一个元素并返回该元素
B. reverse () 方法会反转数组并返回数组引用
C. join (",") 会将数组元素用逗号连接成字符串
D. push () 方法可以一次添加多个元素

18 – 以下属于 Date 对象的方法有？（）

A. getFullYear () B. getDay () C. getMinutes () D. toLocaleString ()

19 – 以下关于复选框checked属性，正确的描述有？（）

A. 该属性值为布尔类型
B. 设置chk.checked = true可选中复选框
C. 获取chk.checked可判断是否选中
D. 该属性只能通过 HTML 标签设置，无法通过 JS 修改

20 – 以下正则表达式标记，正确的有？（）

A. g（全局匹配） B. i（忽略大小写） C. m（多行匹配） D. s（单行匹配）

21 – 以下能实现 “页面跳转至百度” 的代码有？（）

A. window.location.href = "https://www.baidu.com"
B. document.location = "https://www.baidu.com"
C. window.open("https://www.baidu.com", "_self")
D. window.history.go("https://www.baidu.com")

22 – 表单验证的触发时机，符合笔记要求的有？（）

A. 文本框失去焦点（onblur）时验证
B. 文本框获得焦点（onfocus）时清空错误提示
C. 点击提交按钮前统一验证所有项
D. 页面加载时自动验证所有项

23 – 关于window.setInterval()和window.clearInterval()，正确的有？（）

A. setInterval () 返回一个标识 ID，用于 clearInterval () 终止执行
B. clearInterval () 需要传入 setInterval () 返回的 ID 才能生效
C. setInterval () 的第一个参数可以是字符串形式的 JS 代码
D. setInterval () 的第二个参数单位是秒

24 – 以下关于正则表达式符号，含义正确的有？（）

A. *：重复一次或更多次 
B. +：重复零次或更多次
C. ?：重复零次或一次 
D. {n,m}：重复 n 到 m 次（包含 n 和 m）

35 – 以下关于 BOM 的操作，正确的有？（）

A. window.confirm () 会弹出确认框，返回字符串
B. window.history.back () 可返回上一页
C. window.top !== window.self 表示当前窗口不是顶级窗口
D. window.open () 默认在当前窗口（_self）打开链接

填空题

JS 数组是可变长的，越界下标赋值会自动扩容，未赋值的扩展元素默认值为______。

数组pop()方法会弹出末尾元素并返回，数组长度会______。

Date 对象的getDay()方法返回星期数，______代表周一到周日（填写数值范围）。

document对象的完整写法是______，其中window可省略。

要将 HTML 标签解析后填充到元素中，应使用______属性；仅填充普通文本用______属性。

获取同名复选框的方法是document.______()。

下拉列表选中变化的事件名是______。

正则表达式中，\w匹配______、数字、下划线或汉字。

正则表达式^匹配字符串的______，$匹配字符串的______。

创建正则表达式的两种方式：字面量/正则/标记和new ______(“正则”, “标记”)。

正则表达式对象的______() 方法用于检查字符串是否匹配规则。

表单验证中，要让所有项合法后才能提交，应使用______按钮替代 submit 按钮，通过form.submit()提交。

window.setInterval()的第二个参数单位是______。

终止setInterval()的周期性执行，需调用window.______()并传入标识 ID。

window.open()的第二个参数为______时，在当前窗口打开链接。

跳转到前一页面的 BOM 方法是window.history.______()。

QQ 号的正则表达式是______（填写笔记中的表达式）。

表单验证中，错误提示信息要求字体______号、______色。

Date 对象的getTime()方法返回自 1970/01/01 00:00:00 的______数。

字符串的replace()方法结合正则g标记，可______替换所有匹配的内容。

编程题

编程题 1：用户注册表单（表单验证 + CSS 样式 + 事件处理）

题目要求：实现一个符合以下要求的用户注册表单页面：

HTML 结构（30 分）
- 包含表单（action 设为#），表单项：用户名、密码、确认密码、手机号、邮箱、性别单选框、注册按钮、重置按钮；
- 每个输入项对应标签，错误提示用（初始隐藏）；
- 手机号和邮箱输入框添加placeholder提示。
CSS 样式（20 分）
- 表单整体居中，宽度 400px，内边距 20px，边框 1px 实线 #ccc；
- 输入框宽度 100%，高度 30px，margin-bottom 10px；
- 错误提示文字：12px、红色、margin-left 5px；
- 按钮宽度 100%，高度 35px，注册按钮背景色 #007bff，鼠标悬停时背景色 #0056b3，重置按钮背景色 #6c757d；
- 输入框获取焦点时边框颜色变为 #007bff。
JS 验证逻辑（50 分）
- 失去焦点验证：
  ✅ 用户名：非空、6-14 位、仅字母 / 数字（正则：/^[a-zA-Z0-9]{6,14}$/）；
  ✅ 密码：非空、长度≥8；
  ✅ 确认密码：与密码一致；
  ✅ 手机号：非空、11 位数字（正则：/^\d{11}$/）；
  ✅ 邮箱：符合邮箱格式（正则：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/）；
- 输入框获得焦点时清空对应错误提示；
- 点击注册按钮时，触发所有输入项的验证，全部合法则弹出 “注册成功”，否则阻止表单提交；
- 点击重置按钮时，清空所有输入和错误提示。
评分标准
- HTML 结构完整、语义化（30 分）；
- CSS 样式符合要求，交互样式生效（20 分）；
- 每个输入项的验证逻辑正确（每项 8 分，共 40 分）；
- 按钮点击逻辑正确（10 分）。

编程题 2：商品列表展示（侧重：DOM 操作 + CSS 布局 + 数据渲染）

题目要求：实现一个商品列表页面，支持动态渲染和样式控制：

HTML 结构（20 分）
- 包含：搜索框、搜索按钮、商品列表容器（<div>）、清空列表按钮；
- 商品列表初始为空，渲染后每个商品项包含：商品名称、价格、库存（用<div>/<span>布局）。
CSS 样式（30 分）
- 搜索区域：输入框宽度 200px，按钮 margin-left 10px；
- 商品列表：每个商品项为独立卡片，宽度 200px，边框 1px 实线 #eee，内边距 10px，margin 10px，浮动左对齐；
- 商品名称：字体加粗，价格红色，库存灰色；
- 鼠标悬停商品卡片时，边框颜色变为 #ff6700，背景色 #f5f5f5；
- 清除浮动，避免布局错乱。???
JS 功能（50 分）

页面加载完成后，默认渲染所有商品；
搜索功能：输入商品名称关键词，点击搜索按钮筛选商品（忽略大小写）；
清空列表：点击按钮清空商品列表容器内容；
动态渲染逻辑：通过拼接 HTML 字符串 + innerHTML实现，而非手动创建节点。

预设商品数据（JSON 格式）：

var goodsData = [
    {name: "小米手机", price: 1999, stock: 100},
    {name: "华为平板", price: 2999, stock: 50},
    {name: "苹果耳机", price: 1299, stock: 80},
    {name: "小米手环", price: 199, stock: 200},
    {name: "华为手表", price: 1599, stock: 80}
];

评分标准
- HTML 结构合理（20 分）；
- CSS 布局、样式、交互效果符合要求（30 分）；
- 默认渲染商品列表（15 分）；
- 搜索筛选功能正确（20 分）；
- 清空列表功能正确（15 分）。

编程题 3：待办事项清单（侧重：事件绑定 + CSS 显隐 + 数组操作）

题目要求：实现一个待办事项（TODO）清单页面，支持增删改查：

HTML 结构（20 分）
- 包含：输入框（待办内容）、添加按钮、待办列表（<ul>）、完成 / 未完成筛选按钮；
- 每个待办项包含：文本、完成按钮、删除按钮。
CSS 样式（30 分）
- 待办列表宽度 300px，列表项无默认编号（list-style-type: none），内边距 10px，边框 1px 实线 #ddd，margin 5px 0；
- 已完成的待办项：文字划线（text-decoration: line-through）、颜色 #999；
- 筛选按钮：margin 5px，点击时背景色变为 #28a745；
- 完成 / 删除按钮：margin-left 10px，小尺寸（宽 60px，高 25px）。
JS 功能（50 分）
- 存储待办数据：用数组保存，每个项包含content（文本）、isDone（是否完成）；
- 添加待办：输入非空内容，点击添加按钮，新增待办项到列表，清空输入框；
- 完成待办：点击完成按钮，切换待办项的isDone状态，同步更新样式；
- 删除待办：点击删除按钮，从数组和页面中移除对应项；
- 筛选功能：点击 “完成” 按钮只显示已完成项，点击 “未完成” 只显示未完成项，点击 “全部” 显示所有项；
- 所有事件绑定采用 “获取元素 + 赋值事件句柄” 方式（而非行间事件）。
评分标准
- HTML 结构完整（20 分）；
- CSS 样式、筛选按钮交互、完成项样式符合要求（30 分）；
- 添加待办功能正确（10 分）；
- 完成 / 删除待办功能正确（20 分）；
- 筛选功能正确（20 分）。

编程题 4：网页计算器（侧重：JS 运算 + CSS 布局 + 事件委托）

题目要求：实现一个简易计算器，支持加减乘除运算：

HTML 结构（25 分）
- 包含：显示框（<input type="text"，只读）、数字按钮（0-9）、运算符按钮（+、-、×、÷）、等号按钮、清空按钮；
- 按钮用<button>标签，按计算器布局排列（4 列）。
CSS 样式（25 分）
- 计算器整体居中，宽度 300px，边框 2px 实线 #333，内边距 10px；
- 显示框：宽度 100%，高度 40px，字体大小 18px，文本右对齐，margin-bottom 10px；
- 按钮：宽度 70px，高度 70px，字体大小 16px，margin 2px；
- 运算符按钮背景色 #ff9500，等号按钮背景色 #ff3b30，清空按钮背景色 #e6e6e6；
- 按钮点击时（:active）背景色加深。
JS 功能（50 分）
- 显示框初始为空，点击数字 / 运算符按钮，内容追加到显示框；
- 点击等号按钮：
- ✅ 解析显示框中的运算表达式（如 “12+34”），计算结果并显示；
- ✅ 处理除零错误，弹出提示 “除数不能为 0”；
- ✅ 处理非法表达式，弹出提示 “表达式错误”；
- 点击清空按钮，清空显示框；
- 事件处理：采用事件委托（给按钮父容器绑定点击事件），而非逐个绑定按钮事件。
评分标准
- HTML 结构符合计算器布局（25 分）；
- CSS 样式、按钮交互效果符合要求（25 分）；
- 数字 / 运算符输入功能正确（15 分）；
- 运算逻辑正确（含除零 / 非法表达式处理）（25 分）；
- 事件委托实现（10 分）。

编程题 5：动态表格管理系统（侧重：表格操作 + CSS 样式 + JSON 数据）

题目要求：实现一个学生信息表格管理页面，支持新增、删除、修改、查询：

HTML 结构（20 分）
- 包含：查询输入框、查询按钮、新增表单（姓名、年龄、班级）、提交按钮、学生信息表格（表头：姓名、年龄、班级、操作）；
- 操作列包含 “修改”“删除” 按钮，表格边框 1px 实线。
CSS 样式（30 分）
- 表格宽度 80%，居中，单元格内边距 8px，表头背景色 #f8f9fa，文字居中；
- 表格行鼠标悬停时背景色 #e9ecef；
- 新增表单：输入框宽度 150px，margin 5px，提交按钮背景色 #17a2b8；
- 修改 / 删除按钮：分别为 #ffc107、#dc3545，小尺寸（宽 60px，高 28px）。
JS 功能（50 分）
- 页面加载完成后，渲染学生数据到表格；
- 新增功能：表单验证（姓名非空、年龄为数字），验证通过后添加到数组并刷新表格；
- 删除功能：点击删除按钮，确认（confirm）后删除对应学生，刷新表格；
- 修改功能：点击修改按钮，将学生信息填充到新增表单，提交按钮变为 “修改”，点击后更新数据并恢复按钮文本；
- 查询功能：输入姓名关键词，筛选并渲染符合条件的学生。

预设学生数据（JSON 格式）：

var students = [
  {name: "张三", age: 18, class: "计算机1班"},
  {name: "李四", age: 19, class: "软件2班"},
  {name: "王五", age: 17, class: "网络3班"}
];

评分标准
- HTML 结构完整、表格布局合理（20 分）；
- CSS 样式、表格交互效果符合要求（30 分）；
- 初始渲染 / 新增 / 删除功能正确（每项 10 分，共 30 分）；
- 修改功能正确（10 分）；
- 查询功能正确（10 分）。

JS练习题二-参考答案

ACABB ABAAA BBBBB

CD ABC ABCD ABC ABC ABC ABC ABC CD BC

undefined
减一（或：减少 1）
1-7 4. window.document
innerHTML、innerText
getElementsByName
onchange
字母
开始、结束
RegExp
test
button
毫秒（或：millisecond）
clearInterval
_self
back
[1-9][0-9]{4，}（或：^[1-9][0-9]{4,}$）
12、红
毫秒
全局

编程题参考答案:
第1题
 第2题
 第3题
 第4题
 第5题

JavaScript Learn Part.B

Fri, 13 Feb 2026 16:33:41 +0800

JS中的事件

常用事件

焦点
- blur失去焦点
- focus获得焦点
击打
- click鼠标单击
- dblclick鼠标双击
键盘
- keydown键盘按下
- keyup键盘弹起
鼠标
- mousedown鼠标按下
- mouseover鼠标经过
- mousemove鼠标移动
- mouseout鼠标离开
- mouseup鼠标弹起
表单
- reset表单重置（在form元素中添加，不是input）
- submit表单提文
其它
- select文本被选定
- change下拉列表选中项改变,或文本框内容改变
- load页面加载完毕【注意此事件在页面所有元素（包括执行完所有script脚本）加载完毕后触发，不是加载时触发】

参考代码020-事件.

注册事件的2种方式

方法一

在标签中使用事件句柄属性，在事件句柄中编写事件代码，当对应的事件发生后，注册在事件句柄当中的代码被监听器调用。一般称事件句柄注册的函数为回调函数（CallBack Function）。回调函数的特点是：

监听器负责调用而非程序
事件发生后监听器来调用

方法二

铺垫：根据id获取节点对象

在JS中有一个隐含的对象document，代表整个HTML文档，是DOM的顶级对象。在JS中有一个隐含的对象window，代表整个浏览器窗口，是BOM的顶级对象。

document对象有一系列方法，其中getElementById()可根据id名返回节点对象。在JS中，获取到节点之后，节点属性可以直接当作JS对象的属性访问（读/写）。因此，可以把写好的函数绑定到事件句柄属性上：obj_onExmapleEvent = myFunction，注意不要写成myFunction()。

代码的执行顺序

一般情况下，如果元素未加载而通过id获取对象，会失败，参考022 Line 11。解决办法：利用表征所有元素加载完成的load事件，参考代码024

当onload句柄的回调函数执行时，所有元素必然加载完毕。当然这里有一个瑕疵，即load事件句柄的回调函数是用第一种绑定方法，可否改造成第二种？解决办法：利用window对象（暂时可以认为是body标签的对象），为onload绑定函数：window.onload = function(){}，参考代码026

例子：通过keydown事件捕捉Enter和ESC

目标：输入框输入完成时按下Enter键，要捕捉到回车键按下，并输出提示.

原理：所有回调函数在被监听器调用时，都会传入一个对象参数，表示发生的事件对象。对于所有的键盘事件，事件对象有keycode属性，可以获取键值。其中Enter键值是13，Esc键值是27。

运算符void

语法格式：void(表达式)
含义：执行表达式，并且不做任何返回（即使表达式本身有返回结果）

示例代码文件

<h1>H1</h1>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<a href="" onclick="alert('执行JS代码')">保留超链接样式，点击后执行一段JS代码，执行完后保证页面不跳转</a>

按下超链接后页面其实会跳转，因为href置空默认跳转到本页，也就是一次刷新。为了不要此次刷新（跳转），关键是要把跳转路径完全干掉，而不是默认值或者空字符串：

1
2
3

<a href="javascript:void('anything')" onclick="alert('执行JS代码')">
    超链接
</a>

注意到要加javascript:以免浏览器认为"void()“是地址。可以观察一下鼠标悬停在超链接文本上时浏览器下角会出现“javascript:void(0)”。

控制语句

JS的控制语句和除了Java相同，也有特别的。

选择
- if
- switch
循环
- for
- while
- do … while
跳转
- break
- continue
- return

特别的语句，了解即可 ——

for … in 语句

遍历数组，index是下标，类型Number

var arr = [true, 4, "abc", 2, NaN, 10, 7] 
for (var i=0; i<arr.length; i++) {
    console.log(arr[i])
}
// 另一种遍历, 注意index是索引值的字符串，例如"0", "1"等，类型是String
for (var index in arr) {
    console.log(arr[index])
}

遍历对象属性, prop是属性名，类型String

function Emp(x, y, z) {
    this.propa = x
    this.propb = y
    this.propc = z
}
obj = new Emp(1, "jack", 123.45)
for(var prop in obj) {
    console.log("obj."+prop+" = "+obj[prop])
}

with语句

内置对象

Array

Array是JS的数组类型，数组长度可变。

创建数组

方法1：创建数组时赋值

JS的数组是可变长的，并且如果为越界下标元素赋值，数组将自动扩容到该下标，并且新扩展的元素除了最后一个被赋值的，其它值默认undefined。

方法2：利用Array类

new Array() 创建空数组
new Array(4) 创建指定长度空数组
new Array(false, NaN, 34.55, 3, 5)

使用for..in或者for来遍历数组，使用下标访问并修改，类型可变。

常用方法

方法	用例	描述
push	arr.push(val)	向数组末尾追加元素，返回追加元素
pop	arr.pop()	将数组末尾元素弹出并返回之，同时数组长度减一 ; 可以说数组的push和pop遵循栈的行为
reverse	arr.reverse()	反转数组，返回数组对象（引用）
join	arr.join(s)	将数组元素用字符（串）s连接成字符串

Date

创建Date对象

new Date() 返回Date对象，包含系统当前时间
new Date(4) // 创建指定长度空数组
new Date(false, NaN, 34.55, 3, 5)

Date的方法

方法	描述
getFullYear	返回四位年份
getYear
getMonth	返回值0-11代表1·12月份
getDay	返回星期数, 1-7代表周一到周日
getDate	返回一个月中第几天
getHours	返回小时
getMinutes	返回分钟
getSeconds	返回喵
getMilliseconds	返回毫秒
toLocaleString	转化成本地语言·地区的日期格式
getTime	获取自1970/0/0 0:0:0 000的毫秒数（时间戳）

附录

JavaScript 基础语法练习题一

考察范围：JS概述（Javascript-Learn全部） - 控制语句（JavaScript-Learn-Part.B）

一、单选题（每题2分，共20分）

1 – 关于JavaScript嵌入方式，以下说法错误的是（）

A. 行间事件法中`window.alert()`可以简写为`alert()`
B. 引入外部JS文件的`<script>`标签内写代码会正常执行
C. 页面脚本块可以出现在HTML文档的任意位置
D. 多个脚本块会按照在文档中出现的顺序依次执行

2 – 执行typeof null的结果是（）

A. null
B. object
C. undefined
D. number

3 – 以下关于JS变量的说法，正确的是（）

A. 声明变量时必须指定数据类型
B. `var a;` 执行后a的值为null
C. 函数内未使用var声明的变量是全局变量
D. 变量一旦赋值，类型无法改变

4 – 关于JS函数，以下描述错误的是（）

A. 函数调用时实参数量可以和形参数量不一致
B. 可以先调用函数再定义函数
C. JS支持函数重载，同名函数会根据参数区分执行
D. `var sum = function(a,b){return a+b}` 是函数的合法定义方式

5 – 执行isNaN("123abc")的结果是（）

A. true
B. false
C. NaN
D. undefined

6 – *以下运算符比较结果为true的是（）

A. null === undefined
B. 10 == "10"
C. NaN == NaN
D. 0 === false

7 – 关于事件绑定，以下说法正确的是（）

A. `window.onload`事件在页面开始加载时立即触发
B. 通过`document.getElementById()`获取元素时，无需等待DOM加载完成
C. 为元素绑定事件时，函数名后加括号表示绑定函数本身
D. keydown事件中，Enter键的keyCode值为13

8 – 执行parseInt("123.99abc")的结果是（）

A. 123.99
B. 123
C. NaN
D. 123.99abc

9 – *关于for…in语句，以下描述错误的是（）

A. 遍历数组arr时，`for(var i in arr)`的i是数组下标，类型为Number
B. 遍历对象elt时，`for(var prop in elt)`的prop是属性名，类型String
C. 可以遍历数组的所有元素
D. 可以遍历对象的所有属性

1 –. 以下关于void运算符的用法，正确的是（）

A. `void(alert("test"))` 执行后会返回alert的执行结果
B. `<a href="void(0)" onclick="alert('test')">` 可阻止超链接跳转
C. `void`运算符的作用是不执行表达式
D. `<a href="javascript:void(0)" onclick="alert('test')">`可阻止超链接跳转

二、不定项选择题（每题4分，共20分，多选、少选、错选均不得分）

1 – 以下属于JavaScript三大组成部分的有（）

A. ECMAScript
B. DOM
C. BOM
D. JQuery

2 – 以下数据类型中，属于JS原始数据类型的有（）

A. Undefined
B. Object
C. Boolean
D. Null

3 – 以下字符串方法的描述，正确的有（）

A. `length`属性用于获取字符串长度
B. `replace(s1,s2)`会替换字符串中所有的s1
C. `split(",")`可将字符串按逗号拆分为数组
D. `charAt(0)`可获取字符串第一个字符

4 – 以下关于JS事件的描述，正确的有（）

A. blur事件表示元素失去焦点
B. submit事件需绑定在form元素上
C. mouseover事件表示鼠标离开元素
D. change事件可监听下拉列表选中项的改变

5 – 以下关于JS对象和原型的描述，正确的有（）

A. 可通过`prototype`为Object扩展方法
B. 访问对象属性的方式有`obj.prop`和`obj["prop"]`
C. JS中通过`function`定义的函数可作为类使用
D. `new String("test")`创建的变量类型为String

三、填空题（每空2分，共20分）

JavaScript中，声明变量使用________关键字（ES6前），未赋值的变量默认值为________。
JS中==是________运算符，===是________运算符。
页面中所有元素加载完毕后触发的事件是________。
isNaN()函数的作用是________，它会首先尝试将参数转换为________类型。
遍历对象属性的特殊循环语句是________。
阻止超链接默认跳转行为时，href属性的正确写法是________。
JS中Number类型的特殊值，非数字用________表示，正无穷大用________表示。
为对象动态扩展属性和方法可使用________属性。
函数内未使用var声明的变量默认是________变量。
DOM顶级对象是________，BOM顶级对象是________。

四、编程题（每题20分，共60分）

题目1：数字判断与转换

要求：

编写一个函数checkNumber，接收一个参数；
判断该参数是否为有效数字（非NaN），若是则返回其整数部分，若不是则返回"不是有效数字”；
测试用例：
- checkNumber(“123.45”) → 123
- checkNumber(“abc”) → “不是有效数字”
- checkNumber(NaN) → “不是有效数字”
- checkNumber(99.99) → 99

题目2：事件绑定实现表单验证

要求：

编写HTML页面，包含一个输入框（id=“username”）和一个按钮（id=“submitBtn”）；
页面加载完成后，通过脚本为按钮绑定点击事件；
点击按钮时，验证输入框内容：
- 若为空，弹出提示"用户名不能为空"；
- 若长度小于6，弹出提示"用户名长度不能小于6位"；
- 若验证通过，弹出提示"用户名验证通过"。
提示：通过元素对象的value属性获取输入的文本

题目3：对象与遍历

要求：

定义一个表示学生的类Student，包含属性：姓名（name）、年龄（age）、成绩（score，数组类型）；
为Student类添加方法getAvgScore，用于计算成绩的平均分；
创建一个Student实例，姓名为"张三"，年龄为18，成绩为[80,90,85,95]；
遍历该实例的所有属性并打印（格式：属性名：属性值）；
调用getAvgScore方法，打印平均分。

JavaScript 基础语法练习题一答案

题号	答案	解析
1	B	引入外部 JS 文件的`<script>`标签内的代码不会执行
2	B	typeof null返回object是 JS 的历史设计 bug
3	C	A：JS 是弱类型，声明变量无需指定类型； B：var a;默认值是 undefined； D：JS 变量类型可动态改变
4	C	JS 不支持函数重载，同名函数仅保留最后定义的版本
5	A	“123abc"无法转换为有效数字，isNaN返回 true
6	B	A：null和undefined类型不同，全等为 false； C：NaN 与任何值（包括自身）都不相等； D：类型不同，全等为 false
7	D	A：window.onload在所有元素加载完毕后触发； B：需等待 DOM 加载完成才能获取元素； C：加括号会立即执行函数，而非绑定
8	B	parseInt从左到右解析，截取整数部分，遇到非数字停止
9	A	遍历数组时，index是字符串类型（如 “0”），需手动转换为数字
10	D	A：void执行表达式但无返回值；B：缺少javascript:前缀，浏览器会认为是普通地址；C：void会执行表达式
11	ABC	JS 三大组成部分：ECMAScript（核心）、 DOM（文档对象模型）、BOM（浏览器对象模型）； JQuery 是 JS 库，非核心组成
12	ACD	原始数据类型：Undefined、Number、String、 Boolean、Null；Object 是引用类型
13	ACD	B：replace(s1,s2)仅替换首次出现的 s1，全替换需正则表达式
14	ABD	C：mouseover是鼠标经过，mouseout是鼠标离开
15	ABC	D：new String(“test”)创建的是 Object 类型，字面量"test"是 String 类型

填空题

var；undefined
等同；全等
load（或window.onload）
判断参数是否为非数字；数字
for…in
javascript:void(0)
NaN；Infinity
prototype
全局
document；window

编程题一

function checkNumber(param) {
    // 判断是否为有效数字
    if (!isNaN(param)) {
        // 转换为数字后取整数部分
        return parseInt(param);
    } else {
        return "不是有效数字";
    }
}

// 测试用例
console.log(checkNumber("123.45"));  // 123
console.log(checkNumber("abc"));     // 不是有效数字
console.log(checkNumber(NaN));       // 不是有效数字
console.log(checkNumber(99.99));     // 99

编程题二

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
    <input type="text" id="username" placeholder="请输入用户名">
    <button id="submitBtn">提交</button>

    <script>
        // 等待页面加载完成
        window.onload = function() {
            // 获取元素
            var usernameInput = document.getElementById("username");
            var submitBtn = document.getElementById("submitBtn");
            
            // 绑定点击事件
            submitBtn.onclick = function() {
                var username = usernameInput.value;
                // 验证为空
                if (username === "") {
                    alert("用户名不能为空");
                } else if (username.length < 6) {
                    alert("用户名长度不能小于6位");
                } else {
                    alert("用户名验证通过");
                }
            }
        }
    </script>
</body>
</html>

编程题三

// 1. 定义Student类
function Student(name, age, score) {
    this.name = name;
    this.age = age;
    this.score = score;
    
    // 2. 添加计算平均分的方法
    this.getAvgScore = function() {
        if (this.score.length === 0) return 0;
        var sum = 0;
        for (var i = 0; i < this.score.length; i++) {
            sum += this.score[i];
        }
        return sum / this.score.length;
    }
}

// 3. 创建实例
var zhangsan = new Student("张三", 18, [80,90,85,95]);

// 4. 遍历实例属性
console.log("学生信息：");
for (var prop in zhangsan) {
    // 排除方法属性（可选，根据需求）
    if (typeof zhangsan[prop] !== "function") {
        console.log(prop + "：" + zhangsan[prop]);
    }
}

// 5. 调用方法并打印平均分
var avgScore = zhangsan.getAvgScore();
console.log("平均分：" + avgScore); // 输出：平均分：87.5

JavaScript Learn Part A

Sun, 08 Feb 2026 15:08:15 +0800

本文是Javascript学习笔记·A，记录JS基础语法。

JavaScript概述

简称 JS
JavaScript语言是一种脚本语言,JavaScript的“目标程序”是以普通文本的形式保存。用记事本是可以直接打开的。
JavaScript和JScript的关系……
JavaScript主要用来操作HTML中的节点,产生动态效果；JS是一门编程语言，专门用来操作HTML页面中的节点，产生动态效果
JavaScript和 Java的区别：毫无关系
（重要）JS调试要充分利用浏览器开发者页面的控制台，查看器，网络面板

JavaScript包括三块:ECMAScript、DOM、BOM

ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准；ECMAScript是JavaScript核心语法
Document Object Model编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的
Browser Object Modle编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。

嵌入JS的三种方式以及JS注释

行间事件法

JS是一种事件驱动的语言，一般是在发生某个事件时执行某些代码。事件有很多种，例如鼠标单机click、鼠标经过mouseover等。并且JS中任何一个事件都有对应的事件句柄：例如click对应事件的句柄是onclick，mouseover对应句柄是onmouseover…… 所有的事件句柄都是以标签的属性形式存在，例如<input type="buttom">就有onclick属性， onclick的属性值就是注册的代码，只要出发点击事件，就会执行这段代码。

举个例子（参考代码001），目标是“点击按钮Hello, 弹出对话框，框中显示HelloWorld”。

怎么实现弹窗？ JS中有内置的BOM对象window，可以直接用，因此我们直接把弹窗函数"window.alert('Hello world');"写在onclick的属性值中。

小TIPS

JS中的一条语句可以以一个分号结尾，也可以没有

window.可以省略

页面脚本块嵌入

在HTML中嵌入脚本块，脚本块中的代码自上而下逐行执行。 脚本块的位置随意（甚至可以在<html>外），并且可有多个。

<script type="text/javascript">
    alert('警告1')
    alert('警告2')
</script>

注意，如果脚本块前后有DOM网页元素，则其前面的内容会先显示，然后执行脚本，然后再加载后面的内容。

引入外部JS文件

编写.js文件，然后通过<script src="path/to/your.js"/>引入。引入一次.js文件，其中代码就会执行一次。并且，使用引入法的脚本块中的代码不会执行，例如下述弹窗不会出现：

1
2
3

<script type="text/javascript" src="js/local.js">
    alert('弹窗')
</script>

标识符合关键字

标识符规则和java一样

变量

变量的声明与赋值

回顾：Java中的变量 ——

声明：int a;，double b;，string s;
赋值：a = 10;，b = 3.14;，s = "hello;
一行可以声明多个变量int a, b=2, c=3;

Java是强类型编译型语言。

回到JS —— JS是弱类型非编译（脚本）语言，参考代码006-变量。

声明：var variable_name，默认赋值undefined（这就是一个具体的值），声明时可赋值
赋值：variable_name = value
一行声明多个变量：var a, b = 90, c;，意味着a, c赋值undefined，b赋值90

重点：JS语言是一种弱类型语言，没有编译阶段，直接浏览器打开解释执行。在JS中声明变量时不需要指定变量的数据类型；程序在运行过程当中，赋什么类型的值，变量就是什么数据类型，并且变量的数据类型是可变的。

以下JS代码是可行的：

var i;
i = 100;    // i为整型
i = false;  // 变为布尔型
i = true;
i = 3.14;   // 浮点型 
i = new Object();

函数的定义和调用

Java中的方法：[修饰符列表] 返回值类型方法名(形参列表) {方法体}。例如

1
2
3

public static int sum(int a, int b) {
    return a + b;
}

JS中的函数：function 函数名(形参列表) {函数体}。例如

1
2
3

function sum(a, b) {
    return a + b
}

函数要被调用才会执行，不是定义了就会执行的！参考代码007-函数定义和调用。

TIPS

函数调用时的实参列表不用与形参列表对应，参数从左往右一次配入形参。

JS函数还有另一种定义方式：函数名 = function(形参列表) {函数体}

函数定义的优先级较高，可以在函数定义前调用（参考代码008-函数定义和调用）

局部变量与全局变量

全局变量：在函数体外声明的变量，称为全局变量，在浏览器打开页面时分配空间，直到关闭才销毁；

局部变量：函数调用时分配空间，函数执行结束后内存释放

特别的，若一个变量声明时（应该说是定义时赋值）没有用var关键字，则无论是在哪声明的，默认为全局变量。使用这种特性的变量必须声明时赋值，不能既不用var又不赋值。参考代码009-局部全局变量中“特性”。

Topic - 函数可以重载吗
不可以，同名函数只取最后定义的那个函数来解释，其他同名函数直接消失！根本不可能执行，所以不是覆盖（因为JS函数定义优先级高先解释）。参考代码010

JS数据类型

ECMASCRIPT6版本之前的数据类型有6种

Undefined
Numebr
String
Null（通过=null赋予）
Boolean
Object

其中Undefined, Number, String, Boolean， Null都属于基本数据类型， Object属于对象类型（引用数据类型）。

ECMASCRIPT6版本后的数据类型有8种，多了Symbol, Bigint。

typeof运算符（@@@@@）

typeof运算符可以在代码运行时动态的获取变量的数据类型，使用方法typeof variable_name。 typeof算符的运算结果的值为以下6个字符串之一（注意是小写）：

undefined
numebr
string
boolean
object（null类型数据通过typeof算符作用结果为object）
function

在JS中判断字符串是否相等应使用==算符，参考代码011-数据类型。

Numebr类型

Number类型的数据

类比：Number类型代表了Java中的byte, short, int, long, float, double。

Number类型都有哪些值？以下均可取 - -1 - 0 - 1 - 12.34 - NaN - Infinity

参考代码014-Number类型

NaN这个值意思是非数，但数据的类型仍是Number，当一个数学表达式运算最终无法返回数字时，值就是NaN。例如100 / "abc"的运算结果就是NaN。

TIPS
运算式100 + "abc"结果是字符串"100abc"，所以这个表达式不是数学表达式，而是字符串拼接的意思，所以返回值类型不是Number
JS中10/3结果是浮点3.33333

Infinity顾名思义就是无穷大（注意是正无穷）。

isNaN() 函数

形参列表：一个变量
返回值：Boolean，true代表传参是NaN，否则不是
作用：用于判断数据是不是数

注意，这个函数会首先尝试将数据转换成数字，若失败则结果是true；转换成功则结果为false。可以测试

布尔类型true转换为数字类型是1，false转为0
数字字符串可以转化为数

Number()函数

Number()函数将不是Number类型的数据转为Numeber类型，它把**可以转为Number类型（也就是isNaN()返回true的类型）**的数据转为数字；把不可转为Number类型的数据转为NaN；若参数已经是Number类型，保持不变。

parseInt()函数

把字符串表示的小数（或者小数）取整数部；注意不是向下取整。实际上对于字符串参数，类似于把第一个小数点前面的部分截出来转为数字。无法转化的，输出NaN。

JS数学类介绍

向上取整：Math.ceil(123.456)

Boolean类型

Boolean类型是原始类型，只有两个值：true，false。

Boolean()函数

把非Boolean类型数据转为Boolean类型的数据。

数据	类型	转化结果
0	Number	false
1	Number	true
‘abc’	String	true
''	String	false
NaN	Number	false
Infinity	Number	true
null	Null	false
undefined	Undefined	false
Object	Object	true

规律：只有有东西，结果就是true。 Boolean()函数不需要我们手动调用，它会被隐式调用。例如name="zhansan"; if(name) {...}中，JS将自动把name变量转为Boolean类型并判断真伪。
参考代码015-Boolean。

String

String是原始类型。怎么定义一个字符串？在JS中有两种创建方式：

var str = "string" —— 类型是String
var s = new String('string') —— 类型是Object，使用了Object类的子类String，这是JS内置的可以直接用

不论哪种字符串，其方法和属性都是通用的。以下介绍常用属性和方法。参考代码016

属性或方法	描述
length属性	获取字符串长度
charAt()	获取指定下标位置的字符，下标从0开始
concat()	拼接字符串
indexOf()	获取某个字符串在当前字符串第一次出现的索引
lastIndexOf()	获取某个字符串在当前字符串末次出现的索引
replace()	`str.replace(s1, s2)`把str中首次出现的s1替换为s2（只替换一次）。替换所有需要使用正则表达式。
split()	`str.split(s)`，把str以s为分割拆分为若干字符串，返回一个数组
substr()和subtring()	若只有一个参数`n`，其行为相同，都是取字符串index为n到index为末尾的字串。

substr()和subtring()：若两个参数，含义如下

substr(startIndex, length)
substring(start, end)且不包括end |toLowerCase()和toUpperCase() |大小写转化

Object

在JS中内置一个Object类型，可视为所有类型的基类/超类。 JS中默认定义的类型如无特殊说明，默认继承Object。 Object类型中的通用属性和方法如下。参考代码017

prototype属性

意为原型，这个属性可以为对象动态扩展属性和方法。例如：

var o = new Object()
// 演示prototype属性
Object.prototype.doSome = function() {
    console.log("测试Prototype属性")
}
o.doSome()

通过prototype属性为Object拓展了doSome()方法。实际上，prototype属性可以为其它类型也扩展属性和方法，例如

String.prototype.sub = function(start, length) {
    return this.substr(start, length)
} // 扩展String的方法
console.log("1234567".sub(2,3))

类

定义类

方法一

function 类名(形参列表) {
    this.属性名 = 参数
    this.方法名 = function() {...}
}

方法二

类名 = function(形参列表) {
    this.属性名 = 参数
    this.方法名 = function() {...}
}

所以说，function创建一个函数，也创建一个同名类（或者理解为创建一个东西，功能与调用方法有关）。若通过函数名();调用，则是当作函数来用；若是通过var obj = new 类名()创建对象，则是当作类来用，会在堆中分配空间，而obj是堆上对象的引用。参考代码018。

访问属性

方法一：引用.属性名，例如example_obj.test_property
方法二：引用["属性名"]，例如example_obj["test_property"]

null, NaN, undefined的区别

参考代码019

`==`和`===`的区别

==是等同运算符，===是全等运算符。前者只比较值是否相等，类似Java的equals方法；后者比较值和数据类型是否相同。

null, NaN, undefined的区别

类型互不相同，之间全等运算结果肯定是false

null：原始类型，typeof运算结果是object
NaN：原始类型，typeof运算结果是number
undefined：原始类型，typeof运算符结果是undefined

null和undefined是等同关系

null == NaN ? false
null == undefined ? true
undefined == NaN ? false

NaN不与任何值相同，包括自身

NaN == NaN ? false

JSON

eval()函数

window.eval()函数可以把一段字符串当成JS代码解释并执行。

创建JSON对象，访问JSON对象属性

JSON: JavaScript Object Notation，一种轻量（文本少数据量大）数据交换（不同编程语言之间的数据交换）格式；xml也是一种标准的数据交换格式。

JS中的JSON是以对象形式存在的。

语法格式

创建JSON对象：

var jsonObj = {
    "属性名" : "属性值", 
    "属性名" : "属性值", 
    "属性名" : "属性值", 
}

注意，JS中方括弧是数组对象，花括弧是JSON对象。属性值可以是任何类型数据，包括JSON对象。

访问JSON对象属性

jsonObj.prop或jsonObj["prop"]

JSON数据交换

java和javascript两个语言交换数据可以使用JSON格式的字符串。 java的JDBC连接数据库查询数据，然后将数据拼接成JSON格式的字符串，将JSON格式的字符串传给javascript，然后在javascript当中把json格式的字符串转换成JSON对象，这样就可以从json对象中取数据了，这样就完成了数据的交换。

CSS Learn

Sat, 31 Jan 2026 00:00:00 +0000

本文是CSS学习笔记。

概述

CSS：Cascading Style Sheet，是层叠样式表语言(不是编程语言,属于样式表语言,没有变量、数据类型、控制语句 .. )。 css其实是专门用来修饰HTML的,让HTML更好看，Css是HTML的化妆品。

CSS是为HTML服务的,所以HTML还是主体,css是依附在HTML上的, 所以进行css的开发,我们还是需要新建html/htm文件。

在HTML中嵌入CSS的三种方式

内联定义；
定义内部样式块对象；
链入外部样式表文件。

优先级：内联 > 内部样式块对象 > 外部样式表文件参考网页：

内联定义

内联定义是在HTML文件中嵌入CSS样式的第一种方法。内联就是在标签中通过style属性指定样式。任何一个html标签都可以设定style属性。

语法格式：<标签名 style="[样式名]:[样式值]; [样式名]:[样式值]; [样式名]:[样式值]">。参考代码001

定义内部样式块对象

在一对head标签中使用style标签，定义样式块对象：

语法：

[选择器] {
    [样式名]: [样式值]; 
    [样式名]: [样式值]; 
    [样式名]: [样式值]; 
}

CSS中常见的选择器为：id选择器，标签选择器，class选择器。

标签选择器

选择器设为标签名，则body中所有该标签都使用这个选择器引导的CSS样式。例如

/* 标签选择器 */   /* 注意注释形式改变 */
<style type="text/css">
    /* 所有div标签都是用这个css */
    div {
        background-color: #cccc22;
        width: 150px; 
        height: 200px;
        border-style: solid; 
        border-color: red;
        border-width: 5px;
    }
</style>

id选择器

语法格式：选择器设为：#[id名]。例如

<style type="text/css">
    /* id选择器 */
    #input-braket-usrname {
        background-color: #e3ace4;
        width: 100px; 
        height: 20px;
        border-style: solid; 
        border-color: #3ad110;
        border-width: 2px;
    }
</style>

class选择器

语法格式：选择器设为：.[类名]，并且标签要加class属性来表明所属类。例如

<style type="text/css">
    .cls1 {
        font-size: 12px;
        color: green;
    }
</style>
<!-- body -->
<span class="cls1">SPAN区域</span>
<p class="cls1">段落</p>

链入外部样式表文件

编写.css文件，并在html文件头中通过<link rel="stylesheet" type="text/css" href="path/to/your/file.css"/>链接。

三种选择器的优先级

id > class > 标签

隐藏

display: none隐藏内容。参考代码004，通过JavaScript可以改变display属性，从而显示/隐藏列表。

文本装饰

text-decoration: 可选值简述：

“underline”
“overline”
“none”：无格式，可以消除掉超链接的默认下划线

列表

参考代码004

`list-style-type` 属性值	含义
none	去掉有序/无序编号
circle	圈形无序编号
square	方形无序编号

鼠标悬停效果

鼠标悬停效果通过在选择器名后加:hover表示其引导的效果在鼠标放上去时触发。注意：冒号前后不能有空格！ 参考代码006，像这样：

<style type="text/css">
    .cursoreffect:hover {
        color: red; 
    }
</style>

内边距外边距

可以使用内补丁和外补丁制造div或span之间的相对间隔。参考代码007。

例如，内补丁padding会导致嵌套于其内的子元素距离父元素有补丁间距。外补丁margin会导致某个子元素与父元素在外部有补丁间距。

CSS 盒模型

所有 HTML 元素都可以看成一个矩形盒子，由内到外共 4 层：

Content（内容区）文字、图片等实际内容，width、height 就是控制这个区。

Padding（内边距）内容到边框之间的距离，属于盒子内部，会撑大盒子。

Border（边框）盒子的边框，border-width 也会算进盒子总大小。

Margin（外边距）盒子与其他元素之间的距离，不属于盒子本身，只控制间距。

浮动效果

参考代码008。 float: 设置为：

left：文字包围，图片居左
right：文字包围，图片居右

定位

参考代码009，使用position确定定位法，配合top和left定位距离。

鼠标小手

参考代码009。通过cursor: 设置：

pointer：小手（不要用hand，有兼容问题）
not-allowed：禁止

附录

CSS基础练习题

（一）单选题（10 题）

1–以下关于 CSS 的描述错误的是（）

A. CSS 是层叠样式表，不属于编程语言  
B. CSS 可以独立于 HTML 运行  
C. CSS 能修饰 HTML 元素的样式  
D. CSS 没有变量、控制语句等编程语言特性`

2–下列哪种 CSS 嵌入方式优先级最高（）

A. 外部样式表
B. 内部样式块
C. 内联定义（style 属性）
D. 三者优先级相同`

3–关于选择器优先级，正确的顺序是（）

A. 标签选择器 > class 选择器 > id 选择器
B. id 选择器 > class 选择器 > 标签选择器
C. class 选择器 > id 选择器 > 标签选择器
D. id 选择器 > 标签选择器 > class 选择器`

4–要清除超链接的默认下划线，应设置的样式是（）

A. text-decoration: underline
B. text-decoration: overline
C. text-decoration: none
D. text-decoration: hidden

5–鼠标悬停伪类的正确写法是（）

A. .box :hover {color: red;}
B. .box:hover { color: red; }
C. .box hover { color: red; }
D. .box->hover { color: red; }

6–要让元素显示为 “小手” 鼠标样式，正确的属性值是（）

A. cursor: hand
B. cursor: pointer
C. cursor: small-hand
D. cursor: finger

7–下列哪个属性用于去掉列表的默认编号（）

A. list-style: none
B. list-style-type: none
C. list-number: hidden
D. list-type: none

8–关于 padding 和 margin，描述正确的是（）

A. padding 是外边距，margin 是内边距
B. padding 会增加元素自身的总尺寸
C. margin 是子元素与父元素内部的间距
D. padding 不影响元素的布局

9–要隐藏一个 HTML 元素且不占用页面空间，应设置（）

A. visibility: hidden
B. display: none
C. opacity: 0
D. hidden: true

10–外部样式表的引入标签正确的是（）

A. <link rel="style" type="text/css" href="style.css">
B. <link rel="stylesheet" type="text/css" href="style.css"/>
C. <style src="style.css" type="text/css"></style>
D. <import rel="stylesheet" href="style.css"/>

（二）填空题（10 题）

CSS 的全称是 __________（层叠样式表）。
内联定义 CSS 的方式是给 HTML 标签添加 ____________ 属性。
id 选择器的语法是以 ____________ 开头，class 选择器以 ____________ 开头。
要实现鼠标悬停时文字颜色变红，伪类写法是 ____________（以 .box 为例）。
float: left 的效果是 ____________。
清除列表默认编号的 list-style-type 属性值是 ____________。
内边距对应的 CSS 属性是 ____________，外边距是 ____________。
禁止鼠标样式对应的 cursor 属性值是 ____________。
链接外部样式表的标签中，rel 属性的值必须是 ____________。
隐藏元素且不占空间的样式是 ____________。

（三）编程题（3 题）

题目 1：基础选择器与样式应用

创建 HTML 文件，包含以下元素：
一个 div（id 为 box1），内容为 “ID 选择器测试”；
两个 p 标签（class 为 text-normal），内容分别为 “Class 选择器测试 1”“Class 选择器测试 2”；
一个 h3 标签，内容为 “标签选择器测试”。
用内部样式块实现：
id 选择器：box1 背景色 #f0f8ff，宽度 200px，边框为 2px 实线 #333；
class 选择器：text-normal 字体大小 14px，颜色 #666，行高 1.5；
标签选择器：h3 文字居中，颜色 #e63946，无下划线。

题目 2：交互效果与列表样式

创建 HTML 文件，包含一个无序列表（ul），列表项为 “首页”“课程”“关于我们”；
用 CSS 实现：
去掉列表默认编号，列表项添加 10px 内边距；
鼠标悬停在列表项上时，背景色变为 #457b9d，文字颜色变为白色，鼠标样式为小手；
列表项宽度 100px，边框为 1px 虚线 #ddd；
新增一个超链接（a 标签），清除默认下划线，鼠标悬停时显示下划线。

题目 3：综合布局与显隐控制

创建 HTML 文件，包含：

一个按钮（button），内容为 “显示 / 隐藏盒子”；
一个 div（id 为 target-box），初始隐藏，宽度 300px，高度 150px，背景色 #ffd6a5，外边距 20px，内边距 10px；
用 CSS 设置初始样式，用 JavaScript 实现点击按钮切换 div 的显示 / 隐藏（修改 display 属性）；
给 div 添加浮动（left），确保显示时文字不会环绕（可在 div 后加
清除浮动）。

CSS基础练习题-参考答案

BCBCB BBBBB

Cascading Style Sheet
style
#、.
.box:hover {…}
元素左浮动，文字环绕在右侧
none
padding、margin
not-allowed
stylesheet
display: none

代码一

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器测试</title>
    <style type="text/css">
        /* id选择器 */
        #box1 {
            background-color: #f0f8ff;
            width: 200px;
            border: 2px solid #333;
            padding: 10px;
        }
        /* class选择器 */
        .text-normal {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }
        /* 标签选择器 */
        h3 {
            text-align: center;
            color: #e63946;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="box1">ID选择器测试</div>
    <p class="text-normal">Class选择器测试1</p>
    <p class="text-normal">Class选择器测试2</p>
    <h3>标签选择器测试</h3>
</body>
</html>

代码二

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互与列表样式</title>
    <style type="text/css">
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            width: 100px;
            padding: 10px;
            border: 1px dashed #ddd;
            margin: 5px 0;
            cursor: pointer;
        }
        li:hover {
            background-color: #457b9d;
            color: white;
        }
        a {
            text-decoration: none;
            color: #1d3557;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>课程</li>
        <li>关于我们</li>
    </ul>
    <a href="#">测试链接</a>
</body>
</html>

代码三

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>显隐控制与布局</title>
    <style type="text/css">
        #target-box {
            display: none; /* 初始隐藏 */
            width: 300px;
            height: 150px;
            background-color: #ffd6a5;
            margin: 20px;
            padding: 10px;
            float: left; /* 左浮动 */
        }
        button {
            padding: 5px 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="toggleBox()">显示/隐藏盒子</button>
    <div id="target-box">这是一个可显隐的浮动盒子</div>
    <div style="clear: both;"></div> <!-- 清除浮动 -->
    <p>测试文字，确保浮动清除后不会环绕盒子</p>

    <script>
        // 切换显隐的函数
        function toggleBox() {
            const box = document.getElementById('target-box');
            if (box.style.display === 'none' || box.style.display === '') {
                box.style.display = 'block';
            } else {
                box.style.display = 'none';
            }
        }
    </script>
</body>
</html>

HTML Learn

Wed, 28 Jan 2026 11:55:57 +0800

本文是html学习笔记.

内容一览

html 概述
- 第一个html文件
基本标签
实体符号
表格
背景图片，背景颜色
超链接
列表
表单
- html中的id属性
- div和span

HTML 概述

从头开始——第一个html的写法，参考代码文件第一个html：

<!-- 根 -->
 <!doctype html>
<html>
    <!-- 头 -->
    <head>
        <title>
            标签页标题
        </title>
    </head>
    <!-- 网页体，内容显示到网页上 -->
    <body>
        My first HTML page.
        我的第一个HTML文件。
        <!-- 注释信息的写法 -->
    </body>
</html>

基本标签

小知识：html标签不区分大小写；少个尾标签也行。

段落

<p>是段落标签，其中的内容成为一段落。

标题字

<h1>到<h6>

换行

<br>

水平线

<hr>

可以通过color设置属性，例如红色线：<hr color="red">。 color称为属性名，"red"称为属性值。

预留格式

<pre>保留源码格式。例如

<!doctype html>
<pre>
    for i in range(10):
        print(f"i+1={i}")
    print(i)
</pre>

则将打印出已有缩进，不是变成一行打印。

U, I, B, D等

加粗<b>，斜体<i>, 下划线<u>，划掉<del>；

小标：上<sup>，下<sub>

字体标签

<font color="blue" size=13>可修改颜色，字体等。

实体符号

（碎碎念）字符编码

1
2
3

<head>
    <meta charset="utf-8"/>
</head>

这行代码告诉浏览器使用哪一种字符编码打开文件。这要与html文件编写用的编码相同。

空格

例如要显示大空格，直接打一堆space是没有的，要 是一个空格。

大小于号

小于<大于>

表格

参考代码004。

标签描述

table 表格
tr 表格的一行
td 一行中的一列，即单元格

参数

添加边框：<table border="1px">

设置单元格高度宽度：width="300px"，height="200px"。属性值还可以设置为50%，就是页面的一般大。

对齐：可为tr或者td设置对齐：align="right"，属性值还可为center, left等。

单元格合并

参考代码005。

列合并，同一行俩单元格合并，只留第一个td，并添加属性colspan：

<tr> 
    <!-- 一个单元格 -->
    <td>1,1</td>
    <td colspan="2">1,2</td>
</tr>

行合并，同一列合并，只留第一个td，并添加属性rowspan：

<!-- 行合并 -->
<tr> 
    <td>a</td>
    <td>b</td>
    <td rowspan="2">与下方合并</td>
</tr>

<tr> 
    <td>A</td>
    <td>B</td>
</tr>

`th`标签

参考代码006。

用<th>代替<td>，可令内容自动加粗居中。

`thead`，`tbody`，`tfoot`

参考代码007

表格可以用thead，tbody，tfoot开分割——目的是方便JS操作表格。没有视觉效果，方便后续操作。

背景颜色和图片

参考代码008

背景颜色：在body标签处，设置属性bgcolor
背景图片：在body标签处，设置属性background

图片

参考代码009

通过<img src="path/to/your/fig"></img>插入图片。

可用属性：

src：指定图片路径
width：指定图片宽度（高度保持比例自动缩放）
height：手动设置就可以拉伸图片
title：鼠标悬停时显示提示
alt：若图片加载失败的提示信息

超链接

参考代码010

使用<a href="path">连接文本</a>创建文本超链接。

图片超链接：将插入图片的内容包裹在一对<a></a>中即可。
target属性：设置最终打开窗口的位置：
- _self：在当前窗口打开
- _blank：新窗口打开
- _parent：当前窗口的父级窗口（窗口嵌套时的上一级）
- _top：当前窗口的顶级窗口（窗口嵌套时的最高级）

列表

无序列表：

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

其输出形式如下：

Apple

Orange

Banana

无序表允许嵌套有序/无序表，参考代码文件011。<ul>标签的type属性可指定样式，例如"circle"是圈圈，"square"是方块。

有序列表：

<ol>
    <li>Asia</li>
    <li>America</li>
    <li>Arctic</li>
</ol>

同样的，有序表可以嵌套列表。<ol>的type属性指定有序编号样式，例如字母、罗马数字、数码等。

表单（重点）

表单时用来收集用户数据，发送请求时会把收集的数据发送给主机（例如登录页）。

表单的语法格式

<form>
    <!-- 表单项1 -->
    <!-- 表单项2 -->
</form>

参考代码012 表单的属性action和超链接的href类似，可以设置一个目标位置。当按下按钮（如下），自动跳转到此位置。

提交按钮

表单可以画一个按钮，按下即跳转到表单action属性中的目标位置，这要使用<input>标签（一对<input>表示输入域，通过展示不同的type显示不同的样式）将<input type="submit"/>作为一个表单写入表单中，即可显示出一个按钮。注意，所有能够提交表单的按钮，type必须是"submit"。注意：

type设置为普通按钮button只能点击，不能跳转到action指定的位置；
在表单外的按钮无法自动跳转

<!-- 例子：包含此段代码： -->
<!-- 浏览器上会显示一个方框按钮，点击会跳转到`form`的type属性值，即目标网站。 -->
<h2>表单</h2>
<form action="https://www.bing.com">
    <input type="submit"/>
</form>

若要按钮显示自定义文本，可设置<input value=>属性为自定义文本。如果添加了name属性，则会将name=value也发送出去，所以不要为提交按钮添加name属性！

此外，<input type="reset" value="清空输入"/>"表单项可将表单变回默认状态。

一个例子

action属性值的分析：

https://是协议
192.168.154.2是IP
:8080是端口
/oa/login是主机上的一段程序，可用于处理表单提交的信息

<input type=>属性取为text则是可输入文本框，password则是密码框（不显示字符）。

表单项的name属性决定表单项的输入内容是否提交，没有该属性的表单项输入不会被传递到目标位置。并且，向目标位置提交的数据以url?name=value&name=value的键值对格式提交。

可以测试一下，不加name属性，跳转到的地址栏会显示https://192.168.154.2:8080/oa/login?而没有后续数据。添加name属性和属性值后，若是依次输入ustc、1234、qwer，则地址栏为https://192.168.154.2:8080/oa/login?usr_nm=ustc&passwd=qwer这样的内容（UID没有传送数据）。若某项没有填写又没有默认值，则传递空字符串。

单选框和复选框

参考代码演示表单

type="radio"表示一个单选圆圈，点击一次可变成实心的表示选中 name相同的多个radio类型的input表单项只能选中一个（换个说法，同一个单选问题的每个input表单项name属性要相同）。下面的代码展示了这一特性：

<!-- 性别表单项 -->
性别    男<input type="radio" name="n1"/>
        女<input type="radio" name="n1"/><br>
年级    高<input type="radio" name="n1"/>
        低<input type="radio" name="n1"/><br>
<!-- 其它表单项 -->
<!-- 这样的表单项是有问题的！因为四个选择框只能选中一个 -->

改成如下这样就互不影响了。此外，程序员需要提供value的值，对应不同选项映射的收集数据的值，因为radio类型不知道每个选项要对应哪个值来上传。

性别    男<input type="radio" name="n1"/>
        女<input type="radio" name="n1"/><br>
年级    高<input type="radio" name="n2"/>
        低<input type="radio" name="n2"/><br>

为<input type="radio">添加checked属性表示默认选中此表单项。

type=checkbox表示一个复选框；name、value和checked属性用法同上。

下拉列表

下拉列表通过<select>标签实现：

<select name="level">
    <option>Middle School</option>
    <option>College</option>
    <option selected>小学二年级</option>
</select>

<option>表示下拉列表项。列表项添加selected属性表示默认选中此项。 注意！下拉列表类型输入不再是使用<input>表示，是<select>

下拉列表支持多选

参考代码014

为select标签添加size="n"属性，即可使得下拉列表一次展现n个选项，并支持滚动条。添加multiple属性，即可支持使用ctrl键进行多选。另外，n=1并添加multiple属性可以显示出下拉复选框。

文本域

一对<textarea>表示一个文本域，可以输入长文本。值得注意的是标签对内的所有内容都会作为默认内容显示出来，因此不要有换行或注释在其中。不要这么做：

<textarea rows="5" cols="60" name="intro">
    <!-- 注释 -->
     123和换行

</textarea>

`file`控件

<input type="file"/>可以上传文件。至于后台java程序提纲IO流的方式接收文件。

隐藏域控件

<input type="hidden" name="usercode" value="111"/>产生一个隐藏域，不在网页上显示，但是可以携带提交内容。

`readonly`属性和`disabled`属性

readonly和disabled属性都使得输入内容不可更改（只读），并且disabled使得输入内容不被提交。

`maxlength`属性

限制输入内容长度，例如，作用于type=text的输入域，则最多输入3字符。

HTML的`id`属性

在HTML任何一个节点（标签）上都有id属性，一个id代表一个节点（类似于身份证号），因而同一个网页中id属性是不能重复的。 Javascript可以对HTML节点进行改动，这就要用到id来获取节点对象。

例如，可以像下面为每个节点添加id：

<!DOCTYPE html>
<html id="myhtml">
    <head id="myhead">
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body id="mybody">
        <form action="ag.asd.org" id="myform"></form>
    </body>
</html>

`<div>`和`<span>`

参考代码019

<div>和<span>都被称为图层，网页可以有多个图层。每个图层在网页中都是一个独立的盒子，可以重叠、嵌套。图层最主要作用就 —— 网页布局。图层通过左上角顶点的x, y轴坐标定位其在网页中的位置（后期可用CSS样式进行定位）。

两者的区别：div默认情况下独占一行，span不独占行。

附录

HTML 基础测试练习题

考察范围：基本标签 - 表单（下拉列表）

一、选择题（共 5 题，每题只有一个正确答案）

1–下列哪个标签是 HTML 文档的根标签？（）

A. <head> B. <body> C. <html> D. <!doctype html>

2–要在网页中插入一张图片，且当图片加载失败时显示提示文字，需设置标签的哪个属性？（）

A. src B. alt C. title D. width

3–以下关于 HTML 表单的说法，错误的是？（）

A. 表单的提交按钮type属性值必须为submit
B. 表单项必须添加name属性才能提交数据
C. 下拉列表的标签是<input type="select">
D. 重置按钮的作用是将表单恢复为默认状态

4–若要实现同一行内两个单元格合并，需为标签添加哪个属性？（）

A. rowspan B. colspan C. align D. merge

5–下列哪个实体符号表示 HTML 中的空格？（）

A. < B. > C.   D. &

二、填空题（共 10 题，每空 1 分）

6–HTML 文档的基本结构包含<head>和<body>标签，其中<head>标签内的<title>标签用于设置______。

7–要实现强制换行效果，需使用单标签______；要添加一条红色水平线，代码为______。

8–<pre>标签的作用是______，它会保留源码中的缩进和换行格式。

9–HTML 表格中，<th>标签的作用是______，其内容默认______且居中显示。

10–超链接标签<a>的核心属性是______，用于指定跳转目标；若要在新窗口打开链接，需设置target属性值为______。

11–无序列表的标签是______，列表项的标签是______；若要将无序列表的项目符号改为空心圆，需设置type属性值为______。

12–HTML 表单中，单选框的type属性值为______，同一组单选框的______属性值必须相同才能实现互斥效果。

13–下拉列表由<select>标签定义，列表项由______标签定义；若要默认选中某列表项，需添加______属性。

14–文本域的标签是______，通过rows和cols属性分别设置______和______。

15–要设置网页的背景颜色，需在<body>标签中添加______属性；若要设置背景图片，则添加______属性。

三、编写题（共 3 题，每题需写出完整代码）

16–编写一个完整的 HTML 文档，要求包含基本结构（文档声明、<html>、<head>、<body>），<head>中设置页面标题为 “我的第一个 HTML 页面”，<body>中包含一个一级标题 “欢迎学习 HTML” 和一个段落，段落内容为 “这是一道 HTML 编写题的练习内容。”。

17–编写一个 HTML 表格，要求如下：表格边框为 1 像素；表格包含 2 行 3 列；第一行是表头，内容分别为 “姓名”、“年龄”、“班级”；第二行内容分别为 “张三”、“20”、“计算机 1 班”；表头单元格内容居中加粗（使用<th>标签实现）

18–编写一个 HTML 表单，要求如下：表单提交目标为https://www.example.com；包含以下表单项：

文本框：用于输入用户名，name属性为username，默认值为 “请输入用户名”
密码框：用于输入密码，name属性为password
单选框：性别选择（男、女），name属性为gender，默认选中 “男”
下拉列表：年级选择（大一、大二、大三），name属性为grade，默认选中 “大二”
提交按钮和重置按钮，按钮文本分别为 “提交信息” 和 “重置表单”

HTML 基础测试练习题 - 答案

一、CBCBC

二、填空题答案

网页标签页的标题
<br>；<hr color="red">
预留格式
定义表头单元格；加粗
href；_blank
<ul>；<li>；circle
radio；name
<option>；selected
<textarea>；行数；列数
bgcolor；background

三、编写题答案第一题

<!doctype html>
<html>
<head>
    <title>我的第一个HTML页面</title>
</head>
<body>
    <h1>欢迎学习HTML</h1>
    <p>这是一道HTML编写题的练习内容。</p>
</body>
</html>

第二题

<table border="1px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>计算机1班</td>
    </tr>
</table>

第三题

<form action="https://www.example.com">
    用户名：<input type="text" name="username" value="请输入用户名"><br>
    密码：<input type="password" name="password"><br>
    性别：男<input type="radio" name="gender" checked> 女<input type="radio" name="gender"><br>
    年级：
    <select name="grade">
        <option>大一</option>
        <option selected>大二</option>
        <option>大三</option>
    </select><br>
    <input type="submit" value="提交信息">
    <input type="reset" value="重置表单">
</form>

MyZeroBlog

Mon, 26 Jan 2026 00:00:00 +0000

Hello world ^_^

Hi there everyone and tihs is BZLIUSTC (春节序曲), a beginner of Hugo static blog page writer.

Thanks to the hugo-theme-stack and manuals written by other bloggers, we are able to set up this page so fast. Thank you for all contributors ! I would by a coffee for you if possible. ~~Nope, noway~~

This page, as the title said, is a rough work page for any try-outs. So do not hesitate if any great idea comes.

Have fun with Hugo.

Math Settings

参考文献：

某博主的优秀教程

试着写一个数学公式：记得一定要用一对<div> </div>包起来！如果还无法启用的话，检查根目录config文件里面是不是有math: false。如果是，改成true就好啦。

$$ \theta :=\theta _0-\alpha \nabla f\left( \theta _0 \right) $$

Hyperlink

想要添加任何附件，请放到/static/append/目录中。为了管理方便，最好为每篇文章的附件们创建一个子目录，统一存放。

reference: article

侧栏头像和简介

标题（网站标题）和简介在根目录的hugo.yaml文件中编辑；头像存储的默认根路径为/themes/assets/，头像路径也在项目根目录的hugo.yaml中设置。

Website on Nishizono Mio's Shaddow

JavaScript Learn Part.C

BOM和DOM

DOM编程案例

案例:动态显示表格内容

正则表达式

常见正则表达式符号

JS中创建正则表达式对象

正则表达式对象的方法

案例:网页时钟

BOM编程案例

附录

JS练习题二

单选题

不定项

填空题

编程题

编程题 1：用户注册表单（表单验证 + CSS 样式 + 事件处理）

编程题 2：商品列表展示（侧重：DOM 操作 + CSS 布局 + 数据渲染）

编程题 3：待办事项清单（侧重：事件绑定 + CSS 显隐 + 数组操作）

编程题 4：网页计算器（侧重：JS 运算 + CSS 布局 + 事件委托）

编程题 5：动态表格管理系统（侧重：表格操作 + CSS 样式 + JSON 数据）

JS练习题二-参考答案

JavaScript Learn Part.B

JS中的事件

常用事件

注册事件的2种方式

代码的执行顺序

例子：通过keydown事件捕捉Enter和ESC

运算符void

控制语句

for … in 语句

with语句

内置对象

Array

创建数组

Date

创建Date对象

附录

JavaScript 基础语法练习题一

一、单选题（每题2分，共20分）

二、不定项选择题（每题4分，共20分，多选、少选、错选均不得分）

三、填空题（每空2分，共20分）

四、编程题（每题20分，共60分）

题目1：数字判断与转换

题目2：事件绑定实现表单验证

题目3：对象与遍历

JavaScript 基础语法练习题一 答案

JavaScript Learn Part A

JavaScript概述

JavaScript包括三块:ECMAScript、DOM、BOM

嵌入JS的三种方式以及JS注释

行间事件法

页面脚本块嵌入

引入外部JS文件

标识符合关键字

变量

变量的声明与赋值

函数的定义和调用

局部变量与全局变量

JS数据类型

ECMASCRIPT6版本之前的数据类型有6种

typeof运算符（@@@@@）

Numebr类型

Number类型的数据

isNaN() 函数

Number()函数

parseInt()函数

JS数学类介绍

Boolean类型

Boolean()函数

String

Object

prototype属性

类

定义类

访问属性

null, NaN, undefined的区别

==和===的区别

null, NaN, undefined的区别

JavaScript 基础语法练习题一答案

`==`和`===`的区别

`th`标签

`thead`，`tbody`，`tfoot`