web网页前端开发（期末复习）

更新时间：试题数量：购买人数：提供作者：

有效期：个月

章节介绍：共有个章节

收藏

我的练习

我的错题
(0道)

我的收藏
(0道)

我的斩题
(0道)

我的笔记
(0道)

专项练习

顺序练习 练习进度 0 / 0

随机练习 自定义设置练习量

模拟考试 仿真模拟

题型练习 按题型分类练习

易错题 精选高频易错题

学习资料 考试学习相关信息

搜索

题库预览

JavaScript中按钮点击事件是（）。

在Html文档中引入JavaScript文件的方式主要有：行内式、（）、（）。

综合设置多种过渡效果应使用（）属性。

<input>标签的type属性为（）时，可以创建单选框。

设置元素平移、缩放、旋转等效果应使用（）属性。

按单双标签分类，hr标签属于（）。

类选择器以（）开头，ID选择器以（）开头。

盒子模型的（）属性如果设置为（）属性值，则对于块级元素在水平方向上会自动居中。

CSS中定位元素可能会发生重叠，要想调整重叠定位元素的堆叠顺序，使用（）属性。

在CSS中元素分为两类，一类是块元素，另一类是行内元素，如果需要将span标签转为块元素，则CSS代码为span{（）}。

请编写HTML和CSS代码，加完样式后如下图的效果。 <图片> 要求：（1）大图小图都在images文件夹，大图的图片名称分别是pics1.jpg、pics2.jpg、pics3.jpg，小图的图片名称分别是p1.jpg、p2.jpg、p3.jpg，每一张大图分别放在无序列表的选项中，三张小图都放在段落标签中，且图片存储在相对应位置。（2）小图片的边框粗细为1px，黑色实线，大图片的边框粗细为10px，黑色实线，并且大小图片，在整个网页上居中，在下排小图片区域中单击小图时，就会大图片区域中显示相应的大图片，大图片宽420px，高300px，其它如上图所示。 (缺图)

<input type="checkbox" class="item">HTML <input type="checkbox" class="item">CSS <input type="checkbox" class="item">JS <label>等级：</label>  <select class="item"> <option>初级</option> <option>中级</option> <option>高级</option> </select> <br> <input type="submit" value="提交"> </form> </div> </body> </html> 请完成 HTML 代码和 CSS 代码，实现下图的网页效果。 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2411145566654685865258466845686e~tplv-k3u1fbpfcp-zoom-1.image?Expires=1718664000~Expires=1718664000~sign=1718664000~sign=1718664000~&q=80&c=0&u=0:0&f=webp&x-oss-process=image/resize,m_lfit,w_1280/format,webp/quality,q_80"> 要求： (1) 在第一部分中，字体的大小为 30 像素，字体加粗为正常，斜体加下划线，隶书。首字大小了 90 像素，加粗，颜色值：#000。 (2) 第二部分，红色块高为 50 像素，长度为 200 像素。 (3) 第三部分字体大小为 30 像素，隶书，不带下划线的超链接，且未访问时的颜色为红色，访问后的颜色为黄色，鼠标放上去时为绿色，按住不放时为粉红色（pink）参考代码如下： <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p { font-family: 隶书; font-size: 30px; font-weight: normal; font-style: italic; text-decoration: underline; } #div1 { height: 50px; width: 200px; background-color: red; line-height: 50px; text-align: center; } p:first-letter { /*浏览器低的情况下，需要在 first-letter 后加一个空格*/ font-size: 90px; font-weight: bold; color: #000; } a { font-size: 30px; font-family: 隶书; text-decoration: none; } a:link { color: red; } a:visited { color: yellow; } a:hover { color: green; } a:active { color: pink; } </style> </head> <body> <p>新华社：全国两会期间，习近平总书记在作出“五个必由之路”重大论断的同时，深刻洞察时代发展大势，准确把握历史发展趋势，深入分析我国发展优势，从统筹中华民族伟大复兴战略全局和世界百年未有之大变局的高度，作出我国发展具有“五个战略性有利条件”的重大论断，对新时代新征程上我国面临的战略机遇和显著优势进行了精辟概括和深刻阐释 <br> <div id="div1">我是一个块元素</div> <a href="#">我是一个超链接</a> </p> </body> </html> (缺图)

请使用HTML和CSS创建一个简单的网页布局，包含以下元素：一个标题（<h1>），内容为“欢迎来到我的网页”。一个导航栏（<nav>），包含三个链接（<a>），分别指向“首页”、“关于我们”和“联系我们”。一个内容区域（<div>），包含一段文字“你的学号XXX 姓名XXX”。一个页脚（<footer>），内容为“福州工商学院 © 2025”。要求：使用CSS设置标题字体颜色为蓝色（blue）。导航栏的链接应水平排列，并且在悬停时字体颜色变为红色（red）。内容区域的背景颜色为浅灰色（#f0f0f0）。页脚应固定在页面底部，并且字体颜色为白色（white），背景颜色为深灰色（#333）。

