html的简单应用(一)

简介: html的简单应用

前言

💫你好,我是辰chen,一个正在考研途中的sophomore 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相关知识。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,宽度为50pxaltlogo,跳转到: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>






目录
相关文章
|
4月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
56 3
|
5月前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
206 1
|
5月前
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能,显著提升了用户体验和界面趣味性。例如,颜色选择器可动态改变网站主题色;滑块控制适用于音量或亮度调节;日期和时间输入便于预约系统的设计;互动式表单结合多种输入类型实现高效的数据收集;猜数字游戏增加用户参与度;实时搜索建议优化网站搜索功能;图像预览功能让用户上传图片前预览效果;密码可见性切换按钮提升表单的可用性;结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力,还增强了用户的互动体验。
|
6月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
6月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
7月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
7月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
119 1
|
7月前
|
存储 移动开发 开发者
|
7月前
|
自然语言处理 前端开发 开发者
|
10月前
|
设计模式 前端开发 Java
Java与HTML的深度融合:技术解析与应用实践
Java与HTML的深度融合:技术解析与应用实践
459 1