html引入图片之< img>标签及属性的用法笔记

原创 PHP笔记  2017-03-17 17:26  阅读 3,703 views 次

图片也是网页中最常见的html元素,而且是相当重要的一部分。在html网页中,图像由<img> 标签定义,<img> 是空html标签或说是单标签,它只包含属性,没有闭合标签。

1、html<img>标签src和alt属性:

src和alt属性是<img>标签中两个非常重要的属性。src属性是引入图片的地址,没有它<img>标签就没意义了。alt属性是搜索引擎判断图片与文字是否相关的重要依据,其值得长度必须少于100个英文字符。

格式:

<img src="图片地址" alt="图片描述">

说明:图片地址:储图像的位置;图片描述:对图片意思的说明,如果图片不能显示,则显示该说明。

2、html<img>标签title属性:

title属性并不重要,可有可无,只是增加视觉效果,在你鼠标悬停在该图片上时显示title属性中的内容。

3、html<img>标签height和width属性:

height(高度)和width(宽度)属性是用来规定图片的高和宽的,指定图片高宽的好处是在加载不同大小的图片时不会影响网页的结构。

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html引入图片之img标签的用法详解_PHP笔记</title>
</head>
<body>
<h3>html引入图片之img标签的用法演示<h3>
<img src="https://www.ggbiji.com/wp-content/themes/Nana/images/abc/phpbij.jpg" alt="PHP笔记" title="PHP笔记" width="400px" height="150px">
</body>
</html>

运行结果:

本文地址:https://www.ggbiji.com/html-img.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情