Shaw
0%

HTML 图片

Posted on Edited on In

HTML 中图片

除了干巴巴的文本，我们可以为网页添加一些有趣的元素，例如图片 (image) 元素。直观的图片会给予读者更加舒适的阅读体验

如何为你的网页添加图片

我们可以用 <img> 元素来把图片放到网页上。与之前所接触的绝大多数例子不同，<img> 是一个空元素，也即它不需要包含文本内容或者一个形如 </img> 的闭合标签，只需要一个 src (source) 属性指向所要引入的图片的路径，可以是相对路径或绝对 URL（可以参考 <a> 的 href 属性）

以相对路径引入图片为例：假如图片与你的 HTML 页面存放在相同路径下，那么你可以这样嵌入它

1
<img src="image_name.jpg">

又或者这张图片存储在和 HTML 页面同路径的 images 文件夹下

1
<img src="/images/image_name.jpg">

警告： 大多数图片是有版权的。不要在你的网页上使用一张图片，除非：

  1. 你是图片版权所有者
  2. 你有图片版权所有者明确的、书面上的使用授权
  3. 你有充分的证据证明这张图片是公共领域内的

侵犯版权是违法并且不道德的。此外，在得到授权之前永远不要把你的src属性指向其他人网站上的图片。这被称为”盗链（hotlinking）”。同样，盗取其他人的带宽也是违法的。而且这会降低你的页面的加载速度，而且图片可能会在不受你控制的情况下被移走或用别的令人尴尬的东西替换掉。

备选文本

alt 属性的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况

1
<img src="/images/image_name.jpg" alt="Description">

测试alt 属性最简单的方式就是故意拼错图片文件名，这样浏览器就无法找到该图片从而显示备选的文本

装饰图片等不重要的图片可不必添加备选本文

图片标题

你可以给图片增加title属性来提供需要更进一步的支持信息

1
2
3
<img src="/images/image_name.jpg" 
     alt="Description"
     title="An example to show how to put an image on the website">

图片标题将在鼠标悬停时显示

尺寸

设置 width 和 height 属性修改图片尺寸

1
2
3
4
5
<img src="/images/image_name.jpg" 
     alt="Description"
     title="An example to show how to put an image on the website"
     width="400"
     height="341">

注意：你不应该使用 HTML 属性来改变图片的大小。如果你把尺寸设定的太大，最终图片看起来会模糊；如果太小，会在下载远远大于你需要的图片时浪费带宽。如果你需要改变图片的尺寸，你应该使用CSS

图片转超链接

我们将超链接 <a> 与 <img> 结合起来，可以实现一个比较有趣的功能

1
2
3
<a href="https://kiritoshaw.github.io/">
  <img src="image_name.png" alt="链接至 Shaw 博客主页的标志">
</a>

此时我们可以通过点击图片访问其他网页

Reference

  1. HTML 中的图片 - 学习 Web 开发 | MDN