HTML 基础
常用的元素
工具与规范
图片
用 <img>
元素便可以显示一张图片, src
属性是图片的地址。
$$tip
地址的选择参考相对路径与绝对路径章节。
$$
<img src="https://3yya.com/logo-mini.png" />
$$demo
<img src="https://3yya.com/logo-mini.png" />
$$
备选文本
可以为 <img>
图片添加 alt
属性值,在图片未能正常显示时将会显示 alt
的值。
以下的例子故意用了一个错误的图片地址。
<img src="https://xxxx.png" alt="三眼鸭的LOGO" />
$$demo
<img src="https://xxxx.png" alt="三眼鸭的LOGO" />
$$
设置一个备选文本有以下的好处:
- 在图片地址错误或浏览器不支持图片格式等的情况下显示,让用户能明白这张图片应该是什么。
- 搜索引擎并不能看到一张图片,却可以通过 alt 属性值来理解这张图片是什么,并适当地抓取到图片搜索引擎中。
- 利于有着视觉障碍,通过使用屏幕阅读器来浏览网页用户。
图片尺寸
通过 width
和 height
属性可以设置图片的宽高,数值的单位是像素。像素单位会在 CSS 的章节学习到。
例子改变了图片的宽高成 200 像素。
<<img
src="https://3yya.com/logo-mini.png"
alt="三眼鸭的LOGO"
width="200"
height="200"
/>
$$demo
<img
src="https://3yya.com/logo-mini.png"
alt="三眼鸭的LOGO"
width="200"
height="200"
/>
$$
$$tip
图片尺寸的定义应该在 CSS 中进行,在之后 CSS 的章节将会学习到。
$$
练习
- 找一张网络上的图片,将其插入到你的页面中。
- 将一张本地的图片插入到你的网页中。
- 下载图片练习项目文件,补全所有页面中的图片路径。