正如我们在上一篇有关 HTML 的文章中看到的,所有网页都是基于用这种语言编辑的文件。但是,如果一切都基于文本文件,那么如何包含图像和其他媒体元素?
这就是我们今天要在本文中学习的内容。前面我们解释了什么是 Html。现在让我们更多地讨论如何自定义您的网站。毕竟,在无法正确使用图像的情况下,雇用优秀的网站托管并与设计不佳或过时的网站合作是没有意义的。
在本文的最后,我们希望使您能够向 HTML 文档添加图像、优化它们并更多地了解网页创建方式的动态。
了解如何解决 502 错误网关错误。
如何在 HTML 页面上放置图像
如果今天有可能找到令人赏心悦目的美丽网站,具有美丽的设计并以创造性的方式使用图像,那么几年前情况并非如此。
一开始,一切都只是文本。然而,互联网和相关技术的快速发展允许使用图像创建网站,这就是我们今天要教的内容。
当然,除了图像之外,您的网站上还可以包含其他类型的多媒体内容,例如音频或视频。但是,让我们首先讨论 <img> 元素。
这是我们在创建 HTML 页面时始终使用的元
阿联酋 Whatsapp 数据 素来指示其上的图像。因此,您可能会问自己:如果 HTML 文档中的所有内容都是文本,我们如何将图像转换为这种格式?
事实证明,我们不会将图像“转换”为文本。
在教您实际操作之前,让我们简要解释一下命令背后的逻辑。
在 HTML 文档中,当我们插入 <img> 元素时,我们就可以指明您的网站托管中保存的图像的地址,浏览器将根据输入的地址搜索该图像并将其呈现在监视访问者以及所有页面代码。
现在看起来很混乱,但是一旦你开始实践部分,你就会清楚地明白我们在说什么。
逐步在页面上插入图像
要插入图像,我们将使用 <img> 元素,如上所述。这是一个没有内容或结束标签的元素,但它依赖于一个属性才能正确运行。我们正在讨论 -src- 属性。
我们称这个属性为源。而顾名思义,它的作用就是为浏览器指明一个搜索源,用于搜索页面渲染时读取到的信息。
让我们在这里分部分进行。为了理解该应用程序,我们假设您想要创建一个页面并向其中插入一个图像。相关图像被命名为“logo.webp”。
因此,我们必须首先在 -src- 属性旁边插入 <img> 元素,并在属性中指示图像的名称。如下:<img src=”logo.webp”>
在本例中,我们假设图像位于可直接访问的目录中,无需指明路径。但总的来说,我们知道图像位于它们自己的目录中。
因此,考虑到这一点,我们必须注意这样一个事实:始终有必要指示图像的整个路径。例如,如果相关图像位于名为“images”的文件夹内,而该文件夹位于另一个名为“documents”的文件夹内,则我们的代码将如下所示: <img src=documentos/images/logo.webp>
让我们看看演示图像:
在创建 HTML 页面时使用图像时的一个重要警告是始终注意版权,使用您拥有或有权使用的图像。当然,在任何情况下都不要使用来源属性来指示其他人网站上的图像。
图片替代文本
现在我们来谈谈 -alt- 元素。该元素也可以与图像标签一起插入,因此显得格外重要。
简而言之,它的作用就是用文字描述图像的内容。如果发生错误导致无法加载图像,则可能会显示此文本,将显示该文本。
但不仅如此。近年来,替代文本变得越来越重要的真正原因是它能够为搜索引擎(换句话说,SEO)优化 HTML 页面。