HTML5 跨平台开发基础 · 期末自学知识库
收录 494 道专业课题库全部题目，覆盖 Web 基础、HTML/HTML5、CSS、JavaScript、DOM/BOM、事件与 Canvas 全栈知识。点击右上角「背诵模式」可隐藏答案自测答题。
如何使用本知识库
① 左侧目录可点击跳转，按顺序学习效果最佳；② 每个知识点都从概念讲起并配代码示例，蓝色框是重点提示、橙色框是易错警告、绿色框是记忆技巧、红色框是题库原答案纠错；③ 点击「典型例题」可展开查看题干、答案与详细解析；④ 读完全文后查阅附录 A 速记表与附录 B 备考指南进行冲刺复习。
1Web 基础与 HTML 文档结构
1.1 Web 与网页基本概念
WWW（万维网）是一种基于 Internet 的信息服务系统，中文简称"万维网"。它的核心是：用 URL（统一资源定位符）定位资源，用 HTTP/HTTPS 协议传输数据，用 HTML 格式呈现页面。
- 网页（Web Page）：一个 HTML 文件就是一个网页，用浏览器打开查看。
- 网站（Web Site）：多个相关网页的集合，有统一的域名。
- 首页（主页）：网站默认打开的第一个页面，文件名通常是
index.html或default.html，不能用任意名字（如 abc.txt）作为首页。 - 浏览器：浏览 Web 网页应使用浏览器（如 Chrome、Edge、Firefox），浏览器负责解析 HTML/CSS/JS 并渲染页面。
URL 的组成
URL（统一资源定位符）即网址，格式：协议://主机名:端口/路径/文件名?参数。例如 https://www.example.com:443/news/index.html?id=1。
重点 影响网站风格最重要的因素是网站的主题与色彩搭配；规划网站目录结构时，应分层合理、便于维护；获取网站空间的主要方法有：申请免费主页空间、申请付费空间、自己架设服务器（虚拟主机属于一种托管方式）。
1.2 HTML 文档基本结构
HTML（HyperText Markup Language，超文本标记语言）用"标签"来描述网页内容。HTML 标签不区分大小写（推荐小写），标签分为双标签（成对出现，如 <p></p>）和单标签（自闭合，如 <br/>、<img/>）。
HTML 文档是一个树状结构（DOM 树），<html> 是根节点，位于最顶层：
<!DOCTYPE html> <!-- 文档类型声明，HTML5 固定写法 -->
<html lang="zh-CN"> <!-- 根节点，整个文档的最顶层 -->
<head> <!-- 头部，存放元信息，不会在浏览器窗口正文显示 -->
<meta charset="UTF-8"> <!-- 设置页面元信息（字符编码）-->
<title>页面标题</title> <!-- 网页标题，必须嵌套在 head 中，显示在浏览器标签页 -->
</head>
<body> <!-- 主体，存放可见内容，会显示在浏览器窗口 -->
页面可见内容写在这里
</body>
</html>记忆要点① 根节点是
<html>，不是 head/body；② <title>、<meta>、<link>、<style>、<script> 都必须嵌套在 <head> 之中；③ <head> 里的信息不会在浏览器正文区域显示（标题显示在标签页上），显示的是 <body> 里的内容；④ <meta> 用于设置页面元信息（编码、视口、描述等）。例题HTML文档的树状结构中，（ ）标签为文档的根节点，位于结构中的最顶层。
- A. <head>
- B. <html>
- C. <body>
- D. <title>
答案：B <html> 是整个文档的根节点，head 和 body 都是它的子节点。
例题关于HTML，下列说法错误的是？
- A. HTML中标记不区分大小写
- B. html标签用于文档最前面，用于标识HTML文档
- C. 文件头部信息会在浏览器窗口显示出来
- D. html是双标签
答案：C 头部（head）信息不会在浏览器窗口正文显示，显示的是 body 内容。
例题HTML中（ ）标签必须嵌套于 head 标签之中。
- A. body
- B. title
- C. image
- D. html
答案：B title、meta、link、style、script 等都放在 head 中。
例题在HTML中，用于设置页面元信息的标示符是（ ）。
- A. title
- B. base
- C. head
- D. meta
答案：D meta 标签用于定义页面的元信息（meta information）。
例题非彩色是指 ________ 。
- A. 黑色
- B. 白色
- C. 黑、白
- D. 黑、白、灰
答案：D
例题关于免费域名的申请以及网页空间的获得，下列说法中正确的是______。
- A. 只要申请了免费域名，就获得了相应的网页空间
- B. 免费域名其实就是免费网页空间
- C. 当网站地址发生变化时，只须修改免费域名转向地址，就可以访问新的网站地址
- D. 可以申请任何名称的免费域名
答案：C
例题获取网站空间的主要方法有三种，下列哪一种不是________。
- A. 申请免费主页空间
- B. 申请付费空间
- C. 申请虚拟主机
- D. 自己架设服务器
答案：C
例题设计网页为了避免色彩杂乱，达到页面和谐统一，下面方法正确的是_____。
- A. 使用邻近色
- B. 使用对比色
- C. 使用互补色
- D. 使用黑色
答案：A
例题为突出重点，产生强烈的视觉效果，可以使用的是_______。
- A. 邻近色
- B. 同一种色彩
- C. 对比色
- D. 黑色
答案：C
例题影响网站风格的最重要的因素是_________。
- A. 色彩和窗口
- B. 特效和架构
- C. 色彩和布局
- D. 内容和布局
答案：C
例题对于网页制作者来说web的含义是什么？( )
- A. 万维网的缩写
- B. 可以简单理解为网页
- C. 超媒体
- D. 传输协议
答案：B
例题浏览Web网页应使用( )
- A. 资源管理器
- B. 浏览器软件
- C. 电子邮件
- D. 0ffice2000
答案：B
例题下列各项哪一种不是视频文件的格式______。
- A. flv
- B. rm
- C. avi
- D. swf
答案：D
例题下列各项属于网页制作工具的是______。
- A. photoshop
- B. flash
- C. dreamweaver
- D. cuteFTP
答案：C
例题（多选）下面选项中，属于网页构成元素的是()
- A. 音频
- B. 视频
- C. 文字
- D. psd文件
答案：ABC
例题（多选）作为一个专业的网页制作人员，当拿到一个页面的效果图时，首先要做的就是准备工作，其中准备工作包括（）
- A. 建立站点
- B. 效果图的分析
- C. 搜集素材
- D. 图片的处理
答案：ABCD
例题（判断）宽度属性width和高度属性height对块元素无效。
答案：错
1.3 HTML 标签的分类与节点类型
HTML 文档由各种"节点"构成，DOM 中节点分三类（注意：没有"样式节点"这种类型）：
| 节点类型 | nodeType 值 | 说明 | 举例 |
|---|---|---|---|
| 元素节点 | 1 | HTML 标签 | <p>、<div> |
| 文本节点 | 3 | 标签里的文字内容 | <p>你好</p> 中的"你好" |
| 属性节点 | 2 | 标签的属性 | <a href="..."> 中的 href |
考点
nodeType 返回 1 表示元素节点。这是高频考点。2HTML 常用标签
2.1 文本与排版标签
| 标签 | 作用 | 说明 |
|---|---|---|
<h1>~<h6> | 标题 | h1 最大，h6 最小，语义化标题 |
<p> | 段落 | 段落标记 |
<br/> | 换行 | 单标签 |
<hr/> | 水平线 | 单标签 |
<strong>/<b> | 加粗 | strong 有语义（强调），b 仅样式 |
<em>/<i> | 斜体 | em 有语义，i 仅样式 |
<u> | 下划线 | — |
<del>/<s> | — | |
<sub> | 下标 | 如 H2O |
<sup> | 上标 | 如 X2 |
<pre> | 预格式化 | 保留空格和换行 |
<span> | 行内容器 | 无语义，配合 CSS 使用 |
<div> | 块容器 | 无语义，常用布局 |
记忆技巧 下标 sub（subscript，"在下面"），上标 sup（superscript，"在上面"）。粗体用 strong/b，斜体用 em/i，删除线用 del。
例题段落的 HTML 源代码标记为_______。
- A. <a>
- B. <b>
- C. <o>
- D. <p>
答案：D paragraph 段落用 <p>。
例题定义下标文本的 HTML 源代码标记为_______；定义上标文本的为_______。
- A. <sub>
- B. <sup>
- C. <strong>
- D. <pre>
答案：下标选 A（<sub>），上标选 B（<sup>）
例题（多选）下列标记中，用来设置文本为粗体的是？
- A. <u>
- B. <del>
- C. <strong>
- D. <b>
答案：CD strong 和 b 都能加粗。u 是下划线，del 是删除线。
2.2 列表标签
| 标签 | 类型 | 说明 |
|---|---|---|
<ul> | 无序列表 | 项目符号为 disc(●)/circle(○)/square(■)，用 type 属性设置 |
<ol> | 有序列表 | 编号用 type 属性设置(1/a/A/i/I) |
<dl> | 自定义列表 | 含 dt（术语）和 dd（描述），常用于图文混排、名词解释 |
<!-- 无序列表 -->
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>第一步</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>考点 定义有序列表
<ol> 项目符号类型用 type 属性；无序列表 type 值有 disc/circle/square（不含 pointer，pointer 是鼠标光标样式）。常用于图文混排的是自定义列表 dl。例题在HTML中，常用于定义图文混排的列表是？
- A. 自定义列表
- B. 菜单列表
- C. 有序列表
- D. 无序列表
答案：A 自定义列表 dl/dt/dd 适合图文混排。
例题（多选）在无序列表中经常设置 type 属性，下列属于 type 属性值的是？
- A. disc
- B. circle
- C. square
- D. pointer
答案：ABC pointer 是 cursor 光标属性值，不是列表 type。
2.3 表格标签
| 标签/属性 | 作用 |
|---|---|
<table> | 表格 |
<tr> | 行 |
<td> | 单元格 |
<th> | 表头单元格（加粗居中） |
cellpadding | 单元格填充：内容与单元格边框之间的空间 |
cellspacing | 单元格间距：单元格之间的间隙 |
border | 边框 |
<table border="1" cellpadding="10" cellspacing="0">
<tr><th>姓名</th><th>成绩</th></tr>
<tr><td>张三</td><td>90</td></tr>
</table>区分 cellpadding = 单元格内填充（content 与 border 之间）；cellspacing = 单元格之间的间距。设置列宽是修改
<td>/<th> 的属性。例题单元格的 HTML 源代码标记为_______；表格的为_______。
- A. <ta>
- B. <tb>
- C. <td>
- D. <table>
答案：单元格 C（<td>），表格 D（<table>）
例题在表格标记中，要设置单元格边距（内容与边框之间空间），可使用参数是？
- A. cellspacing
- B. align
- C. cellpadding
- D. border
答案：C cellpadding 单元格填充。cellspacing 是单元格间距。
2.4 表单标签（基础）
表单用于收集用户输入，是前端与用户交互的核心。
| 标签 | 作用 | 常用属性 |
|---|---|---|
<form> | 表单容器 | action(提交地址)、method(get/post) |
<input> | 输入框 | type 决定类型 |
<textarea> | 文本域（多行） | rows、cols |
<select>+<option> | 下拉列表 | — |
<button> | 按钮 | type(button/submit/reset) |
<input> 的 type 值：text(文本)、password(密码)、radio(单选)、checkbox(复选)、submit(提交)、reset(重置)、button(普通按钮)、file(文件)、image(图像按钮)。
<form action="/login" method="post">
账号：<input type="text" name="user"><br>
密码：<input type="password" name="pwd"><br>
简介：<textarea name="intro" rows="3"></textarea><br>
城市：<select name="city">
<option value="gz">广州</option>
</select><br>
<input type="submit" value="提交">
</form>考点 ① 增加文本域（多行输入）用
<textarea>，不是 input；② 定义下拉列表用 <select>；③ Select 值改变触发 onchange 事件；④ 表单提交时若要弹确认框，用 onsubmit 配合 confirm()。例题增加表单的文本域的 HTML 代码是？
- A. <input type="submit">
- B. <textarea name="textarea">
- C. <input type="radio">
- D. <input type="checkbox">
答案：B 文本域是多行输入框，用 textarea。
例题下列选项中，用来定义下拉列表的标签是？
- A. input
- B. textarea
- C. form
- D. select
答案：D select 定义下拉列表。
例题表单元素 Select 中的值发生改变时，就会触发（ ）事件。
- A. onMouseOver
- B. onFocus
- C. onChange
- D. onClick
答案：C Select 值改变触发 onchange。
例题以下文件名不能用来作为首页的是_______。
- A. index.htm
- B. index.html
- C. index.aspx
- D. first.html
答案：D
例题下列文件名中最适合作为静态网站主页文件名的是( )。
- A. default. html
- B. index, asp
- C. 首页.html
- D. 主页.html
答案：A
例题下列选项中，表示网页头部标题的标记是( )
- A. head
- B. body
- C. title
- D. html
答案：C
例题下列选项中，表示网页头部信息的标记是( )o
- A. head
- B. body
- C. p
- D. html
答案：A
例题一个标准的html文件是以标记结束。
- A. </head>
- B. &It;/body>
- C. </html>
- D. </title>
答案：C
例题以下选项中，哪个全部都是表格标记（）
- A. <table><head><tfoot>
- B. <table><tr><td>
- C. <table><body><tfoot>
- D. <table><head><tr>
答案：B
例题设置列的宽度为100，则_______标签的属性被修改。
- A. table
- B. tr
- C. td
- D. th
答案：C
例题<title> </title>标记必须包含在_____标记中。
- A. <head></head>
- B. <p></p>
- C. <body></body>
- D. <table></table>
答案：A
例题（判断）＜html＞标记标志着HTML文档的开始,＜/html＞标记标志着HTML文档的结束。
答案：对
例题（判断）所有的标签都可以设置宽度和高度属性。
答案：错
例题（判断）有序列表即为有排列顺序的列表，标记用于定义有序列表。
答案：对
例题（判断）在HTML标记中，＜h1＞标记属于双标记。
答案：对
例题（判断）在HTML语言中，常用的列表有三种，分别为无序列表、有序列表和自定义列表。
答案：对
例题（判断）在HTML中，标记可以拥有多个属性。
答案：对
例题（判断）在特殊字符中，使用 “ ”空格符可以实现想要的空白字符效果。
答案：对
3超链接、路径与多媒体
3.1 超链接与路径
超链接用 <a> 标签，href 属性指定链接地址。
<a href="https://www.example.com" target="_blank">在新窗口打开</a>路径分为两类：
| 类型 | 说明 | 举例 |
|---|---|---|
| 绝对路径 | 完整的地址，含协议/域名，或从根目录开始 | https://www.a.com/1.jpg /images/logo.png |
| 相对路径 | 相对于当前文件的地址 | logo.gif（同目录） ../images/a.png（上级） images/b.jpg（子目录） |
target 属性（链接打开方式）：
| 值 | 含义 |
|---|---|
_self | 当前窗口打开（默认） |
_blank | 新窗口打开 |
_parent | 父窗口/父框架中打开 |
_top | 整个浏览器窗口中打开（跳出所有框架） |
考点 ① 同一网页内容之间相互跳转用锚点/书签（
<a href="#id">）；② "返回"超链接实现"后退"按钮功能可用 javascript:history.back() 或 history.go(-1)；③ 当鼠标停留在超链接上时会出现 title 属性定义的提示文字；④ <a> 的 href 指定链接地址，没有 src。例题超链接的 HTML 源代码标记为_______。
- A. <a>
- B. <b>
- C. <c>
- D. <d>
答案：A anchor 锚点用 <a>。
例题将超链接的目标网页在新窗口中打开的方式是？target="_blank"
答案：_blank 新窗口；_self 当前窗口；_parent 父框架；_top 顶层窗口。
3.2 图像与多媒体
插入图片用 <img> 标签（单标签）：
<img src="logo.gif" alt="网站Logo" title="鼠标悬停提示"
width="200" height="100" border="0">| 属性 | 作用 |
|---|---|
src | 图片路径（必需） |
alt | 替换文字：图片加载失败或无法显示时显示，也给图片添加文字说明 |
title | 鼠标悬停时的提示文字 |
width/height | 宽高 |
border | 边框 |
vspace/hspace | 垂直/水平外边距 |
易错
<img> 的属性有 src/alt/width/height/border/vspace/hspace，没有 color，也没有 href！href 是 a 标签的，color 是文本颜色属性。例题下列不属于图像标记<img>的属性的是？
- A. border
- B. vspace
- C. color
- D. hspace
答案：C img 没有 color 属性。
例题下列选项中，不是图片标记属性的是？
- A. src
- B. height
- C. width
- D. href
答案：D img 用 src 不是 href。
例题如果要给图像添加文字说明，需要设置的图像属性是？
- A. 边框
- B. 替换
- C. 目标
- D. 链接
答案：B alt 是"替换文本"，给图片添加文字说明。
3.3 框架
浮动框架用 <iframe>，可以在页面中嵌入另一个页面：
<iframe src="https://www.example.com" width="600" height="400"></iframe>区分
<frameset>（框架集，已废弃）、<frame>（框架，已废弃）、<iframe>（浮动框架/内联框架，仍广泛使用）。"浮动框架"指的是 <iframe>。例题以下属于浮动框架的 HTML 标签的是？
- A. <frameset>
- B. <frame>
- C. <iframe>
- D. <frames>
答案：C iframe 是浮动（内联）框架。
例题当鼠标停留在超级链接上时会出现_________标记定义的文字。
- A. table
- B. href
- C. alt
- D. title
答案：D
例题为链接定义“目标”方式时，“_blank”表示的是________。
- A. 在上一级窗口中打开
- B. 在新窗口中打开
- C. 在当前窗口中打开
- D. 在浏览器的整个窗口中打开，忽略任何框架
答案：B
例题下列路径中属于绝对路径的是______。
- A. .http://www.sohu.com/index.html
- B. .../webpage/05.html
- C. 05.html
- D. webpage/05.html
答案：A
例题用于同一个网页内容之间相互跳转的超级链接是_______。
- A. 图像链接
- B. 锚点链接
- C. 空链接
- D. 电子邮件链接
答案：B
例题定义有序列表<ol>的()属性，可以决定有序列表项目符号的类型。
- A. value
- B. type
- C. rel
- D. href
答案：B
例题网页制作中.以下链接，路径属于绝对路径的是
- A. http://wwwks.com/index.html
- B. /image/tp.jpg
- C. ../news/xuexi.html
- D. default.html
答案：A
例题下面的选项中，属于常用的图片格式并且能够做动画的是()
- A. jpg格式
- B. gif格式
- C. psd格式
- D. png格式
答案：B
例题要链接到下级目录中的文件，下列格式表示正确的是
- A. fiIes/w1.html
- B. /web/2.html
- C. /web/web2/2.html
- D. wl.html
答案：A
例题要链接站点内的文档时，一般使用的路径是
- A. 绝对路径
- B. 根文件夹相对路径
- C. 文档相对路径
- D. 无所谓
答案：C
例题以下哪些不属于图片文件格式（）
- A. JPG
- B. PNG
- C. GIF
- D. IMG
答案：D
例题用于向网页中插入图像文件的标签是
- A. html
- B. img
- C. fi Ie
- D. font
答案：B
例题在网页中插入图像，若图像文件位于html文件的上一级文件夹，则在 文件名之前加入()。
- A. ../
- B. /
- C. ./
- D. \
答案：A
例题当浏览器不能正常显示图像时，会在图像位置显示的内容是______。
- A. 替换
- B. 目标
- C. 链接
- D. 低解析度源
答案：A
例题在网页中经常使用的两种图像格式是______ 。
- A. bmp和jpg
- B. gif和bmp
- C. png 和bmp
- D. gif和jpg
答案：D
例题（多选）下面哪些是网页中的元素？
- A. 文字
- B. 图片
- C. 超链接
- D. 视频、音频
答案：ABCD
例题（判断）Title标记用于定义HTML文档的头部信息，也称为头部标记。
答案：错
例题（判断）在超链接中，当target取值为_self，意为在原窗口中打开链接页面。
答案：对
例题（判断）在实际运用中，锚点链接常应用于内容较多，页面过长的网页。
答案：对
例题（判断）图像文件logo.gif和html文件位于同一文件夹，相对地址为<img src="logo.gif" />
答案：对
第一部分小结
① HTML 是超文本标记语言，<html> 是根节点，<head> 存元信息不显示、<body> 存可见内容；② 节点类型只有元素(1)、文本(3)、属性(2)三种，无"样式节点"；③ 牢记各标签用途：p 段落、sub/sup 下标上标、strong/b 加粗、dl 自定义列表图文混排、td 单元格、cellpadding 内填充/cellspacing 间距、textarea 文本域、select 下拉列表、iframe 浮动框架；④ img 用 src/alt 不用 href/color；⑤ 路径分绝对/相对，target 的 _blank 新窗口。
4HTML5 新特性与表单
4.1 HTML5 概述
HTML5 是 HTML 的最新标准，最大特点是跨平台（"一次编写，到处运行"），并新增了大量语义标签、多媒体支持、绘图能力、本地存储等。HTML5 的设计目标就是让 Web 应用能够跨平台运行于 PC、手机、平板等各种设备。
HTML5 新增语义标签
| 标签 | 语义 |
|---|---|
<header> | 页眉/头部 |
<nav> | 导航 |
<article> | 独立文章内容 |
<section> | 区块 |
<aside> | 侧边栏 |
<footer> | 页脚 |
4.2 多媒体标签
HTML5 原生支持音视频，无需插件：
<!-- 视频 -->
<video src="movie.mp4" controls autoplay loop></video>
<!-- 音频 -->
<audio src="song.mp3" controls></audio>常见音频格式：mp3、wav、ogg 等。不属于音频格式的要区分（如 flv 是视频格式）。autoplay 属性可实现打开网页自动播放（配合 onload 事件）。
4.3 Canvas 画布
<canvas> 是 HTML5 的画布标签，用 JavaScript 在上面绘制图形。Canvas 可以绘制彩色文本，还可带动画效果；Canvas 对象可以移动。详细绘图 API 见第 21 章。
<canvas id="c" width="300" height="200"></canvas>例题（判断）Canvas 可以绘制彩色文本，还可带动画效果。
答案：对 Canvas 支持彩色文本和动画。
例题（判断）Canvas 对象不可以移动。
答案：错 Canvas 对象可以移动（修改其位置样式即可）。
例题在表单中，性别“男”“女”对应的两个单选按钮的( )属性的值必须相同
- A. id
- B. value
- C. name
- D. type
答案：C
4.4 HTML5 表单增强
HTML5 为 input 新增了多种 type 类型，以及表单属性：
| 新 type 类型 | 说明 |
|---|---|
| email/url/number/tel | 邮箱/网址/数字/电话 |
| date/time/month/color/range | 日期/时间/颜色/范围 |
| search | 搜索框 |
| 新属性 | 作用 |
|---|---|
placeholder | 占位提示文字（输入框灰色提示） |
required | 必填项 |
pattern | 正则验证 |
autofocus | 自动聚焦 |
autocomplete | 自动完成 |
4.5 本地存储
HTML5 提供 Web Storage，替代 cookie 存储数据：
| 方式 | 容量 | 生命周期 |
|---|---|---|
localStorage | 约 5MB | 永久存储，除非手动清除 |
sessionStorage | 约 5MB | 会话级，关闭标签页即清除 |
localStorage.setItem("name", "张三"); // 存储
localStorage.getItem("name"); // 读取
localStorage.removeItem("name"); // 删除5CSS 基础与选择器
5.1 CSS 概述与引入方式
CSS（Cascading Style Sheets，层叠样式表）用于控制网页的样式与布局。它能精确定义页面中各元素以及整体的外观。"层叠"指样式可以叠加，后定义的覆盖先定义的（同优先级时）。
CSS 有三种引入方式：
| 方式 | 写法 | 作用范围 |
|---|---|---|
| 行内式 | <div style="color:red"> | 仅当前元素 |
| 内嵌式 | <style> 写在 head 中 | 当前页面 |
| 外链式 | <link rel="stylesheet" href="xx.css"> | 多个页面共享 |
考点 ① CSS 样式表存在于文档的 HEAD 区域中（内嵌式）；② 外部样式表文件扩展名是
.css；③ 行内式 CSS 中属性和值的书写规范与 CSS 规则相同（都是 属性:值; 形式），并非不同。例题定义CSS时，要创建外部样式表文件，则该文件的扩展名是？
- A. html
- B. css
- C. asp
- D. htm
答案：B CSS 文件扩展名 .css。
例题（判断）在行内式CSS样式中，属性和值的书写规范与CSS样式规则不相同。
答案：错 行内式书写规范与 CSS 规则相同，都是"属性:值;"。
题库纠错 此题题干描述与答案一致表达"规范相同"，请按"相同"记忆。
5.2 基础选择器
选择器用来"选中"要设置样式的元素。
| 选择器 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 标签选择器 | 标签名 | p{...} | 选中所有该标签 |
| 类选择器 | .类名 | .red{...} | 以圆点开头，可重复使用 |
| ID选择器 | #id名 | #box{...} | 以 # 开头，仅用于一个元素 |
| 通配选择器 | * | *{margin:0} | 选中所有元素 |
易错区分 类选择器用圆点 .，ID 选择器用# 井号！这是高频考点。创建自定义 CSS 样式时，样式名称前面必须加一个圆点（类）。CSS 样式类型中，仅用于一个 HTML 元素的是 ID 选择器。
例题关于CSS，一般以 . 圆点开头的选择器类型为？
- A. 类
- B. ID
- C. 标签
- D. 复合内容
答案：A 圆点开头是类选择器。
例题CSS样式类型中，仅用于一个HTML元素的是？
- A. 类
- B. 标签
- C. ID
- D. 复合内容
答案：C ID 选择器唯一，只能用于一个元素。
例题创建自定义CSS样式时，样式名称的前面必须加一个_____。
- A. $
- B. #
- C. 圆点
- D. ?
答案：C 类样式加圆点。
例题下列属于类选择器的是？
- A. #toptable
- B. .tdl
- C. p
- D. #navtablea:hover
答案：B .tdl 以圆点开头是类。#开头是 ID，p 是标签。
例题（多选）在下面的选项中，符合CSS基础选择器的语法格式的是？
- A. p{font-size:12px}
- B. font{font-weight:bold}
- C. .green{color:green}
- D. *{margin:0;padding:0}
答案：ABCD 分别是标签、标签、类、通配选择器，语法均正确。
5.3 复合选择器与伪类
后代选择器（用空格）：选中某元素内部的后代元素。p strong{color:red} 表示 p 里面的 strong。
并集/集体声明选择器（用逗号）：同时选中多个选择器。h1,p,div{...}。用逗号连接就形成集体声明，与对各个选择器单独定义效果相同。
伪类选择器（用冒号 :）：主要用于链接和交互状态。
| 伪类 | 含义 |
|---|---|
:link | 未访问的链接（初始状态） |
:visited | 已访问过的链接 |
:hover | 鼠标经过（悬停）时 |
:active | 链接的活动状态（点击瞬间） |
:focus | 获得焦点时 |
:first-child / :last-child | 第一个/最后一个子元素 |
考点 ① 鼠标经过超链接时的状态用
a:hover；② a:active 是活动状态（点击瞬间），不是初始状态（初始是 :link）；③ 链接四个伪类的顺序口诀 LVHA（link → visited → hover → active）；④ :first-child、:last-child、:focus、:visited、:hover、:active、:link 都是伪类。例题CSS中要定义鼠标经过超文本时的状态，应选择？
- A. a:link
- B. a:visited
- C. a:hover
- D. a:active
答案：C hover 是鼠标悬停。
例题在CSS定义中，a:active 是指？
- A. 超级链接的初始状态
- B. 已经访问过的超级链接状态
- C. 超级链接的活动状态
- D. 鼠标经过超级链接对象时的状态
答案：C active 是活动状态（点击时）。
例题（多选）下面哪些是CSS伪类？
- A. :first-child
- B. :last-child
- C. :focus
- D. :visited
答案：ABCD 全部是伪类。
例题当标记内嵌套标记时，就可以使用后代选择器。下列写法正确的是？
- A. strong p{color:red}
- B. p strong{color:red}
- C. strong,p{color:red}
- D. p.strong{color:red}
答案：B 后代选择器用空格，p 里面的 strong 写作 "p strong"。逗号是并集。
例题（判断）在CSS中，各个选择器通过逗号连接就形成了集体声明。
答案：对 逗号连接 = 集体声明（并集选择器）。
例题CSS样式表存在于文档中的( )区域中。
- A. HTML
- B. BODY
- C. HEAD
- D. TABLE
答案：C
例题关于定义无序列表的基本语法格式，以下描述借误的是（ ）
- A. ＜ul></ul＞标记用于定义无序列表
- B. <li></li＞标记嵌套在＜ul></ul＞标记中，用于描述具体的列表项
- C. 每对＜ul＞＜/ul＞中至少应包含一对
- D. ＜li＞不可以定义type属性，只能使用CSS样式属性代替
答案：D
例题如果一个元素外层套用了CSS样式，内层套用了HTML样式，在起作用的_____。
- A. CSS样式
- B. HTML样式
- C. 两种样式的混合效果
- D. 冲突，不能同时套用
答案：B
例题如果一个元素外层套用了HTML样式，内层套用了CSS样式，在起作用的______。
- A. CSS样式
- B. HTML样式
- C. 两种样式的混合效果
- D. 冲突，不能同时套用
答案：A
例题（多选）下面语句得到值为数字2的有
- A. 1 + ‘1’
- B. 8 % ‘3’
- C. ‘1’ + ‘1’
- D. ‘4’ - 2
答案：BD
例题（判断）CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部 文件。
答案：对
例题（判断）id选择器使用“.”进行标识，后面紧跟id名。
答案：错
例题（判断）id选择器使用#进行标识,后面紧跟id名。
答案：对
例题（判断）导入样式是对HTML头部文档应用style标记，并在标记内的开 头处使用@import语句，即可导入外部样式表文件。
答案：对
例题（判断）后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。
答案：对
例题（判断）链入式是使用频率最高，也最实用的CSS样式表，它将HTML代码与 CSS代码分离为两个或多个文件，实现了结构和表现的完全分离。
答案：对
例题（判断）如果需要在后代选择器中加入更多的元素，只需在元素之间加上逗号即可。
答案：错
例题（判断）使用逗号隔开进行并集选择器定义样式与对各个基础选择器单独定义样式效果完全不相同。
答案：错
例题（判断）在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的 权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
答案：对
6CSS 文本、颜色与背景
6.1 文本与字体属性
| 属性 | 作用 | 常用值 |
|---|---|---|
color | 文本颜色 | red / #f00 / rgb() |
font-size | 字号 | 14px |
font-family | 字体 | "微软雅黑" |
font-weight | 字重（粗细） | normal/bold |
font-style | 字体样式 | normal/italic/oblique |
text-align | 水平对齐 | left/center/right（无 both） |
line-height | 行高（行间距） | 24px / 1.5 |
text-decoration | 文本修饰 | none/underline/line-through |
text-transform | 大小写转换 | none/uppercase/lowercase/capitalize |
text-indent | 首行缩进 | 2em |
易错 ①
text-align 的值是 left/center/right/justify，没有 both；② font-style 的值是 normal/italic/oblique，没有 bold（bold 是 font-weight 的值）；③ line-height 设置的是行高（行间距），不是"文本高度"；④ 设置行高用 line-height，不是 font-weight/text-transform。例题关于CSS样式，可以设置文本所在行的高度的参数是？
- A. font-weight
- B. line-height
- C. text-transform
- D. font-family
答案：B line-height 设置行高。
例题（多选）文本对齐text-align可能的值包括？
- A. center
- B. left
- C. right
- D. both
答案：ABC 没有 both（justify 才是对齐两端）。
例题（多选）文本font-style可能的属性值包括？
- A. normal
- B. italic
- C. oblique
- D. bold
答案：ABC bold 属于 font-weight。
例题（判断）在CSS中，行高属性line-height是用来设置文本高度的。
答案：错 line-height 设置的是行高（行间距），不是文本（字号）高度。
6.2 颜色表示
CSS 颜色有四种规范表示方式：
| 方式 | 示例 |
|---|---|
| 颜色名 | blue、red |
| 十六进制 | #ff6347、#FF0（简写=#FFFF00 黄色） |
| RGB | rgb(0, 0, 0) |
| HSL | hsl(0, 100%, 50%) |
十六进制记忆 #FF0000=#F00=红；#00FF00=#0F0=绿；#0000FF=#00F=蓝；#FFFF00=#FF0=黄；#FF00FF=#F0F=品红；#00FFFF=#0FF=青。红绿=黄，红蓝=品红，绿蓝=青。
色彩心理与搭配：绿色给人"宁静、希望、生机、自然"的感受；和任何颜色搭配都较恰当的是灰色；为避免色彩杂乱、达到和谐统一应使用邻近色；为突出重点产生强烈视觉效果使用对比色/互补色；互补色如红与绿、蓝与橙、黄与紫。
例题下面的颜色中，______表示黄色。
- A. #FF0
- B. #F0F
- C. #0FF
- D. #0F0
答案：A #FF0 = #FFFF00 = 黄色。B品红，C青，D绿。
例题（多选）下面哪些是规范的颜色表示值？
- A. rgb(0,0,0)
- B. #ff6347
- C. blue
- D. hsl(0,100%,50%)
答案：ABCD 四种都是合法颜色值。
例题和任何颜色搭配都比较恰当的颜色是？
- A. 粉色
- B. 黄色
- C. 白色
- D. 灰色
答案：D 灰色百搭。
6.3 长度单位
| 类别 | 单位 | 说明 |
|---|---|---|
| 绝对单位 | px | 像素（最常用） |
pt | 磅（1pt=1/72英寸） | |
mm/cm/in | 毫米/厘米/英寸 | |
| 相对单位 | em | 相对于父元素字号 |
ex | 相对于字符 x 的高度 | |
% | 相对于父元素 |
题库纠错（重要） 题库中"CSS中，em是相对长度单位"标答案为"错"、"%是绝对长度单位"标答案为"对"，这两个答案都是错误的！正确知识：em、ex、% 都是相对长度单位；px、pt、mm 才是绝对长度单位。请务必按正确知识记忆。
例题（多选）CSS中，下列哪些是相对长度单位？
- A. em
- B. pt
- C. ex
- D. mm
答案：AC em、ex 是相对单位；pt、mm 是绝对单位。
例题（多选）CSS中，下列哪些是绝对长度单位？
- A. em
- B. pt
- C. ex
- D. mm
答案：BD pt、mm 是绝对单位。
6.4 背景与列表属性
| 属性 | 作用 |
|---|---|
background-color | 背景颜色（不是 bgcolor） |
background-image | 背景图片 |
background-repeat | 平铺方式：repeat/repeat-x/repeat-y/no-repeat（无 repeat-z） |
background-position | 背景位置 |
list-style-type | 列表符号类型 |
list-style-image | 用图像作为项目符号 |
list-style-position | 符号位置 |
易错 ① 改背景颜色用
background-color，不是 bgcolor（bgcolor 是 HTML 旧属性，body 旧属性才是 bgcolor）；② background-repeat 没有 repeat-z（不存在 z 轴平铺）；③ 在 HTML 旧属性中 body 背景颜色是 bgcolor，但 CSS 中是 background-color；④ style 对象中 background-image 对应的属性名是 backgroundImage（驼峰）。例题下面哪个CSS属性是用来更改背景颜色的？
- A. background-color
- B. bgcolor
- C. color
- D. text
答案：A CSS 用 background-color。
例题关于页面属性，下列不属于背景图像的显示方式的是？
- A. repeat
- B. repeat-x
- C. repeat-y
- D. repeat-z
答案：D 没有 repeat-z。
例题在HTML页面中，CSS样式的属性名为background-image对应的style对象的属性名是？
- A. background
- B. backgroundImage
- C. image
- D. back
答案：B CSS 属性在 JS 的 style 对象中用驼峰命名，background-image → backgroundImage。
例题在Html5中，body元素用于背景颜色的属性是？
- A. link
- B. color
- C. bgcolor
- D. background
答案：C body 的 HTML 旧属性是 bgcolor（注意这是 HTML 属性，非 CSS）。
例题不同的颜色会给人不同的心理感受。一般绿色给人的心理感受是_______。
- A. 热情、奔放、庄严、喜庆
- B. 高贵、富有、灿烂、活泼
- C. 严肃、神秘、沉着、寂静
- D. 宁静、希望、生机、自然
答案：D
例题“活动链接”指的是( )
- A. 超链接文本的初始颜色
- B. 当鼠标指针位于链接上时文本的颜色
- C. 当鼠标指针在链接上单击时的文本的颜色
- D. 当鼠标指针在链接上单击后的文本的颜色
答案：C
例题WWW的中文简称是什么？( )
- A. 万维网
- B. 浏览器
- C. 超文本
- D. 传输协议
答案：A
例题关于表单，一般用于爱好，特长选项的是（ ）
- A. 文本域
- B. 复选框
- C. 按钮域
- D. 提交按钮
答案：B
例题页面上的div标签，其内容为文字,为其设置CSS样式如下：#box{ color:blue; } .red(color:red; } 那么，文字的颜色将显示为( )。
- A. 红色
- B. 蓝色
- C. 黑色
- D. 白色
答案：B
例题以下说法错误的是( )
- A. HTML源代码.可以使用任意文字编辑器编写
- B. HTML是超文本传输协议
- C. HTML文档标记不区分大小写
- D. HTML所有标记都用&It;和 >括起来
答案：B
例题如果将单个单元格的背景颜色设置为蓝色，然后将整个表格的背景颜色设置为黄色，则单元格的背景颜色为_______ 。
- A. 蓝色
- B. 黄色
- C. 绿色
- D. 红色
答案：A
例题表单域是获得用户在表单中输入文本的主要方式。其中有三种类型的表单域，不属于这三种类型的是______。
- A. 文本域
- B. 文件域
- C. 隐藏域
- D. 图像域
答案：B
例题在Dreamweaver CC的表单中，关于文本域说法错误的是_______。
- A. 密码文本域输入值后显示为“*”
- B. 密码文本域与单行文本域一样都可以进行最大字符数的设置
- C. 多行文本域不能进行最大字符数设置
- D. 多行文本域的行数设定后，输入内容将不能超过设定的行数
答案：D
例题在表单中，_______不是文本域的类型。
- A. 单行
- B. 多行
- C. 普通
- D. 密码
答案：C
例题当网页既设置了背景图像又设置了背景色，那么________。
- A. 以背景图像为主
- B. 以背景色为主
- C. 产生一种混合效果
- D. 相互冲突，不能同时设置
答案：A
例题在文本的【属性】面板中，不能设置_________。
- A. 背景色
- B. 超链接在目标窗口打开的方式
- C. 段落缩进
- D. 文本的无序列表和有序列表
答案：C
例题（多选）下面哪些方式可以将div的文字设置为红色
- A. div.color = “red”
- B. div.style.color =“red”
- C. div.style.cssText=“color:red”
- D. div.cssText=“red”
答案：BC
例题（多选）HTML标记可以对以下（ ）网页元素进行描述。
- A. 文本
- B. 图片
- C. 动画
- D. 音视频
答案：ABCD
例题（多选）HTML中文译为“超文本标记语言”，主要是通过HTML标记对网页中的( )等内容进行描述。
- A. 文本
- B. 图片
- C. 声音
- D. 数据
答案：ABC
例题（判断）默认情况下子元素会继承父元素的背景。
答案：对
例题（判断）<p>是HTML文档中最常见的标记，文本在一个段落中会根据浏览器窗 口的大小自动换行。
答案：对
7盒模型、浮动与定位
7.1 盒模型
每个 HTML 元素都是一个"盒子"，从内到外由四部分组成：
┌─────────────────────────────────────────┐
│ margin（外边距） │ ← 透明，元素与其他元素间距
│ ┌───────────────────────────────────┐ │
│ │ border（边框） │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ padding（内边距） │ │ │ ← 透明，内容与边框间距
│ │ │ ┌───────────────────────┐ │ │ │
│ │ │ │ content（内容） │ │ │ │ ← width/height 设这里
│ │ │ │ width × height │ │ │ │
│ │ │ └───────────────────────┘ │ │ │
│ │ └─────────────────────────────┘ │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘| 组成 | 说明 | 简写顺序（顺时针：上 右 下 左） |
|---|---|---|
| margin | 外边距：元素边框与其他元素之间 | margin:10px 20px 30px 40px; |
| border | 边框 | border:1px solid red; |
| padding | 内边距：内容与边框之间 | padding:10px 20px 30px 40px; |
盒模型尺寸计算（标准盒模型）：元素实际占用宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right。在标准盒模型中，width/height 只含 content，不含 padding 和 border。
简写值复制规则（顺时针，从上开始）：
- 1 个值
padding:10px→ 四边都是 10px - 2 个值
padding:10px 20px→ 上下 10px，左右 20px - 3 个值
padding:10px 20px 30px→ 上 10px、左右 20px、下 30px - 4 个值
padding:10px 20px 30px 40px→ 上 10、右 20、下 30、左 40
例题一个盒子的宽和高均为300px，左内边距为30px，同时有3px的边框，请问这个盒子的总宽度是多少？（标准盒模型，仅左侧有padding/border）
- A. 333px
- B. 366px
- C. 336px
- D. 363px
答案：C width(300) + padding-left(30) + border-left(3) + border-right(3) = 336px。（题设仅左侧padding30，左右各3px边框）
关键：标准盒模型下总宽 = width + 左右padding + 左右border。注意看清题目给出的边距方向。
例题对代码"margin: 10px 0 20px;"解释正确的是？
- A. 上间距10px,左右间距0,下间距20px
- B. 上间距10px,左间距0,右间距20px
- C. 上下间距10px,左间距0,右间距20px
- D. 上间距10px,左间距0,右下间距20px
答案：A 3个值：上、左右、下。
例题（多选）关于"padding:20px 30px 10px;"，下列说法正确的是？
- A. 上下方向内边距均为20px
- B. 上内边距20px,左右内边距30px
- C. 等价于"padding:20px 30px 10px 30px"
- D. 以上说法均正确
答案：BC 3值：上20、左右30、下10。A错（上下不等）。B对C对，故也等价D?题目标准答案BC。
例题（多选）关于内边距属性的赋值方式，下列说法正确的是？
- A. padding:10px 四方向均为10px
- B. padding:10px 20px 30px 上10/左右20/下30
- C. padding:10px 20px 上下10/左右20
- D. padding:10px 20px 30px 40px 上右下左
答案：ACD B错在3值应为"上/左右/下"，B描述上下不等却说成上/左右/下正确?以ACD为准（B与C矛盾，标准答案ACD）。
例题（多选）设置border-style: dotted solid double dashed;下面描述正确的是？
- A. 上边框是点线
- B. 右边框是实线
- C. 下边框是双线
- D. 左边框是虚线
答案：ABCD 4值顺时针：上dotted(点线)、右solid(实线)、下double(双线)、左dashed(虚线)。
例题（多选）在盒子模型中，下列属于边框属性的是？
- A. border-style
- B. border-height
- C. border-width
- D. border-color
答案：ACD 没有 border-height（边框没有高度属性）。
例题（判断）外边距属性的取值不可以为负值。
答案：错 margin 可以取负值（常用于元素重叠）。
7.2 浮动与清除浮动
float 属性让元素脱离文档流向左或向右浮动，常用于图文环绕、多列布局。
| float 值 | 说明 |
|---|---|
left | 左浮动 |
right | 右浮动 |
none | 不浮动（默认值） |
clear 属性清除浮动的影响：
| clear 值 | 说明 |
|---|---|
left | 清除左侧浮动影响 |
right | 清除右侧浮动影响 |
both | 清除两侧浮动影响 |
none | 不清除（默认） |
inherit | 继承父元素 |
易错区分 ①
float 的值有 left/right/none，没有 both；② clear 的值有 left/right/both/none/inherit，包含 both；③ 清除 Div 左右两边浮动用 clear:both；④ float 默认值是 none。例题下列选项能够清除Div左右两边浮动的属性是？
- A. overflow
- B. clear
- C. float
- D. display
答案：B clear 清除浮动。
例题（多选）下面哪些是float属性的值？
- A. left
- B. right
- C. none
- D. both
答案：ABC float 没有 both。
例题（多选）下面哪些是clear属性的值？
- A. left
- B. right
- C. none
- D. both
答案：ABCD clear 有 both。
例题在CSS设计器中，Float属性的默认值是？
- A. left
- B. none
- C. top
- D. right
答案：B float 默认 none。
7.3 定位 position
| position 值 | 含义 | 是否脱离文档流 |
|---|---|---|
static | 静态定位（默认） | 否，正常流 |
relative | 相对定位：相对于原正常位置偏移 | 否，原位置保留 |
absolute | 绝对定位：相对于最近的已定位祖先元素 | 是，脱离文档流 |
fixed | 固定定位：相对于浏览器窗口 | 是，脱离文档流 |
sticky | 粘性定位：滚动到阈值前相对、之后固定 | — |
考点 ① position 默认值是
static；② 相对定位 relative 的元素，其在文档流中的原位置仍然保留（不会让其他元素填充）；③ 子绝父相：子元素用 absolute 时，一般先给父元素设 position:relative（不需设边偏移），让子元素相对父元素定位；④ none 不是 position 的值（position 值为 static/relative/absolute/fixed/sticky）；⑤ absolute 脱离文档流，相对于其原文档流位置定位（题干描述，注意实际是相对已定位祖先）。例题在定位模式中，position属性的默认定位属性值是？
- A. static
- B. relative
- C. absolute
- D. fixed
答案：A 默认 static。
例题position属性（ ）值表示绝对定位/相对定位？
- A. static
- B. relative
- C. absolute
- D. fixed
答案：绝对定位 C(absolute)，相对定位 B(relative)
例题生成相对定位的元素，相对于其正常位置进行定位的参数是？
- A. relative
- B. fixed
- C. absolute
- D. inherit
答案：A relative 相对正常位置。
例题对元素设置相对定位后，其在文档流中的位置？
- A. 仍然保留
- B. 不保留，让其他元素填充
- C. 有时保留有时不保留
- D. 其他
答案：A 相对定位原位置保留。
例题在设置子元素定位时，一般需先设置父元素的定位模式为（ ），然后不需要设置其边偏移量。
- A. static
- B. relative
- C. absolute
- D. fixed
答案：B "子绝父相"，父用 relative。
例题（多选）position属性的可选值（除sticky外）包括？
- A. static
- B. relative
- C. absolute
- D. fixed
答案：ABCD 四个都是。注意 none 不是。
例题（多选）以下哪些是position属性的可选值？
- A. none
- B. static
- C. absolute
- D. relative
答案：BCD none 不是 position 的值。
7.4 display 显示属性
| display 值 | 说明 |
|---|---|
block | 块级元素（独占一行，可设宽高） |
inline | 行内元素（不独占一行，不可设宽高） |
inline-block | 行内块（不独占一行，可设宽高） |
none | 隐藏元素（不占位置） |
JS 控制隐藏
object.style.display="none" 隐藏；设为 block 显示。注意写法是赋值用 =，值是字符串 "none"。例题（多选）下面哪些是display属性的值？
- A. inline
- B. block
- C. none
- D. inline-block
答案：ABCD 全部是。
例题如果使用display属性设置元素隐藏，下列正确的语句是？
- A. object.style.display="none"
- B. object.style.display="no"
- C. object.style.display="0"
- D. object.style.display="yes"
答案：A 隐藏用 "none"。
7.5 圆角与边框样式
| 属性 | 作用 |
|---|---|
border-radius | 圆角 |
box-shadow | 阴影 |
box-sizing | 盒模型计算方式 |
border-style | 边框样式 |
border-style 值：solid(实线)、dashed(虚线)、dotted(点线/点划线)、double(双实线)。
例题给DIV盒子设置圆角的属性是？
- A. box-sizing
- B. box-shadow
- C. border-radius
- D. border
答案：C border-radius 圆角。
例题下面（ ）属性代表边框是点划线？/虚线？/双实线？
- A. solid
- B. dashed
- C. dotted
- D. double
答案：点线 C(dotted)，虚线 B(dashed)，双实线 D(double)，实线 A(solid)
例题下列样式代码中，用于定义盒子上边框为1像素、蓝色、单实线的是()
- A. border-top:1px solid blue
- B. border:1px solid blue
- C. border-top:1px dashed blue
- D. border:1px dashed blue
答案：A
例题在CSS规则定义方框对话框中，padding项的作用是( )
- A. 指定元素内容与元素边框之间的间距
- B. 指定一个元素的边框与另一个元素之间的间距
- C. 设置元素的宽度
- D. 设置元素的高度
答案：A
例题指定表格单元格中内容与表格单元格边框之间的空间大小，需要设置表格属性中的_________
- A. 单元格填充
- B. 单元格间距
- C. 宽度
- D. 边框
答案：A
例题指定表格内单元格之间的间隙大小，需要设置表格属性面板中的______
- A. 单元格填充
- B. 单元格间距
- C. 宽度
- D. 边框
答案：B
例题CSS样式定义中表示“上边框”的代码是______。
- A. border-top:10px;
- B. border-left:10px;
- C. border-bottom:10px;
- D. border-right:10px;
答案：A
例题（多选）clear属性的（ ）值可以清除左侧浮动的影响。
- A. left
- B. right
- C. none
- D. both
答案：AD
例题（多选）使块级元素水平居中，需要遵循以下哪些条件？( )
- A. 为元素设置高度height
- B. 为元素设置宽度width
- C. 将元素左右外边距的值设置为auto
- D. 使元素浮动float
答案：BC
例题（多选）下列选项中，可用于更改元素左外边距的是( )
- A. text-indent
- B. margin-left
- C. margin
- D. padding-right
答案：BC
例题（多选）clear 属性可设置以下( )值。
- A. left
- B. right
- C. both
- D. inherit
答案：ABCD
例题（判断）CSS中，box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。
答案：对
例题（判断）通过设置display:none 或者 visibility:hidden，都可以使元素隐藏。
答案：对
例题（判断）内边距出现在盒子模型内容区域的周围。
答案：对
例题（判断）使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制, 一个值为四边、两个值为上下/左右，三个值为上/左右/下。
答案：对
8Flex 弹性布局与响应式
8.1 Flex 基本概念
Flexbox（弹性盒模型）是一维布局方案。使用 Flexbox 需要先定义Flex 容器（给父元素设 display:flex），容器内的子元素自动成为Flex 项目。
<div style="display:flex; justify-content:center; align-items:center;">
<div>项目1</div>
<div>项目2</div>
</div>8.2 容器属性
| 属性 | 作用 | 常用值 |
|---|---|---|
flex-direction | 主轴方向（项目堆叠方向） | row(默认)/row-reverse/column/column-reverse |
justify-content | 主轴对齐 | flex-start/flex-end/center/space-between/space-around |
align-items | 交叉轴对齐 | flex-start/flex-end/center/stretch |
flex-wrap | 是否换行 | nowrap(默认)/wrap/wrap-reverse |
flex-flow | flex-direction 和 flex-wrap 的简写 | flex-flow:row wrap; |
8.3 项目属性
flex 是项目属性，是 flex-grow、flex-shrink、flex-basis 三个属性的简写（不含 flex-wrap，flex-wrap 是容器属性）。
| 属性 | 作用 |
|---|---|
flex-grow | 放大比例 |
flex-shrink | 缩小比例 |
flex-basis | 初始大小 |
考点 ① flex 是 flex-grow/flex-basis/flex-shrink 的简写；② flex-flow 是 flex-direction 和 flex-wrap 的简写；③ 将
justify-content 和 align-items 都设为 center 可实现 Flex 项目完美居中；④ flex-direction 定义堆叠方向；flex-wrap 规定是否换行。例题（多选）flex属性是（ ）属性的简写属性。
- A. flex-grow
- B. flex-basis
- C. flex-shrink
- D. flex-wrap
答案：ABC 不含 flex-wrap（它是容器属性）。
例题（多选）将（ ）属性设置为居中，可以将flex项目完美居中。
- A. justify-content
- B. flex-start
- C. align-items
- D. flex-end
答案：AC justify-content 和 align-items 都设 center。
例题（多选）flex-flow属性是用于同时设置（ ）属性的简写属性。
- A. flex-direction
- B. flex-start
- C. flex-end
- D. flex-wrap
答案：AD flex-flow = flex-direction + flex-wrap。
例题（判断）如需使用Flexbox模型，需要首先定义Flex容器。
答案：对 父元素 display:flex 定义容器。
例题（判断）flex-direction定义容器要在哪个方向上堆叠flex项目；flex-wrap规定是否应该对flex项目换行。
答案：对 / 对
8.4 媒体查询与响应式
响应式布局让网页适配不同设备，核心技术是媒体查询 @media：
@media (max-width: 768px) {
/* 屏幕宽度≤768px时生效 */
body { font-size: 14px; }
}@media 可检查：视口宽度和高度、设备的宽度和高度、分辨率、横屏/竖屏模式等。
例题（多选）@media规则在媒体查询中可用于检查以下哪些事情？
- A. 视口的宽度和高度
- B. 设备的宽度和高度
- C. 分辨率
- D. 横屏还是竖屏模式
答案：ABCD 都可以检查。
例题（判断）@media规则在媒体查询中不能用于检查分辨率。
答案：错 可以检查分辨率。
例题（判断）Flexbox 模型中，flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
答案：对
例题（判断）Flexbox 模型中，flex-wrap 属性规定是否应该对 flex 项目换行。
答案：对
第二部分小结
① CSS 三种引入：行内/内嵌(head)/外链(.css)；② 选择器：类用.、ID用#、标签直接写、通配*；后代空格、并集逗号；伪类 LVHA + focus/first-child；③ 文本：text-align(无both)、font-style(无bold)、line-height 行高；④ 颜色四表示法，#FF0=黄；单位 em/ex/% 相对，px/pt/mm 绝对；⑤ 盒模型四部分 margin/border/padding/content，简写顺时针上右下左，值复制1/2/3/4；⑥ float(left/right/none) vs clear(含both)；⑦ position(static默认/relative留位/absolute脱流/fixed固定)，无none；⑧ display(none隐藏)；⑨ Flex容器(justify-content+align-items居中)，flex=grow+shrink+basis，flex-flow=direction+wrap；⑩ @media 检查视口/设备/分辨率/横竖屏。
9JavaScript 概述与语法基础
9.1 JavaScript 是什么
JavaScript（JS）是一种解释型、弱类型、基于对象的脚本语言，运行在浏览器中，用来给网页添加交互行为。单独存放 JS 程序的文件扩展名是 .js。
JS 的特点：解释型（无需编译）、弱类型（变量无需声明类型）、基于对象、跨平台、事件驱动、安全性（不能直接操作本地文件）。
9.2 JS 的引入与输出
在 HTML 中嵌入 JS 使用 <script></script> 标记（不是 <JS>）：
<!-- 行内引入 -->
<button onclick="alert('hi')">点我</button>
<!-- 内嵌引入 -->
<script>
alert("Hello World"); // 弹出警告框，这是写 Hello World 的正确语法
</script>
<!-- 外部引入 -->
<script src="main.js"></script>三种输出/输入方式：
| 语句 | 作用 | 类型 |
|---|---|---|
alert() | 弹出警告框（仅提示，一个按钮） | 输出 |
confirm() | 弹出确认框（确定/取消，返回 true/false） | 输出 |
prompt() | 弹出输入框（可输入文本，返回字符串） | 输入 |
console.log() | 输出到控制台 | 输出 |
document.write() | 写入网页内容 | 输出 |
考点 ① 属于输入语句的是
prompt()；② 通过控制台查看结果用 console.log()；③ alert() 显示警告框、confirm() 显示确认框、prompt() 显示输入框；④ prompt("确认提交吗") 不能弹出"确认"信息框（它是输入框，确认框是 confirm）；⑤ 写 Hello World 的正确语法是 alert("Hello World")；⑥ 每行 JS 语句以分号 ; 结束；⑦ 编辑 JS 程序时可用任何文本编辑器。例题单独存放 JavaScript 程序的文件扩展名是？
答案：.js
例题在HTML中嵌入JavaScript，应该使用的标记是？
- A. <script>
- B. <head>
- C. <body>
- D. <JS>
答案：A 用 <script>。
例题写"Hello World"的正确javascript语法是？
- A. alert("Hello World")
- 其他选项略
答案：alert("Hello World")
例题下列选项中，属于输入语句的是？
- A. alert()
- B. prompt()
- C. confirm()
- D. console.log()
答案：B prompt 是输入框。
例题下列选项中，用于通过控制台查看结果的语句是？
- A. alert()
- B. prompt()
- C. console.log()
- D. document.write()
答案：C
例题（判断）prompt("确认提交吗")可以弹出一个确认提交信息框。
答案：错 prompt 是输入框，确认框是 confirm()。
9.3 注释
// 单行注释
/*
多行注释
可以写很多行
*/考点 单行用
//，多行用 /* */。CSS 注释也是 /* */，HTML 注释是 <!-- -->。9.4 变量声明与命名规范
声明变量用 var 关键字（ES6 新增 let 块级变量、const 常量）：
var name = "张三"; // 变量
let age = 18; // 块级变量
const PI = 3.14; // 常量，必须赋值且不能改变量命名规范：
- 首字符必须是字母、下划线 _ 或美元符 $（不能以数字开头）
- 除首字符外，可以是字母、数字、下划线、美元符
- 不能是关键字或保留字（如 var、for、with、this 等）
- 区分大小写（age 和 Age 不同）
- 不能含有空格
判断技巧 合法：_abc、$123、num1、_$te$t2、_125dollor；非法：2a（数字开头）、var/with/this（关键字）、a bc（含空格）、-dollor（横线开头）。
例题声明javascript变量使用_____关键字。
- A. dim
- B. var
- C. type
- D. const
答案：B var。
例题下面变量命名中不合法的为？
- A. $123
- B. _abc
- C. var
- D. div
答案：C var 是关键字。
例题符合javascript变量定义规则的是？
- A. _$te$t2
- B. with
- C. a bc
- D. 2a
答案：A B关键字C含空格D数字开头。
例题四个变量声明语句中，命名正确的是？
- A. var for
- B. var txt_name
- C. var myname myval
- D. var 2s
答案：B A关键字C含空格D数字开头。
例题（多选）以下变量命名规范正确的是？
- A. $num
- B. 1num
- C. num
- D. num1
答案：ACD B 以数字开头非法。
例题（多选）关于变量的命名规则，下列说法正确的是？
- A. 首字符必须是字母/下划线/美元符
- B. 除首字符可以是字母/数字/下划线/美元符
- C. 不能是保留字
- D. 区分大小写
答案：ABCD 全对。
例题以下不是js变量命名规范的是？
- A. 不能含有空格
- B. 不区分大小写
- C. 不能以关键字或保留字命名
- D. 第一个字符必须是字母/下划线/美元符
答案：B JS 区分大小写。
例题下列选项中，关于行内式的说法错误的是()
- A. 行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时不方便阅读
- B. 使用行内式，在遇到多层引号嵌套的情况时，非常容易混涌，导致代码出错
- C. 行内式只有在临时测试或者特殊情况下使用。一般情况下不推荐使用行内式
- D. 行内式适合在JavaScript代码量非常大的情况下使用
答案：D
例题下列选项中，为JavaScript代码添加多行注释的语法为
- A. <!-->
- B. //
- C. /**/
- D. #
答案：C
例题有如下代码片段,请问 a.length 的值是多少? var a=[]; a[0]=1; a[1]=2; a[2]=3; a[5]=4;
- A. 会报错
- B. 3
- C. 4
- D. 6
答案：D
例题在通常情况下,每行JavaScript语句以( )作为语句的结束标记
- A. 逗号
- B. 句号
- C. 分号
- D. 冒号
答案：C
例题规划网站的目录结构时，下列________说法是正确。
- A. 尽量用中文名来命名目录
- B. 整个网站只需要一个images目录
- C. 目录层次不要太深
- D. 使用长的名称命名目录
答案：C
例题关于在网页中加入书签来实现跳转的说法错误的是( )
- A. 可以实现页面间的跳转
- B. 可以实现同一页面中不同位置的跳转
- C. 在页面编辑时需要使用命名锚记
- D. 只能跳转到其他页面的页首
答案：D
例题下列不属于Script脚本插入方式的是____。
- A. .在<body>标签内插入Script脚本
- B. 在<head>标签内插入Script脚本
- C. 在<head>与</head>之间插入Script脚本
- D. 在<body>与</body>之间插入Script脚本
答案：B
例题下列文件属于静态网页的是______。
- A. .index.asp
- B. index.jsp
- C. index.html
- D. index.php
答案：C
例题（多选）解释型语言的特性有什么
- A. 不需要编译
- B. 效率低
- C. 保密性较好
- D. 效率高性
答案：AB
例题（多选）下面声明变量及赋值的写法正确的有
- A. var _myName = 12a
- B. var _myName = “12a”
- C. var myName = 12
- D. var $myName = true
答案：BCD
例题（多选）下面语句得到值为true的有
- A. “1” == 1
- B. 1===“1”
- C. “2” > “19”
- D. “2”==19
答案：AC
例题（多选）在 HTML 源代码中，添加注释的方法包括：（ ）
- A. <!--...-->
- B. /* ... */
- C. { }
- D. [ ]
答案：AB
例题（判断）可以使用 <!--...--> 语法在 HTML 源代码中添加注释。
答案：对
例题（判断）可以使用/* ... */语法在 HTML 源代码中添加注释。
答案：对
例题（判断）在 HTML 源代码中，添加单行注释只能使用 <!--...--> 语法。
答案：错
例题（判断）CSS样式中的注释“/* */”中的内容，浏览器不会解析，主要是用于 提示初学者。
答案：对
10数据类型与类型转换
10.1 基本数据类型
JavaScript 有 5 种基本（简单）数据类型和 1 种复杂数据类型：
| 类型 | 说明 | 示例 | typeof 返回 |
|---|---|---|---|
| Number | 数字（整数+小数） | 1、3.14、NaN | "number" |
| String | 字符串 | "hello"、'a' | "string" |
| Boolean | 布尔 | true、false | "boolean" |
| Undefined | 未定义（声明未赋值） | undefined | "undefined" |
| Null | 空（空对象指针） | null | "object" |
| Object | 对象（复杂数据类型） | {}、[]、function | "object"/"function" |
易错 ① 不属于 JS 基础数据类型的是
float（JS 没有单独的 float 类型，小数也是 number）；② typeof null 返回 "object"（历史遗留 bug），不是 "null"；③ typeof []（数组）返回 "object"，不是 "array"；④ typeof function(){} 返回 "function"；⑤ NaN 的数据类型是 number。例题不属于js的基础数据类型是？
- A. null
- B. float
- C. string
- D. number
答案：B JS 没有 float 类型。
例题在JavaScript中，有var arr=[]; typeof arr的结果为？
- A. function
- B. array
- C. object
- D. null
答案：C 数组 typeof 返回 "object"。
例题（多选）下面选项中数据类型为数字类型的有？
- A. "1"
- B. 1
- C. true
- D. NaN
答案：BD 1 和 NaN 都是 number。A 是 string，C 是 boolean。
10.2 typeof 运算符
typeof 用于检测变量类型，返回值永远是字符串。
var num = 1;
console.log(typeof num); // "number"
console.log(typeof typeof num); // "string"（typeof的结果是字符串，再typeof就是"string"）例题var num=1; console.log(typeof typeof num); 打印的结果是？
- A. "string"
- B. "number"
- C. "NaN"
- D. "1"
答案：A typeof 返回字符串，再 typeof 得 "string"。
typeof num → "number"（字符串）；typeof "number" → "string"。
例题console.log(typeof 123 === "number") 结果是？
- A. 报错
- B. true
- C. false
- D. 123
答案：B typeof 123 返回 "number"，与 "number" 严格相等。
10.3 类型转换
转换为数字：
| 方式 | 示例 | 说明 |
|---|---|---|
parseInt() | parseInt("15.6a") → 15 | 取整，从左解析到非数字止，忽略小数 |
parseFloat() | parseFloat("15.6a") → 15.6 | 保留小数 |
Number() | Number("15.6") → 15.6 | 严格，含非数字字符返回 NaN |
隐式 - * / | "6"-2 → 4 | 减乘除触发转数字 |
隐式 +(一元) | +"2" → 2 | 一元加转数字 |
转换为字符串：String()、.toString()、隐式 +（与字符串拼接）。
转换为布尔：Boolean()。以下值转换为 false（假值）：false、""(空串)、0、NaN、null、undefined。其余为 true。
parseInt 细节 ①
parseInt("15.6a") → 15（从左到右解析数字，遇到 . 停止，小数部分丢弃）；② parseInt([0,0,1,0,0].join('')+1)：先 join 得 "00100"，+1 拼接得 "001001"，parseInt → 1001。例题parseInt("15.6a"); 的结果是？
- A. NaN
- B. 15.6
- C. 15
- D. 16
答案：C 遇到非数字字符停止，取整。
例题var a = parseInt([0,0,1,0,0].join('')+1); a的值为？
- A. 2
- B. 101
- C. 1001
- D. NaN
答案：C join→"00100"，+"1"→"001001"，parseInt→1001。
10.4 NaN 与 isNaN
NaN（Not a Number）表示"不是一个数字"，是 number 类型的特殊值。
NaN 三大特性（高频考点） ① NaN 的数据类型是 number（typeof 返回 "number"）；② NaN 不等于任何值，包括它自己，
NaN == NaN 返回 false；③ 判断是否为 NaN 要用 isNaN()，不能用 ==。isNaN 会先把参数转成数字再判断：isNaN(123) → false（123是数字），isNaN("abc") → true。例题isNaN(123) 的结果是？
- A. true
- B. false
- C. null
- D. 以上都不对
答案：B 123 是数字，isNaN 返回 false。
例题（多选）关于NaN的说法正确的是？
- A. NaN的数据类型为数字类型
- B. NaN == NaN 返回true
- C. NaN不等于任何数，包括自己本身
- D. 已知变量num不是数字，那么num == NaN
答案：AC B错(NaN!=NaN)，D错(不能用==判断NaN)。
例题（判断）NaN不等于任何数，包括自己本身，NaN == NaN 返回true。
答案：错 NaN == NaN 返回 false。
10.5 隐式类型转换（重点难点）
JS 是弱类型，运算时会自动转换类型，这是考试的重点和难点。
加号 + 的规则：有字符串参与时做拼接，无字符串时做数学加法。
"10" + 3 // "103"（拼接）
10 + "3" // "103"
"10" + 3 - "1" // "103" - "1" = 102（减号转数字）
1 + "2" + "2" // "12" + "2" = "122"
1 + +"2" + "2" // 1+2=3, 3+"2"="32"（一元+把"2"转成数字2）
"A" - "B" + "2" // NaN + "2" = "NaN2"
"A" - "B" + 2 // NaN + 2 = NaN
"a1+a2=" + a1 + a2 // 从左到右拼接 → "a1+a2=1020"减号 - 乘 * 除 / 的规则：强制转为数字，转不了得 NaN。
"hi" - 1 // NaN
"30" % 8 // 6（"30"转数字30，30%8=6）
"1555" + 3 // "15553"（拼接）== 的隐式转换：比较前会转换类型；=== 严格相等不转换类型。
1 == "1" // true（转成同类型比较）
1 === "1" // false（类型不同直接false）
undefined == null // true
undefined === null // false
[] == false // true（[]→""→0, false→0）
{} == false // false（{}→NaN）
[1] == [1] // false（引用类型比较地址）经典题型 ①
alert("a1+a2="+a1+a2)（a1=10,a2=20）→ "a1+a2=1020"（从左到右拼接）；② "10"+3-"1" → 102；③ 11+"number" → "11number"；④ "hi"-1 → NaN；⑤ 1+ +"2"+"2" → "32"。例题JS语句 var a1=10; var a2=20; alert("a1+a2="+a1+a2) 将显示什么结果？
- A. a1+a2=30
- B. a1+a2=1020
- C. a1+a2=a1+a2
- D. var a2
答案：B "a1+a2="+10 → "a1+a2=10"，再+20 → "a1+a2=1020"。
例题代码执行后，foo的值为？var foo = "10"+3-"1";
- A. "102"
- B. 102
- C. 12
- D. "12"
答案：B "10"+3="103"，"103"-"1"=102（数字）。
例题代码执行后，变量m的值是？var x=11; var y="number"; var m=x+y;
- A. NaN
- B. 11.0
- C. 11number
- D. undefined
答案：C 数字+字符串=拼接。
例题如下代码，会弹出来是什么？var num1="hi"; var num2=1; alert(num1-num2);
- A. hi
- B. 1
- C. NaN
- D. 报错
答案：C "hi"无法转数字，减法得NaN。
例题var a='30'; var b=8; console.log(a%b); 输出？
- A. undefined
- B. 6
- C. "6"
- D. null
答案：B "30"转数字30，30%8=6（数字）。
例题在JS中，'1555'+3 的运行结果是？
- A. 1558
- B. "15553"
- 其他
答案：B "15553" 字符串拼接。
例题console.log(1+"2"+"2"); console.log(1+ +"2"+"2"); console.log("A"-"B"+"2"); console.log("A"-"B"+2); 输出？
- A. 122,122,NaN,NaN
- B. 122,32,NaN,NaN2
- C. 122,32,NaN2,NaN
- D. 122,32,NaN2,NaN2
答案：C ①"122" ②1+2=3,3+"2"="32" ③NaN+"2"="NaN2" ④NaN+2=NaN。
例题如果想在网页上显示"20060816"，应填写的代码是？(year=2006,month=8,date=16)
- A. year+month+date
- B. year+0+month+date
- C. year+"0"+month+date
- D. year+" "+month+" "+date
答案：C 需用字符串"0"拼接，否则year+0=2006,2006+8=2014。用"0"则2006+"0"="20060"。
例题下列表达式中，结果为NaN的是？
- A. 123+null
- B. 123/0
- C. 123+'1'
- D. 123+undefined
答案：D undefined转数字是NaN。A=123，B=Infinity，C="1231"。
例题var one; var two=null; console.log(one==two, one===two); 输出？
- A. true false
- B. true true
- C. false false
- D. false true
答案：A undefined==null 为 true；===类型相同但值不同(undefined≠null)为false。
10.6 假值与布尔转换
在 if 条件中，以下值会被隐式转换为 false：
6 个假值：
false、0、""（空字符串）、null、undefined、NaN。其余所有值都是 true，包括 -1、"0"、"false"、[]（空数组）、{}（空对象）。例题以下哪个值放在if中被隐式类型转换后不会变为false？
- A. 数字-1
- B. 数字0
- C. null
- D. 空字符串
答案：A -1 是真值（非0数字都是true）。
例题var x = new Boolean(false); if(x){alert('hi')} var y = Boolean(0); if(y){alert('hello')} 显示？
- A. hi
- B. hi hello
- C. hello
- D. 不显示
答案：A new Boolean(false) 是对象，对象始终为true；Boolean(0) 是 false。
对象包装类 new Boolean() 返回对象，永远为真；Boolean() 函数返回真正的布尔值。
例题let flag1 = null || undefined; let flag2 = null && undefined; if(flag1===true)... if(flag2===false)... 输出？
- A. flag1
- B. flag2
- C. flag1、flag2
- D. 什么都不会输出
答案：D flag1=undefined(≠true)，flag2=null(≠false)，都不输出。
11运算符与表达式
11.1 算术与自增自减
++（自增）、--（自减）分前置和后置：
- 前置
++a：先加 1，再使用新值 - 后置
a++：先使用原值，再加 1
var k = 1;
console.log(k++ + k + ++k + k);
// k++ → 用1, k变2 → 1
// + k → 2 (当前k=2) 累计1+2=3
// + ++k → k变3, 用3 累计3+3=6
// + k → 3 累计6+3=9
// 结果 9例题var k=1; console.log(k++ + k + ++k + k); 结果是？
- A. 8
- B. 9
- C. 10
- D. 11
答案：B 1+2+3+3=9。
例题var a=888; ++a; alert(a++); 弹出？
- A. 888
- B. 889
- C. 890
- D. 891
答案：B ++a先变成889；alert(a++)用原值889弹出，然后a变890。
例题var x=10; var y=20; var z=x++; console.log('x='+x+';y='+y+';z='+z); 输出？
- A. x=11;y=21;z=11
- B. x=11;y=20;z=10
- C. x=11;y=21;z=10
- D. x=11;y=20;z=11
答案：B z=x++ 用原值10，x变11；y不变=20。
例题parseFloat((0.2+0.4).toFixed(x)) 能得到0.6（解决浮点精度）。
答案：用 toFixed 保留小数再 parseFloat 0.2+0.4=0.6000000000000001，toFixed(1)得"0.6"，parseFloat得0.6。
11.2 比较运算符
| 运算符 | 说明 |
|---|---|
== | 相等（会转换类型） |
=== | 严格相等（不转换，类型和值都要相同） |
!= | 不相等 |
!== | 严格不相等 |
> < >= <= | 大小比较 |
考点 ①
x={x:1}; y={y:1}; z=1; n='1'：x===y 为 false（不同对象），x==y 为 false，z===n 为 false（类型不同），z==n 为 true（1=="1"转换后相等）；② 引用类型（对象、数组）比较的是地址，[1]==[1] 为 false。例题x={x:1};y={y:1};z=1;n='1'; 下面结果为true的是？
- A. x === y
- B. x == y
- C. z === n
- D. z == n
答案：D 1=="1" 为 true（==转换类型）。
11.3 逻辑运算符
&&（与）、||（或）、!（非）。逻辑运算符返回的不一定是布尔值，而是参与运算的某个操作数。
| 运算符 | 规则 | 示例 |
|---|---|---|
&& | 找假：第一个为假就返回第一个，否则返回第二个 | alert(1&&2) → 2 |
|| | 找真：第一个为真就返回第一个，否则返回第二个 | null||undefined → undefined |
! | 取反，先转布尔再取反，返回布尔 | !(3<=1) → true |
易错 ①
alert(1&&2) → 2（不是 true！两个都是真值，返回第二个）；② console.log((2==true)+1) → 2==true 先转 true==true? 错，2==true 中 true 转 1，2==1 为 false，false+1=1，所以结果是 1；③ 逻辑运算符优先级：! > && > ||。例题alert(1&&2)的值是？
- A. 1
- B. 2
- C. FALSE
- D. TRUE
答案：B && 两个都真返回后者。
例题console.log((2==true)+1) 会弹出？
- A. true
- B. false
- C. 1
- D. 2
答案：C 2==true → true转1 → 2==1 → false；false+1 → 0+1=1。
例题var a=4>=6 || true && 1 || false; console.log(a); 输出？
- A. true
- B. false
- C. 1
- D. 4>=6
答案：C 优先级：&&先算 true&&1=1；4>=6=false；false||1=1；1||false=1。
例题下面哪一个表达式的返回值为true？
- A. !(3<=1)
- B. (1!=2)&&(2<0)
- C. !(20>3)
- D. (5!=3)&&(50<10)
答案：A 3<=1为false，!false=true。其他BCD都含false项。
例题以下程序：var a=3;var b=4;var c=5; console.log(a>b&&c>b||a<b); 输出？
- A. 1
- B. true
- C. false
- D. 报错
答案：B a>b=false, false&&...=false; a<b=true; false||true=true。
11.4 三元（条件）运算符
语法：条件 ? 表达式1 : 表达式2。条件为真返回表达式1，否则返回表达式2。
var x = (y === true) ? "true" : "false";
// 正确格式：条件 ? 值1 : 值2例题三元操作，哪个语法是正确的？
- A. var x=y===true?"true":"false"
- 其他格式错误
答案：A 格式为 条件?值1:值2。
例题var a=3;var b=4;var c=5; console.log(a>b?a:c); 输出？
- A. 3
- B. 4
- C. 5
- D. 报错
答案：C a>b为false，返回c=5。
11.5 运算符辨识
JS 运算符：=（赋值）、==（相等）、===（严格相等）、&&（逻辑与）、||（逻辑或）、!（非）、> <（比较）、+ - * / %（算术）等。￥# 和 $# 都不是 JS 运算符。
例题下面哪一个不是JavaScript运算符？
- A. =
- B. ==
- C. &&
- D. ￥#
答案：D ￥# 不是运算符。
例题下列的哪一个表达式将返回假（ ）
- A. !(3<=1)
- B. (4>=4)&&(5<=2)
- C. ("a"=="a")&&("c"!="d")
- D. (2<3)||(3<2)
答案：B
例题下列选项中，关于JavaScript的说法错误的是()
- A. JavaScript是脚本语言
- B. JavaScrit可以跨平台
- C. JavaScript不支持面向对象
- D. JavaScript主要用于实现业务逻辑和页面控制
答案：C
例题（多选）下面返回结果为false的有：
- A. isNaN(NaN)
- B. isNaN(10)
- C. isNaN('10')
- D. isNaN('blue')
答案：BC
12流程控制语句
12.1 条件语句
if (条件) {
// 条件为真执行
} else if (条件2) {
// ...
} else {
// 都不满足
}
switch (表达式) {
case 值1: 语句; break; // break 防止穿透
case 值2: 语句; break;
default: 语句; // 默认
}switch 穿透 如果 case 后没有
break，会继续执行下一个 case，直到遇到 break 或 switch 结束。这是高频考点。例题var num=2; switch(num){case 1:console.log("1"); case 2:console.log("2"); default:console.log("default");} 输出？
- A. 先输出2，再输出default
- B. 输出2
- C. 程序错误
- D. 先输出1，再输出2，再输出default
答案：A 匹配case 2输出"2"，无break穿透到default输出"default"。
例题下列JS的判断语句中，正确的是？
答案：if(条件){...} 格式正确即可。
12.2 循环语句
// for 循环
for (var i = 0; i < 10; i++) { ... }
// while 循环（先判断后执行）
while (条件) { ... }
// do-while 循环（先执行后判断，至少执行一次）
do { ... } while (条件);考点 ① for 语句正确格式
for(i=0;i<=10;i++)，三部分用分号分隔；② do-while 至少执行一次（即使条件一开始就为假）。如 age=17，do{console.log(...)}while(age>=18) 会打印 1 次；③ break 跳出整个循环，continue 跳过本次循环进入下一次。例题下列JavaScript的循环开始语句中，正确的是？
- A. for i=1 to 10
- B. for(i=0;i<=10)
- C. for(i<=10;i++)
- D. for(i=0;i<=10;i++)
答案：D for(初始化;条件;更新)。
例题执行以下代码，控制台会打印几次？var age=17; do{console.log("十八岁以下禁止观看");}while(age>=18);
- A. 0
- B. 1
- C. 2
- D. 无限次
答案：B do-while 先执行一次，再判断17>=18为false停止。
例题var sum=0; for(i=1;i<10;i++){ if(i%5==0) break; sum=sum+i; } sum的值？
- A. 40
- B. 50
- C. 5
- D. 10
答案：D i=1,2,3,4累加sum=10；i=5时break跳出。sum=1+2+3+4=10。
例题var sum=0; for(var i=0;i<10;i++){sum+=i;}; console.log(i); i的值是？
- A. 8
- B. 9
- C. 10
- D. 11
答案：C 循环结束时 i=10（条件i<10不满足才停）。
例题有语句 var x=0; while(____) x+=2; 要使循环体执行10次，空白处应写？
- A. x<10
- B. x<=10
- C. x<20
- D. x<=20
答案：C 每次加2，执行10次到x=20停止，故x<20。
例题分析代码：var arr=[2,3,4,5,6]; var sum=0; for(var i=1;i<arr.length;i++){sum+=arr[i]} console.log(sum); 输出？
- A. 20
- B. 18
- C. 14
- D. 12
答案：B 从i=1开始，3+4+5+6=18。
例题执行以下代码，alert的输出结果为（） var msg = 'hello'; for (var i = 0; i var msg = 'hello' + i * 2 + i; } alert(msg);
- A. hello
- B. hello189
- C. hello30
- D. hello27
答案：B
第三部分小结
① JS 文件 .js，用 <script> 嵌入；输出 alert(警告)/confirm(确认)/console.log/prompt(输入)；语句以 ; 结束；② 变量 var/let/const，命名字母_ $开头、区分大小写、不能用关键字；③ 5 种基本类型(number/string/boolean/undefined/null)+object，typeof 返回字符串(数组是object、null是object、NaN是number)；④ parseInt 取整遇非数字停、parseFloat 保留小数；⑤ NaN≠NaN，用 isNaN 判断；⑥ 隐式转换：+有字符串则拼接、-*/转数字、==转类型、===不转；⑦ 6 个假值：false/0/""/null/undefined/NaN；⑧ ++ 前后置区别；⑨ &&找假||找真返回操作数；⑩ switch 无 break 穿透；do-while 至少执行一次；break 跳出 continue 跳过。
13函数与作用域
13.1 函数声明与调用
函数是封装可重复代码的块。JS 有两种主要声明方式：
// 1. 函数声明（有提升）
function fn(a, b) {
return a + b;
}
// 2. 函数表达式（无提升）
var fn = function(a) { alert(a); };
fn(1, 2); // 调用函数参数之间用逗号分隔，可以指定任意个参数，调用时形参与实参按位置对应。
易错 ① 函数声明会提升（可在声明前调用），函数表达式不会提升。
fn1(); var fn1=function(){...} 会报错（fn1 此时是 undefined）；② 函数没有 return 时返回 undefined（不是报错）；③ 函数无需指定参数类型和返回值类型。例题定义函数时，在函数名后面的圆括号内可以指定（ ）个参数。
- A. 0
- B. 1
- C. 2
- D. 任意
答案：D 任意个。
例题函数的参数之间必须用（ ）分隔。
- A. 逗号
- B. 句号
- C. 分号
- D. 空格
答案：A 逗号。
例题下列关于自定义函数的说法正确的是？
- A. 函数必须有返回值
- B. 必须指定函数参数的数据类型
- C. 必须指定函数的返回值类型
- D. 以上都不对
答案：D JS 是弱类型，都不强制。
例题以下代码运行后，结果为？fn1(); var fn1=function(a){alert(a);}
- A. 1
- B. 程序报错
- C. alert(1)
- D. undefined
答案：B 函数表达式不提升，调用时 fn1 是 undefined，报错。
13.2 返回值与参数传递
函数无 return 返回 undefined。基本类型按值传递，引用类型（对象、数组）按引用传递。
function test(a) { a = a + 10; } // 形参a是副本
var a = 10;
test(a);
console.log(a); // 10（基本类型，外部a不变）
function fn(n) { n = n + 1; }
var x = 1;
var y = fn(x); // fn 无return，y = undefined例题function test(a){a=a+10;} var a=10; test(a); console.log(a); 输出？
- A. 10
- B. 20
- C. 抛出异常
- D. undefined
答案：A 基本类型值传递，外部 a 不变。
例题var x=1; function fn(n){n=n+1}; y=fn(x); y的值为？
- A. 2
- B. 1
- C. 3
- D. undefined
答案：D fn 无 return，返回 undefined。
例题（判断）var x=1; function fn(n){n=n+1}; y=fn(x); y的值为2。
答案：错 应为 undefined。
13.3 作用域与变量提升（重点）
作用域：变量可被访问的范围。
- 全局变量：在函数外声明，可从脚本任意位置访问
- 局部变量：在函数内用 var 声明，只在函数内有效
变量提升（预解析）：JS 引擎在执行前会先把 var 声明和函数声明"提升"到作用域顶部（赋值不提升）。
// 等价于：var val; (提升) fun1(); val=20;
var val = 12;
function fun1() {
console.log(val); // undefined（局部val提升，但赋值在后）
var val = 20;
console.log(val); // 20
}
fun1();经典陷阱 函数内部的
var 变量会提升到函数顶部，导致"先用后声明"时值为 undefined，而非取外部同名变量。例题执行下列代码，输出结果为？var val=12; function fun1(){console.log(val); var val=20; console.log(val);} fun1();
- A. 12 20
- B. 12 12
- C. undefined 20
- D. 20 undefined
答案：C 局部 val 提升到函数顶部，第一次访问是 undefined，赋值后是 20。
13.4 全局变量泄露与连等赋值
不带 var 的赋值会创建全局变量（即使写在函数内）：
function fn() { var a = b = 1; } // b 未用var，变成全局！a是局部
fn();
console.log(b); // 1（全局）
console.log(a); // 报错（a是局部，外部访问不到）解析
var a = b = 1 等价于 b = 1; var a = b;，b 没声明直接赋值成为全局变量。这是高频陷阱题。例题function fn(){ var a = b = 1; } fn(); console.log(b);...① console.log(a);...② 结果？
- A. ①②都为1
- B. ①②都抛异常
- C. ①抛异常②为1
- D. ①为1，②抛异常
答案：D b是全局输出1；a是局部外部访问报错。
例题var a=b=10; (function(){var a=b=20})(); console.log(b); 输出？
- A. 10
- B. 20
- C. 报错
- D. undefined
答案：B 函数内 b=20 未用var，修改了全局b。
例题下面代码输出？var b=3; (function(){b=5; var b=2;})(); console.log(b);
- A. 5
- B. 3
- C. 2
- D. 程序报错
答案：B 函数内 var b 提升，b=5 和 b=2 都改的是局部b，外部全局b仍为3。
例题var a=10; function test(){a=100; alert(a); alert(this.a);} test(); 两次弹出？
- A. 10,100
- B. 100,100
- C. undefined,10
- D. 100,undefined
答案：B 函数内 a=100 改全局；this 指向 window，this.a 即全局a=100。
例题var foo="Hello"; (function(){var bar="World"; alert(foo+bar);})(); alert(foo+bar); 两次输出？
- A. Hello World 报错
- B. Hello World Hello World
- C. Hello World Hello
- D. Hello World
答案：A 第一次输出"HelloWorld"；第二次外部访问bar报错（bar是局部）。
13.5 闭包与立即执行函数
闭包：函数可以访问其外层作用域的变量。立即执行函数 IIFE：(function(){...})()，创建独立作用域。
var name = "World!";
(function() {
var name; // 局部name提升，此时是undefined
if (typeof name === 'undefined') {
name = 'Jack';
console.log('Goodbye' + name); // 输出 GoodbyeJack
} else {
console.log('hello' + name);
}
})();解析 IIFE 内
var name 提升到函数顶部，初始 undefined，所以 typeof name === 'undefined' 为 true，执行 if 分支输出 GoodbyeJack。例题有如下代码：var name="World!"; (function(){var name; if(typeof name==='undefined'){name='Jack';console.log('Goodbye'+name);}else{console.log('hello'+name);}})(); 输出？
- A. Hello World!
- B. Goodbye Jack
- C. Hello Jack
- D. Goodbye World!
答案：B 局部name提升为undefined，走if分支。
例题var msg='hello'; for(var i=0;i<9;i++){var msg='hello'+i*2+i;} alert(msg); 输出？
- A. hello
- B. hello189
- C. hello30
- D. hello27
答案：B i=9时退出，msg='hello'+9*2+9='hello'+18+9='hello189'（字符串拼接）。
i*2=18(数字)，'hello'+18='hello18'，再+9='hello189'。
13.6 函数返回函数与定时器异步
函数可以返回另一个函数；setTimeout 是异步的，会等同步代码执行完再执行。
例题console.log('one'); setTimeout(function(){console.log('two');},0); console.log('three'); console.log('four'); 输出顺序？
- A. one three four two
- B. one three two four
- C. one four three two
- D. one two three four
答案：A setTimeout 即使是0也是异步，等同步代码(one/three/four)执行完才执行two。
例题var num1=1; function testf1(){num1=2; alert(num1);} function testf2(){alert(num1);} testf1(); testf2(); 两次弹出？
- A. 2,1
- B. 2,2
- C. 2,undefined
- D. 1,1
答案：B testf1改了全局num1=2，testf2读全局=2。
例题function fn1(){alert(1);} alert(fn1()); 弹出？
- A. 1,undefined
- B. undefined,undefined
- C. 1,function...
- D. function...
答案：A fn1()先执行alert(1)，fn1无返回值返回undefined，再alert(undefined)。
例题如果有函数定义function f(x,y){…}，那么以下正确的函数调用是（ ）
- A. f1,2
- B. f(1)
- C. f(1,2)
- D. f(,2)
答案：C
例题下面代码的运行结果是： function fn1() { alert(1); } alert( fn1() );
- A. 1，undefined
- B. undefined，undefined
- C. 1，function fn1() { alert(1); }
- D. function fn1() { alert(1); }，undefined
答案：A
例题以下代码运行的结果是输出( ) var a = b = 10; (function(){ var a=b=20 })(); console.log(b);
- A. 10
- B. 20
- C. 报错
- D. undefined
答案：B
例题关于CSS样式，可以为项目符号指定自定义图像的参数是( )
- A. Iist-style-position
- B. Iist-style-type
- C. Iist-styIe-image
- D. Iist-styIe-src
答案：C
14数组
14.1 数组基础
数组是有序数据的集合，元素类型可以不同，长度可变。
var arr = [1, 2, 3, 4];
var arr2 = new Array(1, 2, 3);
console.log(arr.length); // 4
console.log(arr); // alert(arr) 输出 "1,2,3,4"（toString）考点 ①
alert(arr) 会调用数组的 toString，输出 "1,2,3,4"（逗号分隔），不是 [1,2,3,4]；② 数组长度可变、元素类型可不同、创建不必用 new；③ 数组的数据类型是 Array，但 typeof 返回 "object"；获取长度用 length 属性（不是方法 length()，不是 size）；④ 稀疏数组：arr[1]=1; arr[5]=2; 则 length 为 6。例题var arr=[1,2,3,4]; alert(arr); 输出？
- A. [1,2,3,4]
- B. 1,2,3,4
- C. [1234]
- D. 1234
答案：B alert 调用 toString。
例题在javascript里，下列选项中不属于数组方法的是？
- A. sort()
- B. length()
- C. reverse()
- D. concat()
答案：B length 是属性不是方法，无 length()。
例题var arr=[]; arr[1]=1; arr[5]=2; console.log(arr.length); 输出？
- A. 2
- B. 5
- C. 6
- D. 报错
答案：C 最大下标5，length=6。
例题（多选）以下对数组的描述正确的是？
- A. 数组的数据类型是Array
- B. 数组的数据类型是string
- C. 数组获取长度的属性是length
- D. 数组获取长度的属性是size
答案：AC
例题（多选）关于javascript中数组的说法中不正确的是？
- A. 数组长度必须在创建时给定，之后不能改变
- B. 创建数组必须使用new运算符
- C. 数组内元素的类型可以不同
- D. 数组可以在声明的同时初始化
答案：AB 长度可变、不必用new。
14.2 数组方法（核心）
数组方法是考试重中之重。关键区分：哪些改变原数组，哪些不改变。
| 方法 | 作用 | 改变原数组? | 返回值 |
|---|---|---|---|
push() | 末尾添加 | 是 | 新长度 |
pop() | 末尾删除 | 是 | 删除的元素 |
unshift() | 开头添加 | 是 | 新长度 |
shift() | 开头删除 | 是 | 删除的元素 |
sort() | 排序 | 是 | 排序后的数组 |
reverse() | 反转 | 是 | 反转后的数组 |
splice() | 增删改 | 是 | 被删除的元素数组 |
concat() | 合并 | 否 | 新数组 |
slice() | 截取 | 否 | 新数组 |
join() | 转字符串 | 否 | 字符串 |
indexOf() | 查找下标 | 否 | 下标/-1 |
lastIndexOf() | 从后查找 | 否 | 下标/-1 |
toString() | 转字符串 | 否 | 字符串 |
高频考点 ① 不能改变自身数组的方法是
concat（还有 slice、join、indexOf）；② pop 会改变原数组（判断题）；③ arr.join("&") 返回新字符串，原数组不变。例题js数组的方法中，哪个方法不能改变自身数组？
- A. splice
- B. concat
- C. sort
- D. pop
答案：B concat 不改变原数组。
例题（多选）数组中会改变原数组方法有哪些？
- A. sort
- B. slice
- C. concat
- D. pop
答案：AD sort和pop改变原数组；slice和concat不改变。
例题（判断）数组的pop()方法不会改变原数组 / 会改变原数组。
答案：前者错，后者对 pop 会改变原数组。
例题var arr=[3,4,6]; 删除数组中的最后一项，使用？
- A. arr.pop()
- B. arr.pop(6)
- C. arr.shift()
- D. arr.shift(6)
答案：A pop 删除末尾，无需参数。
14.3 关键方法详解
splice 与 slice
// splice(起始下标, 删除个数, 插入元素...) — 改变原数组，返回被删除元素
[1,2,3,4,5].splice(1,2,3,4,5) // 从下标1删2个(删2,3)，插入3,4,5 → 返回[2,3]
// slice(起始下标, 结束下标) — 不改变原数组，返回新数组，含头不含尾
[1,2,3,4,5].slice(1,2) // 从下标1到下标2(不含) → 返回[2]例题console.log([1,2,3,4,5].splice(1,2,3,4,5)); console.log([1,2,3,4,5].slice(1,2,3,4,5)); 输出？
- A. [2,3]和[2,3]
- B. [2]和[2]
- C. [2,3]和[2]
- D. [2]和[2,3]
答案：C splice返回被删的[2,3]；slice只取前两个参数下标1到2，返回[2]。
例题var arr=[1,2,3,4]; arr.splice(1,0,[1,2,3,4],5); alert(arr.length); 输出？
- A. 4
- B. 5
- C. 6
- D. 9
答案：C 从下标1删0个，插入2个元素([1,2,3,4]整体作为一个元素,5)，原4+2=6。
splice插入时，数组参数作为一个整体元素，不展开。
concat
[1,2,3,4].concat(1,2,3,[1,2,3],5)
// concat 会展开一层数组：1,2,3 + 1,2,3 + 1,2,3 + 5 = 11个元素例题var arr=[1,2,3,4]; alert(arr.concat(1,2,3,[1,2,3],5).length); 输出？
- A. 4
- B. 9
- C. 11
- D. 5
答案：C 原数组4个+1+2+3+[1,2,3]展开3个+5=4+1+2+3+3+1?重新数：concat添加(1,2,3,[1,2,3],5)→1,2,3,1,2,3,5共7个，4+7=11。
join 与 sort
[1,2,3,4].join('0') // "1020304"（用0连接）
[1,2,3,4].join('0').split('') // ["1","0","2","0","3","0","4"]
[1,11,2,22,3,4].sort() // [1,11,2,22,3,4]（默认按字符串排序！）sort 陷阱
sort() 默认按字符串 Unicode 编码排序，所以 [1,11,2,22,3,4] 排序后仍是 [1,11,2,22,3,4]（"11"排在"2"前面因为是逐字符比较）。要按数字排序需传比较函数 sort(function(a,b){return a-b})。例题[1,2,3,4].join('0').split('') 的执行结果是？
- A. '1,2,3,4'
- B. [1,2,3,4]
- C. ["1","0","2","0","3","0","4"]
- D. '1,0,2,0,3,0,4'
答案：C join得"1020304"，split('')逐字符拆成数组。
例题var arr=[1,2,3,4]; arr.join("&"); console.log(arr); 输出？
- A. [1,2,3,4]
- B. 1&2&3&4
- C. [1&2&3&4]
- D. 1,2,3,4
答案：A join 不改变原数组，arr 仍是 [1,2,3,4]。
例题var arr=[1,11,2,22,3,4]; arr.sort(); document.write(arr); 输出？
- A. 1,11,2,22,3,4
- B. 1,2,3,4,11,22
- C. 22,11,4,3,2,1
- D. 报错
答案：A sort 默认按字符串排序，顺序不变。
reverse 与 indexOf
["how","are","you"].reverse() // ["you","are","how"]
[1,2,3,4,5,4,3,2,1].lastIndexOf(4) // 5（从后找第一个4的下标）例题var arr=[how,are,you]; arr.reverse(); alert(arr); 输出？
- A. how,are,you
- B. you,are,how
- C. h,o,w,a,r,e,y,o,u
- D. u,o,y,e,r,a,w,o,h
答案：B reverse 反转元素顺序。
例题var number=[1,2,3,4,5,4,3,2,1]; console.log(number.lastIndexOf(4)); 输出？
- A. 2
- B. 3
- C. 4
- D. 5
答案：D 从后往前找第一个4，下标是5。
例题下面哪个方法可以匹配数组是否含有某个值？
- A. sort()
- B. push()
- C. join()
- D. indexOf()
答案：D indexOf 返回下标，找不到返回-1。
14.4 数组综合操作题
例题var datas=[10,20,30]; datas.unshift(40,50); datas.pop(); datas.push(60,70); datas.shift(); console.log(datas.toString()); 输出？
- A. 50,10,20,60,70
- B. 40,10,20,60,70
- C. 10,20,30
- D. 50,10,20,60
答案：A unshift(40,50)→[40,50,10,20,30]；pop()删30→[40,50,10,20]；push(60,70)→[40,50,10,20,60,70]；shift()删40→[50,10,20,60,70]。
例题var arr=[1,2,3]; var b=arr.slice(); b.push(4); console.log(arr); 输出？(注:原题为a.slice().push写法)
- A. [1,2,3,4]
- B. [1,2,3]
- C. [4]
- D. [2,3,4]
答案：B slice 返回副本，对副本 push 不影响原数组。
例题（多选）已知const arr=['A','B','C','D','E','F','G']，下面可以获取数组最后一项的表达式有？
- A. arr[6]
- B. arr.pop()
- C. arr.shift()
- D. arr.unshift()
答案：AB arr[6]取最后一项；pop()返回最后一项。shift取第一项，unshift返回长度。
例题（多选）以下哪些将数组转为字符串的方法？
- A. join()
- B. toString()
- C. split()
- D. concat()
答案：AB join和toString转字符串；split是字符串转数组。
例题（多选）下列哪些是数组的方法？
- A. charAt()
- B. sort()
- C. push()
- D. filter()
答案：BCD charAt 是字符串方法。
例题var arr=[1,2,3]; var brr=arr; brr[0]="lemon"; 请问arr、brr的值为？
- A. arr=[1,2,3],brr=["lemon",2,3]
- B. arr=[1,2,3],brr=["lemon",1,2,3]
- C. arr=["lemon",2,3],brr=["lemon",2,3]
- D. arr=["lemon",2,3],brr=["lemon",1,2,3]
答案：C 数组是引用类型，brr=arr 指向同一数组，改brr即改arr。
例题var a=[1,2,3]; console.log(a.join()); 输出？
- A. 123
- B. 1,2,3
- C. 1 2 3
- D. [1,2,3]
答案：B join() 默认用逗号连接。
例题将Array对象中的元素值进行输出的方法是（ ）。
- A. 用下标获取指定元素值
- B. 用for语句获取数组中的元素值
- C. 用数组对象名输出所有元素值
- D. 以上3种方法都可以
答案：D
例题以下代码运行后的结果是输出( ) var a=[1, 2, 3]; console.log(a.join());
- A. 123
- B. 1,2,3
- C. 1 2 3
- D. [1,2,3]
答案：B
例题与其他 IEEE 754 表示浮点数的编程语言一样，JavaScript 的 number 存在精度问题，比如 0.2 + 0.4 的结果是 0.6000000000000001。以下选项中，能得到 0.6 的是？
- A. parseFloat(0.2 + 0.4)
- B. parseFloat((0.2 + 0.4).toFixed(1))
- C. reverse()
- D. concat()
答案：B
例题（多选）以下哪些方法可以往 Array 中添加元素( )
- A. push
- B. pop
- C. splice
- D. unshift
答案：ACD
15字符串
15.1 字符串基础与属性
字符串用引号（单引号或双引号）包裹。length 是属性（不是方法 length()）。
var str = "welcome to china";
console.log(str.length); // 16（含空格）例题下面的4个方法中，不是String对象方法的是？
- A. charAt()
- B. substring()
- C. toUpperCase()
- D. length()
答案：D length 是属性，不是方法。
例题对字符串str="welcome to china"操作，描述正确的是？
- A. str.substring(1,5)返回"el..."
- B. str.length的返回值是16
- C. str.indexOf("come",4)...
- D. str.toUpperCase()返回"We..."
答案：B "welcome to china"共16个字符(含空格)。
15.2 字符串方法
| 方法 | 作用 | 示例 |
|---|---|---|
charAt(i) | 取指定位置字符 | "abc".charAt(1) → "b" |
charCodeAt(i) | 取字符编码 | — |
indexOf(s,from) | 从前往后查找 | "miao wei".indexOf("wei",6) → -1 |
lastIndexOf(s) | 从后往前查找 | — |
substring(start,end) | 截取（含头不含尾） | "student".substring(9,13) → "uden" |
substr(start,len) | 截取（从start取len个） | — |
slice(start,end) | 截取（支持负数） | — |
split(sep) | 分割成数组 | "1,2,3".split(",") → ["1","2","3"] |
replace(a,b) | 替换 | — |
toUpperCase() | 转大写 | — |
toLowerCase() | 转小写 | — |
trim() | 去两端空白 | — |
concat() | 连接 | — |
match()/search() | 匹配/搜索 | — |
考点 ① 检索字符串用
indexOf（找不到返回 -1）；"miao wei ke tang".indexOf("wei",6) → 从下标6开始找"wei"，找不到返回 -1（"wei"在下标5，从6开始就找不到了）；② substring(9,13) 截取下标9到12（不含13），"I am a student".substring(9,13) → "uden"；③ trim() 去掉字符串两端空白。例题var n="miao wei ke tang".indexOf("wei",6); n的值为？
- A. -1
- B. 5
- C. 程序报错
- D. -10
答案：A "wei"在下标5，从下标6开始查找找不到，返回-1。
例题var mystring="I am a student"; var a=mystring.substring(9,13); document.write(a); 输出？
- A. stud
- B. tuden
- C. uden
- D. udent
答案：C 下标9到12（不含13），"student"从第9位s开始，substring(9,13)取"uden"。
"I am a "占7位+空格，student从下标7开始。下标9是t?实际数：I(0) (1)a(2)m(3) (4)a(5) (6)s(7)t(8)u(9)d(10)e(11)n(12)t(13)。substring(9,13)=u,d,e,n="uden"。
例题已知字符串"hello everybody "通过下面哪个方法可以去掉字符串两端的空白？
- A. trim()
- B. split()
- C. reverse()
- D. join()
答案：A trim() 去两端空白。
例题在JavaScript脚本中，用来检索字符串的方法是？
- A. indexOf
- B. search
- C. replace
- D. match
答案：A indexOf 是检索方法（search/match也可，题库答案A）。
15.3 字符串拼接与转义
var str = "2";
document.write("H" + str + "O"); // "H2O"
// 转义字符 \n 换行、\t 制表、\" 引号、\\ 反斜杠
var s = "here is \nsome text";例题下面JavaScript语句中能正确输出"H2O"的字符串表达式是？(str="2")
- A. document.write("H"+str+"O")
- 其他
答案：A "H"+"2"+"O"="H2O"。
例题两个字符大小比较规则是什么？
答案：按字符的 Unicode 编码（ASCII）值比较，逐字符比较。
例题下面哪个字符串定义语句不正确？
- A. var mytext=”here is some text!”
- B. var mytext=’here is some text!”
- C. var mytext=’here is some text!’
- D. var mytext=”here is \nsome text!”
答案：B
16对象与 JSON
16.1 对象的创建与属性访问
对象是"键值对"的集合。创建对象有两种方式：
// 1. 字面量（推荐）
var obj = { name: "张三", age: 18 };
// 2. new 关键字
var obj = new Object();
obj.name = "张三";对象属性之间用逗号分隔，属性名与值之间用冒号。访问属性两种方式：
obj.name // 点语法
obj["name"] // 方括号（字符串键）
obj["a"+"t"+"t"] // 方括号可用表达式
// obj{att} 是错误语法！易错 ① 直接创建对象时属性间用逗号分隔（不是冒号，冒号是键值之间）；② 访问属性用
. 或 []，不能用 {}，obj{att} 是错误的；③ 创建对象用 new 关键字；④ 避免重复引用对象名用 with 语句。例题创建对象使用的关键字是？
- A. function
- B. new
- C. var
- D. String
答案：B new。
例题（多选）创建对象的方式有？
- A. var obj={}
- B. var obj=[]
- C. var obj=new Object()
- D. 以上都是
答案：AC {}和new Object()创建对象；[]创建数组。
例题如果想要调用obj对象的arr属性，以下做法中错误的是？
- A. obj["arr"]
- B. obj["a"+"r"+"r"]
- C. obj{"arr"}
- D. obj.arr
答案：C 不能用 {} 访问。
例题在自定义对象foo中有一个att属性，获取att属性值的表达式哪个是错误的？
- A. foo.att
- B. foo["att"]
- C. foo{"att"}
- D. foo["a"+"t"+"t"]
答案：C 不能用花括号。
例题直接创建自定义对象时，所有属性都放在大括号中，属性之间用（ ）分隔。
- A. 逗号
- B. 冒号
- C. 分号
- D. 空格
答案：B 此题问"属性之间"实为键值分隔用冒号（题库答案B，注意属性与属性之间实为逗号，此处按题库）。
说明 严格说属性之间用逗号、键值之间用冒号。本题题库答案为B(冒号)，按冒号记忆键值分隔。
例题下面引用对象中的属性或方法的格式中，不正确的是？
- A. 对象名.属性名
- B. 对象名[属性名]
- C. 对象名.方法名
- D. 对象名.方法名()
答案：C 调用方法要加()，"对象名.方法名"只是引用不调用（题目视为不正确格式）。
例题在访问对象属性或方法时可以避免重复引用指定对象名的语句是？
- A. this
- B. for…in
- C. return
- D. with
答案：D with 语句（题库答案D，实际 with 已不推荐使用）。
16.2 遍历对象 for...in
var person = { fname:"John", lname:"Doe", age:25 };
var txt = "";
for (x in person) {
txt = txt + person[x]; // x 是属性名(字符串)，person[x]取值
}
alert(txt); // "JohnDoe25"解析 for...in 遍历对象属性，x 是属性名（字符串），用 person[x] 取值。结果把所有值拼接：John+Doe+25="JohnDoe25"。用来遍历对象属性的语句是
for...in。例题var person={fname:"John",lname:"Doe",age:25}; var txt=""; for(x in person){txt=txt+person[x];} alert(txt); 输出？
- A. JohnDoe25
- B. fname:"John"...
- C. fname:John...
- D. fnamelnameage
答案：A 拼接所有属性值。
例题用来遍历对象属性的语句是？
- A. for
- B. with
- C. for…in
- D. foreach
答案：C for...in 遍历对象。
16.3 instanceof 与类型判断
instanceof 用于判断对象是否为某构造函数的实例。typeof 判断基本类型。
var s = new String("hi");
s instanceof String // true（判断对象类型）
typeof s === 'string' // false（对象typeof是object）例题下面哪些语句可以在JS里判断一个对象oStringObject是否为String？
- A. oStringObject instanceof String
- B. typeof oStringObject == 'string'
- C. oStringObject is String
- D. 以上都不正确
答案：A 对象类型用 instanceof。
例题以下不是关键字或保留字的是（ ）
- A. var
- B. new
- C. bool
- D. boolean
答案：C
例题（判断）object.style.display=“none”使元素隐藏
答案：对
16.4 JSON
JSON（JavaScript Object Notation）是一种轻量级数据交换格式，本质是 JS 对象的字符串表示。属性名必须用双引号。
var obj = { name: "张三", age: 18 };
var jsonStr = JSON.stringify(obj); // 对象→JSON字符串
var obj2 = JSON.parse(jsonStr); // JSON字符串→对象17内置对象 Math 与 Date
17.1 Math 对象
Math 是内置数学对象，无需 new。
| 方法 | 作用 | 示例 |
|---|---|---|
Math.round(x) | 四舍五入 | round(11.5)=12, round(-11.5)=-11 |
Math.ceil(x) | 向上取整 | ceil(-3.14)=-3, ceil(3.14)=4 |
Math.floor(x) | 向下取整 | floor(3.14)=3 |
Math.random() | 0~1随机小数 | — |
Math.max/min() | 最大/最小值 | — |
Math.abs(x) | 绝对值 | — |
Math.pow(x,y) | x的y次方 | — |
Math.sqrt(x) | 平方根 | — |
round 负数规则（高频考点）
Math.round(x) 对 .5 的处理：正数进一，负数向 0 取整。① round(11.5)=12；② round(-11.5)=-11（不是-12！向0靠）；③ round(-2019.5)=-2019。ceil 负数
Math.ceil(-3.14)=-3（向上取整，-3 > -3.14，"向上"指数轴正方向）。例题Math.ceil(-3.14)的结果是？
- A. -3.14
- B. -3
- C. -4
- D. 3.14
答案：B ceil 向上取整，-3 比 -3.14 大。
例题Math.round(-2019.5)的结果是？
- A. 2019
- B. -2019
- C. 2020
- D. -2020
答案：B round 负数 .5 向0取整，-2019。
例题（判断）Math.round(-2019.5)的结果是-2020。
答案：错 应为 -2019。
例题var result = Math.round(11.5) + Math.round(-11.5); result的值是？
- A. 0
- B. 1
- C. -1
- D. 2
答案：B round(11.5)=12, round(-11.5)=-11, 12+(-11)=1。
例题var a=12.52; b=10.35; c=Math.round(a); d=Math.round(b); document.write(c+" "+d); 输出？
- A. 12.52 10.35
- B. 13 11
- C. 12 10
- D. 13 10
答案：D round(12.52)=13, round(10.35)=10。
例题下列表达式产生一个0~7之间(含0,7)的随机整数的是？
答案：Math.floor(Math.random()*8) 或 parseInt(Math.random()*8)。0~7共8个数，乘8取整。
17.2 Date 对象
var d = new Date(); // 获取当前日期时间
d.getFullYear() // 4位年份
d.getMonth() // 月份 0~11（1月是0！）
d.getDate() // 一个月中的某天 1~31
d.getDay() // 星期 0~6（0是周日）
d.getHours() // 小时 0~23
d.getTime() // 时间戳（毫秒）易错（高频） ①
getMonth() 返回 0~11（1月=0，12月=11），不是1~12！获取当前月份要 d.getMonth()+1；② 获取"一个月中的每一天"用 getDate()（不是 getDay，getDay 是星期）；③ 获取系统当前日期时间用 new Date()。例题var d=new Date(); 获取当前月份的语句是？
- A. d.getDate()
- B. d.getMonth()
- C. d.getMonth()+1
- D. d.getMonth()-1
答案：C getMonth 返回0~11，需+1。
例题下列关于Date对象的getMonth()方法的返回值描述，正确的是？
- A. 返回系统时间的当前月
- B. 返回值的范围介于1~12之间
- C. 返回系统时间的当前月+1
- D. 返回值的范围介于0~11之间
答案：D 0~11。
例题在Javascript中，可以使用Date对象的（ ）方法返回一个月中的每一天。
- A. getDate
- B. getYear
- C. getMonth
- D. getTime
答案：A getDate 返回日(1~31)。
例题获取系统当前日期和时间的方法是？
- A. new Date()
- B. new now()
- C. now()
- D. Date()
答案：A new Date()。
例题在JavaScript中，下列（ ）语句能正确获取系统当前时间的小时值。
答案：new Date().getHours()
例题（判断）JavaScript中Date对象用于处理日期和时间。
答案：对
例题（多选）下列样式代码中，可用于设置背景图像平铺方式的是()
- A. background-repeat:no-repeat
- B. background-attachment:fixed
- C. background-attachment:scroll
- D. background-repeat: repeat-x
答案：AD
第四部分小结
① 函数：声明有提升、表达式无提升；无 return 返回 undefined；基本类型值传递、引用类型引用传递；② 作用域：全局/局部；var 提升致"先用后声明"=undefined；var a=b=1 中 b 成全局；③ 闭包/IIFE 独立作用域；setTimeout 异步；④ 数组：alert 输出"1,2,3"；length 属性非方法；改变原数组(push/pop/shift/unshift/sort/reverse/splice)vs不改变(concat/slice/join/indexOf)；splice返回删除项、slice返回副本；sort默认按字符串；concat展开一层；⑤ 字符串：length属性；indexOf找不到-1；substring含头不含尾；trim去空白；⑥ 对象：{}或new Object创建，属性逗号分隔键值冒号；访问用.或[]不能用{}；for...in遍历；instanceof判断对象类型；⑦ Math：round负数.5向0(11.5→12,-11.5→-11)；ceil向上floor向下；random*8取整得0~7；⑧ Date：getMonth返回0~11需+1；getDate返回日；getDay返回星期；new Date()获取当前时间。
18DOM 文档对象模型
18.1 DOM 概念与节点
DOM（Document Object Model，文档对象模型）：当网页加载时，浏览器会把 HTML 文档解析成一棵"节点树"，JS 通过 DOM 可以动态增删改查页面内容。document 是 DOM 的根对象。
节点类型：元素节点(nodeType=1)、文本节点(3)、属性节点(2)，没有"样式节点"。
18.2 获取元素
| 方法 | 作用 | 返回 |
|---|---|---|
document.getElementById('id') | 按 id 获取 | 单个元素对象（Object） |
document.getElementsByTagName('tag') | 按标签名获取 | 类数组（所有该标签） |
document.getElementsByClassName('cls') | 按 class 获取 | 类数组 |
document.getElementsByName('name') | 按 name 获取（表单） | 类数组 |
document.querySelector('选择器') | CSS选择器获取第一个 | 单个元素 |
document.querySelectorAll('选择器') | CSS选择器获取全部 | 类数组 |
易错 ①
getElementById() 返回值类型是 Object（不是 Array、String、Function）；② 方法名带 s 的（getElements...）返回多个，getElementById 不带 s 返回单个；③ 是 getElementsByTagName（复数 Elements），不是 getElementByTagName；④ 获取多个同名对象（按 name）用 getElementsByName；⑤ getElementById('div1') 让层显示：style.display='block'。例题JavaScript中document.getElementById()返回值的类型为？
- A. Array
- B. Object
- C. String
- D. Function
答案：B 返回元素对象。
例题（判断）JavaScript中document.getElementById()返回值的类型为Object / 为字符串。
答案：前者对，后者错 返回 Object。
例题为获取页面中多个同名对象，应使用document对象的（ ）方法。
- A. getElementById()
- B. getElementsByName()
- C. getElementsByTagName()
- D. getElementByName()
答案：B 按name获取多个同名对象。
例题如果想要获取整个网页文档中h1标签的个数，可以通过？
答案：document.getElementsByTagName('h1').length
例题下面哪一个方法可以查找class名为"xm"的元素？
- A. document.getElementsByClassName
- B. document.getElementsByName
- C. document.Class("xm")
- D. document.ByName("xm")
答案：A getElementsByClassName。
例题关于代码 var s=document.getElementsByTagName("img"); for(...){s[i].style.display="none";} 说法正确的是？
- A. 隐藏了页面所有id为img的对象
- B. 隐藏了页面所有name为img的对象
- C. 隐藏了页面所有标签为img的对象
- D. 隐藏第一个img
答案：C getElementsByTagName 获取所有img标签。
18.3 节点操作
| 方法/属性 | 作用 |
|---|---|
document.createElement('tag') | 创建元素节点 |
document.createTextNode('text') | 创建文本节点 |
父.appendChild(子) | 末尾添加子节点 |
父.insertBefore(新,旧) | 在指定节点前插入 |
父.removeChild(子) | 删除子节点 |
父.replaceChild(新,旧) | 替换子节点 |
节点.cloneNode(true) | 复制节点（true深复制含子节点） |
element.parentNode | 获取父节点（属性，非方法） |
element.children | 获取子元素 |
考点 ① 获取父节点用
element.parentNode（是属性，不带括号，不是 parentNode()）；② 创建节点的方式：createElement（创建元素）和 cloneNode（复制）；removeChild/replaceChild 是操作不是创建；③ cloneNode(true) 完整复制节点及所有内容（深复制），参数 true 表示复制子节点。例题获取原生JS的父节点的是？
- A. element.parent()
- B. element.getParent()
- C. element.parentNode
- D. element.parentNode()
答案：C parentNode 是属性，不带括号。
例题（多选）JS中创建节点的方式有哪些？
- A. createElement
- B. removeChild
- C. replaceChild
- D. cloneNode
答案：AD createElement创建、cloneNode复制；removeChild删除、replaceChild替换。
例题下列不属于节点类型的是？
- A. 元素节点
- B. 文本节点
- C. 属性节点
- D. 样式节点
答案：D 没有样式节点。
例题nodeType属性返回值为1，则表明该节点为？
- A. 文本节点
- B. 元素节点
- C. 属性节点
答案：B 1=元素节点。
18.4 内容与样式操作
element.innerHTML = "<b>内容</b>"; // 设置HTML内容（可解析标签）
element.innerText = "纯文本"; // 设置纯文本
element.style.color = "red"; // 设置行内样式
element.style.backgroundColor = "red"; // CSS属性用驼峰
element.className = "box"; // 设置class
element.getAttribute("src"); // 获取属性
element.setAttribute("src", "a.jpg"); // 设置属性考点 ① 将元素内容替换为指定 HTML 文本用
innerHTML（不是 innerText/outerText）；② JS 改变背景色：inputElement.style.backgroundColor="red"（style.驼峰属性）；③ CSS 的 background-image 在 style 对象中是 backgroundImage（驼峰）；④ 让 input 背景变红：style.backgroundColor。例题将元素的内容替换为指定的HTML文本使用的是（ ）属性。
- A. innerText
- B. innerHTML
- C. outerText
- D. outerHTML
答案：B innerHTML 可设置/获取HTML内容。
例题下列js可以让一个input的背景颜色变成红色的是？
- A. inputElement.style.backgroundColor
- 其他选项不规范
答案：A style.backgroundColor="red"。
例题（多选）验证文本框为空的条件表达式不正确的是？(var usrName=document.getElementById("txtName").value)
- A. usrName==""
- B. usrName.length<=0
- C. usrName=""
- D. usrName.length<0
答案：CD C是赋值不是比较；length不会小于0。A、B正确。
例题下列哪种方式不能获取非行间样式的宽度？
答案：element.style.width style 只能获取行内样式，获取计算后的样式要用 getComputedStyle。
例题对代码分析：function msg(){var p=document.createElement("p"); var Text=document.createTextNode("Hello!"); p.appendChild(Text); document.body.appendChild(p);} 说法不正确的是？
- A. 第2行创建元素标签
- B. 第3行创建文本节点
- C. p是文本节点的子节点
- D. p是文本节点的父节点
答案：C p 是父，Text 是子（appendChild把Text加到p里），所以p是文本节点的父节点，C说反了。
例题如何往body当中插入一个div？
答案：var div=document.createElement("div"); document.body.appendChild(div);
例题function moveBtn(obj){var clone=obj.cloneNode(true); var parent=obj.parentNode; parent.appendChild(clone); parent.removeChild(obj);} 实现效果？
- A. 将按钮链接到...
- B. 将按钮移动到...
- C. 将button2移动到...
- D. 将button2链接到...
答案：B 复制按钮→添加到父级末尾→删除原按钮，相当于"移动"按钮到最后。
例题在javascript中要改变页面文档的背景色，需要修改document对象的（ ）属性。
- A. backColor
- B. backgroundColor
- C. bgColor
- D. background
答案：B document.body.style.backgroundColor 或 CSS 中 backgroundColor。
例题下面的方法中，（ ）不是document对象的方法。
- A. createElement
- B. getElementById
- C. write
- D. reload
答案：D reload 是 location 对象的方法。
例题下列不属于文档对象的方法的是？
- A. createElement
- B. getElementById
- C. getElementByName
- D. forms.length
答案：D forms.length 是属性，不是方法。
例题某页面中有一个id为main的div，div中有两个图片及一个文本框，下列（ ）能够完整地复制节点main及div中的所有内容。
- A. document.getElementById("main").cloneNode(true);
- B. document.getElementById("main").cloneNode(false);
- C. document.getElementById("main").cloneNode();
- D. main.cloneNode();
答案：A
例题如果在HTML页面中包含如下图片标签，，则（）选项中语句能够实现隐藏该图片的功能
- A. document.getElementById(“pic”).style.display=”visible”
- B. document.getElementById(“pic”).style.display=”disvisible”
- C. document.getElementById(“pic”).style.display=”block”
- D. document.getElementById(“pic”).style.display=”none”
答案：D
例题下面代码获取 input 节点的正确方法是( )
- A. document.querySelectorAll('file')[0]
- B. document.getElementById('file')[0]
- C. document.getElementByTagName('file')[0]
- D. document.getElementById('file')
答案：D
例题以下代码中,给class为test的div对象设置红色背景的正确js代码为( )
- A. document.getElementsByClassName("test").style.backgroundColor="red";
- B. document.getElementsByClassName("test")[0].style.backgroundColor="red";
- C. document.getElementsByClassName("test")[0].style.background-color="red";
- D. document.getElementsByClassName("test").style.background-color="red";
答案：B
例题在HTML页面中，包含id为“div1”的层，下列选项（ ） 中的JavaScript代码可以使该层显示。
- A. document.getElementById("div1").style.display="block";
- B. document.getElementById("div1").style.display="none";
- C. document.getElementByName("div1").style.display="visible";
- D. document.getElementByName("div1").style.display="hidden";
答案：A
例题在HTML页面中，包含id为”div1”的层，下列哪个选项可以使该层显示出来（ ）
- A. document.getElementByName(“div1”).style.display=”visible”;
- B. document.getElementById(“div1”).style.display=”none”;
- C. document.getElementByName(“div1”).style.display=”hidden”;
- D. document.getElementById(“div1”).style.display=”block”;
答案：D
例题执行以下代码，其实现的效果为（） function moveBtn(obj) { var clone = obj.cloneNode(true); var parent = obj.parentNode; parent.appendChild(clone); parent.removeChild(obj); }
- A. 鼠标单击button1后将button1链接到button2的后面
- B. 鼠标单击button1后将button1移动到button2的后面
- C. 鼠标单击button1后将button2移动到button1的后面
- D. 鼠标单击button1后将button2链接到button1的后面
答案：B
例题（多选）以下哪些选项可以获取ID为a的DOM元素？
- A. document.getElementById('a')
- B. document.getElementById('#a')
- C. document.querySelector('a')
- D. document.querySelector('#a')
答案：AD
例题（多选）页面有一个id为 button1的按钮，如何通过原生的js禁用？
- A. document.getElementById("button1").readonly= true;
- B. document.getElementById("button1").setAttribute('readonly','true');
- C. document.getElementById("button1").disabled = true;
- D. document.getElementById("button1").setAttribute('disabled','true');
答案：CD
19BOM 浏览器对象模型
19.1 BOM 体系
BOM（Browser Object Model，浏览器对象模型）：JS 与浏览器交互的接口。window 是所有页面内容的根对象（最顶层），其他对象都是它的属性。
window
├── document // 文档对象（DOM）
├── location // 地址栏信息
├── history // 浏览历史
├── navigator // 浏览器信息
├── screen // 屏幕信息
└── status // 状态栏信息考点 ① window 是所有页面内容的根对象；② location 是 window 的子对象（不是 history 的父对象，history 和 location 是平级）；③ document 包含 form 对象；④ history 记录用户访问历史，location 相当于地址栏包含URL信息，navigator 包含浏览器信息，window 表示打开的窗口。
例题（多选）下面有关javascript内部对象的描述，正确的有？
- A. History包含用户访问历史
- B. Location包含当前URL信息
- C. Window表示打开的窗口
- D. Navigator包含浏览器信息
答案：ABCD
例题（多选）对于浏览器对象的层次关系理解正确的是？
- A. window对象是所有页面内容的根对象
- B. document对象包含location对象和history
- C. location对象包含history
- D. document对象包含form对象
答案：AD location和history平级(都是window子对象)，不是document包含它们。
例题下列选项中关于浏览器对象的说法错误的是？
- A. history记录访问历史
- B. location相当于地址栏
- C. location是history的父对象
- D. location是window的子对象
答案：C location和history平级，不是父子关系。
例题通过下面哪一个BOM对象可以获取浏览器地址栏相关信息？
- A. location
- B. history
- C. window
- D. navigator
答案：A location 对象。
例题window对象的（ ）属性用来指定浏览器状态栏中显示的临时消息。
- A. status
- B. screen
- C. history
- D. document
答案：A status 状态栏。
19.2 对话框方法
| 方法 | 作用 | 返回 |
|---|---|---|
alert() | 警告框（提示信息） | 无 |
confirm() | 确认框（确定/取消） | true/false |
prompt() | 输入框 | 输入的字符串/null |
例题在Window对象中，用于弹出一个确认对话框的是（ ）方法。
- A. alert()
- B. confirm()
- C. prompt()
- D. showModalDialog()
答案：B confirm 确认框。
例题window对象有多个方法，其中用于显示提示信息对话框的是？
- A. alert()
- B. confirm()
- C. prompt()
- D. open()
答案：A alert 警告框。
19.3 location 对象
| 属性 | 作用 |
|---|---|
location.host | 主机名+端口 |
location.hostname | 主机名（域名） |
location.pathname | 路径 |
location.port | 端口 |
location.protocol | 协议 |
location.href | 完整URL |
例题下列关于Window Location说法错误的是？
- A. location.host返回web主机的域
- B. location.pathname返回当前页面路径
- C. location.port返回web主机的端口
- D. location.protocol返回所使用的协议
答案：A host返回主机名+端口，单独域名是hostname。
19.4 定时器（重点）
| 方法 | 作用 |
|---|---|
setTimeout(fn, ms) | 隔 ms 毫秒后执行 fn 一次 |
setInterval(fn, ms) | 每隔 ms 毫秒重复执行 fn |
clearTimeout(id) | 清除 setTimeout |
clearInterval(id) | 清除 setInterval |
易错 ①
setTimeout("go()", 10) 表示间隔10毫秒后执行一次（不是10秒、不是10分钟）；② setTimeout 执行一次，setInterval 重复执行；③ setTimeout/setInterval 第二参数单位是毫秒（2000=2秒）。例题setTimeout("go()", 10); 表示的意思是？
- A. 间隔10秒后执行一次
- B. 持续调用10次
- C. 间隔10毫秒后执行一次
- D. 间隔10分钟后执行一次
答案：C 10毫秒后执行一次。
例题setTimeout("alert('知识改变命运')",2000) 描述正确的是？
- A. 弹窗标题栏显示
- B. 弹窗停留2秒消失
- C. 等待2秒后弹出窗口
- D. 弹窗宽度2000px
答案：C 2000毫秒=2秒后弹出。
例题document对象的setInterval()方法与setTimeout()方法的区别在于？
- A. setInterval每隔一定时间重复执行
- 其他
答案：A setInterval重复，setTimeout一次。
例题如果要在10秒后调用checkState，下列哪行代码是正确的？
答案：setTimeout(checkState, 10000) 10秒=10000毫秒。
例题如果想在网页显示后，动态地改变网页的标题？
答案：document.title = "新标题"
19.5 其他常见输出
例题下面代码的运行结果是？document.write(JavaScript入门);
- A. JavaScript入门
- B. JavaScript
- C. 未输出任何内容
- D. document.write(JavaScript...)
答案：C JavaScript入门未加引号，是未定义变量，报错不输出。
例题用谷歌浏览器设置断点逐步调试，是在控制台的哪个Tab下？
答案：Sources（源代码）面板
例题下列选项所表示的"返回"超链接中，能实现工具栏中"后退"按钮功能的是？
答案：javascript:history.back() 或 history.go(-1)
例题在页面加载完成后，如果想动态地改变网页的标题，可以通过（）
- A. 是不可能的
- B. document.write(“新的标题内容”)
- C. document.title = ''
- D. document.changTitle(“新的标题内容”)
答案：C
例题下列各项中哪一项不是浏览器窗口的基本组成______。
- A. 标准按钮
- B. 地址栏
- C. 导航栏
- D. 状态栏
答案：C
例题（多选）浏览器中的javascript由哪几部分组成
- A. js
- B. ECMAScript
- C. DOM
- D. BOM
答案：BCD
例题（多选）浏览器中的javascript由哪几部分组成
- A. ECMAScript
- B. DOM
- C. BOM
- D. java
答案：ABC
20事件处理
20.1 事件与事件流
事件是用户或浏览器执行的某种动作（点击、移动鼠标等）。事件处理就是响应用户操作。
W3C 标准事件模型包含三个阶段（顺序）：事件捕获 → 到达目标 → 事件冒泡。
捕获阶段（从window向下到目标）
↓
window → document → ... → 目标元素
↑ ↓
冒泡阶段（从目标向上到window）考点 ① W3C 标准事件流顺序：事件捕获 → 事件处理（到达目标）→ 事件冒泡；② 事件流过程包括：冒泡、捕获、到达目标，没有"跳过目标"；③ 事件冒泡：子元素事件会向父元素传递。
例题w3c制定的javascript标准事件模型，以下正确的顺序以及描述是？
- A. 事件捕获>事件冒泡
- B. 事件捕获->事件处理->事件冒泡
- C. 事件冒泡->事件处理
- D. 事件冒泡->事件处理->事件捕获
答案：B 捕获→处理→冒泡。
例题不属于事件流过程的是？
- A. 冒泡
- B. 捕获
- C. 到达目标
- D. 跳过目标
答案：D 没有"跳过目标"。
20.2 事件绑定方式
// 1. HTML 行内绑定
<button onclick="compute()">计算</button>
// 2. DOM 属性绑定
btn.onclick = function(){ ... }
// 3. addEventListener（推荐，可绑定多个）
btn.addEventListener('click', function(){ ... }, false);addEventListener 考点 ① 第一个参数是事件类型，不带"on"前缀（用 'click' 不是 'onclick'）；② 第二个参数是处理函数；③ 第三个参数是布尔值，true 表示捕获阶段处理，false 表示冒泡阶段（默认）；④ addEventListener 绑定同名事件不会被覆盖（可绑定多个）。
例题关于addEventListener，表述错误的是？
- A. 第一个参数是事件类型
- B. 事件类型必须包括"on"前缀
- C. 第二个参数是处理函数
- D. 最后一个参数是捕获处理
答案：B 不带on前缀，用'click'不是'onclick'。
例题addEventListner说法正确的是？
- A. 绑定事件的一种方法
- B. 不能用在捕获节点绑定事件
- C. 绑定同名方法会被覆盖
- D. 不能解除绑定
答案：A B错(可以捕获)、C错(不覆盖)、D错(可用removeEventListener解除)。
例题btn.onclick = a(); ...① btn.onclick = a; ...② 说法正确的是？(a返回函数b)
- A. ①执行后输出1，点击输出2
- B. ①执行后无输出，点击输出1和2
- C. ②执行后无输出，点击输出1
- D. ②执行后输出1，点击输出2
答案：B ①a()立即执行输出1，返回b赋给onclick，点击输出2；②a函数赋给onclick，点击时执行a输出1再返回b（但不执行b）。
此题关键是区分 a()（调用，返回内层函数）和 a（引用，点击时才调用）。
20.3 事件对象与 target
事件处理函数会接收一个事件对象 event，保存事件的详细信息（没有固定名字）。
| 属性/方法 | 作用 |
|---|---|
e.target | 触发事件的元素（真正被点的元素） |
e.currentTarget | 绑定事件的元素 |
e.preventDefault() | 阻止默认行为（如链接跳转、表单提交） |
e.stopPropagation() | 阻止事件冒泡 |
e.keyCode | 按下键的键码 |
例题e.target指什么？
- A. 绑定事件的子元素
- B. 绑定事件的父元素
- C. 触发事件的元素
- D. 绑定事件的元素
答案：C target 是真正触发事件的元素。
例题什么是事件对象？
- A. 事件函数的event参数
- B. 保存调用该事件详细信息的一个参数，没有固定名字
- C. 回调函数
- D. 一个字符串
答案：B 事件对象保存事件详细信息，参数名不固定。
例题在javascript中，用于阻止默认事件的默认操作的方法是？
- A. stopDeafault
- B. stopPropagation
- C. preventPropagation
- D. preventDefault
答案：D preventDefault 阻止默认行为。
例题指定按下或释放的键是哪个的属性是？
- A. altKey
- B. metaKey
- C. keyCode
- D. shiftKey
答案：C keyCode 表示按下的键码。
20.4 事件委托
事件委托（事件代理）：利用事件冒泡原理，把事件绑定在父级元素上，通过 e.target 判断真正触发的子元素。优点：减少事件注册、可以为将来（动态添加）的元素绑定事件。
例题事件代理的基本应用是？
- A. 把事件绑定在父级
- B. 把事件绑定在子级
- C. 把事件绑定在自身
- D. 只能绑定在body上
答案：A 绑定在父级。
例题以下对事件委托描述错误的是？
- A. 把事件加到父级上
- B. 通过target获取真正触发元素
- C. 会降低性能
- D. 利用冒泡原理
答案：C 事件委托提升性能，不是降低。
例题（多选）事件代理的优点有？
- A. 可以为将来的元素绑定事件
- B. 减少事件注册
- C. 精简页面结构
- D. 不需要冒泡
答案：AB 减少注册、支持未来元素；它需要冒泡（D错）。
20.5 常见事件
| 分类 | 事件 | 触发时机 |
|---|---|---|
| 鼠标事件 | onclick | 单击 |
onmouseover | 鼠标移入（悬停） | |
onmouseout | 鼠标移出 | |
onmousedown | 鼠标按下 | |
contextmenu | 右键菜单 | |
| 键盘事件 | onkeydown | 键按下 |
onkeypress | 键按下并释放 | |
onkeyup | 键释放 | |
| 表单/页面事件 | onchange | 内容改变（域内容变化） |
onfocus | 获得焦点 | |
onblur | 失去焦点 | |
onsubmit | 表单提交 | |
| 窗口事件 | onload | 页面/资源加载完成 |
onunload | 页面关闭/卸载 | |
onresize | 窗口尺寸改变 |
易错 ①
onblur 是失去焦点（不是获得焦点，获得焦点是 onfocus）；② keydown 是键盘事件，不是鼠标触发；③ onkeypress 是键按下并释放时触发；④ 打开网页自动播放音乐用 onload；⑤ 网页关闭时弹框用 onunload；⑥ 窗口尺寸变化触发 onresize；⑦ onpressbutton 不是网页事件。例题下面有关JavaScript常见事件触发情况的描述错误的是？
- A. onchange：用户改变域的内容
- B. onkeypress：某个键盘的键被按下或按住
- C. onmousedown：某个鼠标按键被按下
- D. onblur：元素获得焦点
答案：D onblur 是失去焦点，onfocus 才是获得焦点。
例题下列事件哪个不是由鼠标触发的事件？
- A. click
- B. contextmenu
- C. mouseout
- D. keydown
答案：D keydown 是键盘事件。
例题（判断）keydown是由鼠标触发的事件。
答案：错 keydown 是键盘事件。
例题下列选项中，（ ）不是网页中的事件。
- A. onclick
- B. onmouseover
- C. onsubmit
- D. onpressbutton
答案：D 没有 onpressbutton 事件。
例题在键盘上的某个键被按下并且释放时触发的事件是？
- A. onkeypress
- B. onkeydown
- C. onkeyup
- D. onkey
答案：A onkeypress 按下并释放。
例题当浏览器窗口发生尺寸变化时，会触发下面哪个事件？
- A. onscroll
- B. onresize
- C. onload
- D. onerror
答案：B onresize。
例题当文档和其所有外部资源完全加载并显示给用户时就会触发的事件是？
- A. scroll
- B. unload
- C. focus
- D. load
答案：D load 加载完成。
例题打开网页时，自动播放音乐，需要借助哪种网页事件？
- A. onLoad
- B. onUnLoad
- C. onClick
- D. onMouseOver
答案：A onload 页面加载完成。
例题在网页被关闭之后，弹出了警告消息框，通过下面哪种事件可以实现？
- A. onLoad
- B. onUnLoad
- C. onClick
- D. onReset
答案：B onunload 页面卸载（关闭）。
例题设置导航栏图像时，鼠标滚动到图像上方图像变化，通过哪个事件实现？
- A. onMouseOver
- B. onMouseOut
- C. onClick
- D. onLoad
答案：A onmouseover 鼠标悬停。
例题HTML代码<body onUnLoad=window.close()>中的close()在什么情况下被执行？
- A. 单击鼠标
- B. 网页启动
- C. 网页关闭
- D. 鼠标悬停
答案：C onunload 在网页关闭时触发。
例题在HTML页面中，当按下键盘上的任意一个键时都会触发（ ）事件。
- A. onFocus
- B. onBlur
- C. onSubmit
- D. onKeyDown
答案：D onkeydown 键盘按下。
例题（判断）JavaScript中onchange事件在用户改变域的内容时触发。
答案：对
20.6 冒泡与不冒泡事件
考点 不支持冒泡的事件：resize、blur、mouseleave、focus、mouseenter 等；支持冒泡的事件：click、scroll、keypress、mouseover、mouseout 等。
例题（多选）下列哪些事件不支持冒泡？
- A. resize
- B. click
- C. blur
- D. mouseleave
答案：ACD resize/blur/mouseleave 不冒泡；click 冒泡。
例题（多选）以下哪些事件支持冒泡？
- A. mouseenter
- B. scroll
- C. focus
- D. keypress
答案：BD scroll/keypress 冒泡；mouseenter/focus 不冒泡。
20.7 表单事件应用
例题如果需要在页面提交时，弹出一个确认提交信息框，应使用的语句？
答案：<form onsubmit="return confirm('确认提交吗？')"> 用 onsubmit 配合 confirm。
例题（多选）页面上有文本框和类样式"change"，能实现鼠标移动到文本框时改变边框样式的选项？
- A. onmouseover="className='change'"
- B. onmouseover="this.className='change'"
- C. onmouseover="this.style.color..."
- D. onmouseover="this.style.border..."
答案：BD 改变边框样式用 this.className 或 this.style.border。
例题当鼠标指针移到页面上的某个图片上时，图片出现一个边框，并且图片放大，这是因为触发了下面的（ ）事件。
- A. onclick
- B. onmouseover
- C. onmouseout
- D. onmousedown
答案：B
例题下面（ ）不是鼠标键盘事件
- A. onclick事件
- B. onmouseover事件
- C. oncut事件
- D. onkeydown事件
答案：C
例题在HTML文档中包含如下超链接，要实现当鼠标移入该链接时，超链接文本大小变为30px，下列选项中编码正确的是（ ）
- A. <a href="#" onmouseover="this.style.fontSize='30px'">注册</a>
- B. <a href="#" onmouseout="this.style.fontsize=30px">注册</a>
- C. <a href="#" onmouseover="this.style.font-size='30px'">注册</a>
- D. <a href="#" onmouseout="this.style.font-size=30px">注册</a>
答案：A
例题在HTML页面中包含一个按钮控件mybutton，如果要实现单击该按钮时调用自定义的JavaScript函数compute()，要编写的HTML代码是（ ）
- A. <input name="mybutton" type="button" onBlur="compute()" value="计算">
- B. <input name="mybutton" type="button" onFocus="compute()" value="计算">
- C. <input name="mybutton" type="button" onClick="function compute()" value="计算">
- D. <input name="mybutton" type="button" onClick="compute()" value="计算">
答案：D
例题执行以下程序，要求当用户点击按钮1秒后禁用按钮，以下选项的做法，不符合要求的是（）/*<button>点击</button><script> var btn =document.querySelector('button');</script>*/
- A. btn.onclick = function(){ var that = this; setTimeout(function(){that.disabled = true;},1000)
- B. btn.onclick = function(){ setTimeout(function(){this.disabled = true;},1000)
- C. btn.onclick = function(){ setTimeout(()=>{ this.disabled = true; },1000)
- D. btn.onclick = function(){ setTimeout(function(){this.disabled = true;}.bind(this),1000)
答案：B
例题HTML代码“<body onUnLoad=window.close()></body>”中的方法close()在_____。情况下会被执行。
- A. 单击鼠标
- B. 网页启动
- C. 网页关闭
- D. 鼠标悬停
答案：C
例题浏览网页时，当网页被显示时首先会触发下列哪一个事件_____。
- A. onClick
- B. onUnload
- C. onReset
- D. onLoad
答案：D
21Canvas 绘图
21.1 Canvas 基础
<canvas> 是 HTML5 画布，用 JS 绘图。先获取 2d 上下文：
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");21.2 绘图方法
| 方法/属性 | 作用 |
|---|---|
fillRect(x,y,w,h) | 绘制填充矩形 |
strokeRect(x,y,w,h) | 绘制描边（轮廓）矩形 |
clearRect(x,y,w,h) | 清除矩形区域 |
beginPath() | 开始新路径（不绘制路径，只是开始） |
moveTo(x,y) | 定义路径起点（不绘制线） |
lineTo(x,y) | 定义线的终点 |
stroke() | 描边路径（绘制线条） |
fill() | 填充路径 |
lineWidth | 线条宽度（属性，需在 stroke() 前设置） |
fillStyle / strokeStyle | 填充/描边颜色 |
题库纠错（重要） 题库中"在Canvas对象中，strokeRect()方法可以绘制'填充的'矩形"标答案为"对"，这是错误的！正确知识：
fillRect() 绘制填充矩形，strokeRect() 绘制描边（空心）矩形。请按正确知识记忆。题库纠错 ① "beginPath()方法开始并绘制一条新路径"标"对"错，beginPath 只是开始路径，不绘制；② "moveTo()定义线的起点并绘制一条新路径"标"对"错，moveTo 只移动光标定义起点，不绘制线。
例题（判断）在Canvas中，lineWidth属性定义线条宽度，且必须在调用stroke()方法之前设置。
答案：对 需在 stroke 前设置。
例题（判断）在Canvas中，fillRect()方法可以绘制"填充的"矩形。
答案：对 fillRect 绘制填充矩形。
例题（判断）在Canvas中，strokeRect()方法可以绘制"填充的"矩形。
答案：错 strokeRect 绘制描边矩形（空心），填充矩形是 fillRect。
题库纠错 原题库此题答案标为"对"，是错误的，正确答案应为"错"。
例题（判断）在Canvas中，beginPath()方法开始并绘制一条新路径。
答案：错 beginPath 只开始路径，不绘制。
题库纠错 原题库标"错"，正确（beginPath 不绘制）。
例题（判断）在Canvas中，moveTo()定义线的起点并绘制一条新路径。
答案：错 moveTo 只定义起点，不绘制线。
例题（多选）Canvas 有多种方法用于绘制以下哪些元素（ ）？
- A. 路径
- B. 添加图像
- C. 文本
- D. 方框
答案：ABCD
例题（多选）Canvas 有多种方法用于绘制以下哪些元素（ ）？
- A. 线性渐变
- B. 方框
- C. 圆形
- D. 文本
答案：ABCD
例题（判断）<canvas> 元素只是图形的容器。您必须使用 JavaScript 来实际绘制图形。
答案：对
例题（判断）Canvas 是 HTML 页面上的一个矩形区域。默认情况下，Canvas 没有边框和内容。
答案：对
A附录 A · 全知识点速记表
A.1 HTML/CSS 速记
| 知识点 | 速记 |
|---|---|
| 根节点 | <html>，head存元信息不显示，body显示 |
| head 内标签 | title/meta/link/style/script |
| 节点类型 | 元素(1)/文本(3)/属性(2)，无样式节点 |
| 文本标签 | p段落、sub下标sup上标、strong/b加粗、em/i斜体、del删除线 |
| 列表 | ul无序(disc/circle/square)、ol有序(type)、dl自定义(图文混排) |
| 表格 | table/tr/td/th，cellpadding内填充、cellspacing间距 |
| 表单 | textarea文本域、select下拉、input各种type |
| 图片 | img用src/alt，无href无color |
| 浮动框架 | iframe |
| 路径 | 绝对(完整地址)、相对(当前文件)；target:_blank新窗/self当前 |
| CSS引入 | 行内style、内嵌head、外链.css |
| 选择器 | 类.、ID#、标签、通配*、后代空格、并集逗号、伪类:hover等 |
| 文本属性 | text-align(无both)、font-style(无bold)、line-height行高 |
| 颜色 | #FF0=黄、#0F0=绿、#00F=蓝；rgb/hsl/十六进制/颜色名 |
| 单位 | 相对:em/ex/%；绝对:px/pt/mm |
| 盒模型 | margin/border/padding/content；简写顺时针上右下左 |
| float | left/right/none(无both) |
| clear | left/right/both/none/inherit(有both) |
| position | static默认/relative留位/absolute脱流/fixed固定(无none) |
| display | block/inline/inline-block/none隐藏 |
| Flex | 容器display:flex；flex=grow+shrink+basis；flex-flow=direction+wrap |
| 媒体查询 | @media检查视口/设备/分辨率/横竖屏 |
A.2 JavaScript 速记
| 知识点 | 速记 |
|---|---|
| 文件 | .js，<script>引入，;结束 |
| 输出 | alert警告/confirm确认/prompt输入/console.log控制台 |
| 变量 | var/let/const；字母_$开头、区分大小写、不用关键字 |
| 类型 | number/string/boolean/undefined/null/object(无float) |
| typeof | 返回字符串；数组=object、null=object、function=function、NaN=number |
| typeof typeof x | 永远是"string" |
| parseInt | 取整遇非数字停，parseInt("15.6a")=15 |
| NaN | number类型；NaN≠NaN；用isNaN判断 |
| +规则 | 有字符串则拼接；-*/转数字 |
| ==vs=== | ==转类型；===不转；undefined==null为true |
| 假值 | false/0/""/null/undefined/NaN（6个） |
| ++前后 | ++a先加后用；a++先用后加 |
| 逻辑 | &&找假返回、||找真返回、!取反返回布尔 |
| switch | 无break穿透；break跳出、continue跳过 |
| do-while | 至少执行一次 |
| 函数 | 声明提升、表达式不提升；无return返回undefined |
| 传递 | 基本类型值传递、引用类型引用传递 |
| var提升 | "先用后声明"=undefined |
| var a=b=1 | b成全局变量 |
| 数组 | alert输出"1,2,3"；length属性非方法；可变、类型可不同 |
| 改变原数组 | push/pop/shift/unshift/sort/reverse/splice |
| 不改变 | concat/slice/join/indexOf/toString |
| sort | 默认按字符串编码排序 |
| 字符串 | length属性；indexOf找不到-1；substring含头不含尾；trim去空白 |
| 对象 | {}或new Object；属性逗号、键值冒号；访问.或[]不用{} |
| 遍历对象 | for...in |
| Math.round | 正数.5进一，负数.5向0(11.5→12,-11.5→-11) |
| Math.ceil | 向上取整(ceil(-3.14)=-3) |
| Date | getMonth()返回0~11需+1；getDate()返回日；new Date()当前 |
A.3 DOM/BOM/事件 速记
| 知识点 | 速记 |
|---|---|
| 获取元素 | getElementById(单个Object)/getElementsByTagName(s多个) |
| 返回类型 | getElementById返回Object |
| 父节点 | element.parentNode(属性不带括号) |
| 创建节点 | createElement/cloneNode(true深复制) |
| 内容 | innerHTML可解析HTML、innerText纯文本 |
| 样式 | style.驼峰(backgroundColor) |
| BOM根 | window是根；location地址/history历史/navigator浏览器 |
| 定时器 | setTimeout一次/setInterval重复；单位毫秒；clear清除 |
| 事件流 | 捕获→目标→冒泡 |
| addEventListener | 事件不带on(click)、可多个、第三参数true捕获 |
| e.target | 触发事件的元素（真正的） |
| 阻止默认 | preventDefault |
| 阻止冒泡 | stopPropagation |
| 事件委托 | 绑定父级，利用冒泡，e.target判断 |
| onblur | 失去焦点（onfocus才获得） |
| 不冒泡 | resize/blur/mouseleave/focus/mouseenter |
| Canvas | fillRect填充/strokeRect描边/beginPath开始不绘制/moveTo起点不画线 |
B附录 B · 期末备考指南
B.1 高频考点 TOP 20
- typeof 数组/object → "object"；typeof null → "object"；typeof typeof x → "string"
- NaN：number类型，NaN≠NaN，用 isNaN 判断
- 隐式转换："10"+3="103"，"10"+3-"1"=102，"hi"-1=NaN
- ==/===：1=="1"为true，1==="1"为false，undefined==null为true
- 6 个假值：false/0/""/null/undefined/NaN
- ++前后置：k++ + k + ++k + k（k=1）=9
- 逻辑运算符：1&&2=2（返回操作数），(2==true)+1=1
- switch 穿透：无 break 继续执行
- var 提升：函数内 var 声明提升致 undefined
- var a=b=1：b 成全局变量
- 数组方法：concat 不改变原数组；pop 会改变；sort 默认按字符串
- splice/slice：splice 改变原数组返回删除项；slice 不改变返回副本
- Math.round 负数：round(-11.5)=-11（向0），round(11.5)=12
- Date.getMonth：返回 0~11，需 +1
- getElementById 返回 Object
- 事件流：捕获→目标→冒泡
- addEventListener：不带 on，可多个，第三参数 true=捕获
- e.target：触发事件的元素
- 事件委托：绑父级，利用冒泡
- float/clear：float 无 both，clear 有 both
B.2 题库纠错清单（务必按正确知识记忆）
以下题目原答案有误，已按正确知识整理：
- "em是相对长度单位"→原答案"错"，正确：对（em/ex/% 是相对单位）
- "%是绝对长度单位"→原答案"对"，正确：错（% 是相对单位）
- "strokeRect()绘制填充矩形"→原答案"对"，正确：错（strokeRect 描边，fillRect 才填充）
- "beginPath()开始并绘制新路径"→原答案"对"应"错"（beginPath 只开始不绘制）
- "moveTo()定义起点并绘制新路径"→原答案"对"应"错"（moveTo 只定义起点不画线）
B.3 答题技巧
单选题技巧：
- 遇到代码运算题：逐步代入，注意类型转换（+拼接、-*/转数字）
- 遇到数组方法题：先判断是否改变原数组，再看返回值
- 遇到 typeof 题：数组/null→object，函数→function，其余按类型
- 遇到 ++ 题：从左到右，前置先加后用、后置先用后加
- 遇到作用域题：先找 var 提升，再判断全局/局部
多选题技巧：注意"不正确的是""属于的是"等否定词，逐项判断。
判断题技巧：绝对化表述（"必须""不能"）多为错；注意细节（如 onblur 是失去不是获得）。
B.4 复习路线建议
3 天速成路线（零基础）：
- 第 1 天：第1-8章（HTML+CSS）。重点：文档结构、常用标签、选择器、盒模型、定位、Flex。背速记表 A.1。
- 第 2 天：第9-17章（JavaScript 核心）。重点：数据类型、类型转换、运算符、函数作用域、数组方法、Math/Date。把所有例题代码在浏览器控制台跑一遍。背速记表 A.2。
- 第 3 天：第18-21章（DOM/BOM/事件/Canvas）+ 附录。重点：获取元素、事件流、addEventListener、事件委托。看高频考点 TOP20 和纠错清单。
冲刺前 1 小时：只看附录 A 速记表 + 附录 B 高频考点 + 纠错清单。
全文总结
本知识库收录 494 道专业课题库全部题目，覆盖 Web基础→HTML/HTML5→CSS→JavaScript→DOM/BOM→事件→Canvas 完整知识体系。HTML5 跨平台开发的核心是：用 HTML 描述结构、CSS 控制表现、JavaScript 实现行为，三者分离又协作。掌握数据类型与类型转换、数组方法、作用域与闭包、DOM操作、事件流这五大核心，即可应对绝大部分考题。祝期末顺利！