头歌：HTML——文本

已于 2025-05-13 09:25:30 修改
阅读量886 收藏 17
点赞数 13
CC 4.0 BY-SA版权
文章标签： python html
于 2025-05-13 08:56:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hngcxy2022/article/details/147914929

HTML——文本

第1关：HTML链接：带超链接的网页

  1. 编程要求
    • 补全第17行href属性值和第27行id属性值，实现点击“第1关”和“第2关”可导航到相应内容位置。
    • 为第22、23和24行的三个<a>标签添加target属性，使链接在新标签中打开。
    • 完善第32行<a>标签，让邮箱链接生效。
    • 完善第33行<a>标签，点击“回到顶部”可导航到页面顶部。
  2. 测试说明：补充完代码后，点击测评，结果与预期输出一致则通过。
  3. 代码示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML链接</title>
    <meta name="description" content="HTML链接知识讲解">
    <meta name="keywords" content="HTML, Link">
</head>
<!--------- Begin-------->
<body>
    <h1>HTML 入门</h1>
    <h2>本页目录</h2>
    <ul>
        <li><a href="#toc1">简介</a></li>
        <li><a href="#toc2">第1关</a></li>
        <li><a href="#toc3">第2关</a></li>
    </ul>
    <h2 id="toc1">简介</h2>
    <p>
        <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和
        <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
    <p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p>
    <h2 id="toc2">第1关</h2>
    <p>初识HTML：简单的Hello World网页</p>
    <h2 id="toc3">第2关</h2>
    <p>HTML链接：带超链接的网页</p>
    <hr>
    <p>若需帮助，请发送问题到<a href="mailto:someone@email.com">E-Mail</a>。</p>
    <p><a href="#">回到顶部</a></p>
</body>
<!--------- End-------->
</html>

第2关：HTML标题与段落：网络文章网页

  1. 编程要求
    • 补全第17行strong标签，使“超文本系统”文本重点显示。
    • 在第31和第32行新添一项HTML 5.1历史定义，<dt>内容为“2016年11月1日”，<dd>内容为“HTML 5.1发布。”。
    • 完善35和41行标签，使其中内容成为有序列表。
  2. 测试说明：补充完代码后，点击测评，结果与预期输出一致则通过。
  3. 代码示例
<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>HTML – 维基百科</title>
</head>
<!--------- Begin-------->
<body>
    <h1>HTML</h1>
    <p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
        <a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。
    </p>
    <h2>历史</h2>
    <h3>开发过程</h3>
    <p>1980年，物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>，
        <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
        <strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。
    </p>
    <h3>HTML里程碑</h3>
    <dl>
        <dt>1995年11月24日</dt>
        <dd>HTML2.0发布，对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd>
        <dt>1997年1月14日</dt>
        <dd>HTML 3.2以
            <a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
                <abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
        <dt>1997年12月18日</dt>
        <dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd>
        <dt>2014年10月28日</dt>
        <dd>HTML5 发布。</dd>
        <dt>2016年11月1日</dt>
        <dd>HTML 5.1发布。</dd>
    </dl>
    <h2>参考文献</h2>
        <ol>
        <small>
            <li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p.&#160;1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li>
            <li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li>
            <li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li>
        </small>
        </ol>
</body>
<!--------- End-------->
</html>

第3关：HTML表格：日常消费账单表格展示网页

  1. 编程要求
    • 设置表格总体宽度(width)为400。
    • 在第33行设置表标题，内容为“日常消费账单”。
    • 在表格头部，第37 - 39行中添加scope属性，值设置为col。
    • 补全表80 - 82数据行的标签内容。
    • 添加<tfoot>元素，将总计一行作为表尾。
  2. 测试说明：补充完代码后，点击测评，结果与预期输出一致则通过。
  3. 代码示例
<!DOCTYPE html>
<html>
<!--------- Begin-------->
<head>
    <meta charset="utf-8">
    <title>HTML表格</title>
    <meta name="description" content="HTML表格知识讲解">
    <meta name="keywords" content="HTML,表格, Table">
    <style type="text/css">
    table {
        border-collapse: collapse;
    }
    caption {
        font-weight: bold;
        margin-bottom: .5em;
    }
    th,
    td {
        padding: .5em .75em;
        border: 1px solid #000;
    }
    tfoot {
        font-weight: bold;
    }
    </style>
