HTML学习笔记--图像

最新推荐文章于 2024-07-22 22:27:17 发布

PRCORANGE

最新推荐文章于 2024-07-22 22:27:17 发布

阅读量315

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/PRCORANGE/article/details/107498600

版权

HTML图像

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。地址后可以规定图片的大小。
注意：img元素是自关闭元素，不需要结束标记。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<img src="https://i.loli.net/2020/02/09/BjoD7ktSpg9vREZ.jpg" alt="background" width="250" height="500">
</body>
</html>

在这里插入图片描述

HTML 图像- Alt属性

alt属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

HTML 图像- 设置图像的高度与宽度

height（高度）与width（宽度）属性用于设置图像的高度与宽度。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

设置图像边框

在<img>标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border="3">

设置图像对齐

默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">

图像映射

创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>

<body>
<p>点击行星可查看大图</p>
<img src="https://i.loli.net/2020/07/22/EvMcxpD1YyrG4U2.jpg" width="686" height="435" alt="太阳系" usemap="#planetmap">
<map name="planetmap">	
	<area shape="circle" coords="-21,282,83" alt="太阳" href="https://i.loli.net/2020/07/22/EvMcxpD1YyrG4U2.jpg" target="_blank">
	<area shape="circle" coords="86,266,9" href="https://i.loli.net/2020/07/22/C34wch19JRngiIk.jpg" alt="水星" target="_blank">
	<area shape="circle" coords="154,280,13" href="https://i.loli.net/2020/07/22/vYnHTjd4rBc8Cop.jpg" alt="金星" target="_blank">
	<area shape="circle" coords="159,341,16" href="https://i.loli.net/2020/07/22/1fp79OCLtWurSRv.jpg" alt="地球" target="_blank">
	<area shape="circle" coords="210,244,11" href="https://i.loli.net/2020/07/22/RfXeoQ5DEgrPuw9.jpg" alt="火星" target="_blank">
	<area shape="circle" coords="275,359,24" href="https://i.loli.net/2020/07/22/XKvqEwAWZ9pbe8c.jpg" alt="木星" target="_blank">
	<area shape="circle" coords="402,254,29" href="https://i.loli.net/2020/07/22/XKvqEwAWZ9pbe8c.jpg" alt="土星" target="_blank">
	<area shape="circle" coords="355,167,14" href="https://i.loli.net/2020/07/22/iegMUAhJoS91t5n.jpg" alt="天王星" target="_blank">
	<area shape="circle" coords="538,154,15" href="https://i.loli.net/2020/07/22/Pex9QwbVcdJSy1h.jpg" alt="海王星" target="_blank">
	<area shape="circle" coords="620,40,7" href="https://i.loli.net/2020/07/22/DoEjYRBQU1XbGrh.jpg" alt="冥王星" target="_blank">
</map>
</body>

</html>