资源描述
2026年前端开发（页面制作）考题及答案
（考试时间：90分钟 满分100分）
班级______ 姓名______
第I卷（选择题 共30分）
（总共6题，每题5分，每题给出的四个选项中，只有一项是符合题目要求的，请将正确答案填在括号内）
w1. 以下关于HTML标签的说法，正确的是（ ）
A. <p>标签用于定义段落，会自动在段落前后添加空行
B. <br>标签用于强制换行，会在换行处添加一个空行
C. <h1> - <h6>标签用于定义标题，数字越大字体越大
D. <a>标签只能用于创建网页内部链接
w2. 在CSS中，设置元素字体颜色的属性是（ ）
A. font-size
B. color
C. background-color
D. text-align
w3. 下列哪个是CSS选择器中用于选中所有元素的（ ）
A.
B. id
C..class
D. element
w4. 以下关于JavaScript函数的说法错误的是（ ）
A. 函数可以封装一段可重复使用的代码
B. 函数必须有返回值
C. 函数可以通过参数传递数据
D. 函数定义使用function关键字
w5. 在HTML中，要创建一个无序列表，应使用的标签是（ ）
A. <ol>
B. <ul>
C. <li>
D. 以上都不对
w6. 下列关于盒模型的说法正确的是（ ）
A. 盒模型由内容区、内边距、边框和外边距组成
B. 外边距不能设置为负数
C. 内边距和边框的背景颜色与元素背景颜色一致
D. 内容区大小由width和height属性决定
第II卷（非选择题 共70分）
w7. （15分）简述CSS的三种引入方式，并分别举例说明。
w8. （15分）写出一段JavaScript代码，实现判断一个数是否为偶数。
w9. （20分）有如下HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>页面示例</title>
</head>
<body>
<div id="main">
<h1>这是一个标题</h1>
<p>这是一段文字。</p>
</div>
</body>
</html>
```
请使用CSS为上述代码中的元素设置如下样式：
- 标题文字颜色为红色，字体大小为24px。
- 段落文字颜色为蓝色，字体大小为16px。
- 整个div元素的背景颜色为浅黄色。
w10. （20分）阅读以下材料：
在网页开发中，常常需要实现导航栏的功能。导航栏是用户在网页中快速定位和访问不同页面或功能模块的重要元素。常见的导航栏有水平导航栏和垂直导航栏。水平导航栏通常位于页面顶部，各个导航项水平排列；垂直导航栏一般在页面侧边，导航项垂直排列。
请根据上述材料，设计一个简单的水平导航栏，包含“首页”“产品介绍”“服务”“关于我们”四个导航项，要求使用HTML和CSS实现，并且当鼠标悬停在某个导航项上时，该导航项有背景颜色变化的效果。
答案：
w1. A
w2. B
w3. A
w4. B
w5. B
w6. A
w7. CSS的三种引入方式及示例：
- 内联样式：在HTML标签的style属性中直接设置样式。例如：<p style="color: red; font-size: 16px;">这是一段内联样式的文字。</p>
- 内部样式表：在HTML文档的<head>标签内使用<style>标签定义样式。例如：
<head>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>
- 外部样式表：将样式代码写在一个独立的CSS文件中，然后在HTML文档中通过<link>标签引入。例如：
<head>
<link rel="stylesheet" href="styles.css">
</head>
w8.
```javascript
function isEven(num) {
return num % 2 === 0;
}
```
w9.
```css
main h1 {
color: red;
font-size: 24px;
}
main p {
color: blue;
font-size: 16px;
}
main {
background-color: lightyellow;
}
```
w10. HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>导航栏示例</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: 333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: 111;
}
</style>
</head>
<body>
<ul>
<li><a href="">首页</a></li>
<li><a href="">产品介绍</a></li>
<li><a href="">服务</a></li>
<li><a href="">关于我们</a></li>
</ul>
</body>
</html>
```
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
