前言
💫你好,我是辰chen,一个正在考研途中的sophomore dog😖
💫本篇内容来源于对 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 %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 页面。
要求
页面从上到下的内容依次为:
- 一个超链接,内容为:
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>