云端系统设计第三周作业

最新推荐文章于 2022-04-14 16:12:30 发布
最新推荐文章于 2022-04-14 16:12:30 发布
阅读量422 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lh1413323661/article/details/105008160
版权

1. 文件夹与文件的层级关系如下图所示，如何在index.html中插入1.jpg, 2.png,3.png,4.png图片并显示此图片(给出代码与效果图)

代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>T第三周作业一</title>
</head>
<body>
<h1>第一张图片<br/><img src="photo/1.jpg " width="180" height="180"/></h1>
<br/>
<br/>
<h1>第二张图片<br/><img src="../HTML/2.jpg" width="180" height="180"/></h1>
<br/>
<br/>
<h1>第三张图片<br/><img src="../../3.jpg" width="180" height="180"/></h1>
<br/>
<br/>
<h1>第四张图片<br/><img src="../../../web2/4.jpg" width="180" height="180"/></h1>
</body>
</html>

我的照片存放路径：
在这里插入图片描述

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

2.写出你知道的HTML标签，以及它们的作用（至少8个）？<,》

 1. <h>标题 
 2. <a>链接 
 3. <p>段落 
 4. <img>图片
 5. <br>换行 
 6. <hr>水平线 
 7. <em>强调文本 
 8. <ul>表格

3.使用编译器建立HTML文档，要求：

（1）.设置p标签与h1-h6标签

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

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>第三题</title>
</head>
<body>
<P>这里是p标签</P>
<h1>这里是h1标签</h1>
<h2>这里是h2标签</h2>
<h3>这里是h3标签</h3>
<h4>这里是h4标签</h4>
<h5>这里是h5标签</h5>
<h6>这里是h6标签</h6>

</body>
</html>

（2）.在h系列标签当中插入p标签
效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>第三题</title>
</head>
<body>
<P>这里是p标签</P>
<h1>这里是h1标签<p>这里是h标签中的p标签，为了区别，应该长一点</p></h1>
<h2>这里是h2标签</h2>
<h3>这里是h3标签</h3>
<h4>这里是h4标签</h4>
<h5>这里是h5标签</h5>
<h6>这里是h6标签</h6>

</body>
</html>

（3）.在浏览器上打开开发者功能，将h2修改为h4，h3修改为h5

效果：

在这里插入图片描述

4. 使用编译器建立HTML文档，要求：

（1）.插入图片，需给出图片的替换文字（需给出若无图片的显示效果）
无图片效果：
在这里插入图片描述
有图片效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四题</title>
</head>
<body>
<img src="logo3.jpg" alt="这里是张图片"/>
</body>
</html>

（2）.修改图片的大小显示高宽为128*128
效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四题</title>
</head>
<body>
<img src="logo3.jpg" alt="这里是张图片" width="128" height="128"/>
</body>
</html>

5. 使用编译器建立HTML文档，要求：

（1）.设置p标签、h1-h3标签、img标签
效果:
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第五题</title>
</head>
<body>
<P>这里是p标签</P>
<h1>这里是h1标签</h1>
<h2>这里是h2标签</h2>
<h3>这里是h3标签</h3>
<img src="logo3.jpg" height="200" width="200"/>
</body>
</html>

（2）.在h系列标签当中插入img标签
效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第五题</title>
</head>
<body>
<P>这里是p标签</P>
<h1>这里是h1标签</h1>
<h2>这里是h2标签<img src="logo3.jpg" height="200" width="200"/></h2>
<h3>这里是h3标签</h3>
<img src="logo3.jpg" height="200" width="200"/>
</body>
</html>

（3）.在p标签当中插入img标签

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第五题</title>
</head>
<body>
<P>这里是p标签<img src="logo3.jpg" height="200" width="200"/></P>
<h1>这里是h1标签</h1>
<h2>这里是h2标签<img src="logo3.jpg" height="200" width="200"/></h2>
<h3>这里是h3标签</h3>
<img src="logo3.jpg" height="200" width="200"/>
</body>
</html>

6. 使用编译器建立两个或三个HTML文档，要求：

（1）一个HTML文档设置p标签、h系列标签
效果：
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第六题文本部分</title>
</head>
<body>
<P>这里是p标签</P>
<h1>这里是h1标签</h1>
<h2>这里是h2标签</h2>
<h3>这里是h3标签</h3>
<h4>这里是h4标签</h4>
<h5>这里是h5标签</h5>
<h6>这里是h6标签</h6>
<a href="index.html" target="_self">这里是返回主页</a>
</body>
</html>

（2）一个HTML文档设置图片标签（可通过适当属性设置或h标签、p标签让页面好看些）
效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第六题图片部分</title>
</head>
<body>
<a href="index.html "target="_self">返回主页</a>
<h1>这里是图片展示</h1>
<img  src="logo3.jpg" />

</body>
</html>

