Web初探-html-图片

HTML图片使用 < img > 标签定义

它们有下面几个下信息：
src（图片源路径）
alt（附加信息）
width（宽度）
height（高度）…等信息

例如：

<img src="new_logo.png" alt="CodingDict.com" width="250" height="122"/>

其中 src属性是图片的地址 new_logo.png是和html的路径在同一级的图片的路径。如果想表示父级路径，可以用"…/new_logo.png"

• 相对路径和绝对路径：
  上面的两个图片的路径都是相对路径。还有一种使用绝对路径的方式，比如说想将百度一下的那个图片引用进来，就要获取它的路径：

https://www.baidu.com/img/bd_logo1.png?where=super

在自己网页中引用这个图片：

<img src = "https://www.baidu.com/img/bd_logo1.png?where=super"/>

这是在网上找的图片，使用的绝对路径，如果是在自己电脑上的图片，路径跟html相差很远的话，也使用绝对路径。
eg： 在我电脑上的f盘下有这么一张图片地址是"f:q.png"
那么网页使用绝对路径引用就是：

<img src = "f:q.png"/>

• 设置图片的尺寸：
  在最上面的例子中，有一个 width 和height属性，就是用来设置图片的属性
  eg：

<img src = "f:q.png" width = "250" height = "250"/>

• 给图片添加文本(备注)：
  当一个图片不存在的时候，但是又要显示这张图片，图片是显示不出来了，但是想要知道图片是什么，就可以给它加上一个文本，使用的是alt属性
  eg：

<img src = "f:q1.png" alt = "这是一只小企鹅"/>

q1这张不存在，所以在显示的时候就只会显示文本"这是一只小企鹅"

• 使用title属性给图片设置标题

<img src = "f:q.png" title = "这是一只小企鹅" />

当鼠标停留在图片上时，就会显示标题

---