《网站设计与网站建设》课程期末考试试卷（A卷）
院系： 班级： 姓名： 学号：
| 题号 | 一 | 二 | 三 | 四 | 五 | 总分 |
|---|---|---|---|---|---|---|
| 得分 |
单项选择题（每题2分，共20分）
-
在HTML中，哪个标签用于定义文档的标题，并且这个标题会显示在浏览器的标签页上？ A.
<header>B.<title>C.<h1>D.<head> -
以下哪个CSS属性用于设置元素的背景颜色？ A.
colorB.bgcolorC.background-colorD.bg-color -
在响应式网页设计中，为了使图片在不同尺寸的屏幕上都能良好显示，应使用哪个CSS属性？ A.
display: block;B.max-width: 100%;C.width: auto;D.height: auto; -
以下哪个不是JavaScript的基本数据类型？ A.
StringB.BooleanC.ArrayD.Number
（图片来源网络，侵删） -
在HTML5中，用于在网页上嵌入视频内容的新标签是？ A.
<movie>B.<media>C.<video>D.<embed> -
CSS中的
box-sizing: border-box;属性的作用是？ A. 让元素的盒模型从内向外计算，即width和height包含padding和borderB. 让元素的盒模型从外向内计算，即width和height不包含padding和borderC. 隐藏元素的padding和borderD. 让元素的padding和border大小 -
在进行网站开发时，通常将网站的内容与表现分离，主要使用什么技术？ A. HTML负责内容，CSS负责表现，JavaScript负责行为 B. CSS负责内容，HTML负责表现，JavaScript负责行为 C. JavaScript负责内容，HTML负责表现，CSS负责行为 D. 以上都不对
-
以下哪个HTTP状态码表示“页面未找到”（Not Found）？ A. 200 B. 301 C. 404 D. 500
（图片来源网络，侵删） -
在网站建设流程中，哪个阶段是项目成功的关键，需要明确网站的目标用户、功能和设计风格？ A. 需求分析 B. 网站设计 C. 网站开发 D. 测试与上线
-
SEO（搜索引擎优化）的主要目的是什么？ A. 提高网站的服务器性能 B. 优化网站的代码结构 C. 提高网站在搜索引擎结果中的自然排名 D. 增加网站的广告收入
填空题（每空2分，共20分）
- HTML的英文全称是_____。
- CSS的英文全称是，它主要用于控制网页的。
- JavaScript是一种（客户端/服务器端）脚本语言，主要用于实现网页的。
- 在HTML中，
<a>标签的_________________________属性用于指定链接的目标地址。 - 一个完整的CSS选择器由三部分组成：选择器、属性和_____。
- 使用
<meta name="viewport" content="width=device-width, initial-scale=1.0">标签是为了实现网站的_____。 - 后端开发通常使用一种称为_____（技术）的方式来动态生成HTML页面。
- 网站性能优化中，将CSS文件放在
<head>中，将JavaScript文件放在</body>之前，是为了优化页面的_____。
名词解释（每题5分，共20分）
- DOM (文档对象模型)
- 响应式网页设计
- 前端框架
- 用户体验
简答题（每题10分，共20分）
- 简述HTML、CSS、JavaScript三者在网页开发中各自的作用和关系。
- 请描述从用户在浏览器地址栏输入网址到看到完整页面的基本过程（涉及HTTP请求和DNS解析等）。
综合设计题（20分）
** 请为你所在的专业或兴趣小组设计一个简单的个人作品集网站。
要求：
-
内容规划：
- 列出该网站至少需要包含的3个主要页面（首页、关于我、作品展示）。
- 简要描述每个页面的核心内容和功能。
-
技术实现：
- 请为“作品展示”页面编写HTML和CSS代码。
- HTML要求： 使用语义化标签（如
<header>,<main>,<section>,<article>,<footer>）构建页面结构，至少包含一个作品列表，每个作品项应包含标题、图片和简短描述。 - CSS要求：
- 使用Flexbox或Grid布局,将作品以卡片形式排列成两列。
- 为作品卡片添加悬停效果,鼠标悬停时卡片轻微上移并显示阴影。
- 设置页面背景色、文字颜色和整体字体样式,确保良好的可读性。
- （可选加分项）编写一小段媒体查询代码,使页面在手机屏幕上显示为一列布局。
参考答案
单项选择题
- B
- C
- B
- C
- C
- A
- A
- C
- A
- C
填空题
- HyperText Markup Language (超文本标记语言)
- Cascading Style Sheets (层叠样式表)，表现/样式
- 客户端，交互行为
- href
- 值
- 响应式设计
- 模板引擎
- 渲染性能
名词解释
- DOM (文档对象模型): 是HTML和XML文档的编程接口，它将文档表示为一个由节点和对象（包含属性、方法和事件）组成的树形结构，通过JavaScript可以访问和修改DOM，从而动态地改变网页的内容、结构和样式。
- 响应式网页设计: 一种网页设计方法，使网站能够自动响应用户的设备屏幕尺寸和分辨率，通过使用弹性网格布局、弹性图片和媒体查询等技术，确保网站在桌面电脑、平板电脑和手机等各种设备上都能提供最佳的浏览体验。
- 前端框架: 一个预先编写好的、可复用的代码库，为前端开发者提供了一套结构、规范和工具集，以简化复杂Web应用程序的开发，React、Vue.js和Angular等,它们帮助开发者高效地构建用户界面和管理应用状态。
- 用户体验: 指的是用户在使用一个产品、系统或服务时的主观感受和情绪反应，它涵盖了用户与产品交互的各个方面，包括易用性、效率、可访问性、愉悦感等,目标是创造一个既好用又令人满意的产品。
简答题
-
HTML、CSS、JavaScript的作用和关系：
- HTML (HyperText Markup Language): 是网页的骨架，负责定义网页的结构和内容，它使用各种标签（如
<p>,<h1>,<img>）来组织文本、图片、链接等元素。 - CSS (Cascading Style Sheets): 是网页的外貌，负责控制网页的视觉表现，它定义了HTML元素的样式，如颜色、字体、间距、布局等,使网页变得美观。
- JavaScript: 是网页的行为，负责实现网页的交互功能和动态效果，它可以响应用户的操作（如点击、输入），动态修改网页内容（DOM操作），与服务器进行通信（AJAX）等。
- 关系： 三者相互分离、协同工作，HTML提供内容，CSS负责美化，JavaScript赋予生命，这种“内容、表现、行为”分离的架构是现代网页开发的最佳实践,有利于代码的维护和重用。
- HTML (HyperText Markup Language): 是网页的骨架，负责定义网页的结构和内容，它使用各种标签（如
-
用户访问网站的基本过程：
