html標籤A href targethtml超連結資料夾html超連結jpg超連結一張圖多個連結

HTML 超連結<a> 標籤(tag) - Fooish 程式技術

文章推薦指數： 80 %
投票人數：10人

全世界的網頁或網路資源利用連結彼此互相引用互相鏈接，形成一個大互聯網，而HTML tag 就是用來建立超連結(hyperlink) -- 通往其他頁面、檔案、Email ... HTML語法教學HTML編輯器什麼是HTML標籤HTMLDOCTYPEHTMLHTML全域屬性HTML註解HTMLHTML網頁標題HTML<meta>元資訊HTML<style>CSSHTML<link>HTML<script>JSHTML<noscript>HTML<base>HTML<body>HTML<p>段落HTML<br>換行HTML空白字元HTML<img>圖片HTML<a>超連結HTML<h1>-<h6>標題HTML項目列表清單HTML<table>表格HTML<form>表單HTML<input>表單元件HTML<textarea>HTML<select>下拉式選單HTML<button>表單按鈕HTML<label>HTML<fieldset><legend>HTML<div>HTML<span>HTML<strong>強調重要性HTML<em>對內容著重強調HTML<mark>突顯高亮文字HTML<hr>水平分隔線HTML<iframe>內嵌框架HTML<frame>框架HTML<embed>嵌入HTML<object>嵌入HTML<blockquote>區塊引用文字HTML<q>行內引用文字HTML<pre>預先格式化HTML<code>程式碼HTML<ins>插入的文字HTML<del>刪除的文字HTML<center>置中什麼是HTML5HTML<video>影片播放HTML<audio>音樂播放HTML語意結構區塊HTML<nav>導航連結區塊HTML<article>內容獨立完整的區塊HTML<section>群組區塊HTML<aside>側邊欄HTML<main>網頁主要區塊HTML<header>標頭/標題區塊HTML<footer>結尾/頁尾區塊HTML<datalist>輸入資料選擇清單HTML<figure><figcaption>HTML<hgroup>多級別標題群組HTML<canvas>繪圖畫布HTML<picture>響應式圖片HTML<output>HTML超連結<a>標籤(tag)全世界的網頁或網路資源利用連結彼此互相引用互相鏈接，形成一個大互聯網，而HTML<a>tag就是用來建立超連結(hyperlink)--通往其他頁面、檔案、Email地址、或其他URL的超連結。<br><br>舉一個使用實例：<ahref="https://www.youtube.com/">這個連結</a>會連到YouTube<br> <ahref="https://www.google.com/">這個連結</a>會連到Google<br> <ahref="/html/image-img-tag.html">這個連結</a>會連到Fooish圖片標籤教學頁面 實際顯示在網頁上的結果如下：這個連結會連到YouTube這個連結會連到Google這個連結會連到Fooish圖片標籤教學頁面<a>標籤的屬性(attributes)href指定一個URL看連結要連到哪邊。<br><br>target指定在什麼地方打開連結。<br><br>target有下面這些屬性值：_self:預設值，在當前視窗開啟_blank:在新視窗開啟_parent:在上一層父視窗開啟_top:在最頂層父視窗開啟framename:指定在哪個框架中開啟舉例：<ahref="https://www.fooish.com/"target="_blank">Fooish技術教學</a> 上面這例子的結果：Fooish技術教學rel指定當前頁面和連結目標彼此之間的關係。<br><br>rel有下面這些屬性值：nofollow:禁止搜尋引擎(Google)將該連結與你的網頁關聯在一起，或禁止從你的網頁索引連結網頁noreferrer:如果有使用者點擊該連結，不要送出Referer:header資訊給連結網站noopener:如果用target="_blank"開啟另一個頁面時，不要給連結頁面設置window.opener(一個JavaScript變數)權限。<br><br>設定noopener的好處是提高安全性，同時避免讓連結頁面影響到當前頁面的效能。<br><br>prev:指定彼此是上一個的關係(例如屬於同樣主題文章的上一篇)next:指定彼此是下一個的關係(例如屬於同樣主題文章的下一篇)你可以用空白分隔開(space-separated)多個值。<br><br>舉個例子：<arel="nofollownoopener"href="https://examples.com/">外站連結</a> downloaddownload用來指示瀏覽器當使用者點擊連結時，直接下載連結指向的資源，download的屬性值可以設定下載檔案的檔名(filename)，如果省略屬性值則會使用原始檔名。<br><br>舉個例子：<ahref="/assets/img/fooish.jpg"download="myphoto.jpg">下載圖片</a> 結果如下：下載圖片download功能遵循same-originpolicy的限制，只有同樣origin的來源才可以直接下載。<br><br>pingping用來做連結點擊的監控或追蹤(tracking)，當有人點連接時，會發送一個HTTPPOST通知ping所指定的位址(URL)，如果有多個URL則用空白分隔開。<br><br>使用例子：<ahref="https://www.fooish.com/html/"ping="https://www.fooish.com/trackpings"> 使用者點擊連結時，瀏覽器會在背景(background)送出ping給指定的server追蹤連結點擊。<br><br>referrerpolicy指定發出請求(request)時，瀏覽器應該要送出什麼referrer(請求來源位址)。<br><br>referrerpolicy有這些屬性值：no-referrer:不送出Referer:headerno-referrer-when-downgrade:這是預設的行為，如果當連接的協議有降級(即HTTPS連往非HTTPS資源)，則不送出Referer:headerorigin:送出origin當作referrer。<br><br>所謂的origin是指URL中的protocol+host+port的部分，不包含路徑或網址參數訊息，舉個例子origin像是https://www.fooish.comorigin-when-cross-origin:如果連往不同的origin，則只送出origin(protocol+host+port)作為referrer，只有連往同樣origin的頁面或資源，才送出完整資訊的referrer(包含路徑和網址參數)unsafe-url:這個是最寬鬆的策略，不管任何情況都送出referrer各類型的超連結語法範例錨定連結跳往同頁面不同區塊的位置。<br><br>使用方法：<ahref="#some-section-id">連結文字</a> 上面的連結點擊後會跳去id="some-section-id"的HTML元素區塊。<br><br>例如跳到這邊：<divid="some-section-id"> hello </div> 圖片連結<a>可以包住其他HTML元素，讓它們可以也是一個連結。<br><br>例如建立一個圖片連結：<ahref="https://example.com/"target="_blank"> <imgsrc="https://source.unsplash.com/WLUHO9A_xik/600x400"> </a> 實際顯示結果如下：電子郵件超連結mailto:<ahref="mailto:電子郵件信箱">連絡信箱</a> 如果瀏覽器有支援的話，點了連結會開啟郵件編輯器寫信。<br><br>使用範例：<ahref="mailto:contact@fooish.com">Fooish連絡信箱</a> 實際顯示結果如下：Fooish連絡信箱電話號碼連結tel:<ahref="tel:電話號碼">連結文字</a> 其中電話號碼是遵循RFC3966標準格式。<br><br>舉個例子：<ahref="tel:+491570156">+491570156</a> 實際呈現結果如下：+491570156如果你的裝置支持，例如是手機，點連結就可以直接撥打電話。<br><br>FTP超連結ftp:<ahref="ftp://someftpserver.com/">瀏覽FTPserver</a> </style>

請為這篇文章評分？

延伸文章資訊