Web教材课后习题+补充题全答案解析

何为北之北2025-12-272025-12-27

第一章

1. 选择题

(1) HTML 是一种（）语言。

A. 编译型
B. 超文本标记
C. 高级程序设计
D. 面向对象的编程

答案：B
解析： HTML 的全称是 HyperText Markup Language，即“超文本标记语言”。它不是一种编程语言（如 C、Java），而是一种用于描述网页结构的标记语言。

(2) 世界上第一个网页是（）。

A. http://www.w3c.org
B. http://info.cern.ch
C. http://www.microsoft.com
D. http://www.baidu.com

答案：B
解析： 世界上第一个网站由万维网发明人蒂姆·伯纳斯-李于 1991 年在欧洲核子研究组织（CERN）发布，地址是 http://info.cern.ch。

(3) 访问 FTP 站点使用的协议类型是（）。

A. http
B. ftp
C. https
D. mailto

答案：B
解析：
- FTP (File Transfer Protocol) 是文件传输协议，用于访问 FTP 站点。
- HTTP/HTTPS 是超文本传输协议，用于访问网页。
- mailto 是用于发送电子邮件的伪协议。

(4) 下列不是开发 HTML 网页的软件是（）。

A. EditPlus
B. NotePad
C. TextPad
D. Visual BASIC

答案：D
解析：
- EditPlus、NotePad (记事本)、TextPad 都是文本编辑器，可以用来编写 HTML 代码。
- Visual BASIC 是微软开发的一种可视化编程环境，主要用于开发 Windows 桌面应用程序（如 .exe 程序），虽然理论上可以处理文本，但它不属于网页开发工具的范畴。

(5) 设计 JavaScript 语言的公司是（）。

A. Netscape
B. Microsoft
C. Sun
D. Google

答案：A
解析： JavaScript 最早由 Brendan Eich 在 Netscape (网景) 公司设计，最初命名为 LiveScript，后为了借助 Java 的热度改名为 JavaScript。（注：Sun 公司是 Java 的开发者，Microsoft 后来推出了 JScript）。

2. 填空题

(1) HTML 文档是由 ______ 构成的 ______ 文件。

答案：HTML 标签（或元素）；文本（或纯文本）
解析： HTML 并不是二进制文件，它是由一系列标签（Tags）组成的纯文本文件，可以通过任何文本编辑器打开。

(2) 世界上第一个网站的发明人是 ______。

答案：蒂姆·伯纳斯-李 (Tim Berners-Lee)
解析： 他被誉为“万维网之父”。

(3) 从 IE 浏览器菜单中选择 ______ 命令，可以在打开的记事本中查看网页的源代码。

答案：查看源文件 (View Source) / 审查元素（这个也行）
解析： 在老版本的 IE 浏览器中，点击“查看(View)”菜单下的“源文件(Source)”通常会直接调用系统的“记事本”程序来显示 HTML 代码。

(4) 列出常用的 Web 前端开发工具（三个以上）、、______。

答案：VS Code, WebStorm, HBuilderX (或 Sublime Text, Dreamweaver, Atom)
解析： 目前最主流的是 VS Code 和 WebStorm。HBuilderX 在国内也有一定用户群。

(5) HTML 的全称是 ______。URL 的全称是 ______。CSS 的全称是 ______。AJAX 的全称是 ______。

答案：
- HTML: HyperText Markup Language (超文本标记语言)
- URL: Uniform Resource Locator (统一资源定位符)
- CSS: Cascading Style Sheets (层叠样式表)
- AJAX: Asynchronous JavaScript and XML (异步 JavaScript 和 XML)

(6) 列出常用的主流网络浏览器（三个以上）、、______。

答案：Google Chrome, Mozilla Firefox, Microsoft Edge (或 Apple Safari, Opera)
拓展： 目前 Chrome 占据市场份额最大，Edge 和 Chrome 都基于 Chromium 内核。

3. 简答题

(1) 简述 Web 的工作原理。

答案：
Web 的工作基于 B/S（浏览器/服务器） 模式，其基本流程如下：

请求： 用户在浏览器（客户端）地址栏输入 URL 或点击链接，浏览器通过 HTTP/HTTPS 协议向 Web 服务器发送请求。
处理： Web 服务器接收到请求后，查找并处理相应的资源（如 HTML 文件、图片或运行服务器端脚本）。当然，访问应用系统（说人话就是一些比较深度的东西，比如账号密码）的时候，Web会把控制权交给应用服务器，发送数据查询请求给应用服务器，接收由应用系统传来的响应。
响应： 服务器将处理结果（通常是 HTML 代码）封装在 HTTP 响应中回传给浏览器。
渲染： 浏览器接收到响应内容，解析 HTML、CSS 和 JavaScript，将网页渲染并显示给用户。

解析：
核心在于理解 “请求-响应” 模型。浏览器充当客户端，负责向服务器索要数据并展示；服务器负责存储数据和响应请求。它们之间通过网络（Internet）连接，遵循 HTTP 协议。

(2) Web 具有哪些特点？

答案：
Web 主要具有以下特点：

图形化和多媒体性： 不仅支持文本，还能展示图像、音频、视频等多种媒体形式。
超文本链接（Hypertext）： 通过超链接将不同页面或资源互联，使用户可以非线性地浏览信息。
分布性： Web 资源分布在世界各地不同的服务器上，通过 URL 统一寻址。
跨平台性： 只要有浏览器，无论是在 Windows、Mac 还是 Linux 操作系统上，都能访问 Web。
交互性： 用户不仅是信息的接收者，也可以通过表单、动态脚本与服务器进行数据交换。

解析：
Web 成功的关键在于它打破了信息的孤岛（通过超链接）以及系统的界限（通过跨平台浏览器）。

(3) 写出 URL 的格式，并说明它的组成及作用。

答案：
作用： URL（Uniform Resource Locator）即统一资源定位符，用于在互联网上唯一地标识和定位一个资源（如网页、图片、文件）。

格式：
通常格式为：协议://主机名[:端口号]/路径/文件名

组成说明：

协议 (Protocol)： 指定使用的传输协议，如 http 或 https。
主机名 (Hostname)： 存放资源的服务器域名（如 www.baidu.com）或 IP 地址。
端口号 (Port)： （可选）服务器监听的端口，HTTP 默认 80，HTTPS 默认 443，省略时使用默认值。
路径 (Path) 和文件名： 资源在服务器文件系统中的具体位置。

解析：
例如在 http://www.example.com/index.html 中：

http 是协议
www.example.com 是主机名
/index.html 是路径和文件名

(4) 分别说明 HTML、CSS、JavaScript 在 Web 网页设计中的作用。

答案：
这三者构成了前端开发的“铁三角”，各司其职：

HTML (结构)： 负责网页的骨架和内容。它定义了网页上有哪些元素（如标题、段落、图片、表格）。
CSS (表现)： 负责网页的样式和布局。它决定了 HTML 元素长什么样（如颜色、字体、大小、位置、背景）。
JavaScript (行为)： 负责网页的交互和动态效果。它控制网页的行为（如点击按钮弹出提示、轮播图切换、表单验证、数据请求）。

解析：
可以用一个形象的比喻来记忆：

HTML 是一个人的骨骼和肌肉（决定了是不是一个人）。
CSS 是人的衣服和化妆（决定了这个人好不好看）。
JavaScript 是人的灵魂和动作（决定了这个人能不能动、能不能交流）。

第二章

1. 选择题

(1) 下列标记用于设置页面标题的标记是（）。

(A) <caption>
(B) <title>
(C) <html>
(D) <head>

答案：(B)
解析： <title> 标记位于 <head> 内部，用于定义浏览器工具栏或标签页上显示的标题。<caption> 是表格标题标记，用于定义表格的标题。

(2) 下列标记中能够显示网页内容的标记是（）。

(A) <title>
(B) <br>
(C) <html>
(D) <body>

答案：(D)
解析： <body> 元素定义文档的主体，包含文档的所有可见内容（如文本、图片、链接等）。<br> 是换行标签，虽然在内容中使用，但它本身不作为包含内容的容器。

(3) 正确表达页面注释格式的是（）。

(A)
(B) <-- 注释-->
(C) <! 注释>
(D) <! comment>

答案：(A)
解析： HTML 标准注释语法以结束。

(4) 以下属性中不是 meta 元信息标记的属性是（）。

(A) name
(B) color
(C) content
(D) http-equiv

答案：(B)
解析： <meta> 标签用于定义页面的元数据，常用属性有 name（描述数据名称）、content（描述数据内容）、http-equiv（模拟 HTTP 响应头）、charset（字符集）。color 不是 <meta> 的属性。

(5) 设置 body 显示信息颜色为红色的属性是（）。

(A) text
(B) color
(C) bgcolor
(D) background

答案：(A)
解析： 在 HTML 4.01（现已不推荐使用）中，<body> 标签的 text 属性用于设置文档中所有文本的默认颜色。bgcolor 设置背景颜色，background 设置背景图像。

(6) 以下标记不是成对标记的是（）。

(A) <html>
(B) <br>
(C) <body>
(D) <head>

答案：(B)
解析： <br> 是空元素（Void Element），用于换行，不需要结束标签。其他选项 <html>、<body>、<head> 都是成对出现的容器标签。

2. 填空题

(1) HTML 文档通常以 ______ 或 ______ 作为后缀名，网站的首页文件通常命名为 ______ 或 ______。

答案：.html；.htm；index.html；default.html
解析： .html 是标准扩展名，.htm 是为了兼容旧系统（DOS 8.3格式）。Web 服务器默认配置通常将 index.html 设为访问目录时加载的默认首页。

(2) HTML 文档是用来描述网页的，一般是由 ______ 和 ______ 两部分组成。

答案：头部 (head)；主体 (body)
解析： <html> 根标签内部主要包含 <head>（不可见元信息）和 <body>（可见内容）两部分。

(3) HTML 中标记分 ______ 标记和 ______ 标记两种。部分标记是单个标记，大多数标记是 ______ 标记，由 ______ 标记（或 ______ 标记）和 ______ 标记（或 ______ 标记）组成。

答案：单（或空）；双（或成对）；双（或成对）；开始；开放；结束；闭合
解析： HTML 标签分为“单标签”（如 <br>, <img>）和“双标签”（如 <p>...</p>）。双标签必须包含开始标签和结束标签。

(4) HTML4.01 或 XHTML1.0 的文档类型有三种，分别是 ______、______、______。HTML5 中文档类型定义使用标记正确的写法是 ______。

答案：Strict（严格型）；Transitional（过渡型）；Frameset（框架集型）；<!DOCTYPE html>
解析： HTML4 分为三种模式，HTML5 为了简化开发，统一使用简短的 <!DOCTYPE html> 声明。

3. 简答题

(1) 简述一个 HTML 文档包含几个基本标记。并举例说明。

答案： 一个标准的 HTML 文档包含几个基本结构标记：<html>（根元素）、<head>（头部）、<body>（主体。当然，最开始的文档声明也是。

举例：

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    这里是网页内容
  </body>
</html>

(2) 写出 HTML 文件命名规则。

答案：
1. 后缀名： 使用 .html 或 .htm。
2. 字符集： 只能包含英文字母（建议小写）、数字、下划线（_）和连字符（-）。
3. 禁止符： 文件名中不能包含空格及特殊字符（如 ?, *, /, \ 等）。
4. 语义化： 使用有意义的英文单词命名（如 contact.html），便于理解和 SEO。
5. 首页命名： 网站入口文件通常命名为 index.html。

第三章

1. 选择题

(1) 下列不是字体标记的属性的是（）。

(A) align
(B) size
(C) color
(D) face

答案：A
解析： <font> 标签（已废弃）的属性包括 size（大小）、color（颜色）和 face（字体）。align（对齐方式）通常是块级元素（如 <p>, <h1>, <div>）的属性，不属于行内元素 <font> 的属性。

(2) 关于标题字标记对齐方式，标记属性取值不正确的是（）。

(A) 居中对齐：<h1 align="middle">...</h1>
(B) 居右对齐：<h2 align="right">...</h2>
(C) 居左对齐：<h4 align="left">...</h4>
(D) 两端对齐：<h6 align="justify">...</h6>

答案：A
解析： HTML 中水平对齐属性 align 的取值通常为 left、right、center 和 justify。middle 通常用于垂直对齐属性（valign 或 CSS vertical-align），用于标题水平居中应该是 align="center"。

(3) 下列选项中表示字体标记的是（）。

(A) <body>
(B) <font>
(C) <br>
(D) <p>

答案：B
解析： <font> 是设置文本字体的标签（HTML5 中不推荐使用，建议用 CSS）。

(4) 下列选项中表示段落标记的是（）。

(A) <html>
(B) <boby>
(C) <p>
(D) <pre>

答案：C
解析： <p> 是 Paragraph 的缩写，用于定义段落。<pre> 是预格式化文本。

(5) 在 HTML 中，<h3></h3>是（）标记。

(A) 标题字
(B) 预格式化
(C) 换行
(D) 随意显示信息

答案：A
解析： HTML 提供了 <h1> 到 <h6> 六个等级的标题标记。

(6) 下列标记中，设置页面标题的标记是（）。

(A) <title>
(B) <caption>
(C) <head>
(D) <html>

答案：A
解析： <title> 定义网页标题，显示在浏览器标签页上。<caption> 是表格标题。

(7) 下列标记中表示单个标记的是（）。

(A) body 标记
(B) br 标记
(C) html 标记
(D) title 标记

答案：B
解析： <br>（换行）是空元素，不需要闭合标签，属于单个标记。其他选项均为成对标记。

(8) <title></title>标记是放在（）标记内。

(A) <pre>
(B) <head>
(C) <body>
(D) </head><body>

答案：B
解析： 页面元数据（包括标题）都放置在 <head> 区域内。

(9) 下列选项中表示版权符号的是（）。

(A) <
(B) >
(C) ®
(D) ©

答案：D
解析：
- < 是 < (less than)
- > 是 > (greater than)
- ® 是 ® (注册商标)
- © 是 © (版权)

(10) HTML 中<hr>的作用是（）。

(A) 插入一条水平分隔线
(B) 换行
(C) 插入一个空格
(D) 加粗字体

答案：A
解析： <hr> (Horizontal Rule) 用于创建一条水平线，在视觉上分隔内容。

