HTML 圖像

九辰夕 2016-04-11

展開全文

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

實例小菜：

1、演示如何在網頁中插入一張圖片

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
插入一張網絡圖片<img src="http://pic.to8to.com/attch/day_160218/20160218_6410eaeeba9bc1b3e944xD5gKKhPEuEv.png" alt="image" width="100" height="50" align="middle">
</body>
</html>

效果如下圖：

2、演示不同來源的圖片(其他文件夾或服務器的圖片)如何插入網頁

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
網絡圖片<img src="http://pic.to8to.com/attch/day_160218/20160218_6410eaeeba9bc1b3e944xD5gKKhPEuEv.png" alt="image" width="100" height="50" align="middle"><br/>
src文件夾下的圖片<img src="src/woman@2x.png" alt="img" width="20" height="30" align="middle">
</body>
</html>

效果如下圖：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

一、HTML圖像－圖像標簽（<img>）和源屬性（src）

在HTML中，圖像由<img> 標簽定義。<img>是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。要在頁面上顯示圖像，你需要使用源屬性(src) 。src指“source”。源屬性的值是圖像的url地址。

定義圖像的語法是：

<img src="url" alt="some_text">

URL指存儲圖像的位置。如果名為"boat.gif"的圖像位于http://pic.to8to.com 的attch目錄中，那么其URL為http://pic.to8to.com/attch/boat.gif。

瀏覽器將圖像顯示在文檔中圖像標簽出現(xiàn)的地方。如果你將圖片標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。

二、HTML圖像－Alt屬性

alt屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。

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

在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

三、HTML圖像－設置圖像的高度與寬度

height （高度）與width（寬度）屬性用于設置圖像的高度與寬度。

屬性值默認單位為像素：

<img src="src/flower.png" alt="flower img" width="100" height="100">

提示: 指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。

四、基本的注意事項

注意: 假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。

注意: 加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標簽就會顯示一個破碎的圖片

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

五、其他實例

1、如何在文字中排列圖像

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            background-color: navajowhite
        }
    </style>
</head>
<body>
0<img src="src/Akali_0.jpg" alt="Akali0" width="154" height="280">
2<img src="src/Akali_2.jpg" alt="Akali2" align="middle"width="154" height="280">
1<img src="src/Akali_1.jpg" alt="Akali1" align="top" width="154" height="280" >
3<img src="src/Akali_3.jpg" alt="Akali3" align="bottom" width="154" height="280">
</body>
</html>

注：

2、如何使圖片浮動至段落的左邊或右邊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            background-color: navajowhite
        }
    </style>
</head>
<body>
<p><img src="src/woman@2x.png" alt="genter" style="float:left" width="24" height="30">浮動到右邊</p>
<p><img src="src/woman@2x.png" alt="genter" style="float: right" width="24" height="30">浮動到左邊</p>
<!--align屬性在HTML4中已廢棄了,也不支持HTML5,用CSS中的float屬性來校準圖片-->
</body>
</html>

3、如何將圖片作為一個鏈接使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            background-color: navajowhite
        }
    </style>
</head>
<body>
<p>創(chuàng)建圖片鏈接:<a href="http://www.baidu.com"><img src="src/Akali_0.jpg" alt="imghref" width="50" height="70" border="5"></a></p>
<p>無邊框的圖片鏈接:<a href="http://www.baidu.com"><img src="src/Akali_1.jpg" alt="imghref" width="50" height="70" border="0"></a></p>
</body>
</html>

4、如何創(chuàng)建帶有可供點擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            background-color: navajowhite
        }
    </style>
</head>
<body>
 <p>點擊花的不同位置注意變化</p>
 <img src="src/flower.png" width="100" height="100" alt="flower" usemap="#flowermap">
<map name="flowermap">
    <area shape="rect" coords="0,0,30,30" alt="One" href="http://www.baidu.com">
    <area shape="circle" coords="70,0,30,30" alt="Two" href="h2.html">
    </map>
</body>
</html>