HTML插入图片

教程管理员发布于2023-09-30 22:20 HTML教程 156

简介： HTML插入图片

一、src属性

符号：img

特点：单标签

代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
    </head>
        <body>
            <p>要展示的图片：</p>
            <img src="fish.jpg">
        </body>
</html>

总结：在img标签中引入src属性名即可完成对图片的插入，其中src的属性值为“文件名”或“路径./文件名”，注：要插入的图片必须与html项目在同一文件夹中！此部分在下文会有重点说明。

二、其余属性

属性名	属性功能
alt	替换文本，当图片无法成功显示时显示alt属性对应属性值的内容
title	当鼠标悬停与图片上时，显示title属性对应属性值的内容
width	宽度大小，若手动设置宽度则自动匹配合适的高度
height	高度大小，若手动设置高度则自动匹配合适的宽度

三、alt用法

说明：当图片因某些原因无法显示时，显示alt属性对应的属性值。

代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
    </head>
        <body>
            <p>要展示的图片：</p>
            <img src="potato.jpg" width="500" alt="土豆">
        </body>
</html>

效果：

四、title用法

说明：若图片正常显示，则当鼠标悬停于图片上时，显示title属性对应属性值的内容

代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML</title>
    </head>
        <body>
            <p>要展示的图片：</p>
            <img src="fish.jpg" width="500" alt="鱼" title="这是一条熟的鱼">
        </body>
</html>

效果：若图片可以正常显示，将鼠标停留在图片上，会出现“这是一条熟的鱼”字样。

五、属性特点

图片标签的属性特点适用绝大多数的HTML标签：

1.标签的属性写在开始标签内部

2.标签内可同时存在多个属性

3.属性间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性间没有顺序之分

六、src路径的讲解

若出现图片无法显示的情况，则多半是src的属性值出现了问题，即路径问题。

标签：#阿里 #开发者 #插入图片 #社区 #HTML

上一篇：html5标签基础
下一篇：HTML5下<a>元素下可以包裹块级元素

HTML插入图片

一、src属性

二、其余属性

三、alt用法

四、title用法

五、属性特点

六、src路径的讲解

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