2. 填空题

(1) HTML 网页文件的主体标记是 ______，设置页面标题的标记是 ______。

答案：<body>；<title>
解析： 页面可见内容在 <body> 中，浏览器标签栏标题在 <title> 中。

(2) 一个 HTML 文档的开始标记是 ______；结束标记是 ______。

答案：<html>；</html>
解析： 这是 HTML 文档的根元素。

(3) 设置文档标题以及其他不在 Web 网页上显示的信息的开始标记是 ______；结束标记是 ______。

答案：<head>；</head>
解析： 头部分包含元数据、样式、脚本链接等，不直接显示在页面内容区域。

(4) 网页中可显示的信息是包含在以 ______ 为开始标记，以 ______ 为结束标记之间。

答案：<body>；</body>
解析： 即文档主体。

(5) 网页标题会显示在浏览器的标题栏中，则网页标题可使用 ______ 标记来定义。

答案：<title>
解析： 位于 <head> 内部。

(6) 与标记 <b></b> 功能相同的标记是 ______；与标记 <i></i> 功能相同的标记是 ______。

答案：<strong>；<em>
解析：
- <b> 和 <strong> 都显示为粗体，但 <strong> 具有“强调”的语义。
- <i> 和 <em> 都显示为斜体，但 <em> 具有“强调”的语义。

(7) ______ 标记是由一个或多个需要解释/发音的字符和一个提供该信息的 ______ 标记组成，还包括可选的 ______ 标记，定义当浏览器不支持 ruby 标记时显示的内容。

答案：<ruby>；<rt>；<rp>
解析： 这是 HTML5 的注音标记。
- <ruby>：容器。
- <rt> (ruby text)：注音文本。
- <rp> (ruby parenthesis)：防备标记，用于在不支持 ruby 的浏览器中显示括号。

3. 简答题

(1) 简述格式化文本标记分几类，并举例说明。

答案：
HTML 文本格式化标记通常可以分为两类：
1. 物理样式标记（Visual/Physical styles）： 仅告诉浏览器如何显示文本的外观，没有特定的语义。
  - 举例：<b> (加粗), <i> (斜体), <u> (下划线), <s> (删除线), <font> (字体设置), <sup> (上标), <sub> (下标)。
2. 逻辑样式标记（Logical/Semantic styles）： 描述文本的逻辑含义或属性，浏览器根据含义来渲染（通常也是粗体或斜体），更有利于 SEO 和辅助阅读设备。
  - 举例：<strong> (强调，通常加粗), <em> (强调，通常斜体), <ins> (插入内容，通常下划线), <del> (删除内容，通常删除线), <code> (代码), <cite> (引用)。

(2) 简述有哪些段落与排版标记及其作用。

答案：
常用的段落与排版标记包括：
1. <p> (Paragraph)： 定义一个段落，段落之间会有默认的垂直间距。
2. <br> (Break)： 强制换行，不产生新段落。
3. <hr> (Horizontal Rule)： 插入一条水平分隔线。
4. <pre> (Preformatted Text)： 预格式化文本，保留源代码中的空格和换行符，通常用等宽字体显示。
5. <div> (Division)： 块级容器，用于布局和组合其他元素，本身无特定外观，常配合 CSS 使用。
6. <blockquote>： 定义长引用，浏览器通常会对其进行缩进处理。
7. <center> (已废弃)： 将内容居中显示（HTML5 建议使用 CSS text-align: center）。

第四章

1. 选择题

(1) 下列 HTML 标记中，属于非成对标记的是（）。

(A) <ol>
(B) <ul>
(C) <meta>
(D) <font>

答案：(C)
解析： <meta> 是单标签（空元素），不需要闭合。<ol>、<ul>、<font> 都是成对标签，必须有开始和结束标签。

(2) 下列标记中可以定义有序列表的标记是（）。

(A) <dl></dl>
(B) <ol></ol>
(C) <ul></ul>
(D) <dd></dd>

答案：(B)
解析： <ol> 是 Ordered List（有序列表）的缩写；<ul> 是 Unordered List（无序列表）；<dl> 是 Definition List（定义列表）。

(3) 定义列表中项目描述使用的标记是（）。

(A) <dl></dl>
(B) <dd></dd>
(C) <dt></dt>
(D) <li></li>

答案：(B)
解析： 在定义列表中，<dl> 定义列表整体，<dt> (Definition Term) 定义术语/项目名称，<dd> (Definition Description) 定义对术语的描述或解释。

(4) 无序列表的 type 属性默认值是（）。

(A) circle
(B) square
(C) disc
(D) line

答案：(C)
解析： 无序列表 <ul> 的默认样式是实心圆点，即 disc。circle 是空心圆，square 是实心方块。

(5) 有序列表的编号种类有（）个。

(A) 3
(B) 4
(C) 1
(D) 5

答案：(D)
解析： <ol> 的 type 属性支持 5 种编号样式：
1. 1 (数字，默认)
2. a (小写字母)
3. A (大写字母)
4. i (小写罗马数字)
5. I (大写罗马数字)

2. 填空题

(1) 在 HTML 文件中，ul 标记之间必须使用 <li></li> 标记的作用是 ______。

答案：定义列表项 (或定义列表中的具体项目)
解析： <ul> 仅定义列表的容器，具体的每一个点（项目）必须包裹在 <li> (List Item) 标签中。

(2) 在 HTML 文件中，常用的列表有 ______、______ 及定义列表。

答案：有序列表；无序列表
解析： HTML 中三大列表类型：有序 (<ol>)、无序 (<ul>) 和定义列表 (<dl>)。

(3) 设置有序列表的 ______ 属性可以改变编号的起始值，该属性值的类型是 ______，表示从哪一个数字或字母开始编号。设置列表项的 ______ 属性后可以使该项目前面的编号发生变化，但后续的列表项前面的编号类型仍遵循原来的编号规则，只是顺序发生了改变。

答案：start；数字 (或整数)；value
解析：
- <ol start="3"> 表示列表从第 3 个序号开始（如果是数字就是 3，如果是字母就是 c）。
- <li value="5"> 表示强行指定当前列表项的序号为 5，后续项会从 5 接着往下排。

3. 简答题

(1) 简述列表类型及常用列表有哪些。

答案：
HTML 中主要有三种列表类型：
1. 无序列表 (<ul>)： 列表项之间没有顺序关系，通常用圆点标记。
2. 有序列表 (<ol>)： 列表项之间有顺序关系，使用数字或字母标记。
3. 定义列表 (<dl>)： 用于展示“术语”和“定义”的对应关系，包含 <dt>（术语）和 <dd>（描述）。

(2) 简述定义列表与无序列表、有序列表的差异。

答案：
- 结构差异： 无序和有序列表都是简单的单层级结构，每一项都用 <li> 标记。而定义列表是双层级结构，包含“标题/术语” (<dt>) 和“内容/解释” (<dd>) 两个部分，类似于字典的排版。
- 语义差异： 无序/有序列表用于罗列并列或递进的项目；定义列表用于解释名词或展示键值对数据。

(3) 简述无序列表与有序列表外在表现的差异。

答案：
- 无序列表： 默认在每一项前面显示一个图形符号（如实心圆点、空心圆、方块），不体现顺序的先后。
- 有序列表： 默认在每一项前面显示序号（如 1, 2, 3 或 A, B, C），体现了排列的先后顺序或等级。

第五章

1. 选择题

(1) 下列电子邮件链接格式正确的是（）。

(A) <a href="mailto:xxx.com.cn?subject=你好！">...</a>
(B) <a href="mailto:xxx@.net?subject=你好！">...</a>
(C) <a href="mailto:xxx@com?subject=你好！">...</a>
(D) <a href="mailto:xxx@xxx.com?subject=你好！">...</a>

答案：(D)
解析： mailto: 协议后必须跟合法的电子邮件地址，格式为 用户名@域名。
- (A) 缺少 @ 符号。
- (B) 域名部分缺少主机名（如 google），.net 是顶级域。
- (C) 域名不完整，com 只是后缀。
- (D) xxx@xxx.com 符合标准邮箱格式。

(2) 当链接指向（）文件时，不打开该文件，而是提供给浏览器下载。

(A) ASP
(B) HTML
(C) ZIP
(D) CGI

答案：(C)
解析：
- ZIP/RAR/EXE 等文件类型通常会被浏览器识别为下载资源。
- HTML/ASP/CGI 等通常会被浏览器直接解析、执行或显示页面内容。

(3) 下列选项中不是超链接的 target 属性取值的是（）。

(A) _self
(B) _new
(C) _blank
(D) _top

答案：(B)
解析： HTML 中 target 属性的 4 个保留关键字（Standard Reserved Names）是：
- _self（默认，当前窗口打开）
- _blank（新窗口/新标签页打开）
- _parent（父框架打开）
- _top（整个窗口打开，取消所有框架）
- 虽然 _new 也可以作为自定义的框架名称使用，但它不是标准的保留关键字。

(4) 在网页中，能够定义超链接的标记是（）。

(A) <link>...</link>
(B) <h1>...</h1>
(C) <a>...</a>
(D) <ul>...</ul>

答案：(C)
解析： <a> 标签（Anchor，锚）用于定义超链接。<link> 标签用于链接外部资源（如 CSS），且通常放在 <head> 中，不是点击跳转的超链接。

(5) <img>标记中规定图像 URL 的属性是（）。

(A) href
(B) src
(C) type
(D) align

答案：(B)
解析： <img> 标签使用 src (Source) 属性指定图片的路径。href 是 <a> 标签用于指定链接目标的属性。

(6) 在 HTML 中，要定义一个书签链接应该使用的语句是（）。

(A) <a href="#book1">text</a>
(B) <a name="book1">text</a>
(C) <a target="#book1">text</a>
(D) <a link="#book1">text</a>

答案：(A)
解析： 题目问的是“定义一个书签链接”（即点击后跳转的链接）。
- (A) href="#book1" 表示链接到本页面的 ID 或 Name 为 book1 的位置，这是正确的链接写法。
- (B) name="book1" 是定义书签（锚点）本身的位置，而不是点击跳转的链接。
- (注：虽然部分教材表述可能有歧义，但从“链接”二字判断，A 为最佳答案。)

(7) 在 body 中插入浮动框架正确语句是（）。

(A) <body><iframe src="" name="rightframe">...</iframe></body>
(B) <body><iframe src="" name="rightframe"></iframe>...</body> (格式混乱)
(C) <body><frame src="" name="rightframe">...</body>
(D) <body><frame src="" name="rightframe">...</body>

答案：(A)
解析：
- 浮动框架（内联框架）使用 <iframe> 标签，并且可以放在 <body> 中的任何位置。
- <frame> 标签必须配合 <frameset> 使用，且不能放在 <body> 内部（HTML5 已废弃 <frame> 和 <frameset>，但保留了 <iframe>）。

2. 填空题

(1) 如果要创建一个指向电子邮件 someone@mail.com 的超链接，代码应该如下：
<a href="mailto:someone@mail.com" >指向 someone@mail.com 的超链接</a>

解析： 邮件链接使用 mailto: 协议。

(2) 在指定页内超链接的时候，如果在某一个位置使用了 <a name ="target1">书签</a> 语句定义了书签名为 target1，那么当单击超链接 <a href= "#target1" >书签链接</a> 时，能够跳转到同页面定义的书签 target1 位置上。

解析： 这是 HTML4 的经典锚点用法。定义锚点用 name（HTML5 中建议用 id），链接到锚点用 href="#锚点名"。

(3) 超链接路径分为 绝对 路径和 相对 路径，当然 相对 路径也可以用于内部链接；外部链接一般使用 绝对 路径。

解析： 站内跳转通常用相对路径（文件体积小、迁移方便），跳转到其他网站必须用包含域名的绝对路径。

(4) 浮动框架的 name 属性值为 “leftframe”，让超链接在该浮动框架中打开“中国教育网（URL: http://www.edu.cn）”网站的正确的超链接是 <a href="http://www.edu.cn" target="leftframe">中国教育网</a>。

解析： 关键在于设置 target 属性等于框架的 name 属性值。

3. 简答题

(1) 简述什么是绝对路径和相对路径。

答案：
- 绝对路径 (Absolute Path)： 指带域名的完整路径，或者是从根目录开始的路径。它提供了资源的完整 URL 地址，无论当前文件在哪里，绝对路径指向的目标都是固定的。
  - 例如：http://www.example.com/images/logo.png 或 D:\Web\images\logo.png。
- 相对路径 (Relative Path)： 指相对于当前文档所在位置的路径。它不包含域名，根据当前文件和目标文件的相对位置关系来查找资源。
  - 例如：images/logo.png (当前目录下的 images 文件夹) 或 ../css/style.css (上级目录下的 css 文件夹)。

(2) 写出制作页面书签的步骤，并举例说明。

答案：
制作页面书签（锚点链接）通常分为两步：
1. 定义锚点（目标位置）： 在页面需要跳转到的位置设置一个标识。可以使用 <a> 标签的 name 属性或任意标签的 id 属性。
  - 代码示例：<a name="top">这里是顶部</a> 或 <div id="section1">第一章内容</div>
2. 创建链接（跳转按钮）： 创建一个超链接，其 href 属性值为 # 加上锚点的名称。
  - 代码示例：<a href="#top">回到顶部</a> 或 <a href="#section1">跳转到第一章</a>

(3) 如果想通过单击不同的超链接在浮动框架中打开不同的页面，需要如何设置？

答案：
1. 首先，必须给浮动框架 <iframe> 设置一个唯一的 name 属性（例如 name="myFrame"）。
2. 然后，在设置超链接 <a> 标签时，将 target 属性的值设置为该浮动框架的名称（即 target="myFrame"）。
3. 这样，当点击该链接时，href 指定的页面就会在名为 myFrame 的浮动框架区域内加载，而不是替换整个浏览器窗口。

第六章

1. 选择题

(1) 指定滚动文字的滚动延时正确的标记是（）。

(A) <marquee scrollamount="200"> ... </marquee>
(B) <marquee loop="200"> ... </marquee>
(C) <marquee auto="200"> ... </marquee>
(D) <marquee scrolldelay="200"> ... </marquee>

