看看今天互联网上的任何一个网站,你都会发现它们有一些共同之处。其中一个特点就是图片被广泛应用。正确的图片给网站的展示增加了太多的东西,其中的一些图片,如公司的标志,非常有助于品牌提升以及营销业绩提升等。若要向网页中添加图像、图标或图形,需要在网页的HTML代码中使用该
![]()
标签,放在HTML中希望图形显示的位置。虽然说起来简单,但是如果不借助一些html文本编辑器或者成熟的cms管理系统,向网站添加图片就必须用到html代码。如果你已经掌握基础的html和css编程知识,又想用程序给我网站添加图片,那就不得不掌握通过html代码给网页添加图片需要注意的事项。
图像属性
查看上面的HTML代码,您将看到元素包含两个属性。它们中的每一个都是图像所必需的。
第一个属性是“src”。这就是您想要在页面上显示的图像文件。在我们的示例中,我们使用名为“logo.png”的文件。这是Web浏览器在呈现站点时显示的图形。您还会注意到,在此文件名之前,我们添加了一些附加信息“/image/”。这是文件路径。初始正斜杠告诉服务器查看目录的根目录。然后,它将查找名为“image”的文件夹,最后查找名为“logo.png”的文件。使用名为“图像”的文件夹存储站点的所有图形是一种非常常见的做法,但您的文件路径将更改为与您的站点相关的任何内容。
第二个必需的属性是“alt”文本。这是在图像由于某种原因无法加载时显示的“替换文本”。此文本在我们的示例中显示为“Company Logo”(公司徽标),如果图像加载失败,将显示此文本。为什么会这样?各种原因:
- 文件路径不正确,不正确的文件名或拼写错误。
- 传输误差,文件已从服务器中删除。
这些只是为什么我们指定的图像可能会丢失的几种可能性。在这些情况下,将显示我们的ALT文本。Alt文本也被屏幕阅读器软件用来向视力受损的访问者“读取”图像。因为他们看不到像我们这样的图像,所以本文让他们知道图像本身是什么。这就是为什么ALT文本是必需的,为什么它应该清楚地说明什么是图像!
一个常见的误解是ALT文本是为了搜索引擎的目的。这不是真的。虽然搜索引擎确实会阅读这些文本来确定图像是什么(请记住,他们也不能“看到”您的图像),但是您不应该只为了吸引搜索引擎而编写Alt文本。作者清除为人类准备的ALT文本。如果您还可以将一些关键字添加到吸引搜索引擎的标签中,这很好,但始终要确保ALT文本通过说明图像对于任何看不到图形文件的人来说是什么,从而达到其主要目的。
其他属性
IMG标签还有另外两个属性,当您在Web页面上放置图形时,您可能会看到这两个属性-宽度和高度。例如,如果您使用所见即所得编辑器(比如Dreamweaver),它会自动为您添加此信息。这里有一个例子:
“宽度”(Width)和“高度”(Height)属性告诉浏览器图像的大小。然后,浏览器知道要在布局中分配多少空间,并且可以在图像下载时转到页面上的下一个元素。在HTML中使用此信息的问题是,您可能并不总是希望您的图像以该大小显示。例如,如果您有一个响应网站,其大小根据访问者屏幕和设备大小而变化,则您还希望您的图像具有灵活性。如果您在HTML中声明固定大小是什么,您将发现很难用响应式CSS媒体查询来覆盖它。因此,为了保持样式(CSS)和结构(HTML)的分离,建议您不要向HTML代码中添加宽度和高度属性。
特别说明
如果您关闭了这些大小调整说明,并且没有在CSS中指定大小,那么浏览器将以默认的本机大小显示图像。
网站题目:通过html代码给网页添加图片需要注意的事项
标题路径:https://www.cdcxhl.com/news/145228.html
成都网站建设公司_创新互联,为您提供做网站、App开发、电子商务、网站排名、自适应网站、品牌网站建设
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联