HTML图片
當需要在網頁中插入圖片時，需要用到圖片標簽<img>，圖片標簽是一個單標簽，他其中有一個源屬性(src="插入圖片的鏈接")，源屬性的值是圖像的 URL 地址。
<img src="url" />瀏覽器將圖像顯示在HTML文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
?
<p>這是湯姆貓</p><img src="image/cat.jpg" height="100" alt="湯姆貓"><p>這是第二段文字</p>設置網頁背景圖片：在body屬性中，添加background="url"，就可以把網頁背景設置為自己想設置的圖片
height和width屬性：可以修改圖片的比例大小，一般來說，只修改圖片的一個屬性，另一個屬性會根據原來比例自己調整
代碼如下：
<body><img src="image/dog.jpg" height="100"><img src="image/cat.jpg" height="200"><img src="image/mouse.jpg" height="300"> </body>alt屬性：在相應圖片位置設置該屬性，當圖片在瀏覽器中加載不出來時候，就會顯示在alt屬性中設置的文字
<p>可以顯示時的樣子</p><img src="image/cat.jpg" height="100" alt="湯姆貓"><p>不能顯示時</p><img src="image/cat1111.jpg" height="100" alt="湯姆貓">?align屬性：通過在圖像標簽中添加該屬性，可以設置圖像在文本中顯示的位置
<p>這是一段文本<img src="image/mouse.jpg" height="100" align="top">用來演示圖片在文本中顯示位置</p> <p>這是一段文本<img src="image/mouse.jpg" height="100" align="center">用來演示圖片在文本中顯示位置</p> <p>這是一段文本<img src="image/mouse.jpg" height="100" align="bottom">用來演示圖片在文本中顯示位置</p>制作圖片鏈接：將圖片標簽插入到超鏈接標簽中間，點擊圖片就可以去往相對應的網頁
?
<a href="http://www.baidu.com"><img src="image/mouse.jpg" height="100"></a><figure> 標簽：給圖片配上標題，可以用來給圖片一些解釋，將圖片和解釋都放在<figure>標簽中figcaption元素來定義圖片標題或解釋。
<body><figure><img src="image/cat.jpg" alt="cat" width="100px" height="100px"><figcaption>這是湯姆貓</figcaption></figure> </body>?
創建圖片映射：將圖片轉為一張地圖，在圖片上可創建可供點擊區域，點擊已經設置的區域，就可以前往指定頁面
??我們將斯派克的圖片作為一張地圖，通過點擊區域位置和形狀的設置，在點擊圖片嘴巴位置時，他會跳轉到寫好的湯姆圖片的頁面
<img src="image/dog.jpg" border="0" usemap="#planetmap" alt="dog"> <map name="planetmap" id="planetmap"><area shape="circle" coords="300,150,50" href="cat.html" alt="cat"> </map><map>就是將某一張圖片設為一個地圖，其中用到name和id屬性，在需要設置為地圖的圖片標簽中添加usemap屬性，屬性值為name或者id的屬性值
<area>就是設置點擊區域，其中shape屬性就是設置點擊區域的形狀，coords屬性設置點擊區域在map圖像中的坐標，href屬性就是點擊區域后跳轉的頁面的位置，同樣這里也可以設置target屬性來設置打開跳轉頁面的方式
shape：circle->圓形? ? ? rect->矩形? ? ?poly->多邊形
coords：圓形? coords="x1,y1,r"圓心坐標(x1,y1)，以及半徑
? ? ? ? ? ? ? 矩形? coords="x1,y1,x2,y2"左上角坐標(x1,y1)和右下角坐標(x2,y2)
? ? ? ? ? ? ? 多邊形? coords="x1,y1,x2,y2,x3,y3……"多邊形每個點坐標
總結
- 上一篇： 用 XGBoost 在 Python 中
- 下一篇： web前端 | 博客（八）用户信息修改功