首頁  >  文章  >  web前端  >  HTML的連結程式碼怎麼做? HTML的圖片連結怎麼製作?

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

寻∝梦
寻∝梦原創
2018-08-14 13:13:476229瀏覽

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

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

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

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

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

HTML的連結程式碼怎麼做:

HTML 超連結(連結)

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

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

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

有兩種使用3499910bf9dac5ae3c52d5ede7383485 標籤的方式:

透過使用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="/images/relaxing-cat.jpg"></a>

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

用a標籤來實現

<a href="链接的地址"><img src="图片的URL" width="图片的宽度" height="图片的高度" border="边框"></a>


定義和用法
3499910bf9dac5ae3c52d5ede7383485 標籤定義超鏈接,用於從一張頁面鏈接到另一張頁面。
3499910bf9dac5ae3c52d5ede7383485 元素最重要的屬性是 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 文件中對錨進行命名(建立一個書籤):

2fdc3bf2d92fc05c086f75866fe7e3cd基本的注意事項- 有用的提示5db79b134e9f6b82c0b36e0489ee08ed

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

##3fcf6e84cf29621a10f6635a9ed09f58有用的提示5db79b134e9f6b82c0b36e0489ee08ed

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

731740faa0ffd9823120cb5dc40516d0有用的提示5db79b134e9f6b82c0b36e0489ee08ed

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

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

【相關推薦】

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

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


#

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn