HTML 图像

例

Norwegian Mountain Trip

在线实例

插入图像

本例演示如何在网页中显示图像。

从不同的位置插入图片

本例演示如何将其他文件夹或服务器的图片显示到网页中。

（可以在本页底端找到更多实例。）

HTML 图像- 图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

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

替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

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

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

属性值默认单位为像素:

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

更多实例

排列图片

本例演示如何在文字中排列图像。

浮动图像

本例演示如何使图片浮动至段落的左边或右边。

设置图像链接

本例演示如何将图像作为一个链接使用。

创建图像映射

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

HTML 图像标签

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

一步：安装pyecharts

pyecharts是一款将python与echarts结合的强大的数据可视化工具，本文使用了0.1.9.4版本

pip install pyecharts==0.1.9.4

第二步：读取数据

我的数据是在Excel表格里，如下图：

Execel数据

使用xlrd（没有就通过pip install xlrd安装）读取Excel表格中的数据

from pyecharts import Map
import xlrd
# 第一种方式，使用xlrd读取Execel表格中数据
data = xlrd.open_workbook('data.xlsx')
table = data.sheet_by_name('Sheet1')
province = table.col_values(0)[1:]
num = table.col_values(1)[1:]

如果各位没有相应的Execel文件，也不想新建一个，那就干脆自己定义一个字典，其中键是省份，值是对应的数量，然后再把对应的值取出来

# 第二种方式，直接自己写一个字典，然后取出相应数据
province_distribution = {'四川': 239.0, '浙江': 231.0, '福建': 203.0, '江苏': 185.0, '湖南': 152.0, '山东': 131.0, '安徽': 100.0, '广东': 89.0, '河北': 87.0, '湖北': 84.0, '吉林': 75.0,  
                         '上海': 70.0, '江西': 64.0, '广西': 64.0, '贵州': 64.0, '北京': 63.0, '云南': 53.0, '重庆': 49.0, '河南': 48.0, '陕西': 38.0, '山西': 37.0, '辽宁': 33.0, '新疆': 25.0, 
                         '内蒙古': 23.0, '黑龙江': 20.0, '天津': 19.0, '甘肃': 13.0, '海南': 9.0, '青海': 7.0, '宁夏': 4.0, '西藏': 0.0}
provice = list(province_distribution.keys())
num = list(province_distribution.values())

第三步：画图

chinaMap = Map(width=1200, height=600)
chinaMap.add(name="分布数量",
             attr=province,
             value=num,
             visual_range=[0, 239],
             maptype='china',
             is_visualmap=True)
chinaMap.render(path="中国地图.html")

其中参数name指的是显示在地图正上方的标题，
attr就是一个包含了各省份名称的列表，
value就是包含了各省份对应数值的列表，
visual_range指的是整个数据中的数值范围，
maptype就是指的地图类型，
is_visualmap代表是否显示颜色

这时候就会生成一个名称为“中国地图.html”的文件，打开后如下图所示：

无省份名称地图

如果想保存为图片，可以点击地图右侧的下载按钮，因为隔着比较远，我在录屏的时候并没有把下载按钮录进来，但大家在自己电脑上肯定会看见的。

第四步：进一步优化

大家可以看到上图中各省份的名称只有在被鼠标选中的情况下，才能显示，并且所保存的图片也不会显示各省份名称，如果要显示各省份名称，则需要对html文件就行修改，推荐使用notepad++(一个文本编辑软件，直接去百度上下载，很简单的)打开“中国地图.html”文件，然后在第1923行的那个series中添加"label":{ "normal":{ "show":true}}，并保存，如下：

修改html文件

然后再打开“中国地图.html”文件，就可以看到各省份的名称啦，如下图：

有省份名称地图

你以为你真的掌握了吗？请进传送门：用Python画江苏省地图，实现各地级市数据可视化

关注微信公众号“Python小镇”，发现更多干货知识！

维网和其它网络类型最大的区别就是它在网页上可呈现丰富多彩的色彩和图像，还可以播放音频、视频，及把图像作为链接使用。

一、图片格式

网络上流行的图片格式主要有jpg、jpeg、png、gif等，以下是这几种格式的介绍。

1、gif格式

gif采用LZW压缩，是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失，且压缩率高，支持动画效果，很适合互联网平台，但是它只支持256种颜色。

2、jpg或jpeg格式

以JPEG有损压缩图片，通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失，这部分损失不影响图片显示，一般人眼是看不出来差异的。损失数据越多，图片就越不清晰。

3、png格式

png是一种非破坏性的网页图像文件格式，它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点，还支持48 bit的色彩，跨平台的图像亮度控制，更多层的透明度设置。

二、使用图片

网页中通过<img>标签插入图片，语法如下：

<img src="图片路径" alt="替换文本" />

具体示例：

<!DOCTYPE HTML>
<html>
<body>
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
</body>
</html>

效果如下：

替换文本属性（Alt）

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

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

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像宽度和高度属性

如下代码，在网页中插入一个宽度和高度都是300像素的图片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

图片超链接

如下代码，在网页中对一个图片进行超链接设置，点击这张图片就会跳转到其它页面。

<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>

创建图像热区链接

除了对整个图片进行超链接设置外，还可以将图像划分成不同区域进行链接设置，比如一张地图中给每个省份图形进行超链接。

图像热区链接，使用usemap 属性通过#name指定到名叫name的map元素上，map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种，rect 方形，circle 圆形，poly 多边形。coords 属性定义坐标点位置，相对于图片左上角位置。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>

效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。

可以看到鼠标在图片上点击小行星会打开对应的图片。

到此网页中使用图片已经大体介绍了，自己亲手写下，会加深印象，感谢关注。

上篇：前端入门——html 超链接

下篇：前端入门——html 如何在网页中使用视频音频

在线咨询

上一篇：神奇！HTML能够添加直接启动手机拨号盘的链接
下一篇：预览版中引入Javascript支持，实现高级数据处理逻辑

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 图像

一、图片格式

二、使用图片

创建图像热区链接

您的项目需求