html的简单应用

举报
辰chen 发表于 2022/06/14 23:18:14 2022/06/14
【摘要】 文章目录 前言第一题第二题第三题第四题第五题第六题第七题第八题第九题第十题 前言 💫你好，我是辰chen，一个正在考研途中的 ...

文章目录

前言

💫你好，我是辰chen，一个正在考研途中的 s o p h o m o r e sophomore sophomore d o g dog dog😖
💫本篇内容来源于对 AcWing-Web应用课的总结与复习，其内容来源于讲义与习题打卡，Web前端专栏地址：Web前端
💫欢迎大家的关注，我的博客主要关注于考研408以及AIoT的内容

以下的几个专栏是本人比较满意的专栏(大部分专栏仍在持续更新)，欢迎大家的关注：

💥ACM-ICPC算法汇总【基础篇】
💥ACM-ICPC算法汇总【提高篇】
💥AIoT(人工智能+物联网)
💥考研
💥CSP认证考试历年题解

建议在读本篇博客时，配合 vscode前端环境配置与html基础标签 食用，效果更佳！

第一题

编写一个完整的 HTML 页面。

要求

  1. 页面标签的标题为：Web应用课作业
  2. charset为：UTF-8
  3. keywords为：acwing,web,html
  4. description为：本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》，讲解Web相关知识。
  5. icon设置为：/images/logo.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web应用课作业</title>
    <meta name="keywords" content="acwing,web,html">
    <meta name="description" content="本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》，讲解Web相关知识。">
    <link rel="icon" href="/images/logo.png">
</head>

<body>

</body>

</html>

第二题

编写一个完整的HTML页面。

要求

页面从上到下的内容依次为：

  • (1) <h2>标题，内容为：春江花月夜。
  • (2) <h5>标题，内容为：张若虚。
  • (3) 编写一个段落，内容为（注意标点和行末回车）：
春江潮水连海平，海上明月共潮生。
滟滟随波千万里，何处春江无月明！
江流宛转绕芳甸，月照花林皆似霰；
空里流霜不觉飞，汀上白沙看不见。
江天一色无纤尘，皎皎空中孤月轮。
江畔何人初见月？江月何年初照人？
人生代代无穷已，江月年年望相似。
  • (4) 一个水平线
  • (5) 一段代码，需要用预定义格式文本，内容为：
int main()
{
    int a, b;
    scanf("%d%d", &a, &b);
    printf("%d %d\n", a, b);
    return 0;
}
  • (6) 编写一个段落，内容为：春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。，第一句话用斜体（包括句末标点），第二句话加粗（包括句末标点），第三句话加删除线（包括句末标点），第四句话加下划线（包括句末标点）。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>春江花月夜</h2>
    <h5>张若虚</h5>
    <p>
        春江潮水连海平，海上明月共潮生。<br>
        滟滟随波千万里，何处春江无月明！<br>
        江流宛转绕芳甸，月照花林皆似霰；<br>
        空里流霜不觉飞，汀上白沙看不见。<br>
        江天一色无纤尘，皎皎空中孤月轮。<br>
        江畔何人初见月？江月何年初照人？<br>
        人生代代无穷已，江月年年望相似。
    </p>

    <hr>

    <pre>
int main()
{
    int a, b;
    scanf("%d%d", &a, &b);
    printf("%d %d\n", a, b);
    return 0;
}
    </pre>

    <p>
        <i>春眠不觉晓，</i>
        <b>处处闻啼鸟。</b>
        <del>夜来风雨声，</del>
        <ins>花落知多少。</ins>
    </p>

</body>

</html>

第三题

编写一个完整的 HTML 页面。

要求

页面里包含一张图片，各个属性值为：

  • src为：/images/mountain.jpg。
  • alt为：山。
  • width为：600

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img width="600" src="/images/mountain.jpg" alt="山">
</body>

</html>

第四题

编写一个完整的 HTML 页面。

要求

页面中包含一个音频和一个视频。

音频格式：

  • 具有属性controls。
  • src为：/audios/bgm.mp3。

视频格式：

  • 具有属性controls。
  • src为：/videos/video2.mp4。
  • width为：600。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio controls src="/audios/bgm.mp3"></audio>
    <video width="600" controls src="/videos/video2.mp4"></video>
</body>

</html>

第五题

编写一个完整的 HTML 页面。

要求

页面从上到下的内容依次为：

  1. 一个超链接，内容为：About，跳转到/about.html，在当前页面中加载。
  2. 一个超链接，内容为一张图片，图片地址：/images/logo.png，宽度为50px，alt为logo，跳转到：https://www.acwing.com，在新窗口中打开。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="/about.html">About</a>
    <a href="https://www.acwing.com" target="_blank">
        <img width="50" src="/images/logo.png" alt="logo">
    </a>
</body>

</html>

第六题

编写一个完整的 HTML 页面。

要求

