通过html代码给网页添加图片需要注意的事项


来源:网站优化外包 作者:坪山网站建设公司 日期:2019-01-30 浏览:

看看今天互联网上的任何一个网站,你都会发现它们有一些共同之处。其中一个特点就是图片被广泛应用。正确的图片给网站的展示增加了太多的东西,其中的一些图片,如公司的标志,非常有助于品牌提升以及营销业绩提升等。若要向网页中添加图像、图标或图形,需要在网页的HTML代码中使用该<img>标签,放在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中指定大小,那么浏览器将以默认的本机大小显示图像。
深圳市圣玺网络技术有限公司提供坪山区域的营销网站建设、品牌网站设计、企业网站改版制作、网站优化外包、网络营销推广、百度霸屏、SEO按天按效果付费等互联网广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.webgaiban.cn/wzyh/1713.html

X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信