html的简单应用前言第一题第二题第三题第四题第五题第六题第七题第八题第九题第十题

78 阅读 0 评论 52 点赞

我是靠谱客的博主温柔泥猴桃，最近开发中收集的这篇文章主要介绍html的简单应用前言第一题第二题第三题第四题第五题第六题第七题第八题第九题第十题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

前言
第一题
第二题
第三题
第四题
第五题
第六题
第七题
第八题
第九题
第十题

前言

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

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

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

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

第一题

编写一个完整的 HTML 页面。

要求

页面标签的标题为：Web应用课作业
charset为：UTF-8
keywords为：acwing,web,html
description为：本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》，讲解Web相关知识。
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 %dn", 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 %dn", 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 页面。

要求

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

一个超链接，内容为：About，跳转到/about.html，在当前页面中加载。
一个超链接，内容为一张图片，图片地址：/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，表单中的内容从上到下依次为：

一个text类型的input标签。
- name为：username
- id为：username
- 具有required属性
- minlength为：3
- maxlength为：15
- placeholder为：用户名
- label的文本为：用户名
一个number类型的input标签。
- name为：age
- id为：age
- 具有required属性
- placeholder为：年龄
- label的文本为：年龄
一个email类型的input标签
- name为：email
- id为：email
- 具有required属性
- placeholder为：邮箱
- label的文本为：邮箱
一个password类型的input标签
- name为：password
- id为：password
- 具有required属性
- placeholder为：密码
- label的文本为：密码
一个textarea标签
- name为：resume
- id为：resume
- 没有required标签
- placeholder为：个人简介
- label的文本为：个人简介
一个select标签
- name为：lang
- id为：lang
- label的文本为：语言
- 第一个option：value为Cpp，文本为：Cpp
- 第二个option：value为Java，文本为：Java
- 第三个option：value为Python，文本为：Python
一个按钮
- 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>标题，内容为：咏柳，之后包含一个段落，内容为：碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。

代码：

<!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>

最后

以上就是温柔泥猴桃为你收集整理的html的简单应用前言第一题第二题第三题第四题第五题第六题第七题第八题第九题第十题的全部内容，希望文章能够帮你解决html的简单应用前言第一题第二题第三题第四题第五题第六题第七题第八题第九题第十题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：web前端
浏览次数：78 次浏览
发布日期：2023-09-25 18:30:14
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzocf0_14_jkz.html

html的简单应用前言第一题第二题第三题第四题第五题第六题第七题第八题第九题第十题

概述

文章目录

前言

第一题

要求

代码：

第二题

要求

代码：

第三题

要求

代码：

第四题

要求

代码：

第五题

要求

代码：

第六题

要求

代码：

第七题

要求

代码：

第八题

要求

代码：

第九题

要求

代码：

第十题

要求

代码：

最后

评论列表共有 0 条评论

发表评论取消回复

html的简单应用前言第一题第二题第三题第四题第五题第六题第七题第八题第九题第十题

概述

文章目录

前言

第一题

要求

代码：

第二题

要求

代码：

第三题

要求

代码：

第四题

要求

代码：

第五题

要求

代码：

第六题

要求

代码：

第七题

要求

代码：

第八题

要求

代码：

第九题

要求

代码：

第十题

要求

代码：

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复