（3）一个HTML文档设置超链接标签，并且该文档可添加很多内容（图片、文字）用于体现页内锚点的作用，并且需通过该文档内的超链接实现对之前的两个HTML文档设置的页面的跳转。
初次打开效果图：
在这里插入图片描述
点击跳转到结尾后：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第六题主页</title>
</head>
<body>
<h1 id="top">这里是第六题的主页</h1>
<a href="photo.html"target="_self">图片</a>
<a href="text.html"target="_self">文字</a>
<a href="#tiaozhuan">跳转到结尾</a>
<div>
      天下风云出我辈<br>一入江湖岁月催<br>
      皇图霸业谈笑中<br>不胜人生一场醉<br>
      提剑跨骑挥鬼雨<br>白骨如山鸟惊飞<br>
      尘事如潮人如水<br>只叹江湖几人回</br>
   </div>

<div>
      天下风云出我辈<br>一入江湖岁月催<br>
      皇图霸业谈笑中<br>不胜人生一场醉<br>
      提剑跨骑挥鬼雨<br>白骨如山鸟惊飞<br>
      尘事如潮人如水<br>只叹江湖几人回</br>
   </div>

<div>
      天下风云出我辈<br>一入江湖岁月催<br>
      皇图霸业谈笑中<br>不胜人生一场醉<br>
      提剑跨骑挥鬼雨<br>白骨如山鸟惊飞<br>
      尘事如潮人如水<br>只叹江湖几人回</br>
   </div>

<div>
      天下风云出我辈<br>一入江湖岁月催<br>
      皇图霸业谈笑中<br>不胜人生一场醉<br>
      提剑跨骑挥鬼雨<br>白骨如山鸟惊飞<br>
      尘事如潮人如水<br>只叹江湖几人回</br>
   </div>

<div>
      天下风云出我辈<br>一入江湖岁月催<br>
      皇图霸业谈笑中<br>不胜人生一场醉<br>
      提剑跨骑挥鬼雨<br>白骨如山鸟惊飞<br>
      尘事如潮人如水<br>只叹江湖几人回</br>
   </div>

<div>
      天下风云出我辈<br>一入江湖岁月催<br>
      皇图霸业谈笑中<br>不胜人生一场醉<br>
      提剑跨骑挥鬼雨<br>白骨如山鸟惊飞<br>
      尘事如潮人如水<br>只叹江湖几人回</br>
   </div>

<div>
      天下风云出我辈<br>一入江湖岁月催<br>
      皇图霸业谈笑中<br>不胜人生一场醉<br>
      提剑跨骑挥鬼雨<br>白骨如山鸟惊飞<br>
      尘事如潮人如水<br>只叹江湖几人回</br>
   </div>


<h1 id="tiaozhuan">跳到这里了<br/><a href="#top">跳转回顶部</a></h1>

