web操作题练习(五)

圣光SG2026-07-29 9:53

题目：

一、基本操作题（18 分）

  1. HTML 表单控件与样式（6 分）
    • 创建一个 HTML 表单，包含一个下拉选择框，选项为 "语文""数学""英语"；一个复选框，标签为 "是否住校"；一个单选按钮组，选项为 "男""女"。
    • 使用 CSS 为表单添加样式，使表单整体有 20px 的内边距，背景颜色为淡绿色（lightgreen），所有表单控件的字体颜色为深蓝色（darkblue）。
  2. CSS 盒模型与 Flex 布局（6 分）
    • 创建三个 <div> 元素，分别命名为 div1、div2、div3。
    • 使用 Flex 布局将这三个 <div> 水平排列在一行。div1 的宽度为 150px，div2 的宽度自适应剩余空间，div3 的宽度为 200px。
    • 为每个 <div> 设置 10px 的边框，边框颜色为灰色（gray），边框样式为虚线（dashed）。
  3. HTML5 语义化标签与 CSS 排版（6 分）
    • 在页面中使用 HTML5 的 <header>、<nav>、<main>、<article>、<footer> 语义化标签构建一个简单页面结构。
    • <header> 内包含页面标题 "我的网页"；<nav> 内创建三个导航链接，分别为 "首页""关于""联系我们"；<main> 内的 <article> 包含一篇短文，短文标题为 "欢迎来到我的网站"，正文内容自行编写；<footer> 内包含版权信息 "© 2024 版权所有"。
    • 使用 CSS 对各部分进行排版，例如，header 背景颜色为浅蓝色（lightblue），nav 的文字居中显示，article 的字体大小为 16px 等。

二、简单应用题（24 分）

  1. JavaScript 元素显示与隐藏（12 分）
    • 创建一个页面，包含一个按钮和一个 <div> 元素。按钮的文本为 "切换显示状态"，<div> 元素初始显示，内部包含一些文本内容，例如 "这是要显示或隐藏的内容"。
    • 使用 JavaScript 为按钮添加点击事件监听器，当点击按钮时，切换 <div> 的显示与隐藏状态。如果 <div> 当前是显示的，则点击后隐藏；如果当前是隐藏的，则点击后显示。
  2. JavaScript 数组操作与 DOM 更新（12 分）
    • 定义一个 JavaScript 数组，包含一些水果名称，例如 ['苹果', '香蕉', '橙子']。
    • 在页面上创建一个无序列表 <ul>，id 为 "fruitList"。
    • 使用 JavaScript 将数组中的每个水果名称作为列表项添加到无序列表中。
    • 再添加一个按钮，按钮文本为 "添加水果"。当点击该按钮时，在数组中添加一个新的水果名称 "葡萄"，然后更新无序列表，将新的水果名称也显示出来。

三、综合应用题（18 分）

  1. 响应式布局与 AJAX 数据分页（18 分）
    • 创建一个响应式网页布局，在桌面端（屏幕宽度大于等于 992px）以三列布局展示数据，每列宽度为 33.33%；在平板端（屏幕宽度大于等于 768px 且小于 992px）以两列布局展示数据，每列宽度为 50%；在手机端（屏幕宽度小于 768px）以单列布局展示数据，宽度为 100%。
    • 使用 AJAX（如 fetch）从 https://jsonplaceholder.typicode.com/posts 获取文章数据。
    • 实现数据分页功能，每页显示 5 条文章数据。在页面上添加 "上一页" 和 "下一页" 按钮，通过点击按钮实现数据的翻页显示。当切换页面时，文章数据要根据当前屏幕尺寸在相应的布局中正确展示。

参考答案

一、基本操作题答案

  1. HTML 表单控件与样式

html

复制代码 
<!DOCTYPE html>
<html lang="zh - CN">
<head>
    <meta charset="UTF - 8">
    <style>
        form {
            padding: 20px;
            background - color: lightgreen;
        }
        form select,
        form input {
            color: darkblue;
        }
    </style>
</head>
<body>
    <form>
        <label for="subject">选择科目:</label>
        <select id="subject">
            <option value="语文">语文</option>
            <option value="数学">数学</option>
            <option value="英语">英语</option>
        </select><br><br>
        <input type="checkbox" id="isLiveOnCampus"><label for="isLiveOnCampus">是否住校</label><br><br>
        <input type="radio" id="male" name="gender" value="男"><label for="male">男</label>
        <input type="radio" id="female" name="gender" value="女"><label for="female">女</label>
    </form>
</body>
</html>
  1. CSS 盒模型与 Flex 布局

html

复制代码 
<!DOCTYPE html>
<html lang="zh - CN">
<head>
    <meta charset="UTF - 8">
    <style>
        #container {
            display: flex;
        }
        #div1,
        #div2,
        #div3 {
            border: 10px dashed gray;
        }
        #div1 {
            width: 150px;
        }
        #div2 {
            flex: 1;
        }
        #div3 {
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>
</html>
  1. HTML5 语义化标签与 CSS 排版

html

