HTML基础-04-图相
2022-04-26 本文已影响0人
玄德公笔记
简书图片
1. 引用图片
- 语法
<img src="图片地址" alt="备用文本" width="120" height="120">
说明：
- alt ：备用文本是浏览器不能加载图片时显示的文本。
- src：可以是本地图片也可以是网络地址
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事(runoob.com)</title>
</head>
<body>
<p>来自本地的图片</p>
<img src="./images/zhugeliang.jpg" alt="孔明的本地头像" width="120" height="120">
<p>来自网络的图片</p>
<img src="https://p0.ssl.qhimgs1.com/sdr/400__/t0146ca81c57055a2ae.jpg" alt="孔明的网络头像" width="120" height="120">
</body>
</html>
-
显示
image.png
2. 图片的位置（align）
- 语法
align="bottom"
align="middle"
align="top"
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<h4>默认对齐的图像 (align="bottom"):</h4>
<p>======= <img src="./images/zhugeliang.jpg" alt="Smiley face" width="120" height="120"> =======</p>
<h4>图片使用 align="middle":</h4>
<p>======= <img src="./images/zhugeliang.jpg" alt="Smiley face" align="middle" width="120" height="120"> =======</p>
<h4>图片使用 align="top":</h4>
<p>======= <img src="./images/zhugeliang.jpg" alt="Smiley face" align="top" width="120" height="120"> =======</p>
</body>
</html>
-
显示
image.png
3. 浮动图片
- 语法
style="float:light"
style="float:right"
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>
<img src="./images/zhugeliang.jpg" alt="孔明的照片" style="float:left" width="120" height="120"> 图片浮动在左边
</p>
<p>
<img src="./images/zhugeliang.jpg" alt="孔明的照片" style="float:right" width="120" height="120"> 图片浮动在右边
</p>
</body>
</html>
4. 图相的链接
见《01-html基础（上）》“6.3 图片链接”
5. 创建图形映射
- 语法
长方形：
<area shape="rect" coords="0,0,110,260" href ="图片地址" alt="备用文本" />
说明：
0,0 为起始点的x,y坐标
110,260为结束点的x,y坐标
圆形：
<area shape="circle" coords="129,161,10" href ="图片地址" alt="备用文本" />
说明：
129,161 为圆心x,y坐标
10 为半径
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>桃园结义：</p>
<img src="./images/taoyuanjieyi.jpeg" width="400" height="400" alt="TaoYuanJieYi" usemap="#planetmap">
<map name="TaoYuanJieYi">
<area shape="rect" coords="240,110,280,230" alt="LiuBei" href="./images/liubei.jpg">
<area shape="rect" coords="180,90,230,200" alt="GuanYu" href="./images/guanyu.jpg">
<area shape="rect" coords="300,90,350,200" alt="ZhangFei" href="./images/zhangfei.jpg">
</map>
</body>
</html>
-
显示
分别点击图片中刘备、关羽张飞，可以进入不同的图片或网页。
image.png
image.png