</body>
</html>
小占而已
关注
基于STM32设计的城市绿化云端监控系统(华为云IOT)
06-28 2182
基于STM32设计的城市绿化云端监控系统。这个绿化管理系统的核心是通过传感器检测土壤湿度、环境温湿度和空气质量等数据，实现对城市绿化物联网的监测和管理。 使用STM32主控芯片作为设备端的主控，采集各种传感器数据，并将数据通过ESP8266 WIFI模块发送到华为云物联网平台。在云平台上，使用MQTT协议完成数据的存储和展示，同时也可以通过手机APP、电脑上位机进行实时监测和控制。
【2024系统架构设计】 系统架构设计师第二版-未来信息综合技术
静谧、淡雅
11-20 556
【2024系统架构设计】 系统架构设计师第二版-未来信息综合技术
谷歌云系统构建-《构建、实现和维护稳定且安全云系统的最佳方案》
lqfarmer的博客
05-01 371
如果一个系统从根本上来说是不安全的，那么它真的可以被认为是可靠的吗？或者如果不可靠，它能被认为是安全的吗？成功地设计、实施和维护系统需要对整个系统生命周期的承诺。 只有当安全性和可靠性是系统架构的核心要素时，这种承诺才是可能的。然而，这两者通常都是事后的想法，只有在事故发生后才会考虑，从而导致昂贵且有时困难的改进。在一个许多产品都连接到互联网、云技术变得越来越普遍的世界里，设...
云服务器系统设计,云服务器 用户系统设计
weixin_32218639的博客
08-08 245
云服务器 用户系统设计 内容精选换一换用户在购买弹性云服务器(Elastic Cloud Server ，简称ECS)时，选择KPS提供的SSH密钥对对登录弹性云服务器的用户进行身份认证，或者通过提供的密钥对获取Windows操作系统弹性云服务器的登录密码。若用户购买的是Linux操作系统的弹性云服务器，可以选择密钥对方式登录，详细信息请参见弹性云服务器用户指南购买弹性云服务您可以使用已有的弹性云...
云端应用系统的设计原则揭秘
亚马逊云科技专栏
05-25 7879
每当我们在完成搭建云端应用系统这样一个系统性大工程的时候，爱德华·墨菲那略带嘲讽的洞见总会在我们耳畔回响： 一、任何事都没有表面看起来那么简单； 二、所有的事都会比你预计的时间长； 三、会出错的事总会出错； 四、如果你担心某种情况发生，那么它就更有可能发生。 我们都不愿意看到墨菲定律的应验，但每次它都会像“智子”一样横亘在我们的面前。聪明的人，选择接受现实。 所以AWS的推荐设计原则就
云端系统设计第二周作业
lh1413323661的博客
03-10 361
以下文字纯属个人观点。。。。 可能有不对的地方 1.Web的工作原理是什么？ 用户通过浏览器，进行操作（输入域名，ip/点击链接…），浏览器与服务器通讯，服务器获取HTML文件后，对HTML进行解释，把该文件的信息显示出来 2.HTML的本质是？ HTML即超文本标记语言，主要是通过html标记对网页中的文本，图片，声音等内容进行描述，它是负责描述文档语义的语言 3.Web...
云端系统之基础
Sunlight的博客
02-15 632
Python云端系统开发入门 嵩天 云端系统之基础 云端开发全栈技术简介 全栈：概念和技术的结合 理念、设计、技术三个层次 云端掌握应用逻辑、存储应用数据、控制应用权限、体现应用智能 应用提供交互体验 绝大部分应用与云端的连接 云端与应用之间使用HTTP协议 加密需求采用HTTPS协议 云端需要部署Web服务器 应用数据采用JSON格式传输 接口采用RESTful风...
第三周作业 Git和概要设计1
08-08
在这个作业中，学生需要针对在线考试系统进行概要设计，这包括但不限于以下部分： 1. 总体设计：描绘系统的整体架构，明确各个组件或模块的功能和交互方式。通常会绘制总流程图，展示系统从用户输入到输出的整体...
毕设&课程作业_智能停车系统.zip
最新发布
03-07
综上所述，"毕设&课程作业_智能停车系统.zip"提供的源码涵盖了从系统设计、数据库管理、物联网应用到人工智能算法等多个方面的知识，对于计算机专业的学生来说，是一个极好的学习和实践平台。通过深入研究这些源码，...
毕设&课程作业_智能家居远程监控系统SpringBoot服务端.zip
03-04
SpringBoot是Java领域的一个流行框架，用于简化Spring应用的初始搭建以及开发过程，它集成了大量常用的第三方库配置，如数据访问、安全、WebSocket等，使得开发者能够快速地创建出稳定且生产级别的应用程序。...
2019第六周作业
weixin_30455661的博客
04-04 182
这次作业属于哪个课程 C语言程序设计 这次作业要求在哪里 第六周作业 我在这个课程的目标是 学习指针的运用及其计算 这个作业具体在那个方面帮助我实现目标 这次作业使我明白了指针定义及指针与数组变量之间的关系 参考文献 无 第六周基础作业 求两数平方根之和 函数fun的功能是：求两数平方根之和，作为函数值返回。例如：输入12和20，输出结果是：y = 7.936238...
HTML页面中插入图片的几种方法
热门推荐
yongye_的博客
05-27 12万+
1 直接使用 img 标签&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &amp
OS 操作系统-第1次作业练习题
MoMing丶的博客
03-14 3534
一、选择题 与计算机硬件关系最密切的软件是（ 1 ） A. 编译程序 B. 数据库管理程序 C. 游戏程序 D. OS 操作系统的发展过程是( 2 ) A、原始操作系统，管理程序，操作系统 B、原始操作系统，操作系统，管理程序 C、管理程序，原始操作系统，操作系统 D、管理程序，操作系统，原始操作系统 设计批处理多道系统时，首先要考...
云端系统设计第五周课后作业
lh1413323661的博客
03-31 356
前言 写个css心态炸了。。。 1. 根据自行寻找4张图片的素材实现如图所示效果： 这个其实很好实现，一看就看明白了，一个背景图片，一个半透明的div，三张图片，完事了。不多bb，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
智慧校园云端管理系统的设计和实现（附源码及数据库）
04-14 9297
智慧校园管理系统：（附源代码和数据库）
你知道却不常用的HTML标签（一）
曲小强
09-18 401
作为了一个前端 帅小伙/靓姑娘，开发的时候总是会和 HTML 标签打交道。一来二往的就熟悉的开始使用 div + css 的布局了，今天介绍一篇很早以前就出现，但是没有太多人（我认识的人使用的不是很多）使用的HTML的其它标签，赶快来认识它们吧。 1、pre 标签 HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空...
如何通过HTML中的map标签给一个图片添加多个超链接，并且coodr属性跟随屏幕大小自动改变，移动端也同样适用！
孙_常乐的博客
05-18 3221
前两天公司和其他公司合作搞个活动，暂时需要一个页面上放一张海报，并且海报上多处区域要可以点击，当时自己想到的是利用map标签生成区域热点，但是分辨率不同热点区域在不同区域不准确。最后通过简单的几行jq搞定了。代码如下&lt;div style="margin:0 auto"&gt;&lt;img src="__STATIC__/images/concert_hall_02.jpg" width="...
Android Studio 健康管理系统大作业App源码下载
健康管理系统App可能包含同步和获取云端健康数据的功能，这需要使用Android的网络API，如HttpURLConnection或第三方库如Retrofit、Volley等。这要求开发者具有一定的网络编程知识。 8. Android用户界面设计： App...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值