请使用表格表单完成一套测试题，最终得到下图的效果： <图片> 注：（1）表单使用POST方式提交给test.asp网页；（2）表格的基本属性如下：边框为1像素，居中显示，表格宽430像素，表格背景为浅绿色；①设置为三级标题格式，标题距离单元格上边框为5像素，标题内容为：一套测试题；②表格为十行二列；③标题“填空”、“单选”、“多选”设置为四级标题格式，并距离单元格左边框为10像素、单元格上边框为5像素；④题目“1.花儿为什么这么红”、“2.树为什么这么高”距离左侧内边框为20像素；⑤两个题目的所有选项距离左右内边框为30像素，距离上下内边框为0像素；⑥“提交”按钮居中显示。 (缺图)

请使用HTML和CSS编写一个简单的用户注册表单页面。要求如下：（1）HTML部分要求：使用<form>标签创建表单。包含以下控件：用户名：文本输入框。密码：密码输入框。性别：单选按钮（男、女）。兴趣：复选框（阅读、运动、旅游）。城市：下拉选择框（北京、上海、广州）。注册：提交按钮。所有输入框前必须使用<label>标签标注。（2）CSS部分要求：必须使用外部CSS。必须使用id选择器（至少1个）和class选择器（至少1个）。设置页面背景色为浅灰色（#f0f0f0）。设置输入框（文本、密码、下拉框）的边框为1像素灰色实线。设置提交按钮的背景色为蓝色，并在鼠标悬停时变深。参考代码如下： <!DOCTYPE html> <html> <head> <title>注册页面</title>  <style> /* 1. 页面背景（基础选择器）*/ body { background-color: #f0f0f0; } /* 2. id选择器：定义盒子样式 */ #box { width: 300px; margin: 50px auto; /* 居中 */ padding: 20px; background: white; border: 1px solid #ddd; } /* 3. class选择器：统一输入框样式 */ .input { width: 200px; padding: 5px; border: 1px solid #999; /* 要求的边框样式 */ } /* 4. id选择器：按钮样式 */ #btn { padding: 8px 16px; background-color: #007BFF; /* 蓝色背景 */ color: white; border: none; cursor: pointer; } /* 5. 伪类：悬停变色 */ #btn:hover { background-color: #0056b3; } </style> </head> <body>  <div id="box"> <h3>会员注册</h3> <form>  <label>用户名：</label> <input type="text" class="input"><br><br> <label>密码：</label> <input type="password" class="input"><br><br> <label>性别：</label> <input type="radio" name="sex">男 <input type="radio" name="sex">女<br><br> <label>兴趣：</label> <input type="checkbox">阅读 <input type="checkbox">运动 <input type="checkbox">旅游<br><br> <label>城市：</label> <select class="input"> <option>北京</option> <option>上海</option> <option>广州</option> </select><br><br>  <input type="submit" id="btn" value="注册"> </form> </div> </body> </html>【缺少答案，请补充】

请编写一个简单用户信息收集表页面，并通过外部CSS进行样式美化。具体要求如下：（1）HTML结构（10分）：创建一个宽度为300px的表单区域。包含以下表单控件：姓名：文本输入框（<input type="text">）。性别：单选按钮（<input type="radio">），选项为“男”、“女”。课程：复选框（<input type="checkbox">），选项为“HTML”、“CSS”、“JS”。等级：下拉选择框（<select>），选项为“初级”、“中级”、“高级”。提交：提交按钮（<input type="submit">）。有选项前必须使用<label>标签标注。（2）CSS样式（10分）：外部引入：必须使用外部样式表（<link>标签）。Class选择器：定义一个类选择器.item，应用于所有<input>和<select>标签，设置其宽度为100%且底部外边距为10px。Id选择器：定义一个ID选择器#container，应用于包裹表单的<div>，设置其宽度为300px，居中对齐（margin: auto）。参考代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息收集</title> <style> /* ID选择器：设置容器样式 */ #container { width: 300px; margin: 50px auto; /* 居中 */ padding: 20px; border: 1px solid #ccc; font-family: "Microsoft YaHei"; } /* Class选择器：统一表单元素样式 */ .item { width: 100%; /* 宽度100% */ margin-bottom: 10px; /* 底部边距 */ padding: 5px; } </style> </head> <body>  <div id="container"> <form> <label>姓名：</label> <input type="text" class="item"><br> <label>性别：</label> <input type="radio" name="sex">男 <input type="radio" name="sex">女<br> <label>课程：</label> <input type="checkbox" class="item">HTML <input type="checkbox" class="item">CSS <input type="checkbox" class="item">JS<br> <label>等级：</label> <select class="item"> <option>初级</option> <option>中级</option> <option>高级</option> </select><br> <input type="submit" value="提交"> </form> </div> </body> </html>