HTML標籤（3）

在本篇，會學習到超連結標籤<a>、圖片標籤<img>。

---

<a>標籤

1. 使用<a>標籤實現超連結。

語法：

<a  href="目標網址"  title="滑鼠滑過顯示的文字">連結顯示的文字</a>

例如：

<a  href="http://www.imooc.com"  title="點選進入慕課網">click here!</a>

上面例子作用是單擊click here!文字，網頁連結到http://www.imooc.com這個網頁。

title屬性的作用：
滑鼠滑過連結文字時會顯示這個屬性的文字內容。這個屬性在實際網頁開發中作用很大，主要方便搜尋引擎瞭解連結地址的內容（語義化更友好）。


注意：

1. 為文字加入a標籤後，文字的顏色就會自動變為藍色（被點選過的文字顏色為紫色），可以使用css修改（a{color:#000})，後面會詳細講解。

2. <a>標籤在預設情況下，連結的網頁是在當前瀏覽器視窗中開啟，有時我們需要在新的瀏覽器視窗中開啟。
   程式碼：

   <a href="目標網址" target="_blank">click here!</a>

   
   

2. 使用mailto在網頁中連結Email地址

<a>標籤還有一個作用是可以連結Email地址，使用mailto能讓訪問者便捷向網站管理者傳送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：



注意：
如果mailto後面同時有多個引數的話，第一個引數必須以“?”開頭，後面的引數每一個都以“&”分隔。

下面是一個完整的例項:

點選連結會開啟電子郵件應用，並自動填寫收件人等設定好的資訊。

---

<img>標籤

使用<img>標籤來插入圖片。

語法：

<img src="圖片地址" alt="下載失敗時的替換文字" title = "提示文字" />

舉例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

• src：標識影像的位置；

• alt：指定影像的描述性文字，當影像不可見時（下載不成功時），可看到該屬性指定的文字；

• title：提供在影像可見時對影像的描述(滑鼠滑過圖片時顯示的文字)；

• 影像可以是GIF，PNG，JPEG格式的影像檔案。

---

來源：HTML+CSS基礎課程 - 慕課網