</head>
<body>
    <table width="400">
    <table border="1" style="margin:auto">
        <caption>日常消费账单</caption>
        <thead>
            <!-- 表格头部 -->
            <tr>
                <th scope="col" align="left">消费项目</th>
                <th scope="col" align="right">一月</th>
                <th scope="col" align="right">二月</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th align="left" scope="row">食品烟酒</th>
                <td align="right">￥1241.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">衣物</th>
                <td align="right">￥330.00</td>
                <td align="right">￥594.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">居住</th>
                <td align="right">￥2100</td>
                <td align="right">￥2100</td>
            </tr>
            <tr>
                <th align="left" scope="row">生活用品及服务</th>
                <td align="right">￥700.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">医疗保健</th>
                <td align="right">￥150.00</td>
                <td align="right">￥50.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">教育、文化和娱乐</th>
                <td align="right">￥1030.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">交通和通信</th>
                <td align="right">￥230.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">其他用品和服务</th>
                <td align="right">￥130.40</td>
                <td align="right">￥150.00</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th align="left" scope="row">总计</th>
                <th align="right">￥5911</th>
                <th align="right">￥6694</th>
            </tr>
        </tfoot>
    </table>
</body>
<!--------- End-------->
</html>
hngcxy2022
关注
WEBSTORM前端——第1章：HTML——第2节：列表，表格，下拉菜单，文本框与按钮
2401_82750246的博客
04-10 1306
（2）保留最左最上单元格，添加属性（取值是数字，表示需要合并单元格数量）（2）有序列表：如一个教程。（2）使用此标签包裹文字和表单控件，不需要属性（常用），dl是定义列表，dt是定义列表标题，dd是定义列表的描述/详情。：列表项标记为带前导零的十进制数字（01, 02, 03...）。相同，列表项标记为小写英文字母（a, b, c...）。：列表项标记为小写罗马数字（i, ii, iii...）。：列表项标记为小写英文字母（a, b, c...）。：列表项标记为大写英文字母（A, B, C...）。
Educoder：HTML——基本标签
QingNiaoJun的博客
04-04 5491
目录第1关：创建第一个 HTML 标签第2关：创建 < h2> - < h6> 标签第3关：创建 p 标签第4关：创建 a 标签第5关：创建 img 标签第6关：创建 div 标签第7关：添加注释 第1关：创建第一个 HTML 标签 任务描述 本关任务：创建你的第一个标签< h1>< /h1>，文本内容为welcome to Educoder。 实现的效果如下： 相关知识 < h1>welcome< /h1> 上面这行代码它表示一个H
头歌-HTML基础
somewon的博客
03-06 1万+
四川师范大学 头歌 web应用开发
头歌网页设计与制作实训答案
naozibuok的博客
06-24 1万+
HTML——基础、HTML——文本、HTML——多媒体、CSS从入门到精通——基础知识、CSS从入门到精通——基础选择器、CSS从入门到精通——背景样式、CSS入门到精通——表格样式、CSS从入门到精通——盒模型
HTML上部分--头歌（educoder）实训作业题目及答案
热门推荐
qq_35353972的博客
10-09 1万+
HTML--头歌（educoder）实训作业题目及答案
《Web应用开发》(头歌)
m0_58186089的博客
03-01 1万+
这里写目录标题实验一HTML——表单类的标签第1关 表单元素——文本框第2关 表单元素——密码框第3关 表单元素——单选框第4关 表单元素——多选框第5关 表单元素——checked属性第6关 表单元素——disabled 属性第7关 表单元素——label 标签第8关 表单元素——下拉列表第9关 表单元素——文本域第10关 表单元素——提交按钮第11关 表单元素的综合案例HTML入门——基础第1关 初识HTML：简单的Hello World网页制作第2关 HTML结构：自我简介网页HTML入门——文本第1
【头歌】HTML——基本标签
2401_84178851的博客
12-10 771
本关任务：创建一个img标签， 图片的地址是https://www.educoder.net/attachments/download/ZTZaUEp2Y0ltSElvcnBxelNJTXYyUT09，提示文字是小狗走路。本关任务：创建一个a标签， 跳转的地址是https://www.educoder.net，文本内容是Educoder平台。本关任务：依次创建-标签，文本内容为创建不同字体大小的标题，查看它们的区别。本关任务:创建一个p标签，文本内容为我是一个段落。
Educoder/头歌JAVA——HTML：表格
舟舟的博客
12-10 5609
表格应用于各种软件中，有表格应用软件也有表格控件，典型的像Office Word，Excel， 表格是最常用的数据处理方式之一，主要用于输入、输出、显示、处理和打印数据，可以制作各种复杂的表格文档，甚至能帮助用户进行复杂的统计运算和图表化展示等。表格控件还可常用于数据库中数据的呈现和编辑、数据录入界面设计、数据交换（如与Excel交换数据）、数据报表及分发等。比如Spread，ComponentOne 的 FlexGrid。
Educoder/头歌JAVA——HTML：表单类的标签
舟舟的博客
12-09 7513
表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio)、复选框(checkbox)等等。
Educoder：HTML——文本
QingNiaoJun的博客
04-06 784
目录：第1关：HTML链接：带超链接的网页第2关：HTML标题与段落：网络文章网页第3关：HTML表格：日常消费账单表格展示网页 第1关：HTML链接：带超链接的网页 任务描述 本关的任务是编写一个带超链接的HTML页面，链接包含页面内导航链接和跳转其他网页的链接。显示效果如下： 为了顺利完成以上网页的制作，请大家认真阅读以下内容。 参考答案 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
wangEditor:wangEditor —— 轻量级web富文本框
05-11
轻量级 web 富文本编辑器，配置方便，使用简单! · · · · 项目介绍 wangEditor 是一款使用 Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费。 兼容常见的 PC 浏览器：...
JavaScript学习手册十四：HTML DOM——文档元素的操作（二）
qq_45823118的博客
04-24 1万+
HTML DOM——文档元素的操作1.创建节点任务描述相关知识创建节点代码文件2.插入节点任务描述相关知识插入节点代码文件3.删除节点任务描述相关知识删除节点代码文件4.替换节点任务描述相关知识替换节点代码文件5.综合练习任务描述相关知识下拉列表的级联代码文件 1.创建节点 任务描述 1.本关任务：创建一个表单<form>节点。 2.具体要求如下： 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示： <form id
头歌HTML实训笔录
k1elvin的博客
11-26 2734
头歌实训笔录HTML前端基础第2关 创建 - 标签 HTML前端基础 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 ##第1关 创建第一个 HTML 标签 // An highlighted block <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </hea
【前端学习整理】HTML（1）：HTML头部与文本标签。
qq_43944712的博客
02-27 426
HTML头部 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;!-- HTML头部指的是head标签内的所有元素 --&amp;amp;amp;gt; &amp;amp;amp;lt;!-- 在 &amp;amp;amp;lt;head&amp;amp;amp;gt;元素中你可以插入脚
YOLO chp01-
最新发布
m0_52024881的博客
06-17 272
复用训练流程：比如你想拿同一套 train.py，测试不同模型结构（一个用 Swin 骨干、一个用 ResNet 骨干 ），或者对比不同学习率的效果，只需要准备多个配置文件，用 --cfg 指定就行，训练代码不用改。解耦代码和配置：代码（train.py ）负责 “执行训练逻辑”，配置文件负责 “定义训练细节”。想换模型结构、调超参数，改配置文件就好，不用动训练代码的核心逻辑，维护起来轻松。记录实验细节：每个配置文件对应一套实验参数，方便后续复盘 “当时用了啥参数训练出的模型” ，也能快速复现实验。
java.uitl.Scanner 这个叫jar包吗？
2401_83708850的博客
06-15 537
标准库 vs 第三方 Jar 包标准库：如java.utiljava.io等包中的类，存放在rt.jartools.jar等 JDK 内置 Jar 中，属于 Java 语言的原生能力。第三方 Jar 包：如 Spring 框架的、Apache 工具类的等，需要通过 Maven/Gradle 手动引入，存放在项目的依赖库中（如 Maven 的.m2仓库）。import 语句的作用只是声明要使用该类，并不涉及 “引入 Jar 包” 的操作。只有当使用第三方库的类（如。
基于HPSO_TVAC与BP神经网络回归模型的特征选择方法研究(Python实现)
张陈亚的博客
06-15 873
摘要：本项目提出了一种基于混合粒子群优化算法(HPSO_TVAC)与BP神经网络的特征选择方法，用于解决高维数据建模中的特征优化问题。通过Python实现，该方法在2000条样本的30维数据集上表现出色，测试集R方达到0.9312。研究包含完整的数据预处理、特征工程和模型评估流程，验证了该混合算法在避免局部最优和提升模型性能方面的有效性。项目提供完整的数据和代码资源，为特征选择研究提供了可复现的解决方案。
Python Shelve 模块详解：高效处理大文件的持久化字典
静水深流
06-15 1562
Python shelve模块：轻量级数据持久化工具 Python的shelve模块提供了一种字典式的数据持久化方案，将键值对存储在磁盘而非内存中，特别适合处理大文件。与普通字典不同，shelve通过按需访问磁盘内容实现了高效内存管理，支持字典常规操作，但限制键必须为字符串。其持久化特性使得数据在程序关闭后仍可保留，适合地址簿管理等场景。不过，shelve依赖pickle模块，存在安全风险，且不支持并发访问。对于需要跨会话保存又无需复杂数据库的小型项目，shelve提供了一种简单有效的解决方案，但在处理不可
头歌HTML——文本
01-09
### HTML 文本示例教程 当创建一个新的HTML文件时，通常会从一个基本模板开始。这个模板包含了网页结构的基础框架[^1]： ```html <!DOCTYPE html> <html lang="zh-CN"> 页面标题 <h1>Hello World! 这是一...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值