6 HTML图片标签

6 图片标签

在HTML中，图像由标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif。

img标签的属性：

 /*
src属性：
    指定图像的URL地址，是英文source的简写，表示引入资源。
    src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
    如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。
width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
*/

点击图片跳转可以配合a标签使用

 <a><img src="" alt=""></a>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<a href="https://www.hao123.com">
    <img src="https://img1.baidu.com/it/u=2953940086,3621245794&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" title="美女"
         alt="C:\Users\zczha\Pictures\Saved Pictures\Windows 10 logo 简约4k电脑壁纸_彼岸图网.jpg"></a>
 
<a href="https://www.baidu.com" target="_blank">
    <img src="https://img2.baidu.com/it/u=1624963289,2527746346&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" title="美女"
         alt="">
</a>
</body>
</html>

代码效果图如下：

posted @ 2023-08-18 11:22 生而自由爱而无畏阅读(229) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 2 HTML超链接标签

· 9 CSS背景属性

· HTML（六）：图像标签

· HTML入门-----常见标签之图片标签

· HTML - 3、图片<img>

公告

昵称：生而自由爱而无畏
园龄： 3年4个月
粉丝： 8
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

python爬虫成神之路进行时

6 HTML图片标签

6 图片标签

代码效果图如下：

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	/*
	src属性：
	指定图像的URL地址，是英文source的简写，表示引入资源。
	src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
	如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
	alt属性：指定图像无法显示时的替换文本。
	width属性：指定引入图片的显示宽度。
	height属性：指定引入图片的显示高度。
	border属性：指定引入图片的边框宽度，默认为0。
	title属性：悬浮图片上的提示文字
	*/

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>图片标签</title>
	</head>
	<body>
	<a href="https://www.hao123.com">
	<img src="https://img1.baidu.com/it/u=2953940086,3621245794&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" title="美女"
	alt="C:\Users\zczha\Pictures\Saved Pictures\Windows 10 logo 简约4k电脑壁纸_彼岸图网.jpg"></a>

	<a href="https://www.baidu.com" target="_blank">
	<img src="https://img2.baidu.com/it/u=1624963289,2527746346&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" title="美女"
	alt="">
	</a>
	</body>
	</html>