HTML笔记--图片标签/路径分类

标签（空格分隔）： HTML

---

图片标签(******)

• 标签内容 <img src="图片的路径"/>
  • 如果我们需要在网页上显示一个图片就需要使用图片标签;图片的路径地址可以为本地文件地址，也可以为网络文件地址URL；
  • 属性
    • width：图片的宽度
    • height：图片的高度

    • alt：图片上的文字
      这里解释一下alt属性：他的主要用在图片显示错误的时候，会显示alt属性的文字；
      例如

      
      图片显示错误

当我们选择一个不存在的图像路径的时候就会显示上面的效果；
这时候图片中的alt内容就会显示在x号旁边，也就是上图的“淘宝网 Taobao.....”

---

路径分类

• 分为绝对路径和相对路径。
  • 绝对路径：大家都知道就是相对于由盘符开始到你的文件位置结束的全部路径：如 “F:\BaiduYunDownload\javaWeb\JavaWeb视频教程_day1”
  • 相对路径：相对路径是你要引用的文件的路径相对于你所编写的HTML文件的相对位置。因此他又可以分为以下三类：
    • 同属于一个文件夹下：那么src就可以直接填写文件的名称；
    • 如果是相对于HTML文件的上一级文件夹：如
      html文件在：“F:\BaiduYunDownload\javaWeb\ a.html”
      图片文件在：“F:\BaiduYunDownload\ a.jpg”
      那么我们就应该使用"..\a.jpg"来作为src的地址；如果在上上层则采用"....\a.jpg"y裁一次类推；
    • 如果是相对于HTML文件爱你的下一级文夹：如
      F:\BaiduYunDownload\ a.html
      F:\BaiduYunDownload\javaweb\ a.jpg
      则应该采用“javaweb\a.jpg”的方式作为src的值。
  • 当然还可以是网络地址：直接右键复制图片地址拷贝就可以了。