时间戳

首页 > 解决方案 > 如何在html中添加多个图像？

html - 如何在html中添加多个图像？

问题描述

我有一个问题，我只能添加一张图片，html 似乎忽略了我要添加的第二张图片。抱歉，代码杂乱无章，我 8 小时前才开始使用 HTML。

这是代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <meta name = "My mech inventions/arts" content = "Machine part 1.0\nHead & Neck">
    <title>Josiah's Blueprints</title>
  </head>
  <body style = "background-color:black">
    <h2 style = "color:white">Machine Part 1.0<h2>
    <h2 style = "color:maroon;"><b>Head & Neck</b></h2>
    <hr/>

    <p style = "color:white"><i>Fig 1.0</p></i>
    <p style = "color:white"><b>Front View</p></b>
      <img width = "1300" src = "/home/princesspriest/KRITA/Mech blueprints/Mech blueprint (head & neck Front view) .png" alt = "Fig 1.0 front View of the mech's head and neck"/>

    <p style = "color:white"><i>Fig 2.0</p></i>
    <p style = "color:white"><b>Upper View</p></b>
      <img width = "1300" src = "/home/princesspriest/KRITA/Mech blueprints/Mech blueprint (head & neck upper view) .png" alt = "Fig 2.0 upper view of the mech's head and neck"/>
  </body>
</html>

对不起，如果我不能添加网络截图，我希望代码足以解决这样的问题。

标签： html

解决方案

我将您的代码复制到一个新文件中，并在 Internet Explorer 中打开了 html 页面。当然，这两个图像都没有加载，因为它们不在我的文件系统中，所以我用从网上获取的玫瑰图像替换了它们。根据您用于渲染它们的语法，这两个图像都正常加载。您可以通过在文档的 css 中（或通过 style 属性在 html 中）指定位置来更好地控制元素的位置。可用的显示选项有静态、粘性、固定、绝对和相对。根据您的选择，您需要为相对于文档顶部、底部、左侧或右侧的位置指定其他参数。您可以在以下链接中了解有关此主题的更多信息：

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

请注意，因为您采用了 1300 的宽度，所以图片不会彼此相邻。您必须向下滚动页面才能看到第二张图片。如果第 2 张图片未加载，请尝试将其替换为另一张图片，以确定是图片问题还是实际语法问题。我再说一遍：我使用以下图片链接加载两张图片都没有问题：

https://www.aboutgiving.co.nz/content/images/thumbs/0004092_red-roses.jpeg

我希望这会有所帮助。

推荐阅读