图像元素

1. 简介

  • 当前文档的图像元素,仅仅是外部图片资源的占位符,只有解析时才会加载进来
  • 所以, 在确保用户可以看清的情况下, 图片体积越小越好, 以提升加载速度
  • 推荐使用可压缩的jpg格式, 小图片,或需要背景透明的,推荐使用png格式
  • 对于简单的动图,或者颜色要求较少的,可使用gif格式
  • 对于图标, 建议使用 css 字体图标,而不是使用图像图标

2. 常用标签

元素 描述
<img> 图片元素,空元素(单标签)
<figure> 图片/插图区域
<figcaption> 图片/插图区域的标题

3. <img>常用属性

属性 描述
src 图片来源地址, 可以是本地, 也可以是来自网络
alt 图片描述信息,当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别
title 鼠标悬停时显示的文本信息, 通常与 alt 属性一致
width/height 图片尺寸, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置

实战

<!-- 创建一个容器,可以放置图片和文字链接 -->
<!-- 创建一个类,使图片和文字为一个整体 -->
<!-- img标签应该注意的地方重点是src,src存放的是图片的地址,alt属性为图片地址错误时无法
     加载图片时提示的文字,title为图片标题,即为鼠标放置在图片上的时候提示的文字 -->
<div class="container">
    <div class="course">
        <a href="https://www.php.cn/course/1136.html#down">
          <img
            src="https://img.php.cn/upload/course/000/000/001/5f59db7b704fe778.png"
            alt="PHP中文网第13期前端培训课程"
            title="PHP中文网第13期前端培训课程"
            width="200"
        /></a>
        <a href="https://www.php.cn/course/1136.html#down"
          >第13期前端培训课程</a
        >
      </div>
      <div class="course">
        <a href="https://www.php.cn/course/1137.html"
          ><img
            src="https://img.php.cn/upload/course/000/000/001/5f59db6ea55b7525.png"
            alt="PHP编程"
            title="PHP编程"
            width="200"
        /></a>
        <a href="https://www.php.cn/course/1137.html">PHP编程</a>
      </div>
    </div>

图片展示:

当图片地址错误时:alt属性中的值即为提示词,提示用户这张图片是干嘛的

图片地址错误.png

图片地址和代码正确:

图片正确.png

配合老师给的CSS代码,可以实现:

CSS配合.png

最后修改:2020 年 10 月 30 日 03 : 48 PM
如果觉得我的文章对你有用,请随意赞赏