第二次作业html

HTML题目代码与结果展示
最新推荐文章于 2025-12-06 19:48:00 发布
原创 最新推荐文章于 2025-12-06 19:48:00 发布 · 191 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

第一题
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次作业</title>
    <style>
        .calendar {
  width: 150px;
  height: 180px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header {
  background-color: red;
  color: white;
  text-align: center;
  padding: 5px 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.date {
  font-size: 60px;
  text-align: center;
  margin: 20px 0;
}

.recommendation {
  margin-top: 20px;
}

h2 {
  font-size: 18px;
}

p {
  font-size: 14px;
  color: #666;
}
    </style>


</head>


<body>
    <div class="calendar">
    <div class="header">星期六</div>
    <div class="date">11</div>
  </div>
  <div class="recommendation">
    <h2>每日歌曲推荐</h2>
    <p>根据你的口味生成，<br>每天6:00更新</p>
  </div>
</body>
</html>

结果：
在这里插入图片描述

第二题：
代码：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图标</title>
</head>
<body>
  <table>
    <div>
      <img style="width: 40px;" src="图标1.png">

    </div>
    <div>
      <img style="width: 40px;" src="图标2.png">
    </div>
    <div>
      <img style="width: 40px;" src="图标3.png">
    </div>
    <div>
      <img style="width: 40px;" src="图标4.png">
    </div>
  </table>
</body>
</html>

结果：

在这里插入图片描述
第三题：
代码：

<!DOCTYPE html>
<html lang="zh - CN">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial - scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>下载按钮示例</title>
  <style>

  .download-container {
    display: flex;
    justify-content: space - between;
    margin-bottom: 10px;
  }
  
  .windows-button,
  .apple-button,
  .mac-app-store-button {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
  }
  .windows-button span,
  .apple-button span,
  .mac-app-store-button span {
    visibility: hidden;
  }

  .windows-button {
    background-color: #d92323;
  }
  
  .apple-button {
    background-color: #d92323;
  }
  
  .mac-app-store-button {
    background-color: #007aff;
  }
  
  .button-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
</style>
</head>

<body>
  <div class="download-container">
    <a href="#" class="windows-buton">
      <img src="网页下载.png" alt="Windows 图标" class="button - icon">
      <span>立即下载</span>
    </a>
    <a href="#" class="apple - button">
      <img src="苹果下载.png" alt="苹果图标" class="button - icon">
      <span>立即下载</span>
    </a>
    <a href="#" class="mac - app - store - button">
      <img src="MAC.png" alt="Mac App Store 图标" class="button - icon">
      <span>Available on the Mac App Store</span>
    </a>
  </div>
  <div class="download - container">
    <a href="#" class="windows - button">
      <img src="网页下载.png" alt="Windows 图标" class="button - icon">
      <span>立即下载</span>
    </a>
    <a href="#" class="apple - button">
      <img src="苹果下载.png" alt="苹果图标" class="button - icon">
      <span>立即下载</span>
    </a>
    <a href="#" class="mac - app - store - button">
      <img src="MAC.png" alt="Mac App Store 图标" class="button - icon">
      <span>Available on the Mac App Store</span>
    </a>
  </div><div class="download - container">
    <a href="#" class="windows - button">
      <img src="网页下载.png" alt="Windows 图标" class="button - icon">
      <span>立即下载</span>
    </a>
    <a href="#" class="apple - button">
      <img src="苹果下载.png" alt="苹果图标" class="button - icon">
      <span>立即下载</span>
    </a>
    <a href="#" class="mac - app - store - button">
      <img src="MAC.png" alt="Mac App Store 图标" class="button - icon">
      <span>Available on the Mac App Store</span>
    </a>
  </div>
  
</body>

</html>

结果：
在这里插入图片描述

第四题：

!DOCTYPE html>
<html lang="zh - CN">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial - scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>歌手信息展示</title>
  <style>
  .singer-item{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
  }
  
  .singer-item {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }
  
  .singer-info {
    flex: 1;
  }
  
  .singer-info h2 {
    margin: 0;
  }
  
  .singer-info p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #666;
  }
</style>
</head>

<body>
    <table>
        <tr>
            <div class="singer - item">
                 <img src="张惠妹.png"alt ="张惠妹">
                  <div class="singer - info">
                     <h2>张惠妹aMEI</h2>
                     <p>台湾歌手张惠妹</p>
                    </div>
                </div>
         </tr>

  <div class="singer - item">
    <img src="吴莫愁.png"alt="吴莫愁">
    <div class="singer - info">
      <h2>吴莫愁Momo</h2>
      <p>《中国好声音》选...</p>
    </div>
  </div>
  <div class="singer - item">
    <img src="孙楠.png"alt ="孙楠">
    <div class="singer - info">
      <h2>孙楠</h2>
      <p>歌手孙楠 代表作《...</p>
    </div>
  </div>
  <div class="singer - item">
    <img src=" 麦田老狼.png"alt="麦田老狼">
    <div class="singer - info">
      <h2>麦田老狼</h2>
      <p>歌手，音乐人。代...</p>
    </div>
  </div>
  <div class="singer - item">
    <img src="陈楚生.png"alt="陈楚生">
    <div class="singer - info">
      <h2>陈楚生</h2>
      <p>唱作歌手</p>
    </div>
  </div>
</table>
</body>

</html>

结果：
在这里插入图片描述
在这里插入图片描述

第五题：

<!DOCTYPE html>
<html lang="zh - CN">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial - scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>搜索框示例</title>
</head>

<body>
  <div class="search - container">
    <input type="text" placeholder="音乐/视频/电台/用户" class="search - input">
    <span class="search - icon">&#128269;</span>
  </div>
</body>

</html>

结果：
在这里插入图片描述

小小克
关注
HTML第一次作业
2301_81538927的博客
07-30 2036
【代码】HTML第一次作业。
HTML第三次作业
2301_81538927的博客
08-13 1713
【代码】html第三次作业。
sdau启航第二次作业
qq_62725148的博客
05-22 2万+
笔记： Css在style标签下 选择器{样式} 给谁改样式{什么样式} <style> p{color: rgb(215, 72, 72);} </style> Color改变颜色font-size更改字体大小 Css主要由两部分组成选择器以及一条或多条声明 属性与属性之间要用：分割结尾用； 1.Css、样式格式代码风格： 展开型书写 用小写字母书写 属性值前面，冒号后面保留一个空格；选择器后面保留一个空格 2.选择器： 选择某个
JSP第二次作业_4小题
HWP
05-06 5424
本题包括4个JSP程序，one.jsp、two.jsp、three.jsp、error.jsp。 one.jsp具体要求如下： 要求one.jsp页面有一个表单，用户使用该表单可以输入一个1至100之间的整数，并提交给下一个页面；如果输入的整数在50至100之间（不包括50）就转向three.jsp，如果在1至50之间就转向two.jsp；如果输入不符合要求就转向error.jsp。要求forwa...
JSP第二次作业_3小题
HWP
05-06 3041
动态包含页面并传递数据。要求程序包含两个文件，主文件加载次文件，并将随机产生的50~100之间的数据传递给它，并且在页面上显示两个信息：该数据和这个数据的平方根。
JSP第二次作业_6小题
HWP
05-06 3224
题目描述： 6、猜数字游戏。本题包括4个JSP程序，inputGuess.jsp、resultGuess.jsp、small.jsp、large.jsp和success.jsp。 inputGuess.jsp的具体要求如下： 用户请求inputGuess.jsp时，随机分配给该用户一个1到100之间的数。该页面同时负责将这个数字存在用户的session对象中。该页面提供表单，用户可以使用该表单输入...
JSP第二次作业_2小题
HWP
05-06 2589
题目： 在JSP页面中静态包含文件。要求程序包含两个文件，主文件静态包含一个能够计算1到1000内的完数的页面。（如果一个正整数刚好等于它的真因子之和，这样的正整数为完数， 例如，6=1+2+3，因此6就是一个完数。） 我的代码： 1.JSP: <%@ page contentType="text/html; charset=GBK"%> <!DOCTYPE html> &...
JSP第二次作业_1小题
HWP
05-06 3982
题目： 编写一个JSP程序，计算1！+2！+3！+4！+5！，并显示出结果。要求先声明计算阶乘的方法，再调用该方法，最后在页面上输出结果。 进阶要求，通过表单提交一个正整数，然后计算它的阶乘和。例如：输入3，就计算1！+2！+3！。 阶乘之和比较大，有些情况会超出int类型数据范围！ int的取值范围为： -2^31——2^31-1，即-2147483648——2147483647 我的代码： ...
JSP第二次作业_5小题
HWP
05-06 5661
题目描述： 5、编写两个JSP页面input.jsp和result.jsp。input.jsp页面提交一个数字给result.jsp页面，result.jsp页面使用response对象做出动态响应。 input.jsp的具体要求： input.jsp提供表单，用户在表单中输入一个数字，提交给result.jsp页面。 result.jsp的具体要求： result.jsp页面首先使用reques...
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 34万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
第二次作业.html
11-16
第二次作业.html
基于JavaScript核心技术的第二次作业设计源码与HTML、Python融合实践
10-06
本项目“基于JavaScript核心技术的第二次作业设计源码与HTML、Python融合实践”正是这一理念的体现。通过将JavaScript、HTML和Python这三种语言融合在一起，该项目不仅展示了如何在前端和后端之间建立桥梁，而且还...
第二次作业—谭程（TS22070113A31TM）.html
11-24
第二次作业—谭程（TS22070113A31TM）.html
高级计算机网络第二次作业，前端项目.zip
10-23
这个资源是高级计算机网络课程的第二次作业，专注于前端项目的开发。该任务旨在通过实践提升学生对前端技术栈的理解和应用能力，包括HTML、CSS、JavaScript及其相关框架和库的使用。项目可能涉及创建交互式的网页...
计算机应用基础(第二次作业).doc
04-21
根据提供的文档内容，我们可以推断出这份文档是关于“计算机应用基础”课程的第二次作业，主要涉及计算机网络的基础知识。接下来，我们将从标题、描述、标签以及部分内容中提炼出相关知识点。 ### 标题和描述 标题...
使用 HTML + JavaScript 实现手写签名功能
QQ26843500的博客
12-04 711
本文介绍了一个基于HTML5 Canvas实现的手写签名网页应用。该应用主要功能包括： 提供米字格背景和范字（"海纳百川"）作为书写参考 支持鼠标和触摸屏两种书写方式 包含清空画布和下载签名图片两个功能按钮 技术实现上使用双Canvas叠加方案，底层Canvas绘制米字格和范字作为引导层，上层Canvas实现手写功能。通过JavaScript事件监听实现笔迹追踪，采用贝塞尔曲线平滑处理书写轨迹。响应式设计适配不同设备，并提供PNG格式的签名下载功能。整体界面简洁，采用蓝色标题栏和白色书写
HTML DOM 对象
wjs2024的博客
12-02 465
DOM（Document Object Model）是一种抽象的模型，用于表示 HTML 和 XML 文档。通过 DOM，开发者可以访问和操作文档中的任何元素，如文本、图像、链接等。DOM 对象化地表示了网页的结构，使得开发者可以像操作对象一样操作网页内容。HTML DOM 对象是网页设计和开发的基础，掌握 DOM 对象的基本概念、常用方法和实际应用，将有助于提高开发效率和代码质量。本文对 HTML DOM 对象进行了简要介绍，希望对您有所帮助。
HTML 基础
wjs2024的博客
12-02 354
HTML是构建网页和网站的基础，掌握HTML基础知识对于成为一名优秀的网页开发者至关重要。本篇文章为您介绍了HTML的发展历程、基本结构、常用标签以及一些高级特性。希望您能够通过学习，更好地掌握HTML，为您的网页开发之路打下坚实的基础。
前端html(3)
最新发布
踢球的IT男，就是分享一些小东西！互相学习，共同进步！
12-06 368
注：表格相关的元素很多，我们这里整理一下：caption:用来设置表格标题；thead:表示表格的头部区域；th:表示表格的头部中的一个列；tbody:表示表格的中间主要显示区域；tr:表示表格的一个行；td:表示表格的和个列；tfoot:设置表格的脚部；colspan:表示横跨几列；
深入理解HTML: Goit第二次家庭作业分析
资源摘要信息:"在本节中，我们将深入探讨HTML相关的知识点，这些知识点是完成“goit-markup-hw-02:第二次家庭作业”所必须掌握的。HTML（超文本标记语言）是构建网页的基石，它是用于创建网页的标准标记语言。通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值