HTML 标签的专项操作题

最新推荐文章于 2026-07-20 20:06:35 发布

原创最新推荐文章于 2026-07-20 20:06:35 发布 · 183 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

题目：

一、基础标签应用（18 分）

文本与标题标签（6 分）
- 使用 <h1> 至 <h6> 标签创建六级标题，内容分别为 “一级标题” 到 “六级标题”。
- 在标题下方使用 <p> 标签添加一段文本，内容为 “这是一段包含换行和<strong>加粗</strong>、<em>斜体</em>效果的段落。”，确保换行、加粗、斜体效果正确显示。
列表标签（6 分）
- 创建一个有序列表 <ol>，列表项为 “第一步：准备材料”“第二步：开始操作”“第三步：完成检查”，并设置列表序号从 3 开始。
- 在有序列表下方创建一个嵌套的无序列表 <ul>，外层列表项为 “水果”“蔬菜”，“水果” 下嵌套子列表项 “苹果”“香蕉”，“蔬菜” 下嵌套子列表项 “白菜”“胡萝卜”。
媒体标签（6 分）
- 使用 <img> 标签插入一张图片，要求：src 为公开图片链接（如 https://picsum.photos/200/300），alt 文本为 “示例图片”，宽度设置为 300px，高度自动适应。
- 使用 <iframe> 标签嵌入一个百度首页（https://www.baidu.com），设置宽度 800px，高度 500px，边框为 1px 灰色实线。

二、结构与表单标签（24 分）

语义化结构标签（12 分）
- 使用 HTML5 语义化标签构建页面结构：
  - <header> 内包含网站名称（<h1> 标签 “我的博客”）和简短描述（<p> 标签 “分享生活与技术”）。
  - <nav> 内使用 <a> 标签创建三个导航链接：“首页”（链接 #home）、“文章”（链接 #articles）、“关于”（链接 #about），链接之间用竖线 | 分隔。
  - <footer> 内包含版权信息：<p> 标签 “© 2024 我的博客版权所有”。
- 确保各标签嵌套合理，体现语义化结构。
表单与控件标签（12 分）
- 创建一个表单 <form>，设置 action 为 #，method 为 get，包含以下控件：
  - 文本输入框：标签 “用户名”，name 为 username，placeholder 为 “请输入用户名”。
  - 多行文本框：标签 “个人简介”，name 为 intro，rows 为 4，cols 为 30，placeholder 为 “请简要介绍自己”。
  - 下拉选择框：标签 “学历”，name 为 education，选项为 “高中及以下”“大专”“本科”“硕士及以上”，默认选中 “本科”。
  - 提交按钮：value 为 “提交”；重置按钮：value 为 “重置”。

三、综合标签应用（18 分）

表格与特殊标签综合（18 分）
- 创建一个学生信息表格 <table>，要求：
  - 表头 <thead> 包含 “学号”“姓名”“性别”“专业” 四列。
  - 表体 <tbody> 包含 2 行数据，例如：
    - 第一行：“2023001”“张三”“男”“计算机科学”
    - 第二行：“2023002”“李四”“女”“软件工程”
  - 表格添加 1px 黑色实线边框，单元格内边距 10px，边框合并（border-collapse: collapse）。
- 在表格下方使用 <div> 标签包裹 <span> 标签和 <br> 标签，实现以下效果：
  - 文本内容：“注意：带 * 的为必填项提交前请核对信息无误。”

参考答案

一、基础标签应用答案

文本与标题标签

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <p>这是一段包含<br>换行和<strong>加粗</strong>、<em>斜体</em>效果的段落。</p>
</body>
</html>

列表标签

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ol start="3">
        <li>第一步：准备材料</li>
        <li>第二步：开始操作</li>
        <li>第三步：完成检查</li>
    </ol>

    <ul>
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>胡萝卜</li>
            </ul>
        </li>
    </ul>
</body>
</html>

媒体标签

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <img src="https://picsum.photos/200/300" alt="示例图片" width="300" height="auto">
    
    <iframe src="https://www.baidu.com" width="800" height="500" style="border: 1px solid gray;"></iframe>
</body>
</html>

二、结构与表单标签答案

语义化结构标签

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <p>分享生活与技术</p>
    </header>

    <nav>
        <a href="#home">首页</a> | 
        <a href="#articles">文章</a> | 
        <a href="#about">关于</a>
    </nav>

    <footer>
        <p>© 2024 我的博客 版权所有</p>
    </footer>
</body>
</html>

表单与控件标签

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form action="#" method="get">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名"><br><br>

        <label for="intro">个人简介：</label><br>
        <textarea name="intro" id="intro" rows="4" cols="30" placeholder="请简要介绍自己"></textarea><br><br>

        <label for="education">学历：</label>
        <select name="education" id="education">
            <option value="highschool">高中及以下</option>
            <option value="college">大专</option>
            <option value="bachelor" selected>本科</option>
            <option value="master">硕士及以上</option>
        </select><br><br>

        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

三、综合标签应用答案

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>专业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2023001</td>
                <td>张三</td>
                <td>男</td>
                <td>计算机科学</td>
            </tr>
            <tr>
                <td>2023002</td>
                <td>李四</td>
                <td>女</td>
                <td>软件工程</td>
            </tr>
        </tbody>
    </table>

    <div>
        注意：<span style="color: red">带 * 的为必填项</span><br>
        提交前请核对信息无误。
    </div>
</body>
</html>

标签

#html #前端