整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
例
Norwegian Mountain Trip
在線實例
插入圖像
本例演示如何在網(wǎng)頁中顯示圖像。
從不同的位置插入圖片
本例演示如何將其他文件夾或服務器的圖片顯示到網(wǎng)頁中。
（可以在本頁底端找到更多實例。）
HTML 圖像- 圖像標簽（ <img>）和源屬性（Src）
在 HTML 中，圖像由<img> 標簽定義。
<img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="url" alt="some_text">
URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為 http://www.w3school.com.cn/images/boat.gif。
瀏覽器將圖像顯示在文檔中圖像標簽出現(xiàn)的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
HTML 圖像- Alt屬性
alt 屬性用來為圖像定義一串預備的可替換的文本。
替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
HTML 圖像- 設(shè)置圖像的高度與寬度
height（高度） 與 width（寬度）屬性用于設(shè)置圖像的高度與寬度。
屬性值默認單位為像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。
基本的注意事項 - 有用的提示：
注意: 假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
注意: 加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設(shè)置圖像的位置，瀏覽器無法加載圖片，圖像標簽就會顯示一個破碎的圖片。
更多實例
排列圖片
本例演示如何在文字中排列圖像。
浮動圖像
本例演示如何使圖片浮動至段落的左邊或右邊。
設(shè)置圖像鏈接
本例演示如何將圖像作為一個鏈接使用。
創(chuàng)建圖像映射
本例顯示如何創(chuàng)建帶有可供點擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。
HTML 圖像標簽
| 標簽 | 描述 |
|---|---|
| <img> | 定義圖像 |
| <map> | 定義圖像地圖 |
| <area> | 定義圖像地圖中的可點擊區(qū)域 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
一步：安裝pyecharts
pyecharts是一款將python與echarts結(jié)合的強大的數(shù)據(jù)可視化工具，本文使用了0.1.9.4版本
pip install pyecharts==0.1.9.4第二步：讀取數(shù)據(jù)
我的數(shù)據(jù)是在Excel表格里，如下圖：
Execel數(shù)據(jù)
使用xlrd（沒有就通過pip install xlrd安裝）讀取Excel表格中的數(shù)據(jù)
from pyecharts import Map
import xlrd
# 第一種方式，使用xlrd讀取Execel表格中數(shù)據(jù)
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文件，也不想新建一個，那就干脆自己定義一個字典，其中鍵是省份，值是對應的數(shù)量，然后再把對應的值取出來
# 第二種方式，直接自己寫一個字典，然后取出相應數(shù)據(jù)
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,
'內(nèi)蒙古': 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="分布數(shù)量",
attr=province,
value=num,
visual_range=[0, 239],
maptype='china',
is_visualmap=True)
chinaMap.render(path="中國地圖.html")這時候就會生成一個名稱為“中國地圖.html”的文件，打開后如下圖所示：
無省份名稱地圖
如果想保存為圖片，可以點擊地圖右側(cè)的下載按鈕，因為隔著比較遠，我在錄屏的時候并沒有把下載按鈕錄進來，但大家在自己電腦上肯定會看見的。
第四步：進一步優(yōu)化
大家可以看到上圖中各省份的名稱只有在被鼠標選中的情況下，才能顯示，并且所保存的圖片也不會顯示各省份名稱，如果要顯示各省份名稱，則需要對html文件就行修改，推薦使用notepad++(一個文本編輯軟件，直接去百度上下載，很簡單的)打開“中國地圖.html”文件，然后在第1923行的那個series中添加"label":{ "normal":{ "show":true}}，并保存，如下：
修改html文件
然后再打開“中國地圖.html”文件，就可以看到各省份的名稱啦，如下圖：
有省份名稱地圖
你以為你真的掌握了嗎？請進傳送門：用Python畫江蘇省地圖，實現(xiàn)各地級市數(shù)據(jù)可視化
關(guān)注微信公眾號“Python小鎮(zhèn)”，發(fā)現(xiàn)更多干貨知識！
維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁上可呈現(xiàn)豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。
網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會造成任何品質(zhì)的損失，且壓縮率高，支持動畫效果，很適合互聯(lián)網(wǎng)平臺，但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會對一些圖像數(shù)據(jù)造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來差異的。損失數(shù)據(jù)越多，圖片就越不清晰。
3、png格式
png是一種非破壞性的網(wǎng)頁圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點，還支持48 bit的色彩，跨平臺的圖像亮度控制，更多層的透明度設(shè)置。
網(wǎng)頁中通過<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>請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區(qū)別。</p>
</body>
</html>效果如下：
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預備的可替換的文本。
<img src="boat.gif" alt="Big Boat">當瀏覽器無法載入圖像時，替換文本屬性可告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼，在網(wǎng)頁中插入一個寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />圖片超鏈接
如下代碼，在網(wǎng)頁中對一個圖片進行超鏈接設(shè)置，點擊這張圖片就會跳轉(zhuǎn)到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>除了對整個圖片進行超鏈接設(shè)置外，還可以將圖像劃分成不同區(qū)域進行鏈接設(shè)置，比如一張地圖中給每個省份圖形進行超鏈接。
圖像熱區(qū)鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個熱區(qū)點擊區(qū)域形狀、大小、坐標等。
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 這里。
可以看到鼠標在圖片上點擊小行星會打開對應的圖片。
到此網(wǎng)頁中使用圖片已經(jīng)大體介紹了，自己親手寫下，會加深印象，感謝關(guān)注。
上篇：前端入門——html 超鏈接
下篇：前端入門——html 如何在網(wǎng)頁中使用視頻音頻
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
