• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

7.1 图像标签img

任何一张网页都少不了图片,一个图文并茂的网页,会使得用户体验性更好。网站要获得更多的流量,也需要从“图文并茂”这个角度挖掘一下。

一、img标签简介

在HTML中,图像使用<img/>标签。对于“图像标签”这一章,我们仅仅掌握一个<img/>标签和它的3个属性src、alt和title就可以了。

表1 img标签常用属性
属性 说明
src 图像的文件地址
alt 图片显示不出来时的提示文字
title 鼠标移到图片上的提示文字

src和alt这两个属性是img标签必不可少的属性。title属性的值往往都是跟alt属性的值相同。

二、img标签src属性

src,即“source(源文件)”。img标签的src属性用于指定图像源文件所在的路径,它是图像必不可少的属性。

语法:

<img src="图像源文件的路径"/>

说明:

img,即“image(图像)”。理解标签语义更有利于你记忆,而记忆HTML标签的语义是HTML的基础。更多标签语义请查看HTML标签的含义

img标签是一个自闭合标签,没有结束标签。src属性用于设置图像文件所在的路径,这一路径可以是相对路径,也可以是绝对路径。(在下一节我们会详细讲解相对路径和绝对路径)

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图像标签img</title>
</head>
<body>
    <img src="../App_images/lesson/hj/7-1-1.jpg">
</body>
</html>

在浏览器预览效果如下:

img标签

我们现在可能会对图片的路径src比较疑惑,不知道怎么写,没关系,请阅读下一节“相对路径和绝对路径”。

三、img标签alt属性

alt属性用于设置图片的描述信息,这些信息是给搜索引擎看的。在搜索引擎优化SEO中,alt属性也是一个非常重要的属性。在SEO入门教程中,大家将会学习到。这里大家无需深入了解alt属性。

四、img标签title属性

title属性用于设置鼠标移到图片上的提示文字,这些提示文字是给用户看的。

语法:

<img src="图片地址" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图像标签img</title>
</head>
<body>
    <img src="../App_images/lesson/hj/7-1-1.jpg" alt="海贼王路飞" title="海贼王路飞"/>
</body>
</html>

在浏览器预览效果如下:

img的alt属性和title属性

分析:

title属性的值往往都是跟alt属性的值相同,一个是给读者用户看,一个是给搜索引擎看。

总结

1、图像标签

在HTML中,图像标签为<img/>。<img/>是一个自闭合标签。<img/>标签只需要掌握3个属性就可以了:src、alt、title。

语法:

<img src="图片地址" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">

表1 img标签常用属性
属性 说明
src 图像的文件地址
alt 图片显示不出来时的提示文字
title 鼠标移到图片上的提示文字

src和alt这两个属性是img标签必不可少的属性。title属性的值往往都是跟alt属性的值相同。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部