答案：(D)
解析：
- scrolldelay：设定滚动两次之间的延迟时间（单位毫秒），时间越长滚动越慢。
- scrollamount：设定每次滚动的像素数，数值越大滚动越快。
- loop：设定循环次数。
- (注：<marquee> 标签在 HTML5 中已废弃，但在旧教程中常见)

(2) 能够播放 Flash 和视频文件的 HTML 标记是（）。

(A) <embed src="">
(B) <bgsound src="">
(C) <marquee></marquee>
(D) <a href="">

答案：(A)
解析：
- <embed> 是 HTML5 标准标签，用于嵌入外部应用或交互式内容（如插件、Flash）。
- <bgsound> 是 IE 专有的背景音乐标签。
- <marquee> 是滚动字幕。
- <a> 是超链接。

(3) <img alt="这是图像">，这个标记作用是（）。

(A) 添加图像链接
(B) 决定图像的排列方式
(C) 在浏览器完全读入图像时，在图像位置显示的文字
(D) 在浏览器尚未完全读入图像时，在图像的上方显示的“×”，并显示替代文本

答案：(D)
解析： alt (Alternate text) 属性用于定义图像的替代文本。当图像因为网络错误、路径错误或用户禁用图片加载而无法显示时，浏览器会显示这个文本，方便用户理解图片内容。这也是无障碍访问（屏幕阅读器）的重要属性。

(4) HTML 代码 <a href="#"><img src="/blog/name/images.jpg"></a> 表示（）。

(A) 按某种方式对齐加载的图像
(B) 设置一个图像链接
(C) 设置围绕一个图像的边框的大小
(D) 加入一条水平线

答案：(B)
解析： 这段代码将 <img> 标签嵌套在 <a> 标签内部。点击该图片时，会跳转到 href 属性指向的链接（此处为 #，即当前页面顶部或空链接）。这就是典型的“图像链接”。

2. 填空题

(1) 网页中插入图像使用 ______ 标记，插入多媒体文件使用 ______ 标记，插入滚动文字使用 ______ 标记。

答案：<img>；<embed>（或 <object>, <video>, <audio>）；<marquee>
解析： <img> 是最基础的图像标签；旧版 HTML 常用 <embed> 插入多媒体，HTML5 则推荐使用 <video> 和 <audio>，但题目语境倾向于 <embed>；<marquee> 用于实现文字滚动效果（已废弃但仍被部分支持）。

(2) 在给图像指定超链接时，默认情况下总是会显示蓝色边框，如果不想显示蓝色边框，应使用以下语句：<a href="test.html"><img src="image1.gif" ________ ></a>。

答案：border="0"
解析： 在旧版浏览器（如 IE）中，图片加了链接后会自动带上蓝色的边框。通过设置 <img> 标签的 border="0" 属性可以去除这个边框。现代网页开发通常使用 CSS (img { border: none; }) 来处理。

(3) 热区 area 标记的 shape 属性取值为 “rect” 表示热区的形状为 ______；shape 属性取值为 “circle” 表示热区的形状为 ______；shape 属性取值为 “poly” 表示热区的形状为 ______。

答案：矩形；圆形；多边形
解析： 图像映射（Image Map）允许在图片上定义多个可点击区域。
- rect (Rectangle)：矩形，需要定义左上角和右下角坐标。
- circle：圆形，需要定义圆心坐标和半径。
- poly (Polygon)：多边形，需要定义每一个顶点的坐标。

3. 简答题

(1) 设置滚动文字 marquee 标记的 hspace 和 vspace 属性的作用是什么？

答案：
- hspace (Horizontal Space)： 用于设置滚动字幕周围的水平空白间距。即在滚动区域的左侧和右侧预留出一定的空白距离，防止周围的文字或图片紧贴着滚动区域。
- vspace (Vertical Space)： 用于设置滚动字幕周围的垂直空白间距。即在滚动区域的上方和下方预留出一定的空白距离。
解析： 这两个属性类似于 CSS 中的 margin，用于控制元素外部的间距，增强排版的美观性。

(2) 使用 <img> 标记可以在页面中插入图像，如何设置图像的高度和宽度？如何设置替换文本？

答案：
1. 设置高度和宽度：
  使用 width 和 height 属性。
  - 像素值： 例如 width="300" height="200"，单位默认为像素 (px)。
  - 百分比： 例如 width="50%"，表示占据父容器宽度的 50%。
  - 示例： <img src="pic.jpg" width="300" height="200">
2. 设置替换文本：
  使用 alt 属性。当图片无法显示时，浏览器会显示该属性的内容；同时也有助于 SEO 和视障用户使用的屏幕阅读器。
  - 示例： <img src="pic.jpg" alt="这是一张风景图">
解析： 建议总是为图像指定 width 和 height，这样浏览器在加载页面时可以预留空间，防止页面布局抖动（Layout Shift）。同时，alt 属性是 Web 无障碍标准（WCAG）必须要求的属性。

第七章

1. 选择题

(1) CSS 的规则是由选择器和（）构成的。

(A) 声明
(B) 属性
(C) 值
(D) 属性选择器

答案：(A)
解析： CSS 规则集（Rule Set）由两个主要部分组成：选择器 (Selector) 和 声明块 (Declaration Block)。声明块包含一个或多个声明，每个声明由属性和值组成。因此，从宏观结构上讲，是选择器和声明（块）。

(2) 下列选项中 CSS 规则书写正确的是（）。

(A) body:color=black
(B) {body;color:black;}
(C) body{color:black;}
(D) {body:color=black;}

答案：(C)
解析： 标准 CSS 语法格式为：选择器 { 属性: 值; }。
- (A) 像 HTML 属性写法，错误。
- (B) 选择器不能在大括号内，错误。
- (D) 语法完全混乱，错误。

(3) 下列选项中正确定义所有 h3 标记内文字为特粗的是（）。

(A) <h3 style=" font-size:bolder; ">
(B) <h3 style=" font-weight:bolder; ">
(C) h3{font-size:bolder;}
(D) h3{font-weight:bolder;}

答案：(D)
解析：
- 题目要求是“所有 h3”，所以应该使用元素选择器（Tag Selector），即在 CSS 中写 h3 {...}，而不是在 HTML 中写行内样式（行内样式只对当前元素有效），排除 A、B。
- 控制粗细的属性是 font-weight，不是 font-size（控制大小）。
- bolder 是特粗（比继承值更粗），符合题意。

(4) 在 CSS 中定义能多次引用样式的选择器是（）。

(A) 超链接选择器
(B) 类选择器
(C) id 选择器
(D) 标记选择器

