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 <div style="height:20px"> <img src="https://xxxx.png" alt="三眼鸭的LOGO" /> </div> $$
设置一个备选文本有以下的好处:
- 在图片地址错误或浏览器不支持图片格式等的情况下显示,让用户能明白这张图片应该是什么。
- 搜索引擎并不能看到一张图片,却可以通过 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 的章节将会学习到。
$$
$$tip
- 如果同时设置宽高,则作为元素的实际尺寸。
- 如果仅设置宽或高,则另一边会依据图片原比例适应长度,最终元素与图片的宽高比一致。
- 如果不设置宽高,则元素的尺寸为图片的宽高。 $$
练习
- 找一张网络上的图片,将其插入到你的页面中。
- 将一张本地的图片插入到你的网页中。
- 下载图片路径练习项目文件,补全所有页面中的图片路径,使图片能正常显示。 $$answer 点击下载图片路径答案项目文件 $$