HTML学习03-图片显示

一、图片显示方法

<img src="图片路径"/>

图片路径的写法:
1.相对路径
相对于当前页面所在位置的路径,../代表上一层路径。
例如:<img src="../img/tomcat.jpg"/>显示当前页面所在文件夹上一层文件夹中的img文件夹中的tomcat.jpg图片。
2.绝对路径
a.以逻辑盘符开始的路径
b.网络路径,例如 http://www.baidu.com/images/2.jpg
二、图片属性
·width(宽度)属性,取值同之前介绍一致。
·height(高度)属性,取值同width一致。
·alt(代替)属性,若无法正常显示图片,则以alt中的内容作为代替来显示。最多可以包含 1024 个字符的字符串,其中包括空格和标点。这个字符串必须包含在引号中。这段 alt 文本中可以包含对特殊字符的实体引用,但它不允许包含其他类别的标记,尤其是不允许有任何样式标签。
·border(边框)属性,给图片添加边框,取值为整数。
·title(提示文本)属性,当鼠标移动到图片上时产生的提示性文本。
三、示例
HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片显示</title>     
    </head>
    <body>
        <img src="../img/tomcat.jpg" border="10" width="400" height="150" alt="找不到图片" title="汤姆猫"/>
    </body>
</html>

效果
这里写图片描述
将鼠标放在图片上会显示提示信息(“汤姆猫”),当将src改为错误的值时会显示“找不到图片”

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章