一、圖檔标簽
插入圖檔的标簽是使用
<img>
标簽。 src屬性設定圖檔，此處圖檔的路徑可以是相對路徑也可以是絕對路徑，相對路徑指的是該html檔案所在的路徑相對的位置。下面代碼所示路徑與檔案相對位置如下：
絕對路徑有兩種，一種是從磁盤開始寫路徑，一種是網絡圖檔路徑。
width與height設定圖檔寬高，border設定的是圖檔的邊框，也就是上圖所示的黑色邊框。
<img src="strawberry.jpg" width="300" height="300" alt="草莓" border="20" alt屬性用于在圖檔不存在時顯示的文字，圖檔存在時則不顯示文字。
<img src="1.jpg" width="300" height="300" alt="草莓" border="20" （1）修改圖檔邊框顔色
圖檔邊框的顔色隻有一種修改方式就是通過使用超連結标簽。
<a href=""></a>
代碼示例：
<a href=""><img src="strawberry.jpg" width="300" height="300" alt="草莓" border="20"</a> 效果如下：
（2）title屬性
效果圖：
ps：可以看到滑鼠移動到圖檔時會有文字出現。
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>HTML标簽</title>
</head>
<body>
<a href=""><img src="strawberry.jpg" width="300" height="300" alt="草莓" border="20" title="哈哈"></a>
</body>
</html> 二、超連結标簽
超連結通過上面提到的
<a href=""></a>
标簽實作的。超連結有三種連接配接形式：
一、外部連結：連接配接到一個外部檔案（比如通過點選連接配接到另一個html頁面）
二、錨連結：連接配接到本頁面或者是其他頁面的特定位置。
三、郵件連接配接：打開郵箱界面
代碼（ps：注意錨連結”top“前必須添加#号，如果是跳轉到其他界面的某個位置隻需要在其界面前面添加界面名）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>HTML标簽</title>
</head>
<body>
<a href="Noname0.html" name="top">點選外部連結</a>
<br>
<a href="">點選連接配接郵箱，這裡我沒有安裝系統郵箱或者是其他郵箱，不進行示範，如果使用郵箱連接配接直接輸入郵箱即可。</a>
<pre>
</pre>
<a href="#top">錨連結：點選回到目前頁面的頂部</a><br>
<a href="Noname0.html#top">錨連結：點選回到其他頁面頂部</a>
</body>
</html> 補充：
補充target屬性（用于告知浏覽器以何種方式打開界面），方式一共四種
_self:在本身的浏覽器中打開
_blank:新開一個浏覽器打開
_parent:隻能在架構中使用
_top:隻能在架構中使用
<a href="Noname0.html" name="top" target=“_blank”>點選外部連結</a> 三、熱點問題
熱點問題指的是對圖檔的某個區域加超連結
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>HTML标簽</title>
</head>
<body>
<img src="strawberry.jpg" width="300" height="300" usemap="#Map"/>
<map name="Maps" id="Map">
<area shape="circle" coords="100,30,30" href="Noname0.html"></area>
</map>
<img src="strawberry.jpg" width="300" height="300" usemap="#Map1"/>
<map name="Maps" id="Map1">
<area shape="rect" coords="0,0,100,100" href="Noname0.html"></area>
</map>
</body>
</html> 四、圖檔的align屬性
圖檔的align屬性并不是圖檔相對于整個界面的位置而是圖檔相對于文本的位置。
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>HTML标簽</title>
</head>
<body>
草莓<img src="strawberry.jpg" width="300" height="300" align="center"/>草莓
<br>
草莓<img src="strawberry.jpg" width="300" height="300" align="left"/>草莓
<br>
</body>
</html>