HTML的連結程式碼怎麼做？ HTML的圖片連結怎麼製作？

HTML的連結程式碼怎麼做？ HTML的圖片連結怎麼製作？本篇文章就詳細的為你介紹文字連結程式碼和圖片連結程式碼。

首先，我們要了解HTML的連結程式碼是什麼：

HTML的連結程式碼就是HTML中把一些文字變成超連結的程式碼。

HTML 使用超級連結與網路上的另一個文件相連。

幾乎可以在所有的網頁中找到連結。點擊連結可以從一張頁面跳到另一張頁面。

HTML的連結程式碼怎麼做：

HTML 超連結（連結）

超連結可以是一個字，一個詞，或是一組詞，也可以是一幅圖像，您可以點擊這些內容來跳到新的文件或當前文件中的某個部分。

當您把滑鼠指標移到網頁中的某個連結時，箭頭會變成一隻小手。

我們透過使用 標籤在 HTML 中建立連結。

有兩種使用 標籤的方式：

透過使用href 屬性- 建立指向另一個文件的連結

透過使用name 屬性- 建立文件內的書籤

HTML 連結語法

連結的HTML 程式碼很簡單。它類似這樣：

<a href="url">Link text</a>

href 屬性規定連結的目標。

開始標籤和結束標籤之間的文字被當作超級連結來顯示。

如：

<a href="http://www.PHP.cn/">Visit PHP中文网</a>

上面這行程式碼顯示為：Visit PHP中文網

點擊這個超連結會把使用者帶到 PHP中文網的首頁。

HTML圖片連結的製作：

"連結文字" 不必一定是文字。圖片或其他 HTML 元素都可以成為連結。

如：

你可以透過把某元素嵌套進a元素使其變成一個連結。

把你的圖片嵌套進a元素。舉例如下：

<a href="#"><img  src="/static/imghwm/default1.png"  data-src="/images/relaxing-cat.jpg"  class="lazy"   alt="HTML的連結程式碼怎麼做？ HTML的圖片連結怎麼製作？" ></a>

"images/relaxing-cat.jpg"這個是圖片的名字。

用a標籤來實現

<a href="链接的地址"><img  src="/static/imghwm/default1.png"  data-src="图片的URL"  class="lazy"      style="max-width:90%" height="图片的高度" border="边框" alt="HTML的連結程式碼怎麼做？ HTML的圖片連結怎麼製作？" ></a>

定義和用法
標籤定義超鏈接，用於從一張頁面鏈接到另一張頁面。
元素最重要的屬性是 href 屬性，它指示連結的目標。

HTML 連結 - target 屬性

使用 Target 屬性，可以定義被連結的文件在何處顯示。

下面的這行會在新視窗開啟文件：

<a href="http://www.PHP.cn/" target="_blank">Visit PHP中文网!</a>

HTML 連結- name 屬性

name 屬性規定錨（anchor）的名稱。

您可以使用 name 屬性建立 HTML 頁面中的書籤。

書籤不會以任何特殊方式顯示，它對讀者是不可見的。

當使用命名錨（named anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣用戶就無需不停地滾動頁面來尋找他們需要的訊息了。

命名錨的語法：

<a name="label">锚（显示在页面上的文本）</a>

提示：錨的名稱可以是任何你喜歡的名字。

提示：您可以使用 id 屬性來取代 name 屬性，命名錨同樣有效。

這有實例：

首先，我們在HTML 文件中對錨進行命名（建立一個書籤）：

基本的注意事項- 有用的提示

然後，我們在同一個文件中創建指向該錨的連結：

##有用的提示

您也可以在其他頁面中建立指向該錨點的連結：

有用的提示

在上面的程式碼中，我們將# 符號和錨名稱加入到URL 的末端，就可以直接連結到tips 這個命名錨了。

好了，以上就是關於HTML中的連結程式碼和圖片連結的製作。

【相關推薦】

html的基礎元素，讓你零基礎學習HTML

什麼是HTML檔？ HTML檔案的初步認知

#

以上是HTML的連結程式碼怎麼做？ HTML的圖片連結怎麼製作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！