[{"content":"本文是mysql学习笔记.\nMySql服务器介绍 MySQL软件说白了，就是一段带有main方法的Java类， 用来定位和操作表文件。\n表文件，数据库和数据服务器 表文件\n表文件后缀名为.frm 表文件以行（记录）为单位存储数据 表文件由一个标题行+若干数据行组成 数据库：存储表文件的目录\n数据库服务器：专门操作表文件\n数据库服务器分类 关系型数据库服务器 尽可能为用户提供详尽的信息描述 运行时往往需要从大量的表文件提取数据,因此运行速度相对较慢 MySql是关系数据库服务器 非关系型数据库服务器 尽可能快速为用户提供关键数据 使用key-value形式进行数据存储 Redis是非关系数据库服务器 关系数据库服务器分类 甲骨文的：Oracle和MySql\n微软的：SqlServer\nMySql基础使用 配置 配置文件在\\your\\path\\to\\MySQL\\MySQL Server 5.5\\my.ini下。\n登录：命令mysql -uUserName -pPassword不要空格，其中-u, -p是用户名、密码关键字。\n启动关闭：Windows安装的MySql可以在services.msc中控制开启关闭。\nSQL命令和分类 SQL == Struct Query Language，大多命令都是查询数据。 不同关系型数据库服务器使用的SQL命令语法95%+都是一样的。 SQL不区分大小写，数据也没有大小写。\nSQL命令分类如下：\nDDL命令 (Database Defined Language)：管理当前数据库和表文件 DML命令 (Data Modify Language)：数据维护命令，用于修改表文件的数据，主要就是insert, delete, update DQL命令 (Data Query Language)：数据查询命令，查询表文件中的数据 SQL语句有很多,最好进行分门别类,这样更容易记忆。分为:\nDQL:\n数据查询语言(凡是带有select关键字的都是查询语句) select \u0026hellip; DML:\n数据操作语言(凡是对表当中的数据进行增删改的都是DML)，这个主要是操作表中的数据data insert delete update insert 增 delete 删 update 改 DDL:\n数据定义语言 凡是带有create、drop、alter的都是DDL。 DDL主要操作的是表的结构。不是表中的数据。 create:新建,等同于增 drop:删除 alter:修改 这个增删改和DML不同,这个主要是对表结构进行操作。 TCL:\n事务控制语言 事务提交: commit 事务回滚: rollback DCL：\n数据控制语言 授权grant，撤权revoke DDL命令 通知MySQL服务器管理数据库 show databases; ：查看所有数据库名称； create database YourDBName; ：新建数据库 drop database YourDBName; ：删除数据库 通知Mysql管理表文件 use TargetDBName; ：通知MySQL对指定数据库进行操作； show tables; ：查看所有表文件名称 create table YourTableName(字段名 数据类型); 例如：\n1 2 3 4 create table student_tb ( sid int, -- 学号 sname varchar(10) -- 名字，字符串类型用varchar，10表示最多存10个字符 ) show create table YourTableName; ：查看当前表文件的字段结构信息 drop table YourTableName; ：删掉一张表 通知MySQLfwq对表文件重的字段进行维护 alter table 表名 add 新字段名 数据类型; ：为表格添加字段 alter table 表名 drop 要删的字段名; ：删除一个字段 alter table 表名 change 旧字段名 新约束; ：更改字段的约束（例如类型，规范等） alter table 表名 modify 旧字段名 新字段名 新约束; ：改字段的名字和约束（例如类型，规范等） DML命令 insert: 对指定表文件插入数据行 格式：insert into 表名 (字段名1, 字段名2, ...) values (值1, 值2, ...);；\n简化版格式：insert into 表名 values (值1, 值2, ...);，使用场景是为所有字段赋值（值数量等于字段数量）\n批处理插入：一次性添加多条数据；\n格式：insert into 表名 values (值1, 值2, ...)(值1, 值2, ...)(值1, 值2, ...);每组值数量等于字段数量\n表文件备份 一般先备份表，操作，没问题后再覆盖！\n格式：create table 新表 select * from 旧表，备份旧表，表结构和内容完全一样\n数据行备份 有时候只需要备份数据行而非整个表\n格式：insert into 新表 select * from 旧表，将旧表中的数据行复制到新表，要求新表的字段类型、字段排列顺序与旧表结构一致（但是字段名可以不一样）。\n删除命令 删除表所有数据行\n格式：delete from 表名，删掉表文件所有数据行\n有条件删除\n格式：delect from 表名 where 条件，将符合条件的数据行删掉\n举例：对于这样一张表格：\n1 2 3 4 5 6 7 8 9 10 11 12 13 +------+--------+------+--------+ | sid | sname | age | gender | +------+--------+------+--------+ | 10 | MIKE | 23 | NULL | | 20 | SMITH | NULL | W | | 20 | SMITH | 19 | M | | 40 | JACK | NULL | W | | 50 | god | 12 | W | | 60 | evil | 30 | M | | 70 | Comee | 22 | W | | 80 | Wdcd | 24 | W | | 90 | Ablach | 17 | M | +------+--------+------+--------+ 执行delete from student_tb where sid\u0026gt;=70;将删除学号大于等于70的数据行。\n更新命令 修改所有数据行\n格式：update 表名 set 字段一=新值, 字段二=新值, ...;，将表所有数据行的指定字段变为指定值\n修改条件数据行：将满足条件的数据行数据更新\n格式：update 表名 set 字段一=新值, 字段二=新值 where 条件\nDQL命令 TIPS：样例数据库可以通过执行创建文件得到，以下都是使用这个数据库进行操作。\n单表查询：7个命令 临时表的概念：除了from命令，其它6个命令都是使用上一个命令生成的临时表进行操作\n临时表的生存周期：被下一条命令使用后立即销毁\n只有group by 命令可以生成多个临时表，，另外5个命令执行都生成一个查询表。\n只有having命令不产生新的查询表。\n查询语句的书写顺序：select 字段名, 函数, 子查询 from 表名； 其中条件查询增加一个where命令：select 字段名, 函数, 子查询 from 表名 where 条件，示例SELECT ename, job FROM emp WHERE sal\u0026gt;=3000;\n下面对各个元素进行介绍：\nfrom, select, where 三个命令 from命令：相对于读取流，把表文件加载到内存中形成临时表，供后续使用；执行优先级：一个查询语句中永远是from最先执行。from tbName name2可为表tbName取别名name2 select命令：取出指定字段所有数据，生成新的临时表 where命令：遍历临时表，定位满足条件的数据行，并读取生成新的临时表；执行优先级：from \u0026gt; where \u0026gt; select，where使用的是from生成的临时表 条件表达式 表达式可以是：关系表达式，逻辑表达式，MySQL提供的特殊运算符。如下\n等于关系：=；例如ename='smith'，deptno=20； 不等于关系：!=； 逻辑运算符：与and、或or；例如sal\u0026lt;3000 or deptno=10； 特殊 between \u0026hellip; and：查询区间，例如sal=\u0026lt;3000 and sal\u0026gt;=1000等效于sal between 1000 and 3000； 特殊 in：查询字段值在某集合中，例如job='salesman' or job='clerk'等效于job in ('salesman','clerk')； 特殊 not \u0026hellip; in：查询字段值不在某集合中，例如job!='salesman' and job!='clerk'等效于job not in ('salesman','clerk')； 特殊 is null：查询字段值为NULL（未定即未赋值）；不能写成comm = null，因为mysql中null不允许参与任何运算，要写成comm is null； 特殊 is not null：查询字段值不为NULL（未定即未赋值）； 特殊 like：模糊查询，例如ename like 's%'查询姓名以s开头的数据行，百分号是通配符；%s和%s%同理。下面介绍一些通配符 %：任意长度的字符串 _：一个任意字符 聚合函数 max(字段名)：统计当前字段下所有数据的最大值；示例select max(sal) from emp where deptno=20;；函数max(字段名)同理； avg(字段名)：统计当前字段下所有数据的平均值 sum(字段名)：统计当前字段下所有数据求和 count(字段名)：统计当前字段下数据不为NULL的个数 count(*)：统计当前临时表总行数 group by 字段名： group by 命令 考虑如下案例：分类汇总，查询各部门编号和部门下人数\n1 2 3 4 select job,count(*) from emp where deptno=20 group by job; group by命令执行优先级：where \u0026gt; group by \u0026gt; select\n命令书写顺序：就像上面这样select \u0026ndash;\u0026gt; from \u0026ndash;\u0026gt; where \u0026ndash;\u0026gt; group by\n工作原理：\ngroup by首先计算分组字段中的数据种类， 然后把有相同特征的数据合并到同一个临时表（因此若有多个特征，会生成多张临时表！）, select的行为取决于提供临时表的命令（重点 @@@@@） 如果select操作的临时表由 where 或 from 提供，则肯定只有一张临时表，select会把指定字段所有数据“剪出来”生成新的数据表 如果select操作的临时表由 group by 提供，则一般是多张临时表，select将依次操作每一个临时表，操作每个临时表时只读取第一行数据行，然后把读到的数据行合并为新的临时表 上述命令的临时表生成过程见此。\ngroup by 字段一, 字段二, ...多字段分组规则：\ngroup by 后续有多个字段，字段顺序对查询结果没有任何影响\ngroup by 每次执行只能对一个字段开始分组，因此group by deptno,job要执行两次group by 命令\ngroup by 从第二次执行开始使用的前一个group by得到的临时表\n练习：查询各部门编号，部门下职位名称，以及职位人数\n1 2 3 select deptno,job,count(*) from emp group by deptno,job; 以上代码，先对deptno分组得到三张临时表，然后将三表分别对job分组，一共得到9张临时表，所以执行结果就是9条数据行的。\nhaving 命令 考虑如下案例：查询部门20下，各个职位人数（自动忽略低于2人的职位）：\n1 2 3 4 5 select deptno,job,count(*) from emp where deptno=20 group by job having count(*)\u0026gt;=2; having 命令执行优先级：group by \u0026gt; having \u0026gt; select\n命令书写顺序：就像上面这样 select \u0026ndash;\u0026gt; from \u0026ndash;\u0026gt; where \u0026ndash;\u0026gt; group by \u0026ndash;\u0026gt; having\nhaving 命令不能独立出现在查询语句中，必须配合 group by使用，having 总是跟在 group by 后面\n工作原理：\nhaving执行完不生成新的临时表 having 会遍历group by生成的所有临时表，对每个表检查条件，把不符合条件的临时表整个删掉 having 的判断条件一般是一个聚合函数，如果是单行判定条件则用首行 TIPS: having 和 where 的区别\n操作单位不同，where 每次操作一行数据，因此条件不能有聚合函数；having 每次操作一个临时表 功能不同，where 将满足条件的数据行读取出来生成一个全新临时表；having 将不满足条件的临时表进行销毁处理 order by 排序查询命令 考虑如下案例：查询部门20下各个职位人数，查询结果按职位人数升序（降序）排列\n1 2 3 4 5 select deptno,job,count(*) from emp where deptno=20 group by job order by count(*) asc; /*降序则为desc，默认asc*/ order by的执行顺序：select \u0026gt; order by\n命令书写顺序：就像上面这样select \u0026ndash;\u0026gt; from \u0026ndash;\u0026gt; where \u0026ndash;\u0026gt; group by \u0026ndash;\u0026gt; having \u0026ndash;\u0026gt; order by 排序字段名 标记\n工作原理：\nORDER BY 专门操作SELECT生成的临时表； ORDER BY 根据排序字段内容，按照标记的顺序要求，对临时表数据行进行重新排序， 并将排序后数据行生成一个全新临时表 例如上述案例中，select执行后生成如下的临时表：\n1 2 3 4 5 6 7 8 9 +-----------+-------------+----------+ | job | avg(sal) | count(*) | +-----------+-------------+----------+ | ANALYST | 3000.000000 | 2 | | CLERK | 1037.500000 | 4 | | MANAGER | 2758.333333 | 3 | | PRESIDENT | 5000.000000 | 1 | | SALESMAN | 1400.000000 | 4 | +-----------+-------------+----------+ order by count(*) asc;将按照count(*)字段进行升排序（因此这里的count(*)不是聚合函数而是字段名），生成如下临时表：\n1 2 3 4 5 6 7 8 9 +-----------+-------------+----------+ | job | avg(sal) | count(*) | +-----------+-------------+----------+ | PRESIDENT | 5000.000000 | 1 | | ANALYST | 3000.000000 | 2 | | MANAGER | 2758.333333 | 3 | | CLERK | 1037.500000 | 4 | | SALESMAN | 1400.000000 | 4 | +-----------+-------------+----------+ 此外，oder by 跟的字段名可以用字段编号来代替，例如avg(sal)是临时表第2个字段，order by 2 asc;就是对临时表的avg(sal)字段升排序。\n多字段排序order by 字段一 标记, 字段二 标记, ...，优先级依次递减\n：例如若要对所有员工信息按部门编号升序、工资降序、入职日期升序排列，则写为order by deptno asc, sal desc, hiredate asc;\nlimit 命令 考虑如下案例：查询平均工资最高的两个部门 1 2 3 4 5 6 select deptno,avg(sal) from emp group by deptno order by avg(sal) asc limit 0 2; 执行优先级：order by \u0026gt; limit\n工作原理：limit start,cnt把临时表的第start行开始的共cnt行数据取出来构成新的临时表；\n注意：首行数据是第0行；start end 不得为负，若limit无法取出任何数据（例如编号溢出）则返回空表，不报错\n小结 1 \u0026ndash; 执行优先级from \u0026gt; where \u0026gt; group by \u0026gt; having \u0026gt; order by \u0026gt; limit\n2 \u0026ndash; 书写格式\n1 2 3 4 5 6 7 select 字段【可多个逗号分隔】, 函数, 子查询 from 表 where 行定位条件 【关系, 逻辑, 特殊运算; 不能用聚合函数】 group by 字段【可多个逗号分隔】 having 表条件 order by 排序字段 标记【可多组逗号分隔】 limit start cnt; 3 \u0026ndash; 复杂的查询一定要按照执行顺序来写，才不会混乱\n多表查询：连接查询合并 / 联合查询合并 隶属关系 隶属关系的两端，拥有方与从属方，在MySQL中被分为三类：\n一对一，例如一个人一个身份证\n一对多，例如一个老师多个学生\n多对多，例如\n一对多：一方表（拥有方） \u0026mdash; 多方表（从属方），一方表每条数据在多方表也只有一条数据\n例如，dept表作为拥有表，emp作为从属表，一个部门有多位员工\n一对一：一方表（拥有方） \u0026mdash; 多方表（从属方），只不过一方表每条数据在多方表也只有一条数据\n例如，“学号-姓名”表作为拥有方，“学号-身份证号”表作为从属方，一个学生只对应一个身份证号码\n多对多：实际是两个互相的一对多关系，一般要三张表来描述这个关系 例如，student表、course表都是一方表，score表是student的多方表，也是course的多方表：因为一个学生可以有多门课成绩，一个课程可由多个学生考试得分\n字段分类 描述 主键字段 主键字段相当于数据行的身份证，主键字段的值相当于\n唯一编号来唯一标识一行数据，不能为NULL或重复 非主键字段 非主键字段用来解释主键字段（附加信息） 外键字段 只存在于多方表，属于非主键字段，建立数据间隶属关系 多表查询 多表查询，就是将两张表文件的数据行合并到同一个临时表并展示的过程。\n执行流程：(1) 将两个表的数据行合并到全新的临时表中；(2) 使用6个查询命令（少了from命令）对新的临时表进行操作\n有两种合并方案：连接查询合并 / 联合查询合并\n连接合并查询 连接查询合并方案:\n要求两张表之间必须存在隶属关系 将两张表数据行沿着【水平方向】拼接，例如dept首行与emp首行拼接为10 Account NewYork 7369 smith clerk 800 10 展示给用户一个合法的隶属关系数据 格式：from 一方表 join 多方表或者from 多方表 join 一方表，两个写法效果完全一样\n工作原理：\nfrom 把两张表放入内存，即得2个临时表 join 把两个临时表水平拼接得到新的临时表 “拼接”规则： 临时表字段个数 = 一方表字段个数 + 多方表字段个数 临时表字段名称为原始表名.字段名，例如from dept join emp得到的临时表首尾字段为dept.deptno和emp.deptno（不要用打印表的方法查看字段名！）【注释】1 临时表数据行数 = 一方表数据行数 * 多方表数据行数 拼接方式：一方表每行数据与多方表所有数据进行拼接 连接合并必然产生脏数据2必须去掉 下面介绍过滤脏数据，筛选合法数据的两种方法：内连接过滤 / 外联过滤\n连接合并 - 内连接过滤 方案 1 2 from 一方表 join 多方表 on 合法数据判定条件 on 的行为与 where 高度相似：工作原理\n遍历临时表每个数据行 把符合条件的数据行取出来构成新的临时表 与where的区别：on 目标是抓取合法数据行 合法数据行的判断条件：\n若多方表存在明显的外键字段：on 当前行.来自一方表的主键值 = 当前行.来自多方表的外键值，如下 1 2 3 select * from dept join emp on dept.deptno = emp.deptno; 案例：查询部门名+平均工资：\n1 2 3 select dname,avg(emp.sal) from dept join emp on dept.deptno = emp.deptno /*整一行就是造新临时表*/ group by dept.deptno; E.G. 查询部门20的名称及其下各职位的人数\n方案一\n1 2 3 4 select dept.dname,emp.job,count(*) from dept join emp on dept.deptno = emp.deptno where dept.deptno=20 group by emp.job; 方案二，把筛选dept=20的定位条件放到on也是可以的，只不过这样可读性差\n1 2 3 4 select dept.dname,emp.job,count(*) from dept join emp on dept.deptno = emp.deptno and dept.deptno=20 group by emp.job; 若多方表没有外键字段，则根据实际生活的隶属关系进行判断：on 实际隶属关系 案例：查询员工姓名、工资、工资等级；\n这个问题中工资等级给出了工资范围（拥有方），一个等级对应多个员工（隶属方）。 也即我们要根据实际含义推出隶属关系，得到一方表和多方表。 1 2 3 select emp.ename, emp.sal, salgrade.grade from emp join salgrade on emp.sal between salgrade.losal and salgrade.hisal; 连接合并 - 外连接过滤 方案 外连接过滤方案:\n将两张表划分为【需要帮助表】与【不需要帮助表】 确保【需要帮助表】所有的数据行都要进入到合法临时表 如果【需要帮助表】某个数据与【不需要帮助表】所有数据行都无法匹配成功（意思是 on 条件无法满足），此时需要将这个数据行作为一个独立的数据行填充到新的临时表,缺失的数据都是NULL值 根据以上说法，有如下结论：\n外连接必须加 on 条件（不加语法报错） 若把 on 条件设为恒真 例如1=1，临时表结果与直接join连接完全一样【详见测试】 加上了 on 条件，满足条件的表项当然会被取出；同时如果“需要帮助表”的某行从未与“不需要帮助表”的所有行达成 on 条件，它也会进入临时表 命令格式： 1 2 from 需要帮助表 left join 不需要帮助表 on 合法定位条件 这个命令与from 不需要帮助表 right join 需要帮助表 on 合法定位条件效果相同。\n案例：查询所有部门名称和下属人数（0人的部门也要展示） 1 2 3 4 5 select dept.deptno, dept.dname, count(emp.empno) /* 这里一定要用empno统计，因为left join 会产生empno为NULL的数据行，不能计入 */ from dept left join emp on dept.deptno = emp.deptno group by dept.deptno where emp.empno is not null; 联合查询合并 不要求两张临时表之间存在隶属关系 要求两张临时表字段结构必须保持一致【守段个数,字段类型,字段类型排列顺序】 将两张临时表数据行沿着垂直方向堆砌到新临时表 生成临时表字段只能来自于第一个临时表字段 union 合并出的临时表会把完全相同的数据行只保留一个；如果要禁用此功能要使用union all 联合查询的应用场景主要是 “行转列” 查询 命令格式：\n1 2 3 select 字段一, 字段二, 字段三, ... from 表一 union select 字段甲, 字段乙, 字段丙, ... from 表二 注意：若要对某字段进行排序等操作，只能使用字段一，二，三等，因为生成临时表的字段名只来自于第一个临时表字段。\n子查询：依赖子查询 / 独立子查询 问题引入：查询部门20工资高于公司平均工资的员工信息\n需求：如何先得到平均工资来用于定位条件呢？\n解决：子查询\n子查询的概念 七个查询命令执行时需要从当前临时表获得相关数据才可以正常运行， 如果无法从当前临时表得到需要数据则无法运行。此时MySql服务器 允许开发人员通过一个完整的查询语句，为当前查询命令提供需要的数据 从而保证查询正常执行 —— 这个提供数据帮助的查询语句就是子查询。\n子查询与7个查询命令的关系 from 命令功能是：从外存复制表文件到内存形成临时表，或者定位内存中的临时表。 对于后者，子查询就可以为select命令提供临时表。考察如下例子： 1 2 3 select SubQueryTempTable.ename, SubQueryTempTable.job from (select empno, ename, job, sal from emp) as SubQueryTempTable; 这个案例中，(select empno, ename, job, sal from emp)是一个子查询，生成一个临时表供 from 使用； 此外，由于子查询得到的临时表是匿名的, 为了 select 能够使用其字段名，要用 as SubQueryTemporaryTable 为子查询得到的临时表命名。\nwhere 命令的定位条件若需要用统计数据（如最值、平均等），就可以用子查询得到结果。考察如下例子： 1 2 3 4 5 select * from emp where deptno = 20 and sal \u0026gt; (select avg(sal) from emp); group by 后面跟的是分组字段名，因此无法使用子查询\nhaving 可以使用子查询，为 having 的表舍选条件提供数据。\n案例，查询部门平均工资高于公司平均工资的部门信息\n1 2 3 4 select deptno,avg(sal) from emp group by deptno having avg(sal) \u0026gt; (select avg(sal) from emp); select：可以把子查询得到的数据作为select展示的信息 案例，打印员工姓名、工资、公司平均工资\n1 2 select ename, sal, (select avg(sal) from emp) from emp; order by：不能使用子查询【但是子查询语句可以作为字段名供order by 使用】\nlimit：不能使用子查询\n子查询分为独立子查询和依赖子查询。\n独立子查询 含义：独立子查询不需要其服务的查询命令提供帮助\n独立子查询工作规则：\n独立子查询返回结果相当于“常量”，不随着执行的时机和次数而改变 独立子查询会在 “其服务的查询命令” 执行前 先执行 独立子查询在 “其服务的查询命令” 执行时 不会被调用 例如：from emp where sal \u0026gt; (select avg(sal) from emp);先执行一次子查询得到平均工资； 接着，where 遍历员工表并检验条件，检验过程直接使用先前子查询返回的结果，不会在遍历中执行子查询。 参考案例\n依赖子查询【尽量不用】 案例：查询工资高于所在部门的部门平均工资的员工信息\n1 2 3 select ename,sal,(select avg(sal) from emp as tanother where tanother.deptno = emp.deptno) from emp where sal \u0026gt; (select avg(sal) from emp as t1 where t1.deptno = emp.deptno); 特点：不能在其服务的查询命令执行前执行，而且会多次执行读外存，效率极低！\n连接查询和自关联查询，可以完全替代依赖子查询的功能，仍是上面的例子（重点 @@@@@）：\n第一步，写出产生 部门-部门平均工资 临时表 的语句：\n1 2 3 select deptno,avg(sal) as avg_sal /*可见 as 除了表，还可以为字段起别名 */ from emp group by deptno; 第二步，把这个表与emp表做连接合并，并过滤；注意为临时表添加名字才符合语法规范\n1 2 3 4 5 6 7 select * from emp join ( select deptno as sub_deptno,avg(sal) as sub_avsl /*起名可以玩得花一点*/ from emp group by deptno ) as DeptAvgSal on emp.deptno = DeptAvgSal.sub_deptno; 第三步，where 抓取员工工资高于部门平均工资的行，最后用select切出想要的字段\n1 2 3 4 5 6 7 8 select deptno, emp.ename, sal, DeptAvgSal.sub_avsl, sub_avsl /*后两个字段切出来是一样的*/ from emp join ( select deptno as sub_deptno,avg(sal) as sub_avsl from emp group by deptno ) as DeptAvgSal on emp.deptno = DeptAvgSal.sub_deptno where emp.sal \u0026gt; sub_avsl; /* 如所见，如果字段没有歧义，可以直接用而不需要加表名 dot */ 自关联查询 案例：查询员工及其上级的工资，有依赖子查询、自关联 两种方法实现\n依赖子查询法：\n1 2 3 4 5 6 select ename, sal, (select ename from emp as t1 where t1.empno=emp.mgr) as senior_name, (select sal from emp as t2 where t2.empno=emp.mgr) as senior_sal from emp; 自关联法：\n1 2 3 4 select t1.ename as my_name, t1.sal my_sal, t2.ename as senior_name, t2.sal as senior_sal /* 注意要用 left join，因为老板 President 没有上级 ^_^ */ from emp as t1 left join emp as t2 /* 搞出两张表来用 */ on t1.mgr = t2.empno; 查询结果中解释字段的来源 解释字段：在SELECT执行之前,在临时表动态生成一个列。 列中内容用于对临时表每一行数据进行解释分析\n解释数据来源:\n来自于聚合函数 1 2 3 select deptno, max(sal) as \u0026#39;DEPT TOP SALARY\u0026#39;, avg(sal) as \u0026#39;AVERAGE SALARY\u0026#39; from emp group by deptno; 来自于独立子查询 1 2 3 select deptno, max(sal) as \u0026#39;DEPT TOP SALARY\u0026#39;, avg(sal) as \u0026#39;DEPT AVERAGE SALARY\u0026#39;, (select avg(sal) from emp) as \u0026#39;COMPANY AVERAGE SALARY\u0026#39; from emp group by deptno; 开发人员手动设置 1 2 3 select deptno, max(sal) as \u0026#39;DEPT TOP SALARY\u0026#39;, \u0026#39;Morning\u0026#39; as \u0026#39;Notice\u0026#39; from emp group by deptno; 来自 case \u0026hellip; end 语句 case \u0026hellip; end 语句在 select 前执行，它会遍历临时表每行数据， 对每一行数据生成动态的解释内容。 执行完毕时， case \u0026hellip; end 生成的解释数据构成新的一列。 格式：case \u0026hellip; end 进行多分支值判断（类似于switch case）\n1 2 3 4 5 6 7 select (case when 当前数据行字段值区间判断 then \u0026#39;解释数据一\u0026#39; when 当前数据行字段值区间判断 then \u0026#39;解释数据二\u0026#39; when 当前数据行字段值区间判断 then \u0026#39;解释数据三\u0026#39; else \u0026#39;默认解释数据\u0026#39; end) as \u0026#39;解释字段\u0026#39; 案例：按照员工薪资打印提示\n1 2 3 4 5 6 7 8 select ename, sal, (case when sal \u0026gt; 4000 then \u0026#39;Rich Man\u0026#39; when sal between 2400 and 3999 then \u0026#39;Fine Class\u0026#39; when sal between 1500 and 2399 then \u0026#39;Modest Person\u0026#39; else \u0026#39;Fresh Clerk\u0026#39; end) as COMMENT from emp 格式：case \u0026hellip; end 进行等值判断（类似于switch case）\n1 2 3 4 5 6 7 select (case when 值一 then \u0026#39;解释数据甲\u0026#39; when 值二 then \u0026#39;解释数据乙\u0026#39; when 值三 then \u0026#39;解释数据丙\u0026#39; else \u0026#39;默认解释数据\u0026#39; end) as \u0026#39;解释字段\u0026#39; 案例：按照员工薪资打印提示\n1 2 3 4 5 6 7 8 select ename, sal, (case job when \u0026#39;president\u0026#39; then \u0026#39;TOP\u0026#39; when \u0026#39;manager\u0026#39; then \u0026#39;SENIOR\u0026#39; when \u0026#39;analyst\u0026#39; then \u0026#39;SMART\u0026#39; else \u0026#39;WORST\u0026#39; end) as COMMENT from emp 特殊查询案例：行列转化 行转列 案例：成绩单如下\nsname phy_score cns_score mike 12 13 alice 34 78 需要转为如下形式\nsname course score mike phy 12 mike cns 13 alice phy 34 alice cns 78 这就要用到行列转化。\n行转列 —— 有固定公式即联合合并方案： 把成绩单的1、2字段作为临时表A，1、3字段作为临时表B，然后把AB联合合并\n1 2 3 4 select sname as NAME, \u0026#39;physics\u0026#39; as COURSE, phy_score as SCORE from scoresheet union select sname, \u0026#39;chinese\u0026#39; as \u0026#39;COURSE\u0026#39;, cns_score from scoresheet order by sname desc; 列转行 案例：成绩单如下\nsname course score mike phy 12 mike cns 13 alice phy 34 alice cns 78 需要转为如下形式\nsname phy_score cns_score mike 12 13 alice 34 78 这就用到列转行。列转行有自关联查询、分组+case-end 实现。\n自关联法 1 2 3 select s1.sname as NAME, s1.score as PHY_SCORE, s2.score as CNS_SCORE from student as s1 join student as s2 where s1.sname = s2.sname and s1.course = \u0026#39;phy\u0026#39; and s2.course = \u0026#39;cns\u0026#39; case end 法 分组的作用是把多行数据变为一行（压缩） 仔细分析下面的代码，从命令执行顺序入手，逐步分析临时表。 提示：执行顺序和功能\nfrom 加载表 group by 分成两张临时表 select 下有函数max，下套子查询，所以先执行子查询 case end 为两张表的每行数据按规则创建新的一列 select + max对两张临时表进行操作： 牢记：select 面对多张临时表时，利用聚合函数 max() 处理每一张表的首行，然后只生成一行数据 select 取出sname姓名，以及分数 （max聚合函数给出） 把两张临时表得到的两行数据拼接 参考文件 1 2 3 4 5 select sname, max ((case course when \u0026#39;phy\u0026#39; then score else then 0 end)) as phy_score, max ((case course when \u0026#39;cns\u0026#39; then score else then 0 end)) as cns_score from student group by sname 附录 MySQL 基础语法练习题 参考答案\n作答\n一、单选题（20 题，每题 2 分，共 40 分） 1 \u0026ndash; 以下不属于关系型数据库的是（）\nA. MySQL B. Oracle C. Redis D. SQL Server\n2 \u0026ndash; SQL 命令中，ALTER TABLE属于哪类命令（）\nA. DML B. DDL C. DQL D. TCL\n3 \u0026ndash; 关于WHERE和HAVING的区别，错误的是（）\nA. WHERE 操作行，HAVING 操作分组临时表 B. WHERE 可以使用聚合函数，HAVING 不可以 C. WHERE 执行优先级高于 HAVING D. HAVING 必须配合 GROUP BY 使用 4 \u0026ndash; 模糊查询中，匹配 “姓名以 S 开头且长度为 5” 的条件是（）\nA. ename like 'S%' B. ename like 'S____' C. ename like '% S' D. ename like 'S__'\n5 \u0026ndash; 以下关于 NULL 值判断的正确写法是（）\nA. comm = NULL B. comm == NULL C. comm is NULL D. comm \u0026lt;\u0026gt; NULL\n6 \u0026ndash; DQL 命令执行优先级正确的是（）\nA. FROM \u0026gt; WHERE \u0026gt; GROUP BY \u0026gt; HAVING \u0026gt; SELECT \u0026gt; ORDER BY \u0026gt; LIMIT B. WHERE \u0026gt; FROM \u0026gt; GROUP BY \u0026gt; HAVING \u0026gt; SELECT \u0026gt; ORDER BY \u0026gt; LIMIT C. FROM \u0026gt; GROUP BY \u0026gt; WHERE \u0026gt; HAVING \u0026gt; SELECT \u0026gt; ORDER BY \u0026gt; LIMIT D. FROM \u0026gt; WHERE \u0026gt; HAVING \u0026gt; GROUP BY \u0026gt; SELECT \u0026gt; ORDER BY \u0026gt; LIMIT 7 \u0026ndash; 关于视图插入数据报错Field doesn\u0026rsquo;t have a default value，核心原因是（）\nA. 视图本身不支持插入操作 B. 底层表主键字段无默认值且未赋值 C. 视图字段数量与底层表不一致 D. MySQL 版本不兼容 8 \u0026ndash; 多表连接查询中，LEFT JOIN的核心特点是（）\nA. 只保留两张表匹配的数据行 B. 保证左表所有行都保留，无匹配则补 NULL C. 保证右表所有行都保留，无匹配则补 NULL D. 自动去重重复数据行 9 \u0026ndash; 以下LIMIT用法正确的是（）\nA. LIMIT 2,5 B. LIMIT 5 2 C. LIMIT -1,5 D. LIMIT 5,-2\n10 \u0026ndash; 联合查询（UNION）的前提条件是（）\nA. 两张表必须有外键关联 B. 两张表字段个数、类型、顺序一致 C. 两张表必须是同一张库中的表 D. 必须配合 WHERE 条件使用 11 \u0026ndash; 关于GROUP BY多字段分组，正确的是（）\nA. 字段顺序会影响查询结果 B. 每次只能对一个字段分组，多字段需多次分组 C. 分组后 SELECT 可读取每个临时表所有行数据 D. 不能与聚合函数配合使用 12 \u0026ndash; 以下属于 TCL 命令的是（）\nA. GRANT B. COMMIT C. ALTER D. SELECT\n13 \u0026ndash; 备份表结构和数据的正确命令是（）\nA. INSERT INTO 新表 SELECT * FROM 旧表 B. CREATE TABLE 新表 SELECT * FROM 旧表 C. ALTER TABLE 新表 COPY * FROM 旧表 D. BACKUP TABLE 旧表 TO 新表 14 \u0026ndash; 自关联查询中，EMP t1 LEFT JOIN EMP t2 ON t1.mgr = t2.empno的作用是（）\nA. 查询员工和其上级信息 B. 查询员工和下属信息C. 去重员工表数据 D. 统计员工薪资\n15 \u0026ndash; 以下UPDATE命令语法正确的是（）\nA. UPDATE emp SET sal=5000 WHERE deptno=10; B. UPDATE emp sal=5000 WHERE deptno=10; C. UPDATE emp SET sal=5000 deptno=10; D. UPDATE emp SET sal=5000; WHERE deptno=10; 16 \u0026ndash; 关于子查询，说法错误的是（）\nA. 独立子查询只执行一次，效率高 B. 依赖子查询会多次执行，效率低 C. GROUP BY 后可以使用子查询 D. FROM 后可以使用子查询生成临时表 17 \u0026ndash; 列转行查询中，CASE\u0026hellip;END配合MAX()的核心作用是（）\nA. 过滤不符合条件的数据行 B. 将多行数据压缩为一行C. 对数据进行排序 D. 去重重复数据\n18 \u0026ndash; 以下DELETE命令正确的是（）\nA. DELETE emp WHERE sid\u0026gt;=70; B. DELETE FROM emp WHERE sid\u0026gt;=70; C. DELETE * FROM emp WHERE sid\u0026gt;=70; D. DELETE emp SET sid\u0026gt;=70; 19 \u0026ndash; 关于ORDER BY，错误的是（）\nA. 可以使用字段编号代替字段名 B. 多字段排序优先级依次递减 C. 执行优先级高于 SELECT D. 默认升序（ASC）\n20 \u0026ndash; 外键字段的特点是（）\nA. 存在于一方表（拥有方） B. 属于主键字段 C. 既存在于一方表（拥有方），也存在于多方表（从属方） D. 可以为 NULL 且重复 二、填空题（10 题，每空 1 分，共 20 分） 考查重点：需要记忆的语法、规则、概念\nSQL 不区分______，数据也没有______。 聚合函数中，统计临时表总行数的是______，统计字段非 NULL 值个数的是______。 模糊查询中，%代表______，_代表______。 数据库服务器分为关系型和非关系型，其中 Redis 属于______，MySQL 属于______。 DQL 命令中，______命令执行优先级最高，______命令执行优先级最低（限 7 大查询命令）。 表文件的后缀名是______，数据库是存储______的目录。 联合查询中，______会自动去重重复数据行，______会保留所有数据行。 行转列的核心实现方案是______，列转行的核心实现方案是______或______。 LIMIT start, cnt中，首行数据的 start 值是______，若 start 超出数据行范围，返回______。 数据隶属关系分为_____、_____、_____三类，其中多对多关系需要______张表描述。 纠错题（3 题，每题 10 分，共 30 分） 题目要求：指出每道题中 SQL 语句的错误，并写出修正后的完整语句。\n使用的数据库仍由create.sql提供。\n查询部门 20 中薪资高于公司平均工资的员工姓名和薪资\nSELECT ename, sal FROM emp WHERE deptno=20 AND sal \u0026gt; AVG(sal);\n统计各部门各职位的人数，要求只显示人数≥2 的分组\nSELECT deptno, job, COUNT(*) FROM emp GROUP BY deptno, job WHERE COUNT(*)\u0026gt;=2;\n插入员工数据（EMP 表字段：EMPNO, ENAME, JOB, SAL, DEPTNO）\nINSERT INTO emp (ename, job, sal) VALUES ('LUCY', 'CLERK', 2000);\n删除 EMP 表中薪资低于 1000 且部门编号为 30 的员工\nDELETE emp WHERE sal\u0026lt;1000 and deptno=30;\n左连接查询所有部门名称及下属人数（含 0 人部门）\nSELECT dept.dname, COUNT(*) FROM dept LEFT JOIN emp ON dept.deptno=emp.deptno WHERE emp.empno IS NOT NULL GROUP BY dept.deptno;\n查询员工姓名、薪资及薪资等级（SALGRADE 表字段：GRADE, LOSAL, HISAL）\nSELECT emp.ename, emp.sal, salgrade.grade FROM emp JOIN salgrade ON emp.sal \u0026gt;= salgrade.losal and emp.sal \u0026lt;= salgrade.hisal;\n列转行查询（成绩表：SNAME, COURSE, SCORE），将多行转为 “姓名 - 物理成绩 - 语文成绩” 格式\nSELECT sname, CASE course when 'phy' then score else then 0 end as phy_score, CASE course when 'cns' then score else then 0 end as cns_score FROM score GROUP BY sname;\n编程题（3 题，每题 15 分，共 45 分） 配套数据库脚本生成文件exam_db.sql\n第38题\n员工薪资分析业务需求：查询各部门的部门编号、部门名称、最高薪资、平均薪资，以及该部门平均薪资与公司平均薪资的差值（命名为 SAL_DIFF），要求只显示平均薪资高于 2000 的部门，结果按最高薪资降序排列。 员工上级信息查询业务需求：使用自关联查询所有员工的姓名、薪资、上级姓名、上级薪资，若员工无上级（如 KING），则上级姓名和薪资显示为 “无”，结果按员工部门编号升序、薪资降序排列。 第39题：\n子需求 1（基础查询 + 条件过滤）\n查询 “2026 年 1 月” 参加考试的所有学生姓名、课程名、成绩，要求： 排除成绩为 NULL（缺考）的记录； 只显示成绩≥80 分的记录； 结果按课程名升序、成绩降序排列。 子需求 2（分组 + 聚合 + Having）\n统计每门课程的参考人数、平均分、最高分、最低分，要求： 参考人数按 “成绩非 NULL” 统计； 只显示平均分≥85 分的课程； 结果按平均分降序排列； 字段别名分别为：课程名、参考人数、平均分、最高分、最低分。 子需求 3（多表连接 + 外连接）\n查询所有学生的姓名、所选课程数、总成绩（缺考课程不计入总成绩），要求： 即使学生未选任何课程（如新增学生），也需显示（课程数为 0，总成绩为 0）； 结果按总成绩降序排列，总成绩相同按姓名升序排列。 子需求 4（子查询 + 连接）\n查询 “Mathematics” 课程中成绩高于该课程平均分的学生信息，要求： 显示学生姓名、性别、成绩、该课程平均分（别名：课程平均分）； 禁止使用依赖子查询（必须用独立子查询 + 连接实现）。 子需求 5（行列转换 + 联合查询）\n列转行：将成绩表转换为 “学生姓名 - 数学成绩 - 英语成绩 - 物理成绩 - 语文成绩” 格式（缺考科目成绩显示 0）； 行转列：将上述列转行结果，转回 “学生姓名 - 课程名 - 成绩” 格式；【不熟练！需要反复记忆】 统计每个性别的学生各课程平均分（显示：性别、课程名、平均分）。 表名.字段 的写法是在哪都可以用的，只不过单表查询不存在歧义是可以省略表名\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n一方表每行数据与多方表所有数据进行拼接，会捏造出例如clerk smith（7369）在部门20,30,40工作的错误数据！\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"2026-02-20T00:00:00Z","image":"https://bzliustc.github.io/p/mysql-learn/front-page_hu_6cfdf6eafa6febfa.png","permalink":"https://bzliustc.github.io/p/mysql-learn/","title":"MySQL Learn"},{"content":"BOM和DOM BOM包含DOM； 使用document对象，实际上是使用window.document，window一般可省略 DOM编程案例 innerHTML和innerText来操作div和span 通过元素的innerHTML可以设置元素内部（标签对之间）的内容：\ndivElt.innerHTML = \u0026quot;\u0026lt;font color='red'\u0026gt;整个字符串会被当成HTML内容填充到标签对之间\u0026lt;/font\u0026gt;\u0026quot;\n通过元素的innerText可以设置元素内部（标签对之间）的内容：\ndivElt.innerText = \u0026quot;\u0026lt;font color='red'\u0026gt;整个字符串会被当成普通字符串内容填充到标签对之间\u0026lt;/font\u0026gt;\u0026quot;\n复选框的全选和取消全选 需求：某个复选框选中时，所有复选框选中。\n解决办法：\n选中即为click事件； document.getElementsByName()获取同名元素 复选框选中/未选中。关键是checked属性 下拉列表选择项 案例:动态显示表格内容 业务背景：网页显示学生信息表格，一开始只显示表头，点击按钮后显示所有表项。\n解决思路：\nJava会给出一个JSON格式字符串，包含待显示的数据 JS通过eval()解析数据 通过拼字拼出tbody的html内容 通过属性innerHTML放到表格中，完成显示 正则表达式 什么是正则表达式,有什么用? 正则表达式是一门独立的学科,基本每个语言都支持。 正则表达式不是JS专属的。不过在Js中使用居多。 通常使用正则表达式进行字符串格式匹配。 正则表达式是有一堆特殊的符号组成的一个表达式。 每一个特殊的符号都有特殊的代表含义。\n例如: qq号的正则表达式。 邮箱地址的正则表达式。\n邮箱地址格式验证:\n程序中有一个邮箱地址的正则表达式。 用户输入了一个邮箱地址。 那么邮箱地址的正则表达式和邮箱地址进行匹配,能匹配成功,表示合法,反之表示不合法。 对于javascript程序员来说,我们对于正则表达式掌握到什么程度呢? 第一:能够看懂正则表达式 第二:简单的正则要会写 第三:要能够独立的从网络当中搜索到你想要的正则表达式(搜索能力要有)，利用手册 第四:要会创建Js的正则表达式对象。 第五:要会调用Js正则表达式对象的方法。 参考手册 常见正则表达式符号 1\n. 匹配除换行符以外的任意字符 \\w 匹配字母或数字或下划线或汉字 \\s 匹配任意的空白符 \\d 匹配数字 \\b 匹配单词的开始或结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 2\n* 重复零次或更多次 + 重复一次或更多次 ? 重复零次或一次 {n} 重复n次 {n,} 重复n次或更多次 {n,m} 重复n到m次 3\n\\W 匹配任意不是字母，数字，下划线，汉字的字符 \\S 匹配任意不是空白符的字符 \\D 匹配任意非数字的字符 \\B 匹配不是单词开头或结束的位置 [^x] 匹配除了x以外的任意字符 [^aeiou] 匹配除了aeiou这几个字母以外的任意字符 例子：\n[a-z]{1}意思是a-z所有字母中任意一个；\n[a-z0-9A-Z]{3,}意思是a-z，0-9，A-Z字符集合中出现三个\n[1-9][0-9]{4，}就是QQ号的正则表达式\n^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$就是匹配邮箱地址\nJS中创建正则表达式对象 方式一：var regExp = /正则表达式/标记\n标记是可选项，可选值：\ng: 全局 i: 忽略大小写 m: 不要求掌握 方式二：var regExp = new RegExp(\u0026quot;正则表达式\u0026quot;, \u0026quot;标记\u0026quot;)\n正则表达式对象的方法 正则表达式对象的test()方法用于检查字符串是否匹配规则。参考代码\n字符串对象可以使用正则表达式：var str = \u0026quot;1970-1-1\u0026quot;.replace(/-/g, \u0026quot;/\u0026quot;)表示匹配中所有（正则表达式使用g标记）的减号，替换成斜杠\n表单验证 需求描述：\n(1)用户名不能为空\n(2)用户名必须在6-14位之间\n(3)用户名只能有数字和字母组成,不能含有其它符号(正则表达式)\n(4)密码和确认密码一致\n(5)统一失去焦点验证\n(6)错误提示信息统一在span标签中提示,并且要求字体12号,红色。\n(7)文本框再次获得焦点后,清空错误提示信息\n(8)最终表单中所有项均合法方可提交\n核心难点：\n为了防止用户不听提示而提交，不要用submit按钮，改用button，并用form对象的submit方法提交表单 如何在提交前检查输入是否合法？ 方法一：让表单元素先对焦focus再失焦blur，从而触发检查，也就是通过JS代码产生事件 提示信息的显示/消失用span控制 案例:网页时钟 需求：点击按钮显示时钟，并且以秒为间隔更新\n解决办法：\n执行window.setInterval(\u0026quot;一段JS代码\u0026quot;, milliTime)会开始周期性执行JS代码。 特别的，如果代码是一个函数，可以不加引号和括弧，只写函数名。 这个函数返回一个值，该值传入window.clearInterval()可以终止此段代码的周期调用。\nBOM编程案例 window.open()和close() window.open(url, opt)打开新窗口\nurl: 新页面的字符串 opt: \u0026lsquo;_self\u0026rsquo;为当前窗口打开; 默认值\u0026rsquo;_blank\u0026rsquo;; 其他可选值\u0026rsquo;_parent\u0026rsquo;, \u0026lsquo;_top\u0026rsquo;等 window.close()关闭当前页面，可用前提是当前页面是由open()打开的。\nwindow.conirm() 弹出提示框，返回布尔类型\n窗口设置为顶级窗口 应用场景：网页长时间待机后，工作区子窗口要变成登录页并变成顶级\n1 2 3 if (window.top !== window.self) { window.top.href = window.self.location } 前进后退 跳转到前一页面： window.history.back()\n跳转到执行一次回退前的页面： window.history.go(1)\n发送请求的多种方式 地址栏URL 点击超链接 提交表单 window.open(\u0026lsquo;url\u0026rsquo;) 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 \u0026ndash; 执行var arr = new Array(3); arr[5] = 10;后，arr[4]的值是？（）\nA. undefined B. null C. 0 D. 报错\n2 \u0026ndash; Date 对象的getMonth()方法返回值为 5，代表的实际月份是？（）\nA. 4 月 B. 5 月 C. 6 月 D. 7 月\n3 \u0026ndash; 以下关于innerHTML和innerText的区别，说法正确的是？（）\nA. innerHTML 会解析 HTML 标签，innerText 仅作为普通文本 B. innerText 会解析 HTML 标签，innerHTML 仅作为普通文本 C. 两者都会解析 HTML 标签 D. 两者都仅作为普通文本 4 \u0026ndash; 获取页面中所有name=\u0026ldquo;hobby\u0026quot;的复选框，正确的方法是？（）\nA. document.getElementById (\u0026quot;hobby\u0026quot;) B. document.getElementsByName (\u0026quot;hobby\u0026quot;) C. document.getElementsByTagName (\u0026quot;hobby\u0026quot;) D. document.querySelector (\u0026quot;hobby\u0026quot;) 5 \u0026ndash; 正则表达式\\d的含义是？（）\nA. 匹配任意空白符 B. 匹配数字 C. 匹配字母 / 数字 / 下划线 D. 匹配除换行外任意字符\n6 \u0026ndash; 创建忽略大小写的正则表达式/abc/，正确的写法是？（）\nA. var reg = /abc/i B. var reg = new RegExp (\u0026quot;abc\u0026quot;, \u0026quot;g\u0026quot;) C. var reg = /abc/g D. var reg = new RegExp (\u0026quot;abc\u0026quot;, \u0026quot;m\u0026quot;) 7 \u0026ndash; 以下能实现 “每隔 1 秒执行一次showTime()函数” 的代码是？（）\nA. window.setTimeout (\u0026quot;showTime ()\u0026quot;, 1000) B. window.setInterval (showTime, 1000) C. window.setInterval (\u0026quot;showTime ()\u0026quot;, 1) D. window.setTimeout (showTime, 1) 8 \u0026ndash; 关闭由window.open()打开的当前窗口，正确的代码是？（）\nA. window.close () B. window.stop () C. window.exit () D. window.shut ()\n9 \u0026ndash; 表单验证中，要判断密码框 (pwd) 和确认密码框 (repwd) 的值一致，正确的判断条件是？（）\nA. pwd.value == repwd.value B. pwd == repwd C. pwd.innerText == repwd.innerText D. pwd.innerHTML == repwd.innerHTML 10 \u0026ndash; 以下代码执行后str的值是？（）\nvar str = \u0026quot;2026-02-16\u0026quot;.replace(/-/g, \u0026quot;/\u0026quot;)\nA. \u0026quot;2026/02/16\u0026quot; B. \u0026quot;2026-02/16\u0026quot; C. \u0026quot;2026/02-16\u0026quot; D. \u0026quot;20260216\u0026quot;\n11 \u0026ndash; Date 对象的getTime()方法返回的是？（）\nA. 当前时间的小时数 B. 1970/01/01 00:00:00 到现在的毫秒数 C. 当前时间的分钟数 D. 当前时间的时间戳（秒数） 12 \u0026ndash; 要让下拉列表的选中变化触发事件，应使用的事件名是？（）\nA. onclick B. onchange C. onblur D. onfocus\n13 \u0026ndash; 以下关于 BOM 和 DOM 的关系，正确的是？（）\nA. DOM 包含 BOM B. BOM 包含 DOM C. 两者相互独立 D. 两者完全等同\n14 \u0026ndash; 正则表达式^[1-9][0-9]{4,}$匹配的是？（）\nA. 至少 4 位的数字 B. 至少 5 位的数字（首位非 0） C. 4-5 位的数字 D. 任意长度的数字（首位非 0） 15 \u0026ndash; 关于数组push方法，以下描述正确的是？（）\nA. 向数组开头添加元素，返回新数组长度 B. 向数组末尾添加元素，返回被添加的元素 C. 向数组末尾添加元素，返回新数组长度 D. 向数组开头添加元素，返回被添加的元素 不定项 16 \u0026ndash; 以下创建数组的方式，正确的有？（）\nA. var arr = {1, 2, 3}; B. var arr = Array (); C. var arr = new Array (5); D. var arr = new Array (\u0026quot;a\u0026quot;, \u0026quot;b\u0026quot;); 17 \u0026ndash; 关于数组方法，以下说法正确的有？（）\nA. pop () 方法会删除数组最后一个元素并返回该元素 B. reverse () 方法会反转数组并返回数组引用 C. join (\u0026quot;,\u0026quot;) 会将数组元素用逗号连接成字符串 D. push () 方法可以一次添加多个元素 18 \u0026ndash; 以下属于 Date 对象的方法有？（）\nA. getFullYear () B. getDay () C. getMinutes () D. toLocaleString ()\n19 \u0026ndash; 以下关于复选框checked属性，正确的描述有？（）\nA. 该属性值为布尔类型 B. 设置chk.checked = true可选中复选框 C. 获取chk.checked可判断是否选中 D. 该属性只能通过 HTML 标签设置，无法通过 JS 修改 20 \u0026ndash; 以下正则表达式标记，正确的有？（）\nA. g（全局匹配） B. i（忽略大小写） C. m（多行匹配） D. s（单行匹配）\n21 \u0026ndash; 以下能实现 “页面跳转至百度” 的代码有？（）\nA. window.location.href = \u0026quot;https://www.baidu.com\u0026quot; B. document.location = \u0026quot;https://www.baidu.com\u0026quot; C. window.open(\u0026quot;https://www.baidu.com\u0026quot;, \u0026quot;_self\u0026quot;) D. window.history.go(\u0026quot;https://www.baidu.com\u0026quot;) 22 \u0026ndash; 表单验证的触发时机，符合笔记要求的有？（）\nA. 文本框失去焦点（onblur）时验证 B. 文本框获得焦点（onfocus）时清空错误提示 C. 点击提交按钮前统一验证所有项 D. 页面加载时自动验证所有项 23 \u0026ndash; 关于window.setInterval()和window.clearInterval()，正确的有？（）\nA. setInterval () 返回一个标识 ID，用于 clearInterval () 终止执行 B. clearInterval () 需要传入 setInterval () 返回的 ID 才能生效 C. setInterval () 的第一个参数可以是字符串形式的 JS 代码 D. setInterval () 的第二个参数单位是秒 24 \u0026ndash; 以下关于正则表达式符号，含义正确的有？（）\nA. *：重复一次或更多次 B. +：重复零次或更多次 C. ?：重复零次或一次 D. {n,m}：重复 n 到 m 次（包含 n 和 m） 35 \u0026ndash; 以下关于 BOM 的操作，正确的有？（）\nA. window.confirm () 会弹出确认框，返回字符串 B. window.history.back () 可返回上一页 C. window.top !== window.self 表示当前窗口不是顶级窗口 D. window.open () 默认在当前窗口（_self）打开链接 填空题 JS 数组是可变长的，越界下标赋值会自动扩容，未赋值的扩展元素默认值为______。\n数组pop()方法会弹出末尾元素并返回，数组长度会______。\nDate 对象的getDay()方法返回星期数，______代表周一到周日（填写数值范围）。\ndocument对象的完整写法是______，其中window可省略。\n要将 HTML 标签解析后填充到元素中，应使用______属性；仅填充普通文本用______属性。\n获取同名复选框的方法是document.______()。\n下拉列表选中变化的事件名是______。\n正则表达式中，\\w匹配______、数字、下划线或汉字。\n正则表达式^匹配字符串的______，$匹配字符串的______。\n创建正则表达式的两种方式：字面量/正则/标记和new ______(\u0026ldquo;正则\u0026rdquo;, \u0026ldquo;标记\u0026rdquo;)。\n正则表达式对象的______() 方法用于检查字符串是否匹配规则。\n表单验证中，要让所有项合法后才能提交，应使用______按钮替代 submit 按钮，通过form.submit()提交。\nwindow.setInterval()的第二个参数单位是______。\n终止setInterval()的周期性执行，需调用window.______()并传入标识 ID。\nwindow.open()的第二个参数为______时，在当前窗口打开链接。\n跳转到前一页面的 BOM 方法是window.history.______()。\nQQ 号的正则表达式是______（填写笔记中的表达式）。\n表单验证中，错误提示信息要求字体______号、______色。\nDate 对象的getTime()方法返回自 1970/01/01 00:00:00 的______数。\n字符串的replace()方法结合正则g标记，可______替换所有匹配的内容。\n编程题 编程题 1：用户注册表单（表单验证 + CSS 样式 + 事件处理） 题目要求： 实现一个符合以下要求的用户注册表单页面：\nHTML 结构（30 分）\n包含表单（action 设为#），表单项：用户名、密码、确认密码、手机号、邮箱、性别单选框、注册按钮、重置按钮； 每个输入项对应标签，错误提示用（初始隐藏）； 手机号和邮箱输入框添加placeholder提示。 CSS 样式（20 分）\n表单整体居中，宽度 400px，内边距 20px，边框 1px 实线 #ccc； 输入框宽度 100%，高度 30px，margin-bottom 10px； 错误提示文字：12px、红色、margin-left 5px； 按钮宽度 100%，高度 35px，注册按钮背景色 #007bff，鼠标悬停时背景色 #0056b3，重置按钮背景色 #6c757d； 输入框获取焦点时边框颜色变为 #007bff。 JS 验证逻辑（50 分）\n失去焦点验证：\n✅ 用户名：非空、6-14 位、仅字母 / 数字（正则：/^[a-zA-Z0-9]{6,14}$/）；\n✅ 密码：非空、长度≥8；\n✅ 确认密码：与密码一致；\n✅ 手机号：非空、11 位数字（正则：/^\\d{11}$/）；\n✅ 邮箱：符合邮箱格式（正则：/^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$/）；\n输入框获得焦点时清空对应错误提示； 点击注册按钮时，触发所有输入项的验证，全部合法则弹出 “注册成功”，否则阻止表单提交； 点击重置按钮时，清空所有输入和错误提示。 评分标准\nHTML 结构完整、语义化（30 分）； CSS 样式符合要求，交互样式生效（20 分）； 每个输入项的验证逻辑正确（每项 8 分，共 40 分）； 按钮点击逻辑正确（10 分）。 编程题 2：商品列表展示（侧重：DOM 操作 + CSS 布局 + 数据渲染） 题目要求： 实现一个商品列表页面，支持动态渲染和样式控制：\nHTML 结构（20 分）\n包含：搜索框、搜索按钮、商品列表容器（\u0026lt;div\u0026gt;）、清空列表按钮； 商品列表初始为空，渲染后每个商品项包含：商品名称、价格、库存（用\u0026lt;div\u0026gt;/\u0026lt;span\u0026gt;布局）。 CSS 样式（30 分）\n搜索区域：输入框宽度 200px，按钮 margin-left 10px； 商品列表：每个商品项为独立卡片，宽度 200px，边框 1px 实线 #eee，内边距 10px，margin 10px，浮动左对齐； 商品名称：字体加粗，价格红色，库存灰色； 鼠标悬停商品卡片时，边框颜色变为 #ff6700，背景色 #f5f5f5； 清除浮动，避免布局错乱。??? JS 功能（50 分）\n页面加载完成后，默认渲染所有商品； 搜索功能：输入商品名称关键词，点击搜索按钮筛选商品（忽略大小写）； 清空列表：点击按钮清空商品列表容器内容； 动态渲染逻辑：通过拼接 HTML 字符串 + innerHTML实现，而非手动创建节点。 预设商品数据（JSON 格式）：\n1 2 3 4 5 6 7 var goodsData = [ {name: \u0026#34;小米手机\u0026#34;, price: 1999, stock: 100}, {name: \u0026#34;华为平板\u0026#34;, price: 2999, stock: 50}, {name: \u0026#34;苹果耳机\u0026#34;, price: 1299, stock: 80}, {name: \u0026#34;小米手环\u0026#34;, price: 199, stock: 200}, {name: \u0026#34;华为手表\u0026#34;, price: 1599, stock: 80} ]; 评分标准 HTML 结构合理（20 分）； CSS 布局、样式、交互效果符合要求（30 分）； 默认渲染商品列表（15 分）； 搜索筛选功能正确（20 分）； 清空列表功能正确（15 分）。 编程题 3：待办事项清单（侧重：事件绑定 + CSS 显隐 + 数组操作） 题目要求： 实现一个待办事项（TODO）清单页面，支持增删改查：\nHTML 结构（20 分）\n包含：输入框（待办内容）、添加按钮、待办列表（\u0026lt;ul\u0026gt;）、完成 / 未完成筛选按钮； 每个待办项包含：文本、完成按钮、删除按钮。 CSS 样式（30 分）\n待办列表宽度 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 分）\n存储待办数据：用数组保存，每个项包含content（文本）、isDone（是否完成）； 添加待办：输入非空内容，点击添加按钮，新增待办项到列表，清空输入框； 完成待办：点击完成按钮，切换待办项的isDone状态，同步更新样式； 删除待办：点击删除按钮，从数组和页面中移除对应项； 筛选功能：点击 “完成” 按钮只显示已完成项，点击 “未完成” 只显示未完成项，点击 “全部” 显示所有项； 所有事件绑定采用 “获取元素 + 赋值事件句柄” 方式（而非行间事件）。 评分标准\nHTML 结构完整（20 分）； CSS 样式、筛选按钮交互、完成项样式符合要求（30 分）； 添加待办功能正确（10 分）； 完成 / 删除待办功能正确（20 分）； 筛选功能正确（20 分）。 编程题 4：网页计算器（侧重：JS 运算 + CSS 布局 + 事件委托） 题目要求： 实现一个简易计算器，支持加减乘除运算：\nHTML 结构（25 分）\n包含：显示框（\u0026lt;input type=\u0026quot;text\u0026quot;，只读）、数字按钮（0-9）、运算符按钮（+、-、×、÷）、等号按钮、清空按钮； 按钮用\u0026lt;button\u0026gt;标签，按计算器布局排列（4 列）。 CSS 样式（25 分）\n计算器整体居中，宽度 300px，边框 2px 实线 #333，内边距 10px； 显示框：宽度 100%，高度 40px，字体大小 18px，文本右对齐，margin-bottom 10px； 按钮：宽度 70px，高度 70px，字体大小 16px，margin 2px； 运算符按钮背景色 #ff9500，等号按钮背景色 #ff3b30，清空按钮背景色 #e6e6e6； 按钮点击时（:active）背景色加深。 JS 功能（50 分）\n显示框初始为空，点击数字 / 运算符按钮，内容追加到显示框； 点击等号按钮： ✅ 解析显示框中的运算表达式（如 “12+34”），计算结果并显示； ✅ 处理除零错误，弹出提示 “除数不能为 0”； ✅ 处理非法表达式，弹出提示 “表达式错误”； 点击清空按钮，清空显示框； 事件处理：采用事件委托（给按钮父容器绑定点击事件），而非逐个绑定按钮事件。 评分标准\nHTML 结构符合计算器布局（25 分）； CSS 样式、按钮交互效果符合要求（25 分）； 数字 / 运算符输入功能正确（15 分）； 运算逻辑正确（含除零 / 非法表达式处理）（25 分）； 事件委托实现（10 分）。 编程题 5：动态表格管理系统（侧重：表格操作 + CSS 样式 + JSON 数据） 题目要求： 实现一个学生信息表格管理页面，支持新增、删除、修改、查询：\nHTML 结构（20 分）\n包含：查询输入框、查询按钮、新增表单（姓名、年龄、班级）、提交按钮、学生信息表格（表头：姓名、年龄、班级、操作）； 操作列包含 “修改”“删除” 按钮，表格边框 1px 实线。 CSS 样式（30 分）\n表格宽度 80%，居中，单元格内边距 8px，表头背景色 #f8f9fa，文字居中； 表格行鼠标悬停时背景色 #e9ecef； 新增表单：输入框宽度 150px，margin 5px，提交按钮背景色 #17a2b8； 修改 / 删除按钮：分别为 #ffc107、#dc3545，小尺寸（宽 60px，高 28px）。 JS 功能（50 分）\n页面加载完成后，渲染学生数据到表格； 新增功能：表单验证（姓名非空、年龄为数字），验证通过后添加到数组并刷新表格； 删除功能：点击删除按钮，确认（confirm）后删除对应学生，刷新表格； 修改功能：点击修改按钮，将学生信息填充到新增表单，提交按钮变为 “修改”，点击后更新数据并恢复按钮文本； 查询功能：输入姓名关键词，筛选并渲染符合条件的学生。 预设学生数据（JSON 格式）：\n1 2 3 4 5 var students = [ {name: \u0026#34;张三\u0026#34;, age: 18, class: \u0026#34;计算机1班\u0026#34;}, {name: \u0026#34;李四\u0026#34;, age: 19, class: \u0026#34;软件2班\u0026#34;}, {name: \u0026#34;王五\u0026#34;, age: 17, class: \u0026#34;网络3班\u0026#34;} ]; 评分标准 HTML 结构完整、表格布局合理（20 分）； CSS 样式、表格交互效果符合要求（30 分）； 初始渲染 / 新增 / 删除功能正确（每项 10 分，共 30 分）； 修改功能正确（10 分）； 查询功能正确（10 分）。 JS练习题二-参考答案 ACABB ABAAA BBBBB\nCD ABC ABCD ABC ABC ABC ABC ABC CD BC\nundefined 减一（或：减少 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、红 毫秒 全局 编程题参考答案:\n第1题\n第2题\n第3题\n第4题\n第5题\n","date":"2026-02-16T17:47:16+08:00","image":"https://bzliustc.github.io/p/javascript-learn-part.c/front-page_hu_2044d6aaffaa336d.jpg","permalink":"https://bzliustc.github.io/p/javascript-learn-part.c/","title":"JavaScript Learn Part.C"},{"content":"JS中的事件 常用事件 焦点\nblur失去焦点 focus获得焦点 击打\nclick鼠标单击 dblclick鼠标双击 键盘\nkeydown键盘按下 keyup键盘弹起 鼠标\nmousedown鼠标按下 mouseover鼠标经过 mousemove鼠标移动 mouseout鼠标离开 mouseup鼠标弹起 表单\nreset表单重置（在form元素中添加，不是input） submit表单提文 其它\nselect文本被选定 change下拉列表选中项改变,或文本框内容改变 load页面加载完毕【注意此事件在页面所有元素（包括执行完所有script脚本）加载完毕后触发，不是加载时触发】 参考代码020-事件.\n注册事件的2种方式 方法一 在标签中使用事件句柄属性，在事件句柄中编写事件代码， 当对应的事件发生后，注册在事件句柄当中的代码被监听器调用。 一般称事件句柄注册的函数为回调函数（CallBack Function）。 回调函数的特点是：\n监听器负责调用而非程序 事件发生后监听器来调用 方法二 铺垫：根据id获取节点对象 在JS中有一个隐含的对象document，代表整个HTML文档，是DOM的顶级对象。 在JS中有一个隐含的对象window，代表整个浏览器窗口，是BOM的顶级对象。\ndocument对象有一系列方法，其中getElementById()可根据id名返回节点对象。 在JS中，获取到节点之后，节点属性可以直接当作JS对象的属性访问（读/写）。 因此，可以把写好的函数绑定到事件句柄属性上：obj_onExmapleEvent = myFunction，注意不要写成myFunction()。\n代码的执行顺序 一般情况下，如果元素未加载而通过id获取对象，会失败，参考022 Line 11。 解决办法：利用表征所有元素加载完成的load事件，参考代码024\n当onload句柄的回调函数执行时，所有元素必然加载完毕。 当然这里有一个瑕疵，即load事件句柄的回调函数是用第一种绑定方法，可否改造成第二种？解决办法：利用window对象（暂时可以认为是body标签的对象），为onload绑定函数：window.onload = function(){}， 参考代码026\n例子：通过keydown事件捕捉Enter和ESC 目标：输入框输入完成时按下Enter键，要捕捉到回车键按下，并输出提示.\n原理：所有回调函数在被监听器调用时，都会传入一个对象参数，表示发生的事件对象。 对于所有的键盘事件，事件对象有keycode属性，可以获取键值。 其中Enter键值是13，Esc键值是27。\n运算符void 语法格式：void(表达式)\n含义：执行表达式，并且不做任何返回（即使表达式本身有返回结果）\n示例代码文件\n1 2 3 4 5 6 \u0026lt;h1\u0026gt;H1\u0026lt;/h1\u0026gt; \u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt; \u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt; \u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt; \u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt;\u0026lt;br\u0026gt; \u0026lt;a href=\u0026#34;\u0026#34; onclick=\u0026#34;alert(\u0026#39;执行JS代码\u0026#39;)\u0026#34;\u0026gt;保留超链接样式，点击后执行一段JS代码，执行完后保证页面不跳转\u0026lt;/a\u0026gt; 按下超链接后页面其实会跳转， 因为href置空默认跳转到本页，也就是一次刷新。 为了不要此次刷新（跳转），关键是要把跳转路径完全干掉， 而不是默认值或者空字符串：\n1 2 3 \u0026lt;a href=\u0026#34;javascript:void(\u0026#39;anything\u0026#39;)\u0026#34; onclick=\u0026#34;alert(\u0026#39;执行JS代码\u0026#39;)\u0026#34;\u0026gt; 超链接 \u0026lt;/a\u0026gt; 注意到要加javascript:以免浏览器认为\u0026quot;void()\u0026ldquo;是地址。 可以观察一下鼠标悬停在超链接文本上时浏览器下角会出现“javascript:void(0)”。\n控制语句 JS的控制语句和除了Java相同，也有特别的。\n选择 if switch 循环 for while do \u0026hellip; while 跳转 break continue return 特别的语句，了解即可 —— for \u0026hellip; in 语句 遍历数组，index是下标，类型Number\n1 2 3 4 5 6 7 8 var arr = [true, 4, \u0026#34;abc\u0026#34;, 2, NaN, 10, 7] for (var i=0; i\u0026lt;arr.length; i++) { console.log(arr[i]) } // 另一种遍历, 注意index是索引值的字符串，例如\u0026#34;0\u0026#34;, \u0026#34;1\u0026#34;等，类型是String for (var index in arr) { console.log(arr[index]) } 遍历对象属性, prop是属性名，类型String\n1 2 3 4 5 6 7 8 9 function Emp(x, y, z) { this.propa = x this.propb = y this.propc = z } obj = new Emp(1, \u0026#34;jack\u0026#34;, 123.45) for(var prop in obj) { console.log(\u0026#34;obj.\u0026#34;+prop+\u0026#34; = \u0026#34;+obj[prop]) } with语句 内置对象 Array Array是JS的数组类型，数组长度可变。\n创建数组 方法1：创建数组时赋值\nJS的数组是可变长的，并且如果为越界下标元素赋值，数组将自动扩容到该下标， 并且新扩展的元素除了最后一个被赋值的，其它值默认undefined。\n方法2：利用Array类\nnew Array() 创建空数组 new Array(4) 创建指定长度空数组 new Array(false, NaN, 34.55, 3, 5) 使用for..in或者for来遍历数组，使用下标访问并修改，类型可变。\n常用方法 方法 用例 描述 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 \u0026ndash; 关于JavaScript嵌入方式，以下说法错误的是（）\nA. 行间事件法中`window.alert()`可以简写为`alert()` B. 引入外部JS文件的`\u0026lt;script\u0026gt;`标签内写代码会正常执行 C. 页面脚本块可以出现在HTML文档的任意位置 D. 多个脚本块会按照在文档中出现的顺序依次执行 2 \u0026ndash; 执行typeof null的结果是（）\nA. null B. object C. undefined D. number 3 \u0026ndash; 以下关于JS变量的说法，正确的是（）\nA. 声明变量时必须指定数据类型 B. `var a;` 执行后a的值为null C. 函数内未使用var声明的变量是全局变量 D. 变量一旦赋值，类型无法改变 4 \u0026ndash; 关于JS函数，以下描述错误的是（）\nA. 函数调用时实参数量可以和形参数量不一致 B. 可以先调用函数再定义函数 C. JS支持函数重载，同名函数会根据参数区分执行 D. `var sum = function(a,b){return a+b}` 是函数的合法定义方式 5 \u0026ndash; 执行isNaN(\u0026quot;123abc\u0026quot;)的结果是（）\nA. true B. false C. NaN D. undefined 6 \u0026ndash; *以下运算符比较结果为true的是（）\nA. null === undefined B. 10 == \u0026quot;10\u0026quot; C. NaN == NaN D. 0 === false 7 \u0026ndash; 关于事件绑定，以下说法正确的是（）\nA. `window.onload`事件在页面开始加载时立即触发 B. 通过`document.getElementById()`获取元素时，无需等待DOM加载完成 C. 为元素绑定事件时，函数名后加括号表示绑定函数本身 D. keydown事件中，Enter键的keyCode值为13 8 \u0026ndash; 执行parseInt(\u0026quot;123.99abc\u0026quot;)的结果是（）\nA. 123.99 B. 123 C. NaN D. 123.99abc 9 \u0026ndash; *关于for\u0026hellip;in语句，以下描述错误的是（）\nA. 遍历数组arr时，`for(var i in arr)`的i是数组下标，类型为Number B. 遍历对象elt时，`for(var prop in elt)`的prop是属性名，类型String C. 可以遍历数组的所有元素 D. 可以遍历对象的所有属性 1 \u0026ndash;. 以下关于void运算符的用法，正确的是（）\nA. `void(alert(\u0026quot;test\u0026quot;))` 执行后会返回alert的执行结果 B. `\u0026lt;a href=\u0026quot;void(0)\u0026quot; onclick=\u0026quot;alert('test')\u0026quot;\u0026gt;` 可阻止超链接跳转 C. `void`运算符的作用是不执行表达式 D. `\u0026lt;a href=\u0026quot;javascript:void(0)\u0026quot; onclick=\u0026quot;alert('test')\u0026quot;\u0026gt;`可阻止超链接跳转 二、不定项选择题（每题4分，共20分，多选、少选、错选均不得分） 1 \u0026ndash; 以下属于JavaScript三大组成部分的有（）\nA. ECMAScript B. DOM C. BOM D. JQuery 2 \u0026ndash; 以下数据类型中，属于JS原始数据类型的有（）\nA. Undefined B. Object C. Boolean D. Null 3 \u0026ndash; 以下字符串方法的描述，正确的有（）\nA. `length`属性用于获取字符串长度 B. `replace(s1,s2)`会替换字符串中所有的s1 C. `split(\u0026quot;,\u0026quot;)`可将字符串按逗号拆分为数组 D. `charAt(0)`可获取字符串第一个字符 4 \u0026ndash; 以下关于JS事件的描述，正确的有（）\nA. blur事件表示元素失去焦点 B. submit事件需绑定在form元素上 C. mouseover事件表示鼠标离开元素 D. change事件可监听下拉列表选中项的改变 5 \u0026ndash; 以下关于JS对象和原型的描述，正确的有（）\nA. 可通过`prototype`为Object扩展方法 B. 访问对象属性的方式有`obj.prop`和`obj[\u0026quot;prop\u0026quot;]` C. JS中通过`function`定义的函数可作为类使用 D. `new String(\u0026quot;test\u0026quot;)`创建的变量类型为String 三、填空题（每空2分，共20分） JavaScript中，声明变量使用________关键字（ES6前），未赋值的变量默认值为________。 JS中==是________运算符，===是________运算符。 页面中所有元素加载完毕后触发的事件是________。 isNaN()函数的作用是________，它会首先尝试将参数转换为________类型。 遍历对象属性的特殊循环语句是________。 阻止超链接默认跳转行为时，href属性的正确写法是________。 JS中Number类型的特殊值，非数字用________表示，正无穷大用________表示。 为对象动态扩展属性和方法可使用________属性。 函数内未使用var声明的变量默认是________变量。 DOM顶级对象是________，BOM顶级对象是________。 四、编程题（每题20分，共60分） 题目1：数字判断与转换 要求：\n编写一个函数checkNumber，接收一个参数； 判断该参数是否为有效数字（非NaN），若是则返回其整数部分，若不是则返回\u0026quot;不是有效数字\u0026rdquo;； 测试用例： checkNumber(\u0026ldquo;123.45\u0026rdquo;) → 123 checkNumber(\u0026ldquo;abc\u0026rdquo;) → \u0026ldquo;不是有效数字\u0026rdquo; checkNumber(NaN) → \u0026ldquo;不是有效数字\u0026rdquo; checkNumber(99.99) → 99 题目2：事件绑定实现表单验证 要求：\n编写HTML页面，包含一个输入框（id=\u0026ldquo;username\u0026rdquo;）和一个按钮（id=\u0026ldquo;submitBtn\u0026rdquo;）； 页面加载完成后，通过脚本为按钮绑定点击事件； 点击按钮时，验证输入框内容： 若为空，弹出提示\u0026quot;用户名不能为空\u0026quot;； 若长度小于6，弹出提示\u0026quot;用户名长度不能小于6位\u0026quot;； 若验证通过，弹出提示\u0026quot;用户名验证通过\u0026quot;。 提示：通过元素对象的value属性获取输入的文本 题目3：对象与遍历 要求：\n定义一个表示学生的类Student，包含属性：姓名（name）、年龄（age）、成绩（score，数组类型）； 为Student类添加方法getAvgScore，用于计算成绩的平均分； 创建一个Student实例，姓名为\u0026quot;张三\u0026quot;，年龄为18，成绩为[80,90,85,95]； 遍历该实例的所有属性并打印（格式：属性名：属性值）； 调用getAvgScore方法，打印平均分。 JavaScript 基础语法练习题一 答案 题号 答案 解析 1 B 引入外部 JS 文件的\u0026lt;script\u0026gt;标签内的代码不会执行 2 B typeof null返回object是 JS 的历史设计 bug 3 C A：JS 是弱类型，声明变量无需指定类型；\nB：var a;默认值是 undefined；\nD：JS 变量类型可动态改变 4 C JS 不支持函数重载，同名函数仅保留最后定义的版本 5 A \u0026ldquo;123abc\u0026quot;无法转换为有效数字，isNaN返回 true 6 B A：null和undefined类型不同，全等为 false；\nC：NaN 与任何值（包括自身）都不相等；\nD：类型不同，全等为 false 7 D A：window.onload在所有元素加载完毕后触发；\nB：需等待 DOM 加载完成才能获取元素；\nC：加括号会立即执行函数，而非绑定 8 B parseInt从左到右解析，截取整数部分，遇到非数字停止 9 A 遍历数组时，index是字符串类型（如 \u0026ldquo;0\u0026rdquo;），需手动转换为数字 10 D A：void执行表达式但无返回值；B：缺少javascript:前缀，\n浏览器会认为是普通地址；C：void会执行表达式 11 ABC JS 三大组成部分：ECMAScript（核心）、\nDOM（文档对象模型）、BOM（浏览器对象模型）；\nJQuery 是 JS 库，非核心组成 12 ACD 原始数据类型：Undefined、Number、String、\nBoolean、Null；Object 是引用类型 13 ACD B：replace(s1,s2)仅替换首次出现的 s1，全替换需正则表达式 14 ABD C：mouseover是鼠标经过，mouseout是鼠标离开 15 ABC D：new String(\u0026ldquo;test\u0026rdquo;)创建的是 Object 类型，\n字面量\u0026quot;test\u0026quot;是 String 类型 填空题\nvar；undefined 等同；全等 load（或window.onload） 判断参数是否为非数字；数字 for\u0026hellip;in javascript:void(0) NaN；Infinity prototype 全局 document；window 编程题一\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function checkNumber(param) { // 判断是否为有效数字 if (!isNaN(param)) { // 转换为数字后取整数部分 return parseInt(param); } else { return \u0026#34;不是有效数字\u0026#34;; } } // 测试用例 console.log(checkNumber(\u0026#34;123.45\u0026#34;)); // 123 console.log(checkNumber(\u0026#34;abc\u0026#34;)); // 不是有效数字 console.log(checkNumber(NaN)); // 不是有效数字 console.log(checkNumber(99.99)); // 99 编程题二\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;zh-CN\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;UTF-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;表单验证\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; id=\u0026#34;username\u0026#34; placeholder=\u0026#34;请输入用户名\u0026#34;\u0026gt; \u0026lt;button id=\u0026#34;submitBtn\u0026#34;\u0026gt;提交\u0026lt;/button\u0026gt; \u0026lt;script\u0026gt; // 等待页面加载完成 window.onload = function() { // 获取元素 var usernameInput = document.getElementById(\u0026#34;username\u0026#34;); var submitBtn = document.getElementById(\u0026#34;submitBtn\u0026#34;); // 绑定点击事件 submitBtn.onclick = function() { var username = usernameInput.value; // 验证为空 if (username === \u0026#34;\u0026#34;) { alert(\u0026#34;用户名不能为空\u0026#34;); } else if (username.length \u0026lt; 6) { alert(\u0026#34;用户名长度不能小于6位\u0026#34;); } else { alert(\u0026#34;用户名验证通过\u0026#34;); } } } \u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 编程题三\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 // 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 \u0026lt; this.score.length; i++) { sum += this.score[i]; } return sum / this.score.length; } } // 3. 创建实例 var zhangsan = new Student(\u0026#34;张三\u0026#34;, 18, [80,90,85,95]); // 4. 遍历实例属性 console.log(\u0026#34;学生信息：\u0026#34;); for (var prop in zhangsan) { // 排除方法属性（可选，根据需求） if (typeof zhangsan[prop] !== \u0026#34;function\u0026#34;) { console.log(prop + \u0026#34;：\u0026#34; + zhangsan[prop]); } } // 5. 调用方法并打印平均分 var avgScore = zhangsan.getAvgScore(); console.log(\u0026#34;平均分：\u0026#34; + avgScore); // 输出：平均分：87.5 ","date":"2026-02-13T16:33:41+08:00","image":"https://bzliustc.github.io/p/javascript-learn-part.b/front-page_hu_34c9c9c47708fb3c.png","permalink":"https://bzliustc.github.io/p/javascript-learn-part.b/","title":"JavaScript Learn Part.B"},{"content":"本文是Javascript学习笔记·A，记录JS基础语法。\nJavaScript概述 简称 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…… 所有的事件句柄都是以标签的属性形式存在，例如\u0026lt;input type=\u0026quot;buttom\u0026quot;\u0026gt;就有onclick属性， onclick的属性值就是注册的代码，只要出发点击事件，就会执行这段代码。\n举个例子（参考代码001），目标是“点击按钮Hello, 弹出对话框，框中显示HelloWorld”。\n怎么实现弹窗？ JS中有内置的BOM对象window，可以直接用，因此我们直接把弹窗函数\u0026quot;window.alert('Hello world');\u0026quot;写在onclick的属性值中。\n小TIPS\nJS中的一条语句可以以一个分号结尾，也可以没有 window.可以省略 页面脚本块嵌入 在HTML中嵌入脚本块，脚本块中的代码自上而下逐行执行。 脚本块的位置随意（甚至可以在\u0026lt;html\u0026gt;外），并且可有多个。\n1 2 3 4 \u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt; alert(\u0026#39;警告1\u0026#39;) alert(\u0026#39;警告2\u0026#39;) \u0026lt;/script\u0026gt; 注意，如果脚本块前后有DOM网页元素，则其前面的内容会先显示，然后执行脚本，然后再加载后面的内容。\n引入外部JS文件 编写.js文件，然后通过\u0026lt;script src=\u0026quot;path/to/your.js\u0026quot;/\u0026gt;引入。 引入一次.js文件，其中代码就会执行一次。 并且，使用引入法的脚本块中的代码不会执行，例如下述弹窗不会出现：\n1 2 3 \u0026lt;script type=\u0026#34;text/javascript\u0026#34; src=\u0026#34;js/local.js\u0026#34;\u0026gt; alert(\u0026#39;弹窗\u0026#39;) \u0026lt;/script\u0026gt; 标识符合关键字 标识符规则和java一样\n变量 变量的声明与赋值 回顾：Java中的变量 ——\n声明：int a;，double b;，string s; 赋值：a = 10;，b = 3.14;，s = \u0026quot;hello; 一行可以声明多个变量int a, b=2, c=3; Java是强类型编译型语言。\n回到JS —— JS是弱类型非编译（脚本）语言， 参考代码006-变量。\n声明：var variable_name，默认赋值undefined（这就是一个具体的值），声明时可赋值 赋值：variable_name = value 一行声明多个变量：var a, b = 90, c;，意味着a, c赋值undefined，b赋值90 重点：JS语言是一种弱类型语言，没有编译阶段，直接浏览器打开解释执行。 在JS中声明变量时不需要指定变量的数据类型； 程序在运行过程当中，赋什么类型的值，变量就是什么数据类型，并且变量的数据类型是可变的。\n以下JS代码是可行的：\n1 2 3 4 5 6 var i; i = 100; // i为整型 i = false; // 变为布尔型 i = true; i = 3.14; // 浮点型 i = new Object(); 函数的定义和调用 Java中的方法：[修饰符列表] 返回值类型 方法名(形参列表) {方法体}。例如\n1 2 3 public static int sum(int a, int b) { return a + b; } JS中的函数：function 函数名(形参列表) {函数体}。例如\n1 2 3 function sum(a, b) { return a + b } 函数要被调用才会执行，不是定义了就会执行的！ 参考代码007-函数定义和调用。\nTIPS\n函数调用时的实参列表不用与形参列表对应，参数从左往右一次配入形参。 JS函数还有另一种定义方式：函数名 = function(形参列表) {函数体} 函数定义的优先级较高，可以在函数定义前调用（参考代码008-函数定义和调用） 局部变量与全局变量 全局变量：在函数体外声明的变量，称为全局变量，在浏览器打开页面时分配空间，直到关闭才销毁；\n局部变量：函数调用时分配空间，函数执行结束后内存释放\n特别的，若一个变量声明时（应该说是定义时赋值）没有用var关键字，则无论是在哪声明的，默认为全局变量。 使用这种特性的变量必须声明时赋值，不能既不用var又不赋值。 参考代码009-局部全局变量中“特性”。\nTopic - 函数可以重载吗\n不可以，同名函数只取最后定义的那个函数来解释，其他同名函数直接消失！根本不可能执行，所以不是覆盖（因为JS函数定义优先级高先解释）。参考代码010\nJS数据类型 ECMASCRIPT6版本之前的数据类型有6种 Undefined Numebr String Null（通过=null赋予） Boolean Object 其中Undefined, Number, String, Boolean， Null都属于基本数据类型， Object属于对象类型（引用数据类型）。\nECMASCRIPT6版本后的数据类型有8种，多了Symbol, Bigint。\ntypeof运算符（@@@@@） typeof运算符可以在代码运行时动态的获取变量的数据类型，使用方法typeof variable_name。 typeof算符的运算结果的值为以下6个字符串之一（注意是小写）：\nundefined numebr string boolean object（null类型数据通过typeof算符作用结果为object） function 在JS中判断字符串是否相等应使用==算符，参考代码011-数据类型。\nNumebr类型 Number类型的数据 类比：Number类型代表了Java中的byte, short, int, long, float, double。\nNumber类型都有哪些值？以下均可取 - -1 - 0 - 1 - 12.34 - NaN - Infinity\n参考代码014-Number类型\nNaN这个值意思是非数，但数据的类型仍是Number，当一个数学表达式运算最终无法返回数字时，值就是NaN。例如100 / \u0026quot;abc\u0026quot;的运算结果就是NaN。\nTIPS\n运算式100 + \u0026quot;abc\u0026quot;结果是字符串\u0026quot;100abc\u0026quot;， 所以这个表达式不是数学表达式，而是字符串拼接的意思，所以返回值类型不是Number JS中10/3结果是浮点3.33333\nInfinity顾名思义就是无穷大（注意是正无穷）。\nisNaN() 函数 形参列表：一个变量\n返回值：Boolean，true代表传参是NaN，否则不是\n作用：用于判断数据是不是数\n注意，这个函数会首先尝试将数据转换成数字，若失败则结果是true； 转换成功则结果为false。 可以测试\n布尔类型true转换为数字类型是1，false转为0 数字字符串可以转化为数 Number()函数 Number()函数将不是Number类型的数据转为Numeber类型， 它把**可以转为Number类型（也就是isNaN()返回true的类型）**的数据转为数字； 把不可转为Number类型的数据转为NaN；若参数已经是Number类型，保持不变。\nparseInt()函数 把字符串表示的小数（或者小数）取整数部；注意不是向下取整。 实际上对于字符串参数，类似于把第一个小数点前面的部分截出来转为数字。 无法转化的，输出NaN。\nJS数学类介绍 向上取整：Math.ceil(123.456)\nBoolean类型 Boolean类型是原始类型，只有两个值：true，false。\nBoolean()函数 把非Boolean类型数据转为Boolean类型的数据。\n数据 类型 转化结果 0 Number false 1 Number true \u0026lsquo;abc\u0026rsquo; String true '' String false NaN Number false Infinity Number true null Null false undefined Undefined false Object Object true 规律：只有有东西，结果就是true。 Boolean()函数不需要我们手动调用，它会被隐式调用。 例如name=\u0026quot;zhansan\u0026quot;; if(name) {...}中，JS将自动把name变量转为Boolean类型并判断真伪。\n参考代码015-Boolean。\nString String是原始类型。怎么定义一个字符串？在JS中有两种创建方式：\nvar str = \u0026quot;string\u0026quot; —— 类型是String var s = new String('string') —— 类型是Object，使用了Object类的子类String，这是JS内置的可以直接用 不论哪种字符串，其方法和属性都是通用的。以下介绍常用属性和方法。 参考代码016\n属性或方法 描述 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()：若两个参数，含义如下\nsubstr(startIndex, length) substring(start, end)且不包括end |toLowerCase()和toUpperCase() |大小写转化 Object 在JS中内置一个Object类型，可视为所有类型的基类/超类。 JS中默认定义的类型如无特殊说明，默认继承Object。 Object类型中的通用属性和方法如下。 参考代码017\nprototype属性 意为原型，这个属性可以为对象动态扩展属性和方法。例如：\n1 2 3 4 5 6 var o = new Object() // 演示prototype属性 Object.prototype.doSome = function() { console.log(\u0026#34;测试Prototype属性\u0026#34;) } o.doSome() 通过prototype属性为Object拓展了doSome()方法。 实际上，prototype属性可以为其它类型也扩展属性和方法，例如\n1 2 3 4 String.prototype.sub = function(start, length) { return this.substr(start, length) } // 扩展String的方法 console.log(\u0026#34;1234567\u0026#34;.sub(2,3)) 类 定义类 方法一\n1 2 3 4 function 类名(形参列表) { this.属性名 = 参数 this.方法名 = function() {...} } 方法二\n1 2 3 4 类名 = function(形参列表) { this.属性名 = 参数 this.方法名 = function() {...} } 所以说，function创建一个函数，也创建一个同名类（或者理解为创建一个东西，功能与调用方法有关）。 若通过函数名();调用，则是当作函数来用； 若是通过var obj = new 类名()创建对象，则是当作类来用，会在堆中分配空间， 而obj是堆上对象的引用。参考代码018。\n访问属性 方法一：引用.属性名，例如example_obj.test_property 方法二：引用[\u0026quot;属性名\u0026quot;]，例如example_obj[\u0026quot;test_property\u0026quot;] null, NaN, undefined的区别 参考代码019\n==和===的区别 ==是等同运算符，===是全等运算符。 前者只比较值是否相等，类似Java的equals方法；后者比较值和数据类型是否相同。\nnull, 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代码解释并执行。\n创建JSON对象，访问JSON对象属性 JSON: JavaScript Object Notation，一种轻量（文本少数据量大）数据交换（不同编程语言之间的数据交换）格式；xml也是一种标准的数据交换格式。\nJS中的JSON是以对象形式存在的。\n语法格式 创建JSON对象：\n1 2 3 4 5 var jsonObj = { \u0026#34;属性名\u0026#34; : \u0026#34;属性值\u0026#34;, \u0026#34;属性名\u0026#34; : \u0026#34;属性值\u0026#34;, \u0026#34;属性名\u0026#34; : \u0026#34;属性值\u0026#34;, } 注意，JS中方括弧是数组对象，花括弧是JSON对象。 属性值可以是任何类型数据，包括JSON对象。\n访问JSON对象属性 jsonObj.prop或jsonObj[\u0026quot;prop\u0026quot;]\nJSON数据交换 java和javascript两个语言交换数据可以使用JSON格式的字符串。 java的JDBC连接数据库查询数据，然后将数据拼接成JSON格式的字符串， 将JSON格式的字符串传给javascript，然后在javascript当中把json格式 的字符串转换成JSON对象，这样就可以从json对象中取数据了，这样就完成了 数据的交换。\n","date":"2026-02-08T15:08:15+08:00","image":"https://bzliustc.github.io/p/javascript-learn-part-a/front-page_hu_acf028c6f4868abf.jpeg","permalink":"https://bzliustc.github.io/p/javascript-learn-part-a/","title":"JavaScript Learn Part A"},{"content":"本文是CSS学习笔记。\n概述 CSS：Cascading Style Sheet，是 层叠样式表语言(不是编程语言,属于样式表语言,没有变量、数据类型、控制语句 .. )。 css其实是专门用来修饰HTML的,让HTML更好看，Css是HTML的化妆品。\nCSS是为HTML服务的,所以HTML还是主体,css是依附在HTML上的, 所以进行css的开发,我们还是需要新建html/htm文件。\n在HTML中嵌入CSS的三种方式 内联定义； 定义内部样式块对象； 链入外部样式表文件。 优先级：内联 \u0026gt; 内部样式块对象 \u0026gt; 外部样式表文件 参考网页：\n苏昱CSS手册网页版 苏昱CSS手册.chm 内联定义 内联定义是在HTML文件中嵌入CSS样式的第一种方法。 内联就是在标签中通过style属性指定样式。 任何一个html标签都可以设定style属性。\n语法格式：\u0026lt;标签名 style=\u0026quot;[样式名]:[样式值]; [样式名]:[样式值]; [样式名]:[样式值]\u0026quot;\u0026gt;。 参考代码001\n定义内部样式块对象 在一对head标签中使用style标签，定义样式块对象：\n语法：\n1 2 3 4 5 [选择器] { [样式名]: [样式值]; [样式名]: [样式值]; [样式名]: [样式值]; } CSS中常见的选择器为：id选择器，标签选择器，class选择器。\n标签选择器 选择器设为标签名，则body中所有该标签都使用这个选择器引导的CSS样式。例如\n1 2 3 4 5 6 7 8 9 10 11 12 /* 标签选择器 */ /* 注意注释形式改变 */ \u0026lt;style type=\u0026#34;text/css\u0026#34;\u0026gt; /* 所有div标签都是用这个css */ div { background-color: #cccc22; width: 150px; height: 200px; border-style: solid; border-color: red; border-width: 5px; } \u0026lt;/style\u0026gt; id选择器 语法格式：选择器设为：#[id名]。例如\n1 2 3 4 5 6 7 8 9 10 11 \u0026lt;style type=\u0026#34;text/css\u0026#34;\u0026gt; /* id选择器 */ #input-braket-usrname { background-color: #e3ace4; width: 100px; height: 20px; border-style: solid; border-color: #3ad110; border-width: 2px; } \u0026lt;/style\u0026gt; class选择器 语法格式：选择器设为：.[类名]，并且标签要加class属性来表明所属类。例如\n1 2 3 4 5 6 7 8 9 \u0026lt;style type=\u0026#34;text/css\u0026#34;\u0026gt; .cls1 { font-size: 12px; color: green; } \u0026lt;/style\u0026gt; \u0026lt;!-- body --\u0026gt; \u0026lt;span class=\u0026#34;cls1\u0026#34;\u0026gt;SPAN区域\u0026lt;/span\u0026gt; \u0026lt;p class=\u0026#34;cls1\u0026#34;\u0026gt;段落\u0026lt;/p\u0026gt; 链入外部样式表文件 编写.css文件，并在html文件头中通过\u0026lt;link rel=\u0026quot;stylesheet\u0026quot; type=\u0026quot;text/css\u0026quot; href=\u0026quot;path/to/your/file.css\u0026quot;/\u0026gt;链接。\n三种选择器的优先级 id \u0026gt; class \u0026gt; 标签\n隐藏 display: none隐藏内容。 参考代码004，通过JavaScript可以改变display属性，从而显示/隐藏列表。\n文本装饰 text-decoration: 可选值简述：\n\u0026ldquo;underline\u0026rdquo; \u0026ldquo;overline\u0026rdquo; \u0026ldquo;none\u0026rdquo;：无格式，可以消除掉超链接的默认下划线 列表 参考代码004\nlist-style-type 属性值 含义 none 去掉有序/无序编号 circle 圈形无序编号 square 方形无序编号 鼠标悬停效果 鼠标悬停效果通过在选择器名后加:hover表示其引导的效果在鼠标放上去时触发。 注意：冒号前后不能有空格！ 参考代码006，像这样：\n1 2 3 4 5 \u0026lt;style type=\u0026#34;text/css\u0026#34;\u0026gt; .cursoreffect:hover { color: red; } \u0026lt;/style\u0026gt; 内边距外边距 可以使用内补丁和外补丁制造div或span之间的相对间隔。 参考代码007。\n例如，内补丁padding会导致嵌套于其内的子元素距离父元素有补丁间距。 外补丁margin会导致某个子元素与父元素在外部有补丁间距。\nCSS 盒模型\n所有 HTML 元素都可以看成一个矩形盒子，由内到外共 4 层： Content（内容区）文字、图片等实际内容，width、height 就是控制这个区。 Padding（内边距）内容到边框之间的距离，属于盒子内部，会撑大盒子。 Border（边框）盒子的边框，border-width 也会算进盒子总大小。 Margin（外边距）盒子与其他元素之间的距离，不属于盒子本身，只控制间距。 浮动效果 参考代码008。 float: 设置为：\nleft：文字包围，图片居左 right：文字包围，图片居右 定位 参考代码009，使用position确定定位法，配合top和left定位距离。\n鼠标小手 参考代码009。 通过cursor: 设置：\npointer：小手（不要用hand，有兼容问题） not-allowed：禁止 附录 CSS基础练习题 （一）单选题（10 题） 1\u0026ndash;以下关于 CSS 的描述错误的是（）\nA. CSS 是层叠样式表，不属于编程语言 B. CSS 可以独立于 HTML 运行 C. CSS 能修饰 HTML 元素的样式 D. CSS 没有变量、控制语句等编程语言特性` 2\u0026ndash;下列哪种 CSS 嵌入方式优先级最高（）\nA. 外部样式表 B. 内部样式块 C. 内联定义（style 属性） D. 三者优先级相同` 3\u0026ndash;关于选择器优先级，正确的顺序是（）\nA. 标签选择器 \u0026gt; class 选择器 \u0026gt; id 选择器 B. id 选择器 \u0026gt; class 选择器 \u0026gt; 标签选择器 C. class 选择器 \u0026gt; id 选择器 \u0026gt; 标签选择器 D. id 选择器 \u0026gt; 标签选择器 \u0026gt; class 选择器` 4\u0026ndash;要清除超链接的默认下划线，应设置的样式是（）\nA. text-decoration: underline B. text-decoration: overline C. text-decoration: none D. text-decoration: hidden 5\u0026ndash;鼠标悬停伪类的正确写法是（）\nA. .box :hover {color: red;} B. .box:hover { color: red; } C. .box hover { color: red; } D. .box-\u0026gt;hover { color: red; } 6\u0026ndash;要让元素显示为 “小手” 鼠标样式，正确的属性值是（）\nA. cursor: hand B. cursor: pointer C. cursor: small-hand D. cursor: finger 7\u0026ndash;下列哪个属性用于去掉列表的默认编号（）\nA. list-style: none B. list-style-type: none C. list-number: hidden D. list-type: none 8\u0026ndash;关于 padding 和 margin，描述正确的是（）\nA. padding 是外边距，margin 是内边距 B. padding 会增加元素自身的总尺寸 C. margin 是子元素与父元素内部的间距 D. padding 不影响元素的布局 9\u0026ndash;要隐藏一个 HTML 元素且不占用页面空间，应设置（）\nA. visibility: hidden B. display: none C. opacity: 0 D. hidden: true 10\u0026ndash;外部样式表的引入标签正确的是（）\n1 2 3 4 A. \u0026lt;link rel=\u0026#34;style\u0026#34; type=\u0026#34;text/css\u0026#34; href=\u0026#34;style.css\u0026#34;\u0026gt; B. \u0026lt;link rel=\u0026#34;stylesheet\u0026#34; type=\u0026#34;text/css\u0026#34; href=\u0026#34;style.css\u0026#34;/\u0026gt; C. \u0026lt;style src=\u0026#34;style.css\u0026#34; type=\u0026#34;text/css\u0026#34;\u0026gt;\u0026lt;/style\u0026gt; D. \u0026lt;import rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;style.css\u0026#34;/\u0026gt; （二）填空题（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 文件，包含：\n一个按钮（button），内容为 “显示 / 隐藏盒子”； 一个 div（id 为 target-box），初始隐藏，宽度 300px，高度 150px，背景色 #ffd6a5，外边距 20px，内边距 10px； 用 CSS 设置初始样式，用 JavaScript 实现点击按钮切换 div 的显示 / 隐藏（修改 display 属性）； 给 div 添加浮动（left），确保显示时文字不会环绕（可在 div 后加 清除浮动）。 CSS基础练习题-参考答案 BCBCB BBBBB\nCascading Style Sheet style #、. .box:hover {\u0026hellip;} 元素左浮动，文字环绕在右侧 none padding、margin not-allowed stylesheet display: none 代码一\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;zh-CN\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;UTF-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;选择器测试\u0026lt;/title\u0026gt; \u0026lt;style type=\u0026#34;text/css\u0026#34;\u0026gt; /* 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; } \u0026lt;/style\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;div id=\u0026#34;box1\u0026#34;\u0026gt;ID选择器测试\u0026lt;/div\u0026gt; \u0026lt;p class=\u0026#34;text-normal\u0026#34;\u0026gt;Class选择器测试1\u0026lt;/p\u0026gt; \u0026lt;p class=\u0026#34;text-normal\u0026#34;\u0026gt;Class选择器测试2\u0026lt;/p\u0026gt; \u0026lt;h3\u0026gt;标签选择器测试\u0026lt;/h3\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 代码二\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;zh-CN\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;UTF-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;交互与列表样式\u0026lt;/title\u0026gt; \u0026lt;style type=\u0026#34;text/css\u0026#34;\u0026gt; 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; } \u0026lt;/style\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt;首页\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;课程\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;关于我们\u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;a href=\u0026#34;#\u0026#34;\u0026gt;测试链接\u0026lt;/a\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 代码三\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;zh-CN\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;UTF-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;显隐控制与布局\u0026lt;/title\u0026gt; \u0026lt;style type=\u0026#34;text/css\u0026#34;\u0026gt; #target-box { display: none; /* 初始隐藏 */ width: 300px; height: 150px; background-color: #ffd6a5; margin: 20px; padding: 10px; float: left; /* 左浮动 */ } button { padding: 5px 15px; cursor: pointer; } \u0026lt;/style\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;button onclick=\u0026#34;toggleBox()\u0026#34;\u0026gt;显示/隐藏盒子\u0026lt;/button\u0026gt; \u0026lt;div id=\u0026#34;target-box\u0026#34;\u0026gt;这是一个可显隐的浮动盒子\u0026lt;/div\u0026gt; \u0026lt;div style=\u0026#34;clear: both;\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;!-- 清除浮动 --\u0026gt; \u0026lt;p\u0026gt;测试文字，确保浮动清除后不会环绕盒子\u0026lt;/p\u0026gt; \u0026lt;script\u0026gt; // 切换显隐的函数 function toggleBox() { const box = document.getElementById(\u0026#39;target-box\u0026#39;); if (box.style.display === \u0026#39;none\u0026#39; || box.style.display === \u0026#39;\u0026#39;) { box.style.display = \u0026#39;block\u0026#39;; } else { box.style.display = \u0026#39;none\u0026#39;; } } \u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; ","date":"2026-01-31T00:00:00Z","image":"https://bzliustc.github.io/p/css-learn/front-page_hu_cfeb6c0a2ace1305.jpg","permalink":"https://bzliustc.github.io/p/css-learn/","title":"CSS Learn"},{"content":"本文是html学习笔记.\n内容一览 html 概述 第一个html文件 基本标签 实体符号 表格 背景图片，背景颜色 超链接 列表 表单 html中的id属性 div和span HTML 概述 从头开始——第一个html的写法，参考代码文件第一个html：\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 \u0026lt;!-- 根 --\u0026gt; \u0026lt;!doctype html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;!-- 头 --\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt; 标签页标题 \u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;!-- 网页体，内容显示到网页上 --\u0026gt; \u0026lt;body\u0026gt; My first HTML page. 我的第一个HTML文件。 \u0026lt;!-- 注释信息的写法 --\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 基本标签 小知识：html标签不区分大小写；少个尾标签也行。\n段落 \u0026lt;p\u0026gt;是段落标签，其中的内容成为一段落。\n标题字 \u0026lt;h1\u0026gt;到\u0026lt;h6\u0026gt;\n换行 \u0026lt;br\u0026gt;\n水平线 \u0026lt;hr\u0026gt;\n可以通过color设置属性，例如红色线：\u0026lt;hr color=\u0026quot;red\u0026quot;\u0026gt;。 color称为属性名，\u0026quot;red\u0026quot;称为属性值。\n预留格式 \u0026lt;pre\u0026gt;保留源码格式。例如\n1 2 3 4 5 6 \u0026lt;!doctype html\u0026gt; \u0026lt;pre\u0026gt; for i in range(10): print(f\u0026#34;i+1={i}\u0026#34;) print(i) \u0026lt;/pre\u0026gt; 则将打印出已有缩进，不是变成一行打印。\nU, I, B, D等 加粗\u0026lt;b\u0026gt;，斜体\u0026lt;i\u0026gt;, 下划线\u0026lt;u\u0026gt;，划掉\u0026lt;del\u0026gt;；\n小标：上\u0026lt;sup\u0026gt;，下\u0026lt;sub\u0026gt;\n字体标签 \u0026lt;font color=\u0026quot;blue\u0026quot; size=13\u0026gt;可修改颜色，字体等。\n实体符号 （碎碎念）字符编码 1 2 3 \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;/\u0026gt; \u0026lt;/head\u0026gt; 这行代码告诉浏览器使用哪一种字符编码打开文件。这要与html文件编写用的编码相同。\n空格 例如要显示大空格，直接打一堆space是没有的，要\u0026amp;nbsp;是一个空格。\n大小于号 小于\u0026amp;lt;大于\u0026amp;gt;\n表格 参考代码004。\n标签描述 table 表格 tr 表格的一行 td 一行中的一列，即单元格 参数 添加边框：\u0026lt;table border=\u0026quot;1px\u0026quot;\u0026gt;\n设置单元格高度宽度：width=\u0026quot;300px\u0026quot;，height=\u0026quot;200px\u0026quot;。 属性值还可以设置为50%，就是页面的一般大。\n对齐：可为tr或者td设置对齐：align=\u0026quot;right\u0026quot;，属性值还可为center, left等。\n单元格合并 参考代码005。\n列合并，同一行俩单元格合并，只留第一个td，并添加属性colspan：\n1 2 3 4 5 \u0026lt;tr\u0026gt; \u0026lt;!-- 一个单元格 --\u0026gt; \u0026lt;td\u0026gt;1,1\u0026lt;/td\u0026gt; \u0026lt;td colspan=\u0026#34;2\u0026#34;\u0026gt;1,2\u0026lt;/td\u0026gt; \u0026lt;/tr\u0026gt; 行合并，同一列合并，只留第一个td，并添加属性rowspan：\n1 2 3 4 5 6 7 8 9 10 11 \u0026lt;!-- 行合并 --\u0026gt; \u0026lt;tr\u0026gt; \u0026lt;td\u0026gt;a\u0026lt;/td\u0026gt; \u0026lt;td\u0026gt;b\u0026lt;/td\u0026gt; \u0026lt;td rowspan=\u0026#34;2\u0026#34;\u0026gt;与下方合并\u0026lt;/td\u0026gt; \u0026lt;/tr\u0026gt; \u0026lt;tr\u0026gt; \u0026lt;td\u0026gt;A\u0026lt;/td\u0026gt; \u0026lt;td\u0026gt;B\u0026lt;/td\u0026gt; \u0026lt;/tr\u0026gt; th标签 参考代码006。\n用\u0026lt;th\u0026gt;代替\u0026lt;td\u0026gt;，可令内容自动加粗居中。\nthead，tbody，tfoot 参考代码007\n表格可以用thead，tbody，tfoot开分割——目的是方便JS操作表格。 没有视觉效果，方便后续操作。\n背景颜色和图片 参考代码008\n背景颜色：在body标签处，设置属性bgcolor 背景图片：在body标签处，设置属性background 图片 参考代码009\n通过\u0026lt;img src=\u0026quot;path/to/your/fig\u0026quot;\u0026gt;\u0026lt;/img\u0026gt;插入图片。\n可用属性：\nsrc：指定图片路径 width：指定图片宽度（高度保持比例自动缩放） height：手动设置就可以拉伸图片 title：鼠标悬停时显示提示 alt：若图片加载失败的提示信息 超链接 参考代码010\n使用\u0026lt;a href=\u0026quot;path\u0026quot;\u0026gt;连接文本\u0026lt;/a\u0026gt;创建文本超链接。\n图片超链接：将插入图片的内容包裹在一对\u0026lt;a\u0026gt;\u0026lt;/a\u0026gt;中即可。 target属性：设置最终打开窗口的位置： _self：在当前窗口打开 _blank：新窗口打开 _parent：当前窗口的父级窗口（窗口嵌套时的上一级） _top：当前窗口的顶级窗口（窗口嵌套时的最高级） 列表 无序列表：\n1 2 3 4 5 \u0026lt;ul\u0026gt; \u0026lt;li\u0026gt;Apple\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Orange\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Banana\u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; 其输出形式如下：\nApple Orange Banana 无序表允许嵌套有序/无序表，参考代码文件011。\u0026lt;ul\u0026gt;标签的type属性可指定样式，例如\u0026quot;circle\u0026quot;是圈圈，\u0026quot;square\u0026quot;是方块。\n有序列表：\n1 2 3 4 5 \u0026lt;ol\u0026gt; \u0026lt;li\u0026gt;Asia\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;America\u0026lt;/li\u0026gt; \u0026lt;li\u0026gt;Arctic\u0026lt;/li\u0026gt; \u0026lt;/ol\u0026gt; 同样的，有序表可以嵌套列表。\u0026lt;ol\u0026gt;的type属性指定有序编号样式，例如字母、罗马数字、数码等。\n表单（重点） 表单时用来收集用户数据，发送请求时会把收集的数据发送给主机（例如登录页）。\n表单的语法格式 1 2 3 4 \u0026lt;form\u0026gt; \u0026lt;!-- 表单项1 --\u0026gt; \u0026lt;!-- 表单项2 --\u0026gt; \u0026lt;/form\u0026gt; 参考代码012 表单的属性action和超链接的href类似，可以设置一个目标位置。当按下按钮（如下），自动跳转到此位置。\n提交按钮 表单可以画一个按钮，按下即跳转到表单action属性中的目标位置，这要使用\u0026lt;input\u0026gt;标签 （一对\u0026lt;input\u0026gt;表示输入域，通过展示不同的type显示不同的样式） 将\u0026lt;input type=\u0026quot;submit\u0026quot;/\u0026gt;作为一个表单写入表单中，即可显示出一个按钮。 注意，所有能够提交表单的按钮，type必须是\u0026quot;submit\u0026quot;。注意：\ntype设置为普通按钮button只能点击，不能跳转到action指定的位置； 在表单外的按钮无法自动跳转 1 2 3 4 5 6 \u0026lt;!-- 例子：包含此段代码： --\u0026gt; \u0026lt;!-- 浏览器上会显示一个方框按钮，点击会跳转到`form`的type属性值，即目标网站。 --\u0026gt; \u0026lt;h2\u0026gt;表单\u0026lt;/h2\u0026gt; \u0026lt;form action=\u0026#34;https://www.bing.com\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34;/\u0026gt; \u0026lt;/form\u0026gt; 若要按钮显示自定义文本，可设置\u0026lt;input value=\u0026gt;属性为自定义文本。 如果添加了name属性，则会将name=value也发送出去，所以不要为提交按钮添加name属性！\n此外，\u0026lt;input type=\u0026quot;reset\u0026quot; value=\u0026quot;清空输入\u0026quot;/\u0026gt;\u0026quot;表单项可将表单变回默认状态。\n一个例子 action属性值的分析：\nhttps://是协议 192.168.154.2是IP :8080是端口 /oa/login是主机上的一段程序，可用于处理表单提交的信息 \u0026lt;input type=\u0026gt;属性取为text则是可输入文本框，password则是密码框（不显示字符）。\n表单项的name属性决定表单项的输入内容是否提交，没有该属性的表单项输入不会被传递到目标位置。 并且，向目标位置提交的数据以url?name=value\u0026amp;name=value的键值对格式提交。\n可以测试一下，不加name属性，跳转到的地址栏会显示https://192.168.154.2:8080/oa/login?而没有后续数据。 添加name属性和属性值后，若是依次输入ustc、1234、qwer， 则地址栏为https://192.168.154.2:8080/oa/login?usr_nm=ustc\u0026amp;passwd=qwer这样的内容（UID没有传送数据）。 若某项没有填写又没有默认值，则传递空字符串。\n单选框和复选框 参考代码演示表单\ntype=\u0026quot;radio\u0026quot;表示一个单选圆圈，点击一次可变成实心的表示选中 name相同的多个radio类型的input表单项只能选中一个 （换个说法，同一个单选问题的每个input表单项name属性要相同）。 下面的代码展示了这一特性：\n1 2 3 4 5 6 7 \u0026lt;!-- 性别表单项 --\u0026gt; 性别 男\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;n1\u0026#34;/\u0026gt; 女\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;n1\u0026#34;/\u0026gt;\u0026lt;br\u0026gt; 年级 高\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;n1\u0026#34;/\u0026gt; 低\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;n1\u0026#34;/\u0026gt;\u0026lt;br\u0026gt; \u0026lt;!-- 其它表单项 --\u0026gt; \u0026lt;!-- 这样的表单项是有问题的！因为四个选择框只能选中一个 --\u0026gt; 改成如下这样就互不影响了。 此外，程序员需要提供value的值，对应不同选项映射的收集数据的值， 因为radio类型不知道每个选项要对应哪个值来上传。\n1 2 3 4 性别 男\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;n1\u0026#34;/\u0026gt; 女\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;n1\u0026#34;/\u0026gt;\u0026lt;br\u0026gt; 年级 高\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;n2\u0026#34;/\u0026gt; 低\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;n2\u0026#34;/\u0026gt;\u0026lt;br\u0026gt; 为\u0026lt;input type=\u0026quot;radio\u0026quot;\u0026gt;添加checked属性表示默认选中此表单项。\ntype=checkbox表示一个复选框；name、value和checked属性用法同上。\n下拉列表 下拉列表通过\u0026lt;select\u0026gt;标签实现：\n1 2 3 4 5 \u0026lt;select name=\u0026#34;level\u0026#34;\u0026gt; \u0026lt;option\u0026gt;Middle School\u0026lt;/option\u0026gt; \u0026lt;option\u0026gt;College\u0026lt;/option\u0026gt; \u0026lt;option selected\u0026gt;小学二年级\u0026lt;/option\u0026gt; \u0026lt;/select\u0026gt; \u0026lt;option\u0026gt;表示下拉列表项。 列表项添加selected属性表示默认选中此项。 注意！下拉列表类型输入不再是使用\u0026lt;input\u0026gt;表示，是\u0026lt;select\u0026gt;\n下拉列表支持多选 参考代码014\n为select标签添加size=\u0026quot;n\u0026quot;属性，即可使得下拉列表一次展现n个选项，并支持滚动条。添加multiple属性，即可支持使用ctrl键进行多选。另外，n=1并添加multiple属性可以显示出下拉复选框。\n文本域 一对\u0026lt;textarea\u0026gt;表示一个文本域，可以输入长文本。 值得注意的是标签对内的所有内容都会作为默认内容显示出来，因此不要有换行或注释在其中。 不要这么做：\n1 2 3 4 5 \u0026lt;textarea rows=\u0026#34;5\u0026#34; cols=\u0026#34;60\u0026#34; name=\u0026#34;intro\u0026#34;\u0026gt; \u0026lt;!-- 注释 --\u0026gt; 123和换行 \u0026lt;/textarea\u0026gt; file控件 \u0026lt;input type=\u0026quot;file\u0026quot;/\u0026gt;可以上传文件。 至于后台java程序提纲IO流的方式接收文件。\n隐藏域控件 \u0026lt;input type=\u0026quot;hidden\u0026quot; name=\u0026quot;usercode\u0026quot; value=\u0026quot;111\u0026quot;/\u0026gt;产生一个隐藏域， 不在网页上显示，但是可以携带提交内容。\nreadonly属性和disabled属性 readonly和disabled属性都使得输入内容不可更改（只读）， 并且disabled使得输入内容不被提交。\nmaxlength属性 限制输入内容长度， 例如，作用于type=text的输入域，则最多输入3字符。\nHTML的id属性 在HTML任何一个节点（标签）上都有id属性， 一个id代表一个节点（类似于身份证号）， 因而同一个网页中id属性是不能重复的。 Javascript可以对HTML节点进行改动，这就要用到id来获取节点对象。\n例如，可以像下面为每个节点添加id：\n1 2 3 4 5 6 7 8 9 10 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html id=\u0026#34;myhtml\u0026#34;\u0026gt; \u0026lt;head id=\u0026#34;myhead\u0026#34;\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;/\u0026gt; \u0026lt;title\u0026gt;\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body id=\u0026#34;mybody\u0026#34;\u0026gt; \u0026lt;form action=\u0026#34;ag.asd.org\u0026#34; id=\u0026#34;myform\u0026#34;\u0026gt;\u0026lt;/form\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; \u0026lt;div\u0026gt;和\u0026lt;span\u0026gt; 参考代码019\n\u0026lt;div\u0026gt;和\u0026lt;span\u0026gt;都被称为图层，网页可以有多个图层。 每个图层在网页中都是一个独立的盒子，可以重叠、嵌套。 图层最主要作用就 —— 网页布局。 图层通过左上角顶点的x, y轴坐标定位其在网页中的位置（后期可用CSS样式进行定位）。\n两者的区别：div默认情况下独占一行，span不独占行。\n附录 HTML 基础测试练习题 考察范围：基本标签 - 表单（下拉列表）\n一、选择题（共 5 题，每题只有一个正确答案）\n1\u0026ndash;下列哪个标签是 HTML 文档的根标签？（）\nA. \u0026lt;head\u0026gt; B. \u0026lt;body\u0026gt; C. \u0026lt;html\u0026gt; D. \u0026lt;!doctype html\u0026gt;\n2\u0026ndash;要在网页中插入一张图片，且当图片加载失败时显示提示文字，需设置标签的哪个属性？（）\nA. src B. alt C. title D. width\n3\u0026ndash;以下关于 HTML 表单的说法，错误的是？（）\nA. 表单的提交按钮type属性值必须为submit B. 表单项必须添加name属性才能提交数据 C. 下拉列表的标签是\u0026lt;input type=\u0026quot;select\u0026quot;\u0026gt; D. 重置按钮的作用是将表单恢复为默认状态 4\u0026ndash;若要实现同一行内两个单元格合并，需为标签添加哪个属性？（）\nA. rowspan B. colspan C. align D. merge\n5\u0026ndash;下列哪个实体符号表示 HTML 中的空格？（）\nA. \u0026amp;lt; B. \u0026amp;gt; C. \u0026amp;nbsp; D. \u0026amp;amp;\n二、填空题（共 10 题，每空 1 分）\n6\u0026ndash;HTML 文档的基本结构包含\u0026lt;head\u0026gt;和\u0026lt;body\u0026gt;标签，其中\u0026lt;head\u0026gt;标签内的\u0026lt;title\u0026gt;标签用于设置______。\n7\u0026ndash;要实现强制换行效果，需使用单标签______；要添加一条红色水平线，代码为______。\n8\u0026ndash;\u0026lt;pre\u0026gt;标签的作用是______，它会保留源码中的缩进和换行格式。\n9\u0026ndash;HTML 表格中，\u0026lt;th\u0026gt;标签的作用是______，其内容默认______且居中显示。\n10\u0026ndash;超链接标签\u0026lt;a\u0026gt;的核心属性是______，用于指定跳转目标；若要在新窗口打开链接，需设置target属性值为______。\n11\u0026ndash;无序列表的标签是______，列表项的标签是______；若要将无序列表的项目符号改为空心圆，需设置type属性值为______。\n12\u0026ndash;HTML 表单中，单选框的type属性值为______，同一组单选框的______属性值必须相同才能实现互斥效果。\n13\u0026ndash;下拉列表由\u0026lt;select\u0026gt;标签定义，列表项由______标签定义；若要默认选中某列表项，需添加______属性。\n14\u0026ndash;文本域的标签是______，通过rows和cols属性分别设置______和______。\n15\u0026ndash;要设置网页的背景颜色，需在\u0026lt;body\u0026gt;标签中添加______属性；若要设置背景图片，则添加______属性。\n三、编写题（共 3 题，每题需写出完整代码）\n16\u0026ndash;编写一个完整的 HTML 文档，要求包含基本结构（文档声明、\u0026lt;html\u0026gt;、\u0026lt;head\u0026gt;、\u0026lt;body\u0026gt;），\u0026lt;head\u0026gt;中设置页面标题为 “我的第一个 HTML 页面”，\u0026lt;body\u0026gt;中包含一个一级标题 “欢迎学习 HTML” 和一个段落，段落内容为 “这是一道 HTML 编写题的练习内容。”。\n17\u0026ndash;编写一个 HTML 表格，要求如下： 表格边框为 1 像素；表格包含 2 行 3 列； 第一行是表头，内容分别为 “姓名”、“年龄”、“班级”； 第二行内容分别为 “张三”、“20”、“计算机 1 班”； 表头单元格内容居中加粗（使用\u0026lt;th\u0026gt;标签实现）\n18\u0026ndash;编写一个 HTML 表单，要求如下： 表单提交目标为https://www.example.com； 包含以下表单项：\n文本框：用于输入用户名，name属性为username，默认值为 “请输入用户名” 密码框：用于输入密码，name属性为password 单选框：性别选择（男、女），name属性为gender，默认选中 “男” 下拉列表：年级选择（大一、大二、大三），name属性为grade，默认选中 “大二” 提交按钮和重置按钮，按钮文本分别为 “提交信息” 和 “重置表单” HTML 基础测试练习题 - 答案 一、CBCBC\n二、填空题答案\n网页标签页的标题 \u0026lt;br\u0026gt;；\u0026lt;hr color=\u0026quot;red\u0026quot;\u0026gt; 预留格式 定义表头单元格；加粗 href；_blank \u0026lt;ul\u0026gt;；\u0026lt;li\u0026gt;；circle radio；name \u0026lt;option\u0026gt;；selected \u0026lt;textarea\u0026gt;；行数；列数 bgcolor；background 三、编写题答案 第一题\n1 2 3 4 5 6 7 8 9 10 \u0026lt;!doctype html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;我的第一个HTML页面\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;h1\u0026gt;欢迎学习HTML\u0026lt;/h1\u0026gt; \u0026lt;p\u0026gt;这是一道HTML编写题的练习内容。\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 第二题\n1 2 3 4 5 6 7 8 9 10 11 12 \u0026lt;table border=\u0026#34;1px\u0026#34;\u0026gt; \u0026lt;tr\u0026gt; \u0026lt;th\u0026gt;姓名\u0026lt;/th\u0026gt; \u0026lt;th\u0026gt;年龄\u0026lt;/th\u0026gt; \u0026lt;th\u0026gt;班级\u0026lt;/th\u0026gt; \u0026lt;/tr\u0026gt; \u0026lt;tr\u0026gt; \u0026lt;td\u0026gt;张三\u0026lt;/td\u0026gt; \u0026lt;td\u0026gt;20\u0026lt;/td\u0026gt; \u0026lt;td\u0026gt;计算机1班\u0026lt;/td\u0026gt; \u0026lt;/tr\u0026gt; \u0026lt;/table\u0026gt; 第三题\n1 2 3 4 5 6 7 8 9 10 11 12 13 \u0026lt;form action=\u0026#34;https://www.example.com\u0026#34;\u0026gt; 用户名：\u0026lt;input type=\u0026#34;text\u0026#34; name=\u0026#34;username\u0026#34; value=\u0026#34;请输入用户名\u0026#34;\u0026gt;\u0026lt;br\u0026gt; 密码：\u0026lt;input type=\u0026#34;password\u0026#34; name=\u0026#34;password\u0026#34;\u0026gt;\u0026lt;br\u0026gt; 性别：男\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;gender\u0026#34; checked\u0026gt; 女\u0026lt;input type=\u0026#34;radio\u0026#34; name=\u0026#34;gender\u0026#34;\u0026gt;\u0026lt;br\u0026gt; 年级： \u0026lt;select name=\u0026#34;grade\u0026#34;\u0026gt; \u0026lt;option\u0026gt;大一\u0026lt;/option\u0026gt; \u0026lt;option selected\u0026gt;大二\u0026lt;/option\u0026gt; \u0026lt;option\u0026gt;大三\u0026lt;/option\u0026gt; \u0026lt;/select\u0026gt;\u0026lt;br\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34; value=\u0026#34;提交信息\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;reset\u0026#34; value=\u0026#34;重置表单\u0026#34;\u0026gt; \u0026lt;/form\u0026gt; ","date":"2026-01-28T11:55:57+08:00","image":"https://bzliustc.github.io/p/html-learn/front-page_hu_92ffa07773986129.jpg","permalink":"https://bzliustc.github.io/p/html-learn/","title":"HTML Learn"},{"content":"Hello world ^_^ Hi there everyone and tihs is BZLIUSTC (春节序曲), a beginner of Hugo static blog page writer.\nThanks 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\nThis page, as the title said, is a rough work page for any try-outs. So do not hesitate if any great idea comes.\nHave fun with Hugo.\nMath Settings 参考文献：\n某博主的优秀教程\n试着写一个数学公式：记得一定要用一对\u0026lt;div\u0026gt; \u0026lt;/div\u0026gt;包起来！ 如果还无法启用的话，检查根目录config文件里面是不是有math: false。如果是，改成true就好啦。\n$$ \\theta :=\\theta _0-\\alpha \\nabla f\\left( \\theta _0 \\right) $$Hyperlink 想要添加任何附件，请放到/static/append/目录中。 为了管理方便，最好为每篇文章的附件们创建一个子目录，统一存放。\nreference: article\n侧栏头像和简介 标题（网站标题）和简介在根目录的hugo.yaml文件中编辑； 头像存储的默认根路径为/themes/assets/，头像路径也在项目根目录的hugo.yaml中设置。\n","date":"2026-01-26T00:00:00Z","image":"https://bzliustc.github.io/p/myzeroblog/tamako-frontpage_hu_5f241042b7d5965c.jpg","permalink":"https://bzliustc.github.io/p/myzeroblog/","title":"MyZeroBlog"},{"content":"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.\nHeadings The following HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; elements represent six levels of section headings. \u0026lt;h1\u0026gt; is the highest section level while \u0026lt;h6\u0026gt; is the lowest.\nH1 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.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes 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.\nBlockquote without attribution Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.\nBlockquote with attribution Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\nTables Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\nName 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 1 2 3 4 5 6 7 8 9 10 \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block indented with four spaces \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block with Hugo\u0026rsquo;s internal highlight shortcode 1 2 3 4 5 6 7 8 9 10 \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Diff code block 1 2 3 4 5 [dependencies.bevy] git = \u0026#34;https://github.com/bevyengine/bevy\u0026#34; rev = \u0026#34;11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13\u0026#34; - features = [\u0026#34;dynamic\u0026#34;] + features = [\u0026#34;jpeg\u0026#34;, \u0026#34;dynamic\u0026#34;] 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.\nH2O\nXn + Yn = Zn\nPress CTRL + ALT + Delete to end the session.\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\nHyperlinked image The above quote is excerpted from Rob Pike\u0026rsquo;s talk during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"2019-03-11T00:00:00Z","image":"https://bzliustc.github.io/p/markdown-syntax-guide/pawel-czerwinski-8uZPynIu-rQ-unsplash_hu_9e6bcf9cfe9a9448.jpg","permalink":"https://bzliustc.github.io/p/markdown-syntax-guide/","title":"Markdown Syntax Guide"},{"content":"Lorem est tota propiore conpellat pectoribus de pectora summo.\nRedit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.\nExierant elisi ambit vivere dedere Duce pollice Eris modo Spargitque ferrea quos palude Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.\nComas hunc haec pietate fetum procerum dixit Post torum vates letum Tiresia Flumen querellas Arcanaque montibus omnes Quidem et Vagus elidunt The Van de Graaf Canon\nMane refeci capiebant unda mulcebat Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. Faces illo pepulere tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.\nIubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.\nEurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel mitis temploque vocatus, inque alis, oculos nomen non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides parte.\n","date":"2019-03-09T00:00:00Z","image":"https://bzliustc.github.io/p/placeholder-text/matt-le-SJSpo9hQf7s-unsplash_hu_55222a4565f8ab23.jpg","permalink":"https://bzliustc.github.io/p/placeholder-text/","title":"Placeholder Text"},{"content":"Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.\nIn this example we will be using KaTeX\nCreate a partial under /layouts/partials/math.html Within this partial reference the Auto-render Extension or host these scripts locally. Include the partial in your templates like so: 1 2 3 {{ if or .Params.math .Site.Params.math }} {{ partial \u0026#34;math.html\u0026#34; . }} {{ end }} To enable KaTeX globally set the parameter math to true in a project\u0026rsquo;s configuration To enable KaTeX on a per page basis include the parameter math: true in content files Note: Use the online reference of Supported TeX Functions\nExamples Inline math: $\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…$\nBlock math: $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$","date":"2019-03-08T00:00:00Z","permalink":"https://bzliustc.github.io/p/math-typesetting/","title":"Math Typesetting"},{"content":"Emoji can be enabled in a Hugo project in a number of ways.\nThe emojify function can be called directly in templates or Inline Shortcodes.\nTo enable emoji globally, set enableEmoji to true in your site\u0026rsquo;s configuration and then you can type emoji shorthand codes directly in content files; e.g.\n🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:\nThe Emoji cheat sheet is a useful reference for emoji shorthand codes.\nN.B. The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.\n1 2 3 .emoji { font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; } ","date":"2019-03-05T00:00:00Z","image":"https://bzliustc.github.io/p/emoji-support/the-creative-exchange-d2zvqp3fpro-unsplash_hu_25e98f89e1c69204.jpg","permalink":"https://bzliustc.github.io/p/emoji-support/","title":"Emoji Support"}]