Html 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>

Markdown Syntax Guide

Mon, 11 Mar 2019 00:00:00 +0000

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike¹

Tables

Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Name	Age
Bob	27
Alice	23

Inline Markdown within tables

Italics	Bold	Code
italics	bold	`code`

A	B	C	D	E	F
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex.	Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus	Proin sit amet velit nec enim imperdiet vehicula.	Ut bibendum vestibulum quam, eu egestas turpis gravida nec	Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien

Code Blocks

Code block with backticks

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block indented with four spaces

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block with Hugo’s internal highlight shortcode

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Diff code block

[dependencies.bevy]
git = "https://github.com/bevyengine/bevy"
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
- features = ["dynamic"]
+ features = ["jpeg", "dynamic"]

List Types

Ordered List

First item
Second item
Third item

Unordered List

List item
Another item
And another item

Nested list

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL + ALT + Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Hyperlinked image

The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩︎

Html 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`