复制代码 
<!DOCTYPE html>
<html lang="zh - CN">
<head>
    <meta charset="UTF - 8">
    <style>
        header {
            background - color: lightblue;
        }
        nav {
            text - align: center;
        }
        article {
            font - size: 16px;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网页</h1>
    </header>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">联系我们</a>
    </nav>
    <main>
        <article>
            <h2>欢迎来到我的网站</h2>
            <p>这里是正文内容，你可以随意编写，比如介绍网站的功能、特点等等。</p>
        </article>
    </main>
    <footer>
        © 2024 版权所有
    </footer>
</body>
</html>

二、简单应用题答案

  1. JavaScript 元素显示与隐藏

html

复制代码 
<!DOCTYPE html>
<html lang="zh - CN">
<head>
    <meta charset="UTF - 8">
</head>
<body>
    <button id="toggleButton">切换显示状态</button>
    <div id="contentDiv">
        这是要显示或隐藏的内容
    </div>
    <script>
        const toggleButton = document.getElementById('toggleButton');
        const contentDiv = document.getElementById('contentDiv');
        toggleButton.addEventListener('click', function () {
            if (contentDiv.style.display === 'none') {
                contentDiv.style.display = 'block';
            } else {
                contentDiv.style.display = 'none';
            }
        });
    </script>
</body>
</html>
  1. JavaScript 数组操作与 DOM 更新

html

复制代码 
<!DOCTYPE html>
<html lang="zh - CN">
<head>
    <meta charset="UTF - 8">
</head>
<body>
    <ul id="fruitList"></ul>
    <button id="addFruitButton">添加水果</button>
    <script>
        const fruits = ['苹果', '香蕉', '橙子'];
        const fruitList = document.getElementById('fruitList');
        function updateFruitList() {
            fruitList.innerHTML = '';
            fruits.forEach(function (fruit) {
                const listItem = document.createElement('li');
                listItem.textContent = fruit;
                fruitList.appendChild(listItem);
            });
        }
        updateFruitList();
        const addFruitButton = document.getElementById('addFruitButton');
        addFruitButton.addEventListener('click', function () {
            fruits.push('葡萄');
            updateFruitList();
        });
    </script>
</body>
</html>

三、综合应用题答案

html

复制代码 
<!DOCTYPE html>
<html lang="zh - CN">
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <style>
        @media (min - width: 992px) {
           .column {
                width: 33.33%;
                float: left;
            }
        }
        @media (min - width: 768px) and (max - width: 991px) {
           .column {
                width: 50%;
                float: left;
            }
        }
        @media (max - width: 767px) {
           .column {
                width: 100%;
            }
        }
       .column {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="prevPage" style="cursor: pointer;">上一页</div>
    <div id="nextPage" style="cursor: pointer;">下一页</div>
    <div class="column" id="column1"></div>
    <div class="column" id="column2"></div>
    <div class="column" id="column3"></div>
    <script>
        let currentPage = 1;
        const postsPerPage = 5;
        async function fetchPosts() {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts');
                const posts = await response.json();
                displayPosts(posts);
            } catch (error) {
                console.error('获取数据出错:', error);
            }
        }
        function displayPosts(posts) {
            const startIndex = (currentPage - 1) * postsPerPage;
            const endIndex = startIndex + postsPerPage;
            const currentPosts = posts.slice(startIndex, endIndex);
            const columns = document.querySelectorAll('.column');
            columns.forEach(column => column.innerHTML = '');
            currentPosts.forEach((post, index) => {
                const columnIndex = index % columns.length;
                const column = columns[columnIndex];
                const title = document.createElement('h3');
                title.textContent = post.title;
                const body = document.createElement('p');
                body.textContent = post.body;
                column.appendChild(title);
                column.appendChild(body);
            });
        }
        const prevPage = document.getElementById('prevPage');
        const nextPage = document.getElementById('nextPage');
        prevPage.addEventListener('click', function () {
            if (currentPage > 1) {
                currentPage--;
                fetchPosts();
            }
        });
        nextPage.addEventListener('click', function () {
            currentPage++;
            fetchPosts();
        });
        fetchPosts();
    </script>
</body>
</html>
相关推荐
杉氧1 小时前
弹性滚动的奥秘：在 Flutter 中使用 CustomScrollView 与 Sliver 打造极致流畅列表
android·前端·flutter
jinshw1 小时前
自己实现GIS配图软件（二）
前端·后端·rust
肥胖小羊1 小时前
企业微信自建应用多环境联调与路由代理方案
服务器·前端·网络
林间码客1 小时前
全栈视角下的 Mock 指南：从后端单元测试到前端 Vue 3 联调
前端·vue.js·单元测试
Cobyte2 小时前
手写 Rollup 插件实现解析 Vue 文件
前端·javascript·vue.js
IT_陈寒2 小时前
Vue的这个响应式陷阱，我调试了一整天才爬出来
前端·人工智能·后端
莪_幻尘2 小时前
手把手书写你的第一个 AI Skill：从原则到工程化
前端·agent·ai编程
lpfasd1232 小时前
2025-2026前端3D展示技术发展全景
前端·3d
JR空位投 李佃贵是2 小时前
如何编写轻量级 CSS 框架
前端·css·tensorflow
热门推荐
01GitHub 镜像站点022026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片03如何新建文件夹？ 电脑新建文件夹的4种方法04国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）05AI科技热点日报 | 2026年07月01日06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新09幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南102026 年 AI 大模型 & AI 编程工具实战全总结