HTML图像:如何将图像添加到网页

你的网络首码项目网 网站建设评论29字数 1387阅读模式

图像构成了网络的很大一部分 - 大多数网站都包含图像。HTML使您可以非常轻松地将图像嵌入到网页中。

若要将图像嵌入到网页中,该图像首先需要以.jpg、.gif或.png格式存在。您可以在图像编辑器(如 Adobe 照片店、GIMP、Adobe 插画师等)中创建图像,并以正确的格式保存它们。文章源自你的网络首码项目网-https://www.youranweb.com/42.html

创建图像后,需要将其嵌入到网页中。若要将图像嵌入到网页中,请使用 <img> 标记,指定图像的实际位置。文章源自你的网络首码项目网-https://www.youranweb.com/42.html

这意味着对于实时网站,任何图像都需要上传到网络,就像HTML文件一样。大多数网站都有一个单独的图像文件目录,称为或类似。images文章源自你的网络首码项目网-https://www.youranweb.com/42.html

图像使用示例

<img src="/pix/samples/18m.jpg" width="166" height="101" alt="Photo of three cats">

此示例在图像位置的开头使用正斜杠。这指定映像的路径从当前域开始。文章源自你的网络首码项目网-https://www.youranweb.com/42.html

因此,如果它位于域中,则映像位置将解析为 。https://www.sinasz.cn/wp-content/uploads/2022/09/smile.gif文章源自你的网络首码项目网-https://www.youranweb.com/42.html

上面的 <img> 元素包含许多属性。这些属性告诉浏览器有关图像以及如何显示图像的所有信息。以下是这些属性的说明:文章源自你的网络首码项目网-https://www.youranweb.com/42.html

src必需属性。这是图像的路径。它可以是绝对路径,也可以是相对路径(还记得我们上一课中的这些术语吗?
width可选属性。这指定显示图像的宽度。如果实际图像较宽,它将缩小到您在此处指定的尺寸。同样,如果实际图像较小,它将扩展到您的尺寸。
height可选属性。这指定显示图像的高度。此属性的工作方式与宽度类似。
alt替代文本。这指定在浏览器/用户代理无法呈现图像时要使用的文本。

使用 CSS 的维度

您可以选择使用 CSS 设置大小,而不是像上面那样使用 和 维度。这可以为您提供额外的灵活性。widthheight文章源自你的网络首码项目网-https://www.youranweb.com/42.html

例如,有时指定最大宽度最大高度而不是绝对大小会很有用。这可以防止大图像破坏您的布局(例如,如果它太大而无法放入内容区域)。特别是当有人试图在具有小屏幕的设备(例如手机)上查看您的网站时,可能会发生这种情况。文章源自你的网络首码项目网-https://www.youranweb.com/42.html

在下面的示例中,我们使用 来确保图像对于其上下文来说永远不会太大。当您仅使用(不使用)时,浏览器将按比例重新缩放图像。换句话说,高度将随着宽度一起重新缩放,并且图像不会被压扁。执行此操作时,请确保删除 HTML 和属性,否则它们将与 CSS 冲突。max-width:100%max-widthmax-heightwidthheight文章源自你的网络首码项目网-https://www.youranweb.com/42.html

单击该按钮以在编辑器中比较此示例和上面的示例。如果您的屏幕足够大,则图像应以不同的尺寸显示。文章源自你的网络首码项目网-https://www.youranweb.com/42.html

<img src="/pix/samples/18m.jpg" style="max-width:100%" alt="Photo of three cats">

图片链接

您可以使图像“可点击”,以便当用户单击图像时,它会打开另一个URL。为此,只需使用超链接代码包装图像即可。文章源自你的网络首码项目网-https://www.youranweb.com/42.html

<a href="https://en.wikipedia.org/wiki/Boracay">
<img src="/pix/samples/14s.jpg" style="max-width:100%;" alt="Boracay, Philippines">
</a>

创建映像

上面的示例假设您已经有一个要嵌入到网页中的图像。若要了解如何为 Web 创建图像,请查看 Web 图形教程。文章源自你的网络首码项目网-https://www.youranweb.com/42.html 文章源自你的网络首码项目网-https://www.youranweb.com/42.html

相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网
  • 声明:首码项目网所有文章均来自网络和投稿,不代表本站立场,请勿盲目下载注册,以免为您带来不必要的损失。《项目投诉》
  • 你的首码项目网

发表评论