天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

語法href是什麼?href基礎應用與解說|天矽科技客製化網頁設計

部落格:語法href是什麼?href基礎應用與解說|天矽科技客製化網頁設計

 

href就是連結路徑的意思,它的主要作用是讓網頁連結到其他地方。

網頁語法中的href是什麼

 

 href全名為Hypertext Reference 超文本引用。它的作用是指定超連結目標的URL(連結),簡單來說就是連結路徑的意思。

 大多時候,我們看到href前面通常都會有個<a>標籤,這個 a 代表連結的意思,當然也會有人稱 a 為link,但都是相同的功能與意義。

 

a href="連結"

比如「超連結」我們就會這樣寫:

 

a href="www.某個網址.com.tw" target="_blank">我要顯示的字</a>
或是
a href=" www.某個網址.com.tw” title="游標顯示文字">我要顯示的字</a>

 

※這裡的 target="_blank" 表示在新視窗中開啟,若為 target="_self" 則表示在原本的視窗開啟,另外 title=" 表示連結標題,在連結後方加入這種類型的標籤,語法才更有意義,不過在此不多做贅述。

※有時候我們也會看到網址語法寫成<link href="連結" />,這裡的link作用則是引入CSS檔案

 

href="#"

 有時我們也會看到href寫成「href="#"」這代表什麼意思? 寫成 # 不代表沒寫好,這是表示這是跳轉到目前頁面、連到任何書籤的意思。

 若後面沒有加任何連結,像是<a href="#">這樣,也不代表連不到任何連結,這樣的方式一樣能連結到網頁本身,只是連結目的地還是在本頁面,通常是做JavaScript效果才會這樣做。

 

 這個語法我們稱它為「空址」,在架設無障礙類型的網站時,是不能有這個語法出現的,因為這樣會被判定為無效網址,所以如果一定要加入這項空址,請寫成<a href="javascript:;">

 

 總而言之,href的作用就是連結的意思。

 

延伸閱讀:
如何優化SEO?用簡單的語法幫助內容更加結構化!

 

網頁中的href用法

 

內部與外部連結

<a href="連結網址">字字字</a>

 

舉例
<a href="https://www.tsg.com.tw/works6.htm">天矽作品集</a>

顯示天矽作品集

 

 

連結外部文件

想要讓使用者直接點選超連結就能下載文件,同樣能使用href連結。

<a href="/XXX.doc">字字字</a>

 

舉例
<a href="/XXX.doc">點此下載</a>

顯示點此下載

 

 

目錄錨點

有些較長的文章,在文章一開始會放上目錄,讓使用者能快速找到想看的章節,這部分也能利用href連結連到錨點上。

<a href="#對應的id標籤碼">章節標題</a>

 

舉例
(因為我們沒有設定目錄,所以以語法呈現。)

  • 目錄其中之一:
    <a href="#1">對應章節標題</a>

  • 對應連結錨點:
    <h3 id="1">文章章節標題<h3>

 

 

麵包屑建立

<ol>
<li><a href="
區域連結網址_第一層">麵包屑文字</a></li>
<li><a href="
區域連結網址_第二層">麵包屑文字</a></li>
<li><a href="
區域連結網址_第三層">麵包屑文字</a></li>
</ol>

舉例

麵包屑前台顯示

▲羅東博愛醫院麵包屑(前台顯示)

 

麵包屑後台顯示

▲羅東博愛醫院麵包屑(後台語法)

 

 

外部CSS引用

<link href="XXXX.CSS" rel="指定樣式">

CSS樣式

 

連結href和src

 

 有些人可能發現,不是還有 src 嗎?這兩個有什麼不一樣?

 src全名source,意思是根源、來源的意思,而href則為超文本引用,雖然都能夠連結,但用途不同
 

  • href 用於a標籤、link標籤
  • src 用於img標籤、script標籤、iframe標籤

 

像這樣:<img alt="圖片表現文字" src="圖片網址" />

所以這兩者是不同的,本文不做贅述,但仍特別提醒大家!

 

天矽科技的服務

 

 天矽科技在協助架設網頁時,會在網站建立路徑,以利使用者在網站中不迷路,而這裡的路徑建立也稱麵包屑建立(前台顯示),也就是使用a屬性的href來達成目的。

 而文章中的前台顯示連結也都採用<a href="URL">的方式撰寫,使文章結構更加簡潔。
 

延伸閱讀
麵包屑是什麼?提升SEO的「路徑導覽」讓使用者不再迷路!

 

有其他想要了解的網站架設細節,歡迎向我們聯絡。

 

 

回上一頁
信箱
客服
Line@