页面中包含一个表单，表单的action为/login.html，表单中的内容从上到下依次为：

  1. 一个text类型的input标签。
    • name为：username
    • id为：username
    • 具有required属性
    • minlength为：3
    • maxlength为：15
    • placeholder为：用户名
    • label的文本为：用户名
  2. 一个number类型的input标签。
    • name为：age
    • id为：age
    • 具有required属性
    • placeholder为：年龄
    • label的文本为：年龄
  3. 一个email类型的input标签
    • name为：email
    • id为：email
    • 具有required属性
    • placeholder为：邮箱
    • label的文本为：邮箱
  4. 一个password类型的input标签
    • name为：password
    • id为：password
    • 具有required属性
    • placeholder为：密码
    • label的文本为：密码
  5. 一个textarea标签
    • name为：resume
    • id为：resume
    • 没有required标签
    • placeholder为：个人简介
    • label的文本为：个人简介
  6. 一个select标签
    • name为：lang
    • id为：lang
    • label的文本为：语言
    • 第一个option：value为Cpp，文本为：Cpp
    • 第二个option：value为Java，文本为：Java
    • 第三个option：value为Python，文本为：Python
  7. 一个按钮
    • type为submit
    • 文本为：提交

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="/login.html">
        <label for="username">用户名</label>
        <input required placeholder="用户名" minlength="3" maxlength="15" type="text" name="username" id="username">

        <label for="age">年龄</label>
        <input type="number" name="age" required id="age" placeholder="年龄">

        <label for="email">邮箱</label>
        <input type="email" name="email" id="email" required placeholder="邮箱">

        <label for="password">密码</label>
        <input type="password" name="password" id="password" required placeholder="密码">

        <label for="resume">个人简介</label>
        <textarea cols="30" rows="10" name="resume" id="resume" placeholder="个人简介"></textarea>

        <label for="lang">语言</label>
        <select type="select" name="lang" id="lang">
            <option value="Cpp">Cpp</option>
            <option value="Java">Java</option>
            <option value="Python">Python</option>
        </select>

        <button type="submit">提交</button>
    </form>
</body>

</html>

第七题

编写一个完整的 HTML 页面。

要求

页面中包含一个有序列表：

  • 列表第一项只包含一个文本，内容为：第一讲
  • 列表第二项包含：
    • 一个文本，内容为：第二讲
    • 一个无序列表，包含3项，均为文本，内容分别为：第一小节、第二小节、第三小节。
  • 列表第三项包含：
    • 一个文本，内容为：第三讲
    • 一个有序列表，包含3项，均为文本，内容分别为：第一小节、第二小节、第三小节。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>第一讲</li>
        <li>
            第二讲
            <ul>
                <li>第一小节</li>
                <li>第二小节</li>
                <li>第三小节</li>
            </ul>
        </li>
        <li>
            第三讲
            <ol>
                <li>第一小节</li>
                <li>第二小节</li>
                <li>第三小节</li>
            </ol>
        </li>
    </ol>
</body>

</html>

第八题

编写一个完整的 HTML 页面。

要求

页面中包含一个表格，要求：

  • 表格的标题为：成绩单
  • 表格的内容为：
姓名 数学 语文 英语
Alice 100 99 98
Bob 99 98 97
Tom 98 97 96

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <caption>成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>100</td>
                <td>99</td>
                <td>98</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>99</td>
                <td>98</td>
                <td>97</td>
            </tr>
            <tr>
                <td>Tom</td>
                <td>98</td>
                <td>97</td>
                <td>96</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

第九题

编写一个完整的 HTML 页面。

要求

内容包括四个部分：

  • header区：

    • 包含<h3>标题，内容为：我的收藏夹

  • section区，从上到下依次为：

    • 包含<h4>标题，内容为：图片
    • 第一个<figure>，包含一个<img>，src为/images/logo.png，宽度为100px，<figcaption>的文本为：logo
    • 第二个<figure>，包含一个<img>，src为/images/mountain.jpg，宽度为100px，<figcaption>的文本为：山

  • section区，从上到下依次为：

    • 包含<h4>标题，内容为：古诗
    • 第一个<article>，包含一个<h5>标题，内容为：春晓，之后包含一个段落，内容为：春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
    • 第二个<article>，包含一个<h5>标题，内容为：咏柳，之后包含一个段落，内容为：碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。

  • footer区

    • 包含一行文本：©2018-2022 Me 版权所有

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
        <h3>我的收藏夹</h3>
    </header>
    <section>
        <h4>图片</h4>
        <figure>
            <img width="100" src="/images/logo.png">
            <figcaption>logo</figcaption>
        </figure>
        <figure>
            <img width="100" src="/images/mountain.jpg">
            <figcaption>山</figcaption>
        </figure>
    </section>
    <section>
        <h4>古诗</h4>
        <article>
            <h5>春晓</h5>
            <p>
                春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
            </p>
        </article>
        <article>
            <h5>咏柳</h5>
            <p>
                碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。
            </p>
        </article>
    </section>
    <footer>&copy;2018-2022 Me 版权所有</footer>
</body>

</html>

第十题

编写一个完整的 HTML 页面。

要求

页面中包含一行如下内容：

©<Web>版权所有

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    &copy;&lt;Web&gt;版权所有
</body>

</html>

文章来源: chen-ac.blog.csdn.net，作者：辰chen，版权归原作者所有，如需转载，请联系作者。

原文链接：chen-ac.blog.csdn.net/article/details/124645940

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML 前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入