答案：(B)
解析：
- 类选择器 (Class Selector, .classname)： 设计初衷就是为了在页面中多次复用。可以在多个不同的标签上使用同一个 class。
- ID 选择器 (#id)： 在一个页面中必须是唯一的，不能多次使用。
- 虽然标记选择器也可以匹配多个元素，但“引用样式”这个描述通常指开发者主动将样式应用到元素上，类选择器最符合“定义并多次引用”的特征。

(5) 下列选项中样式优先级最高的是（）。

(A) 标记样式
(B) id 样式
(C) class 样式
(D) 行内样式

答案：(D)
解析： CSS 优先级（权重）规则通常是：
!important > 行内样式 (style=”…”) > ID 选择器 > 类选择器/伪类/属性选择器 > 标签选择器/伪元素 > 通配符。
- 数值化权重参考：行内样式 (1000) > ID (0100) > Class (0010) > Tag (0001)。

(6) 下列选项中导入外部样式表正确的是（）。

(A) @import url("chu12015.css ")
(B) @import " chu2015.css "
(C) <lik href=" chu12015.css "/> (单词拼写错误)
(D) @import url(chu12015.css );

答案：(D)
解析：
- CSS 中使用 @import 导入样式的标准语法是 @import url("path/to/file.css"); 或 @import "path/to/file.css";（无需 url() 包裹）。
- 关键点在于：必须以分号结尾。
- (A) 缺少分号。
- (B) 缺少分号。
- (C) <link> 标签拼写成了 <lik>，且这是 HTML 标签引入方式，不是 CSS 内部导入方式。
- (D) url() 内部的引号是可选的（只要路径不包含特殊字符），且有分号结尾，是语法最严谨的正确选项（虽然通常建议加引号，但 D 选项在语法结构上最完整）。

2. 填空题

(1) 在 CSS 文件中，用 #p1{}，在 HTML 中 p 标记内使用 ______ 属性引用样式；在 CSS 中使用 .p2{} 定义样式，在 HTML 中 p 标记内使用 ______ 属性来引用样式。

答案：id；class
解析： # 开头的是 ID 选择器，对应 HTML 的 id 属性；. 开头的是类选择器，对应 HTML 的 class 属性。

(2) 引用外部 CSS 文件有两种方式：一是通过 ______ 标记的 ______ 属性；二是通过 ______ 标记内 ______ 来引用。

答案：<link>；href；<style>；@import
解析：
- 方式一（推荐）：在 HTML <head> 中使用 <link rel="stylesheet" href="style.css">。
- 方式二：在 HTML <style> 标签内部，或者在另一个 CSS 文件中，使用 @import url("style.css"); 语句。

(3) CSS 文件的扩展名为 ______。

答案：.css
解析： Cascading Style Sheets 文件的标准后缀。

3. 简答题

(1) 简述属性选择器有几种定义方式。

答案：
属性选择器主要有以下几种常见定义方式：
1. 存在选择器 [attr]： 选择所有具有 attr 属性的元素。
2. 相等选择器 [attr=val]： 选择属性值完全等于 val 的元素。
3. 包含词选择器 [attr~=val]： 选择属性值包含单词 val 的元素（以空格分隔的列表）。
4. 连字符选择器 [attr|=val]： 选择属性值以 val 开头并紧接连字符的元素（常用于语言代码）。
5. 前缀选择器 [attr^=val]： 选择属性值以 val 开头的元素（CSS3）。
6. 后缀选择器 [attr$=val]： 选择属性值以 val 结尾的元素（CSS3）。
7. 子串选择器 [attr*=val]： 选择属性值中包含 val 子串的元素（CSS3）。

(2) CSS 按照其定义位置可分为哪几种？分别如何使用？

答案：
主要分为三种：
1. 行内样式 (Inline Style)：
  - 使用方式： 直接在 HTML 标签的 style 属性中定义。
  - 例子： <p style="color: red;">文字</p>
2. 内部样式表 (Internal Style Sheet)：
  - 使用方式： 在 HTML 文档的 <head> 区域使用 <style> 标签定义。
  - 例子： <style> p { color: red; } </style>
3. 外部样式表 (External Style Sheet)：
  - 使用方式： 将样式规则写在独立的 .css 文件中，然后在 HTML 页面通过 <link> 标签引入。
  - 例子： <link rel="stylesheet" href="style.css">

(3) 如何理解 CSS 的继承与冲突特性？

答案：
- 继承性 (Inheritance)：
  - 指某些 CSS 属性（如 color, font-size, font-family 等文本类属性）会自动从父元素传递给子元素。
  - 作用： 减少重复代码。例如在 body 上设置字体，整个页面的文字都会应用该字体。
- 冲突特性 (Cascading/Conflict)：
  - 当同一个元素被多个不同的规则同时选中，且设置了相同的属性但值不同时，就会发生冲突。
  - 解决机制： CSS (层叠样式表) 通过层叠规则来解决冲突，主要依据是优先级（权重）。权重高的规则生效；如果权重相同，则后定义的规则生效（“就近原则”）。

(4) 简述 id 选择器与类选择器的异同点。

答案：
- 相同点： 都可以用来选择元素并设置样式。
- 不同点：
  1. 语法不同： ID 选择器使用 # (如 #header)；类选择器使用 . (如 .active)。
  2. 唯一性： ID 在一个 HTML 页面中必须是唯一的，只能应用于一个元素；Class 是可复用的，可以应用于页面中的多个元素。
  3. 优先级： ID 选择器的优先级（权重 100）高于类选择器（权重 10）。
  4. 用途： ID 通常用于标识页面中唯一的结构块（如导航栏、页脚）；Class 通常用于定义通用的样式组件（如按钮、警告框）。

第八章

1. 选择题

(1) 下列选项中为行内标记的是（）。

(A) <p></p>
(B) <div></div>
(C) <span></span>
(D) <pre></pre>

答案：(C)
解析： HTML 元素分为块级元素（Block-level）和行内元素（Inline）：
- 块级元素： 独占一行，可以设置宽高。如 <div>, <p>, <pre>, <h1>-<h6>, <ul>, <ol> 等。
- 行内元素： 不独占一行，宽高由内容决定。如 <span>, <a>, <strong>, <em>, <img> 等。
- <span> 是最典型的行内元素，常用于包裹小段文字以便单独设置样式。

(2) 下列选项中能够实现两个图层 div 同时向右浮动的是（）。

(A) div{float:right;}
(B) div{float:none;}
(C) div{float:left;}
(D) div{clear:both;}

答案：(A)
解析：
- float: right;：元素向右浮动。
- float: left;：元素向左浮动。
- float: none;：默认值，不浮动。
- clear: both;：清除浮动，不是设置浮动方向。

(3) 下列能够将 div 标记由块显示方式改为行内显示方式的选项是（）。

(A) div{overflow:hidden;}
(B) div{display:inline;}
(C) div{display:block;}
(D) div{display:none;}

答案：(B)
解析： display 属性用于改变元素的显示类型：
- display: inline;：将元素设置为行内元素。
- display: block;：将元素设置为块级元素。
- display: none;：隐藏元素，不占据空间。
- overflow: hidden;：控制内容溢出时的处理方式，与显示类型无关。
- 拓展： display: inline-block; 可以让元素既像行内元素一样不独占一行，又能像块级元素一样设置宽高。

(4) 多个图层要实现层叠的必要条件是 position 属性的值必须是（）。

(A) static
(B) relative
(C) absolute
(D) fixed

答案：(C)
解析： 虽然 relative、absolute、fixed 都可以使元素脱离文档流并配合 z-index 实现层叠，但题目强调”必要条件”和”层叠”的经典场景。
- absolute（绝对定位）是最常用于实现多图层层叠效果的定位方式，元素完全脱离文档流，可以通过 left、top、z-index 精确控制位置和层级。
- static 是默认值，不能使用 z-index 进行层叠。
- 注意： 实际开发中 relative 和 fixed 也能配合 z-index 实现层叠，但在教材语境下，absolute 是标准答案。

(5) 下列选项中能够清除 div 左右两边浮动的属性是（）。

(A) clear
(B) display
(C) overflow
(D) float

答案：(A)
解析： clear 属性专门用于清除浮动：
- clear: left;：清除左侧浮动。
- clear: right;：清除右侧浮动。
- clear: both;：清除两侧浮动。
- clear: none;：默认值，不清除。
- 拓展： 除了 clear 属性，还可以使用 overflow: hidden; 或伪元素 ::after 等方法来清除浮动造成的父容器高度塌陷问题。

2. 填空题

(1) 在 HTML 文件中，定义图层的标记是 ______；定义 <span></span> 标记样式可以通过定义三个属性来实现，它们分别是 ______、______、______。

答案：<div>；id、class、style
解析： <div> 是最常用的布局容器，常被称为”图层”或”盒子”。为 <span> 或任何 HTML 元素定义样式，可以通过：
1. id 属性：对应 CSS 的 ID 选择器 (#name)。
2. class 属性：对应 CSS 的类选择器 (.name)。
3. style 属性：直接写行内样式。

(2) 定位一个图层的位置可以通过四个属性来定位，为 left、______、width、______。

答案：top；height
解析： 定位图层通常需要：
- 位置属性：left（左边距）、top（上边距）、right（右边距）、bottom（下边距）。
- 尺寸属性：width（宽度）、height（高度）。
- 题目要求四个属性，left、top、width、height 是最常用的组合。

(3) 设置图层层叠关系可以通过设置 ______ 属性来实现，其属性值越大，图层越层叠在上层。但前提条件是需要将 ______ 属性的值设置为 absolute。

答案：z-index；position
解析： z-index 属性控制元素在 Z 轴（垂直于屏幕方向）上的堆叠顺序，数值越大越靠前（覆盖在其他元素上面）。但 z-index 只对定位元素（position 值为 relative、absolute 或 fixed）生效，对 static（默认值）无效。

3. 简答题

(1) 简述 <div> 标记与 <span> 标记的异同点。

答案：
- 相同点：
  1. 两者都是 HTML 中的通用容器标签，本身没有特定的语义。
  2. 都可以通过 id、class、style 属性来应用 CSS 样式。
  3. 都可以包含其他 HTML 元素或文本内容。
- 不同点：
  1. 显示类型： <div> 是块级元素，默认独占一行，前后会有换行；<span> 是行内元素，不会独占一行，多个 <span> 会在同一行显示。
  2. 宽高设置： <div> 默认可以设置宽度和高度；<span> 默认无法直接设置宽高（除非将其 display 改为 block 或 inline-block）。
  3. 用途： <div> 通常用于页面的大块区域布局（如头部、侧边栏、内容区）；<span> 通常用于包裹一小段文本以便单独设置样式（如高亮某个词）。

(2) 如何设置多个图层层叠关系？

答案：
设置多个图层的层叠关系，需要以下步骤：
1. 设置定位方式： 首先，需要将这些图层的 position 属性设置为 relative、absolute 或 fixed。因为只有脱离了普通文档流或建立了定位上下文的元素，才能使用 z-index 控制层叠。
2. 使用 z-index 属性： 然后，通过设置 z-index 属性的数值来控制层叠顺序。
  - z-index 的值可以是正整数、负整数或 0。
  - 数值越大的元素，层级越高，会覆盖在数值较小的元素上面。
  - 如果 z-index 值相同，则按照 HTML 中元素出现的先后顺序决定，后出现的元素覆盖先出现的元素。
- 示例代码：
  1
  2
  3
  4
  5
  6
  . layer1 { position: absolute; z-index: 1; }
  
  . layer2 { position: absolute; z-index: 10; }
  /* 这个会显示在 layer1 上面 */
  
  . layer3 { position: absolute; z-index: 5; }

第九章

1. 选择题

(1) 下列不属于 CSS 盒模型的属性是（）。

(A) margin
(B) padding
(C) border
(D) font

答案：(D)
解析： CSS 盒模型由四个部分组成：
- content（内容区）
- padding（内边距）
- border（边框）
- margin（外边距）
- font 是字体相关属性，不属于盒模型。

(2) 边框的复合属性中不包括（）。

(A) 粗细
(B) 长短
(C) 颜色
(D) 样式

答案：(B)
解析： border 复合属性包含三个子属性：
- border-width：边框粗细（如 1px, 2px）
- border-style：边框样式（如 solid, dashed, dotted）
- border-color：边框颜色
- 边框没有”长短”属性，边框的长度由元素的宽高决定。

(3) 下列可以去掉文本超链接的下画线的是（）。

(A) a{text-decoration:no underline;}
(B) a{underline:none;}
(C) a{underline:false;}
(D) a{text-decoration:none;}

答案：(D)
解析： text-decoration 属性用于控制文本装饰效果：
- none：无装饰（去除下划线）
- underline：下划线
- overline：上划线
- line-through：删除线
- (A) 的 no underline 语法错误，正确写法是 none。
- (B)(C) 中 underline 不是有效的 CSS 属性名。

(4) 下列不属于 CSS 文本对齐属性取值的是（）。

(A) auto
(B) left
(C) center
(D) right

答案：(A)
解析： text-align 属性用于设置文本的水平对齐方式，其合法值包括：
- left：左对齐（默认）
- center：居中对齐
- right：右对齐
- justify：两端对齐
- auto 不是 text-align 的有效取值（auto 常见于 margin 等属性）。

(5) CSS 规则 p{margin:20px 10px;} 的效果是（）。

(A) 仅设置了上边距为 20px，以及右边距为 10px
(B) 仅设置了上边距为 20px，以及下边距为 10px
(C) 设置了上、下边距为 20px，以及左、右边距为 10px
(D) 设置了上、右边距为 20px，以及下、左边距为 10px

答案：(C)
解析： margin 简写属性的取值规则（padding 同理）：
- 1 个值：四个方向都相同。
- 2 个值：第一个值为上下，第二个值为左右。
- 3 个值：上、左右、下。
- 4 个值：上、右、下、左（顺时针）。
- 所以 margin: 20px 10px; 表示上下 20px，左右 10px。

2. 填空题

(1) 段落缩进的属性是 ______；文本居中对齐的声明 ______。

答案：text-indent；text-align: center;
解析：
- text-indent 用于设置文本首行缩进，如 text-indent: 2em; 表示首行缩进两个字符。
- text-align: center; 用于文本水平居中。

(2) 实现背景图像在水平方向平铺的声明 ______；设置背景图像位置的属性是 ______。

答案：background-repeat: repeat-x;；background-position
解析： background-repeat 控制背景图重复方式：
- repeat：水平和垂直都平铺（默认）
- repeat-x：仅水平方向平铺
- repeat-y：仅垂直方向平铺
- no-repeat：不平铺

(3) 设置文字颜色为红色的声明（写出其值可能的所有形式）是 color: ______。

答案：red / #ff0000 / #f00 / rgb(255, 0, 0) / rgba(255, 0, 0, 1) / hsl(0, 100%, 50%)
解析： CSS 中表示颜色的方式有多种：
1. 颜色关键字：red
2. 十六进制：#ff0000 或简写 #f00
3. RGB 函数：rgb(255, 0, 0)
4. RGBA 函数（带透明度）：rgba(255, 0, 0, 1)
5. HSL 函数：hsl(0, 100%, 50%)

(4) 声明 “border: 2px double red;” 的含义是 ______。

答案：设置边框宽度为 2 像素，样式为双线，颜色为红色
解析： border 复合属性的顺序通常是 width style color：
- 2px：边框宽度
- double：双线样式
- red：红色

3. 简答题

(1) 简述 CSS 盒模型概念。通过哪些属性可以描述一个具体的 CSS 盒模型？

答案：
- 概念： CSS 盒模型（Box Model）是 CSS 布局的基础。它将每个 HTML 元素看作一个矩形盒子，这个盒子由内而外包含四个区域：
  1. 内容区 (Content)：显示元素的实际内容（文本、图片等）。
  2. 内边距 (Padding)：内容区与边框之间的空白区域。
  3. 边框 (Border)：围绕内边距和内容的边界线。
  4. 外边距 (Margin)：边框外侧与其他元素之间的空白区域。
- 相关属性：
  - width / height：设置内容区的宽高。
  - padding / padding-top / padding-right / padding-bottom / padding-left：设置内边距。
  - border / border-width / border-style / border-color：设置边框。
  - margin / margin-top / margin-right / margin-bottom / margin-left：设置外边距。
  - box-sizing：控制盒模型的计算方式（content-box 为标准模型，border-box 为怪异模型/IE 模型）。

(2) 简述 CSS 列表样式属性及其取值情况。

答案：
CSS 中用于设置列表样式的属性主要有：
1. list-style-type（列表项标记类型）
  - 无序列表常用值：disc（实心圆，默认）、circle（空心圆）、square（实心方块）、none（无标记）。
  - 有序列表常用值：decimal（数字，默认）、lower-alpha（小写字母）、upper-alpha（大写字母）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）。
2. list-style-image（用图像作为列表项标记）
  - 取值：url("图片路径") 或 none。
3. list-style-position（标记的位置）
  - outside：标记在列表项内容框外部（默认）。
  - inside：标记在列表项内容框内部。
4. list-style（复合属性）
  - 可以一次性设置以上所有属性，如 list-style: square inside url("icon.png");。

第十章

1. 选择题

(1) 下列 CSS 规则中能够让图层 div 不显示的选项是（）。

A. div{display:block;}
B. div{display:none;}
C. div{display:inline;}
D. div{display:hidden;}

答案：B
解析： display 属性控制元素的显示类型：
- display: none;：元素完全不显示，不占据任何空间，从文档流中移除。
- display: block;：显示为块级元素。
- display: inline;：显示为行内元素。
- hidden 不是 display 的有效值（D 选项错误）。
- 拓展： visibility: hidden; 也可以隐藏元素，但它会保留元素所占的空间。

(2) 下列 CSS 规则中能够让列表项水平排列的选项是（）。

A. li{float:left;}
B. li{float:none;}
C. li{float:middle;}
D. li{float:up;}

答案：A
解析： float 属性的有效值只有 left、right、none、inherit。
- float: left;：元素向左浮动，多个 <li> 设置后会依次排列在同一行。
- float: none;：默认值，不浮动。
- middle 和 up 都不是 float 的合法值。
- 拓展： 现代布局更推荐使用 display: flex; 或 display: inline-block; 来实现水平排列。

(3) 下列 CSS 规则中能够让图层 div 隐藏的选项是（）。

A. div{visibility:none;}
B. div{visibility: visible;}
C. div{visibility: hidden;}
D. div{visibility: block;}

答案：C
解析： visibility 属性控制元素的可见性：
- visible：可见（默认值）。
- hidden：隐藏，但元素仍占据原来的空间。
- collapse：用于表格元素。
- none 和 block 都不是 visibility 的有效值。

(4) 下列 CSS 规则中能够使超链接在盘旋时产生上画线效果的选项是（）。

A. a: hover{text-decoration:none;}
B. a:hover{text-decoration:underline;}
C. a:hover{text-decoration: line-through;}
D. a:hover{text-decoration:overline;}

答案：D
解析： text-decoration 属性用于添加文本装饰线：
- none：无装饰线
- underline：下划线
- overline：上划线
- line-through：删除线（贯穿文字中间）
- :hover 是伪类选择器，表示鼠标悬停（盘旋）状态。

(5) 下列 CSS 规则中能够使超链接在盘旋时下边框为 2px、实线、红色效果的选项是（）。

A. a:hover{border-bottom:2px solid #FF0000;text-decoration:none;}
B. a:hover{border-top:2px solid #FF0000;text-decoration:none;}
C. a:hover{border-bottom:2px dashed #FF0000;text-decoration:none;}
D. a:hover{border-right:2px double #FF0000;text-decoration:none;}

答案：A
解析： 题目要求”下边框”、”2px”、”实线”、”红色”：
- border-bottom：下边框 ✓
- 2px：宽度 ✓
- solid：实线 ✓（dashed 是虚线，double 是双线）
- #FF0000：红色 ✓
- text-decoration: none; 用于去除链接默认的下划线，避免与边框重叠。
- B 选项是上边框，C 选项是虚线，D 选项是右边框且是双线。

2. 简答题

(1) 简述采用 DIV+CSS 技术进行页面布局的基本步骤。

答案：
采用 DIV+CSS 技术进行页面布局的基本步骤如下：
1. 分析页面结构： 仔细观察设计稿，将页面划分为若干个逻辑区域（如头部 Header、导航 Nav、主体内容 Main、侧边栏 Sidebar、底部 Footer 等）。
2. 搭建 HTML 骨架： 使用语义化的 <div> 标签（或 HTML5 语义标签如 <header>, <nav>, <main>, <aside>, <footer>）构建页面的基本 HTML 结构，并为每个区块设置有意义的 id 或 class 属性。
3. 编写 CSS 样式： 创建外部 CSS 文件，按照设计稿为各个 <div> 区块编写样式规则，包括：
  - 盒模型属性： width, height, margin, padding, border
  - 定位与布局： position, float, display, flex, grid
  - 外观属性： background, color, font 等
4. 链接样式表： 在 HTML 文件的 <head> 部分通过 <link> 标签引入外部 CSS 文件。
5. 调试与优化： 在不同浏览器中测试页面效果，调整样式以解决兼容性问题，并优化代码结构。

(2) 说明 CSS 布局属性中 “display:block” 与 “visibility: visible” 的区别。

答案：
这两个属性虽然都与元素的显示有关，但功能完全不同：

对比项	`display: block`	`visibility: visible`
所属属性	`display` 属性	`visibility` 属性
作用	控制元素的显示类型，将元素设置为块级元素	控制元素的可见性，使元素可见
是否为默认值	是 `<div>` 等块级元素的默认值	是所有元素的默认值
对立值	`display: none;`（不显示，不占空间）	`visibility: hidden;`（隐藏，但仍占空间）
影响布局	会影响元素在文档流中的排列方式	不影响布局，仅控制是否可见

总结： display 决定元素”是什么类型”（块、行内、弹性盒等）或”是否存在于布局中”；visibility 仅决定元素”是否可见”，不改变其在页面中的位置和占用的空间。

第十一章

1. 选择题

(1) 设置围绕表格的边框宽度的正确的标记是（）。

A. <table size="">
B. <table border="">
C. <table bordersize="">
D. <tableborder="">

答案：B
解析： <table> 标签使用 border 属性来设置表格边框的宽度（单位为像素）。例如 <table border="1"> 表示边框宽度为 1 像素。size、bordersize 都不是有效属性，D 选项的标签名拼写错误。

(2) 定义表头的标记是（）。

A. <table></table>
B. <td></td>
C. <tr></tr>
D. <th></th>

答案：D
解析： HTML 表格相关标记：
- <table>：定义整个表格。
- <tr> (Table Row)：定义表格的一行。
- <td> (Table Data)：定义普通单元格。
- <th> (Table Header)：定义表头单元格，默认文字加粗且居中。

(3) 下列标记中能够实现跨多行的是（）。

A. <th colspan=""></th>
B. <tr rowspan=""></th>
C. <td colspan=""></td>
D. <td rowspan=""></td>

答案：D
解析： 合并单元格的属性：
- colspan：跨列合并（水平方向）。
- rowspan：跨行合并（垂直方向）。
- 这两个属性只能用在 <td> 或 <th> 标签上，不能用在 <tr> 上（B 选项错误）。
- 题目要求”跨多行”，所以应该用 rowspan。

(4) 设置表格的背景图像正确的标记是（）。

A. <tr background="">
B. <table background="">
C. <th src="">
D. <tr src="">

答案：B
解析： 在旧版 HTML 中，background 属性可以用于 <table>、<tr>、<td>、<th> 等标签来设置背景图像。但设置整个表格的背景图像应该在 <table> 标签上使用。src 属性是 <img> 标签专用的，不适用于表格元素。
- 注意： background 属性在 HTML5 中已废弃，现代开发推荐使用 CSS 的 background-image 属性。

(5) 能够设置表格的标题的标记是（）。

A. <tbody></tbody>
B. <tfoot></tfoot>
C. <thead></thead>
D. <caption></caption>

答案：D
解析： 表格结构标记：
- <caption>：定义表格的标题，通常显示在表格上方。
- <thead>：定义表格的表头区域（包含表头行）。
- <tbody>：定义表格的主体区域。
- <tfoot>：定义表格的页脚区域。

(6) 设置表格行垂直居中的标记是（）。

A. <tr align="center">
B. <tr valign="middle">
C. <tr align="middle">
D. <tr valign="center">

答案：B
解析： 表格对齐属性：
- align：控制水平对齐，取值为 left、center、right。
- valign：控制垂直对齐，取值为 top、middle、bottom。
- 题目要求”垂直居中”，所以应该用 valign="middle"。

2. 填空题

(1) 表格的标题标记是 ______，表格行的标记是 ______，单元格的表头标记是 ______。

答案：<caption>；<tr>；<th>
解析： 这三个是表格的基础标记，分别定义标题、行和表头单元格。

(2) 单元格跨 3 行，设置格式为 <td ______ ="______"></td>；单元格跨 5 列，设置格式为 <td ______ ="______"></td>。

答案：rowspan；3；colspan；5
解析：
- 跨行用 rowspan，如 <td rowspan="3">
- 跨列用 colspan，如 <td colspan="5">

(3) 表格的外部边框样式可以使用 ______ 属性来定义，表格内部边框样式可以使用 ______ 属性来定义。

答案：frame；rules
解析： 这是 HTML 4.01 的属性（现代开发用 CSS）：
- frame：控制外边框显示哪几条边（如 void, above, below, hsides, vsides, lhs, rhs, box, border）。
- rules：控制内部分隔线的显示（如 none, groups, rows, cols, all）。

(4) 单元格边距属性是 ______；单元格间距属性是 ______。

答案：cellpadding；cellspacing
解析：
- cellpadding：单元格内容与单元格边框之间的距离（内边距）。
- cellspacing：单元格与单元格之间的距离（间距）。
- 拓展： 在 CSS 中，可以用 padding 替代 cellpadding，用 border-spacing 替代 cellspacing。

3. 简答题

(1) 写出定义表格的所有常用标记，并说明各自的作用。

答案：

标记	作用
`<table>`	定义整个表格的容器
`<caption>`	定义表格标题，通常位于表格上方
`<thead>`	定义表格的表头区域，包含表头行
`<tbody>`	定义表格的主体区域，包含数据行
`<tfoot>`	定义表格的页脚区域，通常包含汇总信息
`<tr>`	定义表格中的一行 (Table Row)
`<th>`	定义表头单元格 (Table Header)，默认加粗居中
`<td>`	定义普通数据单元格 (Table Data)
`<col>`	定义表格列的属性（如宽度），需配合 `<colgroup>`
`<colgroup>`	定义表格列的分组

(2) 写出定义表格边框的所有属性，并说明其作用。

答案：

属性	作用
`border`	设置表格边框的宽度（像素），如 `border="1"`
`bordercolor`	设置边框颜色（HTML 4 属性，已废弃）
`frame`	控制外边框显示哪几条边，取值如 `void`(无)、`box`(四边)、`above`(上边)、`below`(下边)等
`rules`	控制内部分隔线的显示，取值如 `none`(无)、`all`(全部)、`rows`(仅行线)、`cols`(仅列线)等

CSS 替代方案（推荐）：
- border：如 table { border: 1px solid black; }
- border-collapse：控制边框合并，collapse(合并) 或 separate(分离)
- border-spacing：设置单元格间距

(3) 表格行对齐方式有几类？它们的属性取值有什么不同？

答案：
表格行的对齐方式分为两类：水平对齐和垂直对齐。
1. 水平对齐（align 属性）：
  - left：左对齐
  - center：居中对齐
  - right：右对齐
  - justify：两端对齐（较少用）
2. 垂直对齐（valign 属性）：
  - top：顶部对齐
  - middle：垂直居中
  - bottom：底部对齐
  - baseline：基线对齐（文本基线）
- 注意： 这些属性可以用在 <tr>（影响整行）、<td>、<th>（影响单个单元格）上。HTML5 中推荐使用 CSS 的 text-align 和 vertical-align 属性。

第十二章

1. 选择题

(1) 下列选项不是表单标记的属性是（）。

A. method
B. action
C. enctype
D. option

答案：D
解析：
- method：定义表单数据提交的方法（如 GET 或 POST）。
- action：指定提交表单时的目标 URL。
- enctype：指定表单数据的编码类型（如 application/x-www-form-urlencoded 或 multipart/form-data）。
- option 是 <select> 的子标签，不属于表单标记属性。

(2) 下列选项不是 input 标记的 type 属性值的是（）。

A. password
B. radio
C. textarea
D. button

答案：C
解析：
- <textarea> 是独立的 HTML 标记，用来定义多行文本输入框，不能作为 <input> 标记的 type 属性值。
- password、radio 和 button 都是 <input> 的合法 type 值。

(3) 下列 input 标记的类型属性值表示复选框的是（）。

A. hidden
B. checkbox
C. radio
D. select

答案：B
解析： type="checkbox" 定义的是复选框。
- type="radio" 定义的是单选按钮。
- hidden 是隐藏字段，不用于选择。
- select 是下拉列表标签的标记，不属于 <input> 的类型值。

(4) 下列 input 标记的类型属性值表示单选按钮的是（）。

A. hidden
B. checkbox
C. radio
D. select

答案：C
解析： type="radio" 定义单选按钮，用于一组选项中只能选择一个的情形。

(5) 用于设置文本输入框显示宽度的属性是（）。

A. size
B. maxlength
C. value
D. length

答案：A
解析：
- size：控制文本框的显示宽度，即可见字符数。
- maxlength：限制输入的最大字符数，不能控制显示宽度。
- value 用于设置输入框的默认值。
- length 不是合法属性名称。

2. 填空题

(1) 表单 form 标记中，method 属性的取值可以为 ______ 和 ______。

答案：GET；POST
解析：
- GET：通过 URL 参数传递表单数据，适合查询操作。
- POST：通过 HTTP 请求体传递表单数据，适合提交敏感信息或数据量较大的操作。

(2) 表单是 Web ______ 和 Web ______ 之间实现信息交互和传输的桥梁。

答案：客户端；服务器端
解析： 表单是客户端输入和服务器端处理数据的桥梁，用户通过表单提交数据，服务器接收并处理后返回结果。

(3) <select> 标记配合使用，包含 ______、______ 和 ______ 属性。

答案：name；value；selected
解析：
- name：定义选项列表的名称，提交表单时作为键名称发送到服务器。
- value：定义选项的具体值。
- selected：定义默认选中状态。

(4) <textarea> 标记用于定义多行文本输入框，指定行数的属性为 ______，指定列数的属性为 ______。

答案：rows；cols
解析：
- rows：表示文本输入框的高度，即行数。
- cols：表示文本输入框的宽度，即列数。

(5) 提交按钮的 type 属性值为 ______，重置按钮的 type 属性值为 ______，普通按钮的 type 属性值为 ______。

答案：submit；reset；button
解析：
- submit：提交表单数据。
- reset：重置表单，将全部输入框恢复到默认值。
- button：普通按钮，不会提交数据，可结合脚本功能实现自定义行为。

(6) 组复选框和复选框的 name 属性值必须 ______，value 值也必须 ______；而一组单选按钮的 name 属性值必须 ______，value 属性值必须 ______。

答案：不同；不同；相同；不同
解析：
- 对于复选框：name 和 value 的值必须不同，表示不同的键值对。
- 对于单选按钮：name 相同，表示单选组；value 不同，表示每个选项对应的值。

(7) 通过 ______ 属性可以将某一复选框、单选按钮设置为默认选中状态；通过 ______ 属性可以指定选项列表中的某一选项默认为选中状态。

答案：checked；selected
解析： 两个属性分别用于设置默认选中状态：
- checked：用在 <input> 标签的 type="checkbox" 或 type="radio"。
- selected：用在 <option> 标签。

(8) 使用 ______ 标记可以定义区域，使用 ______ 标记可以定义区域的标题。

答案：<fieldset>；<legend>
解析：
- <fieldset>：定义一个表单区域。
- <legend>：为 <fieldset> 定义标题。

3. 简答题

(1) 简述表单中常用标签，并说明各自作用。

答案：

标签	作用
`<form>`	定义表单容器，包含 `action`、`method`、`enctype` 等属性
`<input>`	定义单行输入框、复选框、单选按钮、按钮等，使用 `type` 属性表示种类
`<textarea>`	定义多行文本输入框
`<select>`	定义下拉列表，需配合 `<option>` 标签
`<button>`	定义按钮，支持显示文本、图标等内容
`<fieldset>`	定义表单的逻辑区域
`<legend>`	为 `<fieldset>` 定义标题
`<label>`	为表单元素提供说明文字，点击 `label` 可以激活对应的输入框

(2) 写出定义多行文本框的所有属性，并说明其作用。

答案：

属性	作用
`rows`	定义文本框的行数（高度）
`cols`	定义文本框的列数（宽度）
`name`	定义表单提交时文本框的键名称
`placeholder`	显示占位提示文本
`maxlength`	限制最大输入字符数
`readonly`	设置文本框为只读
`disabled`	禁用文本框，无法输入和提交

(3) 表单对齐方式有几类？它们的属性值有什么不同？

答案：

表单的对齐方式按方向分为 2 类：
1. 水平对齐：用 text-align 控制（针对行内 / 行内块元素，包括文本、表单项），属性值：left（左）、center（中）、right（右）。
2. 垂直对齐：
  - 行内 / 行内块元素（如表单项）：用 vertical-align，属性值如 top（顶）、middle（中）、bottom（底）；
  - 块级元素：结合 flex/grid 布局，或用 margin（需配合父容器设置）实现垂直对齐。

第十四章

1. 选择题

(1) 在客户端网页脚本语言中最为通用的是（）。

A. JavaScript
B. VB
C. Perl
D. ASP

答案：A
解析： JavaScript 是目前浏览器端（客户端）最通用、最主流的脚本语言，几乎所有现代浏览器都内置了 JavaScript 解释器。
- VB（VBScript）曾在 IE 浏览器中使用，但现已淘汰。
- Perl 和 ASP 主要用于服务器端开发。

(2) 下列不是 JavaScript 的特点的是（）。

A. 跨平台性
B. 动态性
C. 编译型语言
D. 解释型语言

答案：C
解析： JavaScript 是解释型语言，代码由浏览器的 JavaScript 引擎逐行解释执行，不需要预先编译成机器码。
- 跨平台性： JavaScript 可以在各种操作系统的浏览器上运行。
- 动态性： JavaScript 是动态类型语言，变量类型在运行时确定。
- 拓展： 虽然现代 JS 引擎（如 V8）使用 JIT（即时编译）技术优化性能，但从语言设计角度，JavaScript 仍被归类为解释型语言。

(3) 下列不属于 JavaScript 的关键字的是（）。

A. for
B. interface
C. switch
D. new

答案：B
解析：
- for、switch、new 都是 JavaScript 的关键字。
- interface 是 Java 等语言的关键字，在原生 JavaScript 中不是关键字（但在 TypeScript 中是）。
- 注意： interface 是 JavaScript 的保留字（Reserved Word），但不是实际使用的关键字。

(4) 下列属于 JavaScript 常量的是（）。

A. NaN
B. undefined
C. Math.PI
D. Infinity

答案：C
解析：
- Math.PI 是 Math 对象的属性，表示圆周率 π（约 3.14159），是一个数学常量。
- NaN（Not a Number）、undefined、Infinity 虽然是特殊值，但它们是全局属性，不属于用户定义的常量范畴。
- 从”常量”的严格定义来看，Math.PI 是最典型的常量答案。

(5) JavaScript 中表示声明变量的关键字是（）。

A. if
B. while
C. var
D. loop

答案：C
解析：
- var 是 JavaScript 中声明变量的关键字。
- if 和 while 是流程控制语句关键字。
- loop 不是 JavaScript 的关键字。
- 拓展： ES6 引入了 let 和 const，分别用于声明块级作用域变量和常量。

(6) 下列定义函数 display() 语法正确的是（）。

A. function display(){ }
B. function: display(){ }
C. function=display(){ }
D. display(){ }

答案：A
解析： JavaScript 中定义函数的标准语法是：
1
2
3
function 函数名(参数) {
// 函数体
}
- B、C、D 的语法都不正确。

(7) 引用外部 show.js 文件方法正确的选项是（）。

A. <script src="show"></script>
B. <script name="show. js"></script>
C. <script href="show.js"></script>
D. <script src="show.js"></script>

答案：D
解析： 引入外部 JavaScript 文件的正确方式是使用 <script> 标签的 src 属性，且需要写完整的文件名（包括 .js 后缀）。
- href 是 <link> 和 <a> 标签的属性，不适用于 <script>。
- name 不是引入文件的属性。

2. 填空题

(1) 在 HTML 中嵌入 JavaScript 代码时，需使用 ______ 标记。

答案：<script>
解析： JavaScript 代码需要放在 <script> 和 </script> 标签之间，可以内嵌代码或通过 src 属性引入外部文件。

(2) JavaScript 中的消息对话框分为 ______、______ 和 ______ 三种。

答案：alert()；confirm()；prompt()
解析：
- alert()：警告框，只显示信息和”确定”按钮。
- confirm()：确认框，显示”确定”和”取消”按钮，返回布尔值。
- prompt()：输入框，允许用户输入文本，返回输入的字符串。

(3) 表达式 18/0 的值为 ______。

答案：Infinity
解析： 在 JavaScript 中，正数除以 0 结果为 Infinity（正无穷），负数除以 0 结果为 -Infinity。这与其他语言（如 Java）抛出异常不同。

(4) 逻辑表达式 (5<100) && (3>0) 的结果为 ______。

答案：true
解析：
- 5 < 100 为 true
- 3 > 0 为 true
- true && true 结果为 true

(5) 位表达式 5 & 7、5 | 7 和 5 ^ 7 的结果分别为 ______、______ 和 ______。

答案：5；7；2
解析： 将 5 和 7 转换为二进制进行位运算：
- 5 = 101，7 = 111
- 5 & 7（按位与）：101 & 111 = 101 = 5
- 5 | 7（按位或）：101 | 111 = 111 = 7
- 5 ^ 7（按位异或）：101 ^ 111 = 010 = 2

3. 简答题

(1) continue 与 break 语句在循环中的作用有什么不同？

答案：

break 语句： 立即终止整个循环，跳出循环体，执行循环之后的代码。
continue 语句： 跳过本次循环的剩余代码，直接进入下一次循环的判断和执行。

举例：

for (let i = 0; i < 5; i++) {
    if (i === 2) break;    // 输出:  0, 1 然后结束循环
}
for (let i = 0; i < 5; i++) {
    if (i === 2) continue; // 输出: 0, 1, 3, 4 跳过了 2
}

(2) do… while() 与 while 循环有什么不同？

答案：
- while 循环： 先判断条件，条件为真才执行循环体。如果条件一开始就为假，循环体一次都不会执行。
- do...while 循环： 先执行一次循环体，然后再判断条件。即使条件一开始为假，循环体也至少执行一次。
- 语法对比：
  1
  2
  3
  4
  5
  6
  7
  8
  9
  // while 循环
  while (条件) {
  // 循环体
  }
  
  // do...while 循环
  do {
  // 循环体
  } while (条件);

(3) 自定义函数时应注意哪些事项？

答案：
1. 函数命名： 函数名应具有描述性，遵循驼峰命名法（如 calculateSum），不能以数字开头，不能使用保留字。
2. 参数设计： 明确函数需要的参数，参数数量不宜过多；ES6 支持默认参数值。
3. 返回值： 如果函数需要返回结果，使用 return 语句；没有 return 或 return 后无值时，函数返回 undefined。
4. 作用域： 注意变量的作用域，避免污染全局变量；优先使用 let/const 而非 var。
5. 函数声明位置： 函数声明会被提升（Hoisting），但函数表达式不会。
6. 单一职责： 一个函数应只完成一个特定功能，便于维护和复用。

第十五章

1. 选择题

(1) 以下选项中，鼠标单击事件对应的事件句柄是（）。

A. onChange
B. onLoad
C. onClick
D. onDblclick

答案：C
解析：
- onClick：鼠标单击事件。
- onDblclick：鼠标双击事件。
- onChange：内容改变事件。
- onLoad：页面加载完成事件。

(2) 以下事件中，当页面中的文本输入框获得焦点时触发的事件是（）。

A. click
B. load
C. blur
D. focus

答案：D
解析：
- focus：元素获得焦点时触发（如点击输入框或 Tab 键切换到该元素）。
- blur：元素失去焦点时触发。
- click：鼠标单击时触发。
- load：页面或资源加载完成时触发。

(3) 以下事件中，表单数据填完后，单击提交按钮，会触发的事件是（）。

A. submit
B. reset
C. click
D. focus

答案：A
解析：
- submit：表单提交事件，当用户点击提交按钮或按回车键提交表单时触发。
- reset：表单重置事件。
- 虽然点击提交按钮也会触发 click 事件，但题目问的是表单提交的专用事件，应选 submit。

(4) 以下选项中，表单重置事件对应的事件句柄是（）。

A. onSubmit
B. onReset
C. onChange
D. onLoad

答案：B
解析：
- onReset：当表单被重置（点击 reset 按钮）时触发的事件句柄。
- onSubmit：表单提交事件句柄。

(5) 以下选项中，将 validate() 函数和一个按钮的单击事件关联起来正确的用法是（）。

A. <input type="button" value="校验" onClick="validate()">
B. <input type="button" value="校验" onDbClick="validate()">
C. <input type="button" value="校验" onSubmit="validate()">
D. <input type="button" value="校验" onReset="validate()">

答案：A
解析：
- 题目要求将函数与单击事件关联，应使用 onClick 事件句柄。
- onDbClick 是双击事件。
- onSubmit 和 onReset 是表单级别的事件，用于 <form> 标签，不是按钮的单击事件。

(6) 以下事件中，不属于键盘事件的是（）。

A. KeyDown
B. KeyPress
C. KeyUp
D. KeyOver

答案：D
解析： JavaScript 中的键盘事件有三个：
- keydown：按键按下时触发。
- keypress：按键按下并产生字符时触发（已废弃，不推荐使用）。
- keyup：按键松开时触发。
- KeyOver 不存在，不是有效的键盘事件。

(7) JavaScript 中的 Load 事件的作用是（）。

A. 浏览器窗口加载页面时，执行的 JavaScript 事件
B. 浏览器窗口离开页面时，执行的 JavaScript 事件
C. 用户提交一个表单时，执行的 JavaScript 事件
D. 鼠标移出对象时，执行的 JavaScript 事件

答案：A
解析：
- load 事件：当页面或资源（如图片）加载完成后触发。
- B 选项描述的是 unload 事件。
- C 选项描述的是 submit 事件。
- D 选项描述的是 mouseout 事件。

2. 填空题

(1) 事件句柄的命名原则是在事件名称前加上前缀 ______。

答案：on
解析： 事件名如 click、load、focus，对应的事件句柄为 onClick、onLoad、onFocus。

(2) JavaScript 中事件处理方式可以有三种，分别是 ______、______ 、______。

答案：HTML 事件处理程序（内联方式）；DOM0 级事件处理程序；DOM2 级事件处理程序（事件监听器）
解析：
1. HTML 事件处理程序： 直接在 HTML 标签中使用事件属性，如 <button onclick="func()">。
2. DOM0 级： 通过 JavaScript 获取元素后赋值，如 element.onclick = function() {... }。
3. DOM2 级： 使用 addEventListener() 方法，如 element.addEventListener('click', func)。

(3) 当表单中的表单控件获得焦点时会触发 ______ 事件，该事件对应的事件句柄为 ______；表单数据提交时会触发 ______ 事件，该事件对应的事件句柄为 ______。

答案：focus；onFocus；submit；onSubmit
解析： 事件名和事件句柄的对应关系是：事件句柄 = on + 事件名（首字母大写）。

(4) 鼠标单击时会触发 ______ 事件，浏览器窗口在加载页面时会触发 ______ 事件。

答案：click；load
解析： 这是最基础的两个事件，分别对应用户交互和页面生命周期。

3. 简答题

(1) 网页开发中常见的事件类型有哪些？分别代表什么操作？

答案：

事件类型	事件名	代表的操作
鼠标事件	click	鼠标单击
鼠标事件	dblclick	鼠标双击
鼠标事件	mouseover	鼠标移入元素
鼠标事件	mouseout	鼠标移出元素
鼠标事件	mousedown	鼠标按下
鼠标事件	mouseup	鼠标松开
键盘事件	keydown	按键按下
键盘事件	keyup	按键松开
表单事件	focus	获得焦点
表单事件	blur	失去焦点
表单事件	change	内容改变
表单事件	submit	表单提交
表单事件	reset	表单重置
窗口事件	load	页面加载完成
窗口事件	unload	页面卸载
窗口事件	resize	窗口大小改变
窗口事件	scroll	页面滚动

(2) 事件发生时，对事件的处理方式有哪几种？

答案：
1. HTML 事件处理程序（内联方式）：
  - 直接在 HTML 标签的事件属性中编写 JavaScript 代码。
  - 示例：<button onclick="alert('Hello')">点击</button>
2. DOM0 级事件处理程序：
  - 通过 JavaScript 获取元素对象，将函数赋值给元素的事件属性。
  - 示例：document.getElementById('btn').onclick = function() { ... }
  - 缺点：同一事件只能绑定一个处理函数。
3. DOM2 级事件处理程序（事件监听器）：
  - 使用 addEventListener() 方法绑定事件。
  - 示例：element.addEventListener('click', function() { ... })
  - 优点：可以为同一事件绑定多个处理函数，且可以控制事件的捕获/冒泡阶段。

(3) 表单事件中最常用的事件有哪些？举例说明它们在实际开发中的应用。

答案：
1. focus / blur（获得/失去焦点）：
  - 应用： 输入框获得焦点时显示提示信息，失去焦点时进行格式验证。
  - 示例： 用户点击邮箱输入框时显示”请输入有效邮箱”，离开时检查邮箱格式是否正确。
2. change（内容改变）：
  - 应用： 下拉框选项改变时联动更新页面内容。
  - 示例： 省份下拉框改变时，自动更新城市下拉框的选项。
3. submit（表单提交）：
  - 应用： 在表单提交前进行数据验证，阻止无效数据提交。
  - 示例： 检查必填项是否为空、密码长度是否符合要求，不符合则阻止提交并提示用户。
4. reset（表单重置）：
  - 应用： 在重置前提示用户确认，避免误操作清空数据。
  - 示例： 弹出确认框询问”确定要清空所有输入吗？”。

第十六章

1. 选择题

(1) 定义 JavaScript 数组方法正确的是（）。

A. var arrayList ={"cat", "dog", "monkey"}
B. var arrayList =new Array{"cat", "dog", "monkey"}
C. var arrayList =new Array("cat", "dog", "monkey")
D. var arrayList =new Array["cat", "dog", "monkey"]

答案：C
解析： JavaScript 中定义数组的正确方式：
- 字面量方式：var arr = ["cat", "dog", "monkey"];（使用方括号）
- 构造函数方式：var arr = new Array("cat", "dog", "monkey");（使用圆括号）
- A 选项使用花括号是对象语法，B 和 D 选项的括号使用错误。

(2) 利用下标来访问数组时，最小下标是从（）开始的。

A. 0
B. 1
C. -1
D. 2

答案：A
解析： JavaScript 数组下标从 0 开始。第一个元素的下标是 0，第二个是 1，以此类推。

(3) 求 3 和 5 中的最小数正确的函数是（）。

A. Math.min(3,5)
B. Math.ceil(3,5)
C. Math.max(3,5)
D. min(3,5)

答案：A
解析：
- Math.min()：返回参数中的最小值。
- Math.max()：返回参数中的最大值。
- Math.ceil()：向上取整，只接受一个参数。
- min() 必须通过 Math 对象调用，不能直接使用。

(4) 以下选项中，可以获得值为 false 的 Boolean 对象的是（）。

A. var a = new Boolean(1)
B. var a = new Boolean("abc")
C. var a = new Boolean(true)
D. var a = new Boolean()

答案：D
解析： Boolean() 构造函数的转换规则：
- new Boolean()：无参数时，值为 false。
- new Boolean(0)、new Boolean("")、new Boolean(null)、new Boolean(undefined)：值为 false。
- new Boolean(1)、new Boolean("abc")、new Boolean(true)：值为 true（非空、非零值转为 true）。

(5) 下列不属于访问指定节点的方法的是（）。

A. obj.value
B. getElementsByTagName()
C. getElementsByName()
D. getElementById()

答案：A
解析：
- getElementById()：通过 ID 获取单个元素。
- getElementsByTagName()：通过标签名获取元素集合。
- getElementsByName()：通过 name 属性获取元素集合。
- obj.value 是获取元素的值属性，不是访问节点的方法。

(6) 能够创建元素节点的方法的是（）。

A. createElement()
B. getElementById()
C. getElementByName()
D. forms. length

答案：A
解析：
- document.createElement("标签名")：创建一个新的元素节点。
- 其他选项都是获取已存在元素的方法或属性，不能创建新节点。

(7) 下列代码分析正确的是（）。

1 function createNode(){
2     var p1=document.createElement("p");
3     var txt=document.createTextNode("Hello!");
4     p1.appendChild(txt);
5     document.appendChild(p);
6 }

A. 代码第 2 行是创建一个 <p> 元素标记
B. 代码第 4 行是为文档添加文本节点
C. <p> 是文本节点的子节点
D. 函数的功能是创建新的文本节点

答案：A
解析：
- 第 2 行 createElement("p") 确实是创建一个 <p> 元素节点。✓
- 第 4 行 p1.appendChild(txt) 是将文本节点添加到 <p> 元素中，不是添加到文档。✗
- <p> 是文本节点的父节点，不是子节点。✗
- 函数功能是创建一个包含文本的 <p> 元素并添加到文档，不仅仅是创建文本节点。✗

(8) 在告警消息框中输出 “hello world!” 信息正确的是（）。

A. alertBox("hello world!")
B. msgBox("hello world!")
C. alert("hello world!")
D. alertMsg("hello world!")

答案：C
解析： JavaScript 中弹出警告框的标准方法是 alert()。其他选项都不是有效的 JavaScript 方法。

(9) 下面这两行代码的功能是（）。

1 2	1 <a href="javascript:history.back()"></a> 2 <a href="javascript:history.forward()"></a>

A. 代码第 1 行的功能相当于后退按钮
B. 代码第 2 行的功能相当于后退按钮
C. 代码第 1 行的功能相当于前进按钮
D. 以上表述都不正确

答案：A
解析：
- history.back()：返回上一页，相当于浏览器的后退按钮。
- history.forward()：前进到下一页，相当于浏览器的前进按钮。

(10) 对 location 对象的 href 属性的叙述错误的是（）。

A. 可以获取当前路径
B. 可以改变当前路径
C. 可以用来刷新页面
D. 是只读属性

答案：D
解析： location.href 是可读可写的属性：
- 读取：获取当前页面的完整 URL。
- 设置：可以改变 URL，实现页面跳转或刷新。
- 设置为当前 URL 可以刷新页面。

(11) 使用 location 对象的（）方法可以实现用新 URL 取代当前窗口的 URL。

A. load
B. onload
C. replace
D. open

答案：C
解析：
- location.replace(url)：用新 URL 替换当前页面，不会在历史记录中留下记录（无法后退）。
- location.assign(url) 或直接设置 location.href 也可以跳转，但会保留历史记录。

2. 填空题

(1) 可以通过 Array 对象的 ______ 属性来获得数组的长度。

答案：length
解析： arrayName.length 返回数组中元素的个数。

(2) 使用 Math 对象的 ______ 方法可以获得 0~1 之间的随机数，使用 Math 对象的 ______ 属性可以获得圆周率。

答案：random()；PI
解析：
- Math.random()：返回 [0, 1) 之间的随机小数。
- Math.PI：圆周率 π，约等于 3.14159。

(3) 在 JavaScript 中，Boolean 对象只有两种状态，分别是 ______ 和 ______。

答案：true；false
解析： 布尔类型只有两个值：真（true）和假（false）。

(4) DOM 是 ______ 的英文缩写，一个最基本的 DOM 树通常由三种类型的节点组成，分别是 ______、______ 和 ______。

答案：Document Object Model（文档对象模型）；元素节点；属性节点；文本节点
解析： DOM 将 HTML 文档表示为树形结构，三种基本节点类型构成了文档的主体。

(5) document 对象中包含了三个访问文档节点的方法，这三个方法分别是 ______、______ 和 ______。

答案：getElementById()；getElementsByName()；getElementsByTagName()
解析： 这是 DOM 中最基础的三个获取元素的方法。
- 拓展： 现代浏览器还支持 querySelector() 和 querySelectorAll()。

(6) document 对象包含一些创建和修改节点的方法，如可以通过调用 document 对象的 ______ 方法来创建一个元素节点，通过调用 document 对象的 ______ 方法来删除一个子节点，通过调用 document 对象的 ______ 方法来添加一个子节点。

答案：createElement()；removeChild()；appendChild()
解析：
- createElement("tagName")：创建元素节点。
- removeChild(node)：删除子节点。
- appendChild(node)：添加子节点到末尾。

(7) 使用 document 对象 ______ 和 ______ 属性可以获取节点的内容。

答案：innerHTML；innerText
解析：
- innerHTML：获取或设置元素的 HTML 内容（包含标签）。
- innerText：获取或设置元素的纯文本内容（不包含标签）。

(8) 浏览器对象模型（BOM）主要包含 ______、______、______、______、frame 和 document 共七个对象，______ 对象是最顶层对象。

答案：window；location；history；navigator（或 screen）；window
解析： BOM 的核心对象：
- window：最顶层对象，代表浏览器窗口。
- location：URL 相关信息。
- history：浏览历史。
- navigator：浏览器信息。
- screen：屏幕信息。

(9) 在实际的开发中，使用 window 对象的 ______ 方法可以产生确认框，使用 window 对象的 ______ 方法可以产生告警框，使用 window 对象的 ______ 方法可以产生提示框。

答案：confirm()；alert()；prompt()
解析： 三种对话框方法是 window 对象最常用的方法。

(10) ______ 对象用于获取用户浏览器的相关信息。

答案：navigator
解析： navigator 对象包含浏览器的名称、版本、平台等信息。

3. 简答题

(1) 什么是 document 对象？如何获取文档对象上的元素？

答案：
- document 对象： 是 DOM 的核心对象，代表整个 HTML 文档。它是 window 对象的子对象，提供了访问和操作网页内容的接口。通过 document 对象，可以获取、创建、修改和删除页面中的元素。
- 获取元素的方法：
  1. document.getElementById("id")：通过 ID 获取单个元素。
  2. document.getElementsByClassName("class")：通过类名获取元素集合。
  3. document.getElementsByTagName("tag")：通过标签名获取元素集合。
  4. document.getElementsByName("name")：通过 name 属性获取元素集合。
  5. document.querySelector("selector")：通过 CSS 选择器获取第一个匹配元素。
  6. document.querySelectorAll("selector")：通过 CSS 选择器获取所有匹配元素。

(2) 什么是浏览器对象模型？它包含哪些对象？

答案：
- 浏览器对象模型（BOM，Browser Object Model）： 是 JavaScript 与浏览器进行交互的接口。它提供了独立于网页内容的对象，用于控制浏览器窗口、获取浏览器信息、操作浏览历史等。BOM 没有统一的标准，不同浏览器实现可能略有差异。
- 包含的主要对象：
  | 对象 | 作用 |
  | : — | :— |
  | window | 最顶层对象，代表浏览器窗口，所有全局变量和函数都是其属性 |
  | document | 代表当前 HTML 文档，用于操作页面内容 |
  | location | 包含当前 URL 信息，可用于页面跳转 |
  | history | 包含浏览历史，可实现前进/后退功能 |
  | navigator | 包含浏览器信息（名称、版本、平台等） |
  | screen | 包含用户屏幕信息（分辨率、颜色深度等） |

(3) 简述 window 对象有哪些常用的属性和方法。

答案：

常用属性：

属性	作用
`document`	返回文档对象
`location`	返回 location 对象，包含 URL 信息
`history`	返回 history 对象
`navigator`	返回 navigator 对象
`innerWidth` / `innerHeight`	浏览器窗口的内部宽度/高度
`outerWidth` / `outerHeight`	浏览器窗口的外部宽度/高度

常用方法：

方法	作用
`alert()`	弹出警告框
`confirm()`	弹出确认框，返回布尔值
`prompt()`	弹出输入框，返回输入的字符串
`open()`	打开新窗口
`close()`	关闭当前窗口
`setTimeout()`	延迟执行代码（一次性）
`setInterval()`	定时重复执行代码
`clearTimeout()`	取消 setTimeout
`clearInterval()`	取消 setInterval

补充简答题

1. 描述 HTML 文档的基本结构，并解释每部分的含义。

答案：

HTML 文档的基本结构如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    页面内容
  </body>
</html>

各部分含义：

结构部分	含义说明
`<!DOCTYPE html>`	文档类型声明，告诉浏览器使用 HTML5 标准解析页面，必须放在文档最开头
`<html>`	根元素，包含整个 HTML 文档的所有内容
`<head>`	头部区域，包含文档的元数据（如编码、标题、样式链接、脚本等），不直接显示在页面上
`<meta>`	元信息标签，用于定义字符编码、关键词、描述等
`<title>`	页面标题，显示在浏览器标签栏和收藏夹中
`<body>`	主体区域，包含所有可见的页面内容（文本、图片、链接等）

拓展：

HTML5 简化了文档类型声明，旧版 HTML4 需要写很长的 DTD 声明
<head> 中还可以包含 <link>（引入 CSS）、<script>（引入 JS）、<style>（内部样式）等
语义化标签（HTML5）：<header>、<nav>、<main>、<article>、<aside>、<footer> 等

2. 块级元素和行级元素各自的特点，以及它们的区别？

答案：

块级元素（Block-level Elements）特点：

独占一行，前后自动换行
可以设置 width、height、margin、padding
默认宽度为父元素的 100%
可以包含块级元素和行内元素

常见块级元素： <div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table>、<form>

行内元素（Inline Elements）特点：

不独占一行，多个行内元素在同一行显示
设置 width、height 无效
水平方向的 margin、padding 有效，垂直方向无效
宽度由内容决定

常见行内元素： <span>、<a>、<strong>、<em>、<img>、<input>

区别对比：

特性	块级元素	行内元素
是否独占一行	是	否
设置宽高	有效	无效
默认宽度	父元素 100%	内容宽度
包含关系	可包含块级和行内	一般只包含行内

拓展：

display: inline-block; 可以让元素兼具两者特点（不独占一行但可设置宽高）
<img> 和 <input> 是特殊的”行内替换元素”，可以设置宽高

3. 如何制作网页列表？有序列表和无序列表的区别在哪？

答案：

HTML 中有三种列表类型：

1. 无序列表（Unordered List）：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

2. 有序列表（Ordered List）：

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

3. 定义列表（Definition List）：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

有序列表与无序列表的区别：

特性	无序列表 `<ul>`	有序列表 `<ol>`
标记符号	圆点（disc/circle/square）	数字或字母（1,2,3 或 a,b,c）
语义	项目之间无先后顺序	项目之间有明确顺序
type 属性	disc、circle、square	1、A、a、I、i
适用场景	导航菜单、特性列表	步骤说明、排名

拓展：

列表可以嵌套使用，形成多级列表
CSS 中使用 list-style-type: none; 可以去除默认标记
使用 list-style-image 可以自定义图片作为标记符号

4. 常用的图像格式有哪些，以及它们的区别？

答案：

常用图像格式及特点：

格式	全称	特点	适用场景
JPEG/JPG	Joint Photographic Experts Group	有损压缩，文件小，不支持透明，色彩丰富	照片、复杂图像
PNG	Portable Network Graphics	无损压缩，支持透明（Alpha 通道），文件较大	Logo、图标、需要透明背景的图
GIF	Graphics Interchange Format	支持动画，只支持 256 色，支持透明（二值）	简单动画、表情包
WebP	Web Picture	Google 开发，同时支持有损/无损压缩，体积小	现代网页（需浏览器支持）
SVG	Scalable Vector Graphics	矢量图，无限放大不失真，文件小	图标、Logo、简单图形
BMP	Bitmap	无压缩，文件大，质量高	一般不用于网页

选择建议：

照片类 → JPEG
需要透明 → PNG
简单动画 → GIF
追求性能 → WebP
图标/Logo → SVG

拓展：

PNG-8（256色）和 PNG-24（真彩色）的区别
响应式图片可使用 <picture> 标签和 srcset 属性
图片优化工具：TinyPNG、ImageOptim 等

5. 简述超链接和图像标签的应用

答案：

超链接标签 <a>：


<a href="https://www.example.com">访问网站</a>


<a href="https://www.example.com" target="_blank">新窗口打开</a>


<a href="#section1">跳转到第一节</a>
<div id="section1">第一节内容</div>


<a href="mailto:example@mail.com">发送邮件</a>


<a href="file.pdf" download>下载文件</a>

<a> 标签常用属性：

属性	作用
`href`	链接目标地址
`target`	打开方式（`_self`、`_blank`、`_parent`、`_top`）
`title`	鼠标悬停提示文字
`download`	下载链接而非打开

图像标签 <img>：


<img src="image.jpg" alt="图片描述">


<img src="image.jpg" alt="描述" width="300" height="200">


<a href="large.jpg">
  <img src="thumbnail.jpg" alt="点击查看大图">
</a>

<img> 标签常用属性：

属性	作用
`src`	图片路径（必需）
`alt`	替代文本（必需，用于无障碍和 SEO）
`width`/`height`	图片宽高
`title`	鼠标悬停提示
`loading`	懒加载（`lazy`）

拓展：

响应式图片：srcset 和 sizes 属性
图片映射：<map> 和 <area> 标签创建热区

6. 表格的主要功能是什么？不规则表格怎么制作？

答案：

表格的主要功能：

展示结构化数据（如成绩表、价格表）
数据对比和分析
信息的分类整理
早期用于页面布局（现已不推荐）

基本表格结构：

<table border="1">
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

不规则表格制作（单元格合并）：


<table border="1">
  <tr>
    <td colspan="3">标题横跨3列</td>
  </tr>
  <tr>
    <td>列1</td>
    <td>列2</td>
    <td>列3</td>
  </tr>
</table>


<table border="1">
  <tr>
    <td rowspan="2">跨2行</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列2</td>
  </tr>
</table>

合并规则：

colspan="n"：向右合并 n 列
rowspan="n"：向下合并 n 行
被合并的单元格需要删除对应的 <td> 标签

拓展：

cellpadding：单元格内边距
cellspacing：单元格间距
CSS 中使用 border-collapse: collapse; 合并边框

7. 表单的作用？表单的工作机制？

答案：

表单的作用：

收集用户输入的数据（注册、登录、搜索等）
实现用户与服务器之间的数据交互
提供各种输入控件（文本框、单选、复选、下拉等）
数据验证和提交

表单的工作机制：

1	用户填写表单 → 点击提交按钮 → 浏览器收集数据 → 发送 HTTP 请求 → 服务器处理 → 返回响应

详细流程：

用户交互： 用户在表单控件中填写数据
数据收集： 浏览器根据表单控件的 name 属性收集数据
数据编码： 根据 enctype 属性对数据进行编码
发送请求： 根据 method 属性（GET/POST）发送到 action 指定的地址
服务器处理： 服务器接收数据并处理（存储、验证等）
返回响应： 服务器返回处理结果

GET 与 POST 的区别：

特性	GET	POST
数据位置	URL 参数中	请求体中
数据可见性	地址栏可见	不可见
数据大小	有限制（约 2KB）	无限制
安全性	较低	较高
适用场景	查询操作	提交敏感数据

拓展：

enctype 属性：application/x-www-form-urlencoded（默认）、multipart/form-data（文件上传）
前端验证不能替代后端验证

8. 表单的基本结构，以及举例表单元素标签使用？

答案：

表单基本结构：

<form action="submit.php" method="post" enctype="multipart/form-data">
  
  <input type="submit" value="提交">
</form>

常用表单元素标签：


<input type="text" name="username" placeholder="请输入用户名">


<input type="password" name="password" placeholder="请输入密码">


<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女


<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐


<select name="city">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
</select>


<textarea name="content" rows="5" cols="30" placeholder="请输入内容"></textarea>


<input type="file" name="avatar" accept="image/*">


<input type="hidden" name="token" value="abc123">


<input type="submit" value="提交">
<input type="reset" value="重置">
<button type="button">普通按钮</button>


<label for="email">邮箱：</label>
<input type="email" id="email" name="email">


<fieldset>
  <legend>个人信息</legend>
  
</fieldset>

HTML5 新增 input 类型：

email、url、tel、number、range、date、time、color、search

拓展：

required 属性：必填验证
pattern 属性：正则表达式验证
autofocus：自动获得焦点
autocomplete：自动完成

9. 什么是 CSS？CSS 的优点是什么？

答案：

CSS 定义：
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 文档外观和格式的样式表语言。它将内容（HTML）与表现（样式）分离，专门负责控制网页的视觉效果。

CSS 的优点：

优点	说明
内容与表现分离	HTML 负责结构，CSS 负责样式，职责清晰
提高可维护性	修改样式只需修改 CSS 文件，无需改动 HTML
代码复用	一个样式可应用于多个页面，减少重复代码
页面加载更快	外部 CSS 可被浏览器缓存，减少传输量
更精确的控制	提供丰富的样式属性，精确控制页面布局
适应多设备	通过媒体查询实现响应式设计
便于团队协作	前端可专注样式，后端专注逻辑

CSS 发展历程：

CSS1（1996）：基本样式
CSS2（1998）：定位、媒体类型
CSS2.1（2011）：修正和完善
CSS3（模块化）：动画、弹性布局、网格布局等

拓展：

CSS 预处理器：Sass、Less、Stylus
CSS 后处理器：PostCSS
CSS-in-JS：Styled-components、Emotion

10. CSS 包含哪些样式表？如何使用？它们的优先级？

答案：

CSS 的三种使用方式：

1. 行内样式（Inline Style）：

1	<p style="color: red; font-size: 16px;">这是红色文字</p>

直接写在标签的 style 属性中
优先级最高，但不推荐大量使用

2. 内部样式表（Internal Style Sheet）：

<head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
  </style>
</head>

写在 <head> 中的 <style> 标签内
适用于单个页面的特定样式

3. 外部样式表（External Style Sheet）：

1
2
3

<head>
  <link rel="stylesheet" href="style.css">
</head>

或使用 @import：

1
2
3

<style>
  @import url("style.css");
</style>

样式写在独立的 .css 文件中
推荐使用，便于维护和复用

优先级（从高到低）：

行内样式 > 内部样式表 = 外部样式表
内部和外部优先级相同时，后定义的覆盖先定义的
! important 可以提升优先级到最高

/* 使用 !important */
p {
  color: red !important;
}

拓展：

<link> 与 @import 区别：<link> 并行加载，@import 串行加载（性能较差）
建议将 CSS 放在 <head> 中，避免页面闪烁

11. CSS 具有哪些选择符？其中 ID 选择符和 CLASS 选择符区别？选择符的优先级是什么？

答案：

CSS 选择器分类：

选择器类型	语法	示例
通配符选择器	`*`	`* { margin: 0; }`
元素选择器	`element`	`p { color: red; }`
类选择器	`.classname`	`.title { font-size: 20px; }`
ID 选择器	`#idname`	`#header { background: blue; }`
后代选择器	`A B`	`div p { color: red; }`
子选择器	`A > B`	`ul > li { list-style: none; }`
相邻兄弟选择器	`A + B`	`h1 + p { margin-top: 0; }`
通用兄弟选择器	`A ~ B`	`h1 ~ p { color: gray; }`
属性选择器	`[attr]`	`input[type="text"] { ... }`
伪类选择器	`:pseudo`	`a:hover { color: red; }`
伪元素选择器	`::pseudo`	`p::first-line { ... }`

ID 选择器与 CLASS 选择器的区别：

特性	ID 选择器 `#id`	CLASS 选择器 `.class`
唯一性	页面中必须唯一	可重复使用
优先级	高（100）	低（10）
使用次数	一个元素只能有一个 ID	一个元素可有多个 class
适用场景	唯一元素（如 header）	通用样式（如按钮）

选择器优先级（权重计算）：

选择器	权重值
`! important`	最高（慎用）
行内样式	1000
ID 选择器	100
类/伪类/属性选择器	10
元素/伪元素选择器	1
通配符 `*`	0

计算示例：

1 2	#nav . item a { } /* 100 + 10 + 1 = 111 / . nav . item a { } / 10 + 10 + 1 = 21 */

拓展：

权重相同时，后定义的生效
继承的样式没有权重
避免过度使用 ID 选择器和 !important

12. 样式表的继承性是指什么？

答案：

CSS 继承性定义：
CSS 继承是指子元素可以自动继承父元素的某些样式属性，而无需在子元素上重复定义。这种机制减少了代码冗余，提高了样式的可维护性。

可继承的属性（主要是文本相关）：

类别	属性
字体属性	`font-family`、`font-size`、`font-weight`、`font-style`
文本属性	`color`、`text-align`、`text-indent`、`line-height`、`letter-spacing`
列表属性	`list-style`、`list-style-type`
可见性	`visibility`
光标	`cursor`

不可继承的属性（主要是布局相关）：

类别	属性
盒模型	`width`、`height`、`margin`、`padding`、`border`
定位	`position`、`top`、`left`、`float`
背景	`background`
显示	`display`

示例：

<div style="color: red; border: 1px solid black;">
  <p>这段文字是红色的（继承 color）</p>
  <p>但没有边框（border 不继承）</p>
</div>

强制继承：

1
2
3

.child {
  border: inherit; /* 强制继承父元素的 border */
}

拓展：

inherit：强制继承父元素的值
initial：恢复为属性的默认值
unset：如果属性可继承则继承，否则恢复默认

13. 什么是盒子模型，并简介其功能和结构？盒模型的宽度和高度计算公式？

答案：

盒子模型定义：
CSS 盒模型（Box Model）是 CSS 布局的基础概念，它将每个 HTML 元素看作一个矩形盒子，用于控制元素的尺寸和间距。

盒模型结构（由内到外）：

┌─────────────────────────────────────┐
│              margin                 │
│  ┌───────────────────────────────┐  │
│  │           border              │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │        padding          │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     content       │  │  │  │
│  │  │  │   (width×height)  │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

部分	说明
content	内容区，显示文本、图片等
padding	内边距，内容与边框之间的空白
border	边框，围绕内边距和内容的边界线
margin	外边距，边框外侧与其他元素的间距

盒模型计算公式：

标准盒模型（content-box，默认）：

1 2	实际宽度 = width + padding-left + padding-right + border-left + border-right 实际高度 = height + padding-top + padding-bottom + border-top + border-bottom

IE 盒模型（border-box）：

1 2	实际宽度 = width（包含 padding 和 border）实际高度 = height（包含 padding 和 border）

切换盒模型：

/* 推荐使用 border-box */
* {
  box-sizing: border-box;
}

拓展：

box-sizing: content-box;（默认）：width 只包含内容
box-sizing: border-box;：width 包含内容、padding、border
margin 不计入元素尺寸，但影响布局

14. 盒子有哪些定位方式，以及它们之间的区别？

答案：

CSS 定位方式（position 属性）：

定位方式	值	特点
静态定位	`static`	默认值，按正常文档流排列，`top/left` 等无效
相对定位	`relative`	相对于自身原来位置偏移，仍占据原来空间
绝对定位	`absolute`	相对于最近的定位祖先偏移，脱离文档流
固定定位	`fixed`	相对于浏览器窗口固定，脱离文档流
粘性定位	`sticky`	在阈值内为 relative，超过阈值为 fixed

详细对比：

/* 相对定位：相对自身偏移 */
. relative {
  position: relative;
  top: 20px;
  left: 30px;
  /* 元素移动，但原位置仍被保留 */
}

/* 绝对定位：相对定位祖先偏移 */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
  /* 脱离文档流，不占据空间 */
}

/* 固定定位：相对视口固定 */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* 滚动页面时位置不变 */
}

/* 粘性定位 */
.sticky {
  position: sticky;
  top: 0;
  /* 滚动到顶部时固定 */
}

关键区别：

特性	static	relative	absolute	fixed	sticky
脱离文档流	✗	✗	✓	✓	部分
参照物	-	自身	定位祖先	视口	最近滚动祖先
保留原位置	-	✓	✗	✗	✓

拓展：

z-index 控制堆叠顺序，只对定位元素有效
绝对定位元素会寻找最近的 position 不为 static 的祖先

15. 如何应用浮动，以及为什么要清除浮动？

答案：

浮动的应用：

/* 基本浮动 */
.float-left {
  float: left;
}

.float-right {
  float: right;
}

/* 图文混排 */
img {
  float: left;
  margin-right: 10px;
}

浮动的特点：

元素脱离文档流，向左或向右移动
直到碰到父元素边界或其他浮动元素
其他内容会环绕浮动元素
浮动元素会变成块级元素

为什么要清除浮动？

问题：父元素高度塌陷

<div class="parent">
  <div class="child" style="float: left;">浮动子元素</div>
</div>

清除浮动的方法：

/* 方法1：clear 属性 */
.clear {
  clear: both;
}

/* 方法2：父元素 overflow */
.parent {
  overflow: hidden;
  /* 或 overflow: auto; */
}

/* 方法3：伪元素清除（推荐） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 方法4：父元素设置高度（不推荐） */
.parent {
  height: 200px;
}

推荐的 clearfix 方案：

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

拓展：

现代布局推荐使用 Flexbox 或 Grid 替代浮动布局
BFC（块级格式化上下文）可以包含浮动元素

16. 通常主要使用什么布局网页，简介其优点？

答案：

现代网页常用布局方式：

1. DIV + CSS 布局（传统）

. container {
  width: 1200px;
  margin: 0 auto;
}
.header { ... }
.sidebar { float: left; width: 200px; }
.main { float: right; width: 980px; }

优点：兼容性好，结构清晰
缺点：需要清除浮动，代码较多

2. Flexbox 弹性布局（推荐）

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  flex: 1;
}

优点：

一维布局简单高效
轻松实现垂直居中
自动分配剩余空间
响应式友好

3. Grid 网格布局（推荐）

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

优点：

二维布局能力强大
代码简洁，可读性高
适合复杂页面结构
原生支持响应式

4. 响应式布局

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

使用媒体查询适配不同设备

布局方式对比：

| 布局方式 | 适用场景 | 兼容性 |
| : — | :— | :— |
| Float | 简单布局、图文混排 | 极好 |
| Flexbox | 一维布局、导航、卡片 | 好 |
| Grid | 二维布局、复杂页面 | 较好 |

拓展：

移动优先（Mobile First）设计理念
CSS 框架：Bootstrap、Tailwind CSS

17. 使用 CSS 制作导航菜单通常有哪两类？并举例说明？

答案：

导航菜单主要分为两类：

1. 水平导航菜单（Horizontal Navigation）

<nav class="nav-horizontal">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

. nav-horizontal ul {
  list-style: none;
  margin: 0;
  padding:  0;
  display: flex; /* 或使用 float */
  background-color: #333;
}

.nav-horizontal li {
  /* 如果用 float:  float: left; */
}

.nav-horizontal a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.nav-horizontal a:hover {
  background-color: #555;
}

2. 垂直导航菜单（Vertical Navigation）

<nav class="nav-vertical">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

.nav-vertical {
  width: 200px;
  background-color:  #333;
}

.nav-vertical ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-vertical a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #444;
}

.nav-vertical a:hover {
  background-color: #555;
}

下拉菜单示例：

<li class="dropdown">
  <a href="#">产品</a>
  <ul class="dropdown-menu">
    <li><a href="#">产品A</a></li>
    <li><a href="#">产品B</a></li>
  </ul>
</li>

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position:  absolute;
  top: 100%;
  left: 0;
  background:  #333;
  min-width: 150px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

拓展：

移动端常用汉堡菜单（Hamburger Menu）
使用 transition 添加动画效果
响应式导航：桌面端水平，移动端垂直

18. JavaScript 的三种使用方式，并举例说明？

答案：

JavaScript 的三种使用方式：

1. 行内方式（Inline）
直接在 HTML 标签的事件属性中编写 JavaScript 代码。

<button onclick="alert('Hello World!')">点击我</button>

<a href="javascript:void(0);" onclick="doSomething()">点击链接</a>

<input type="text" onblur="validateInput(this)">

特点：

简单快捷，适合简单交互
不推荐大量使用，HTML 和 JS 混杂
难以维护和复用

2. 内部方式（Internal）
在 HTML 文档中使用 <script> 标签嵌入 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
  <title>内部 JavaScript</title>
  <script>
    function greet() {
      alert('欢迎访问！');
    }
  </script>
</head>
<body>
  <button onclick="greet()">问候</button>
  
  
  <script>
    document.getElementById('btn').addEventListener('click', function() {
      console.log('按钮被点击');
    });
  </script>
</body>
</html>

特点：

适合单页面特定功能
JS 代码可以访问页面 DOM
不利于多页面复用

3. 外部方式（External）
将 JavaScript 代码写在独立的 .js 文件中，通过 <script src=""> 引入。

// script.js
function calculateSum(a, b) {
  return a + b;
}

document.addEventListener('DOMContentLoaded', function() {
  console.log('页面加载完成');
});

<!DOCTYPE html>
<html>
<head>
  <title>外部 JavaScript</title>
  
  <script src="script. js" defer></script>
</head>
<body>
  <button id="btn">计算</button>
</body>
</html>

特点：

推荐使用，便于维护
可被浏览器缓存，提高性能
多页面可复用

script 标签属性：

属性	作用
`src`	外部 JS 文件路径
`defer`	延迟执行，DOM 解析完成后按顺序执行
`async`	异步加载，下载完成后立即执行
`type`	MIME 类型，默认 `text/javascript`

执行顺序对比：


<script src="a.js"></script>


<script src="b.js" async></script>


<script src="c.js" defer></script>

拓展：

ES6 模块：<script type="module" src="app.js"></script>
动态加载脚本：document.createElement('script')
现代打包工具：Webpack、Vite、Rollup