HTML <a> 標簽

来源:http://www.cnblogs.com/iceflorence/archive/2016/08/29/5815549.html
-Advertisement-
Play Games

一,定義和用法 所有瀏覽器都支持 <a> 標簽。 <a> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。 <a> 元素最重要的屬性是 href 屬性,它指示鏈接的目標。 在所有瀏覽器中,鏈接的預設外觀是: 未被訪問的鏈接帶有下劃線而且是藍色的 已被訪問的鏈接帶有下劃線而且是紫色的 活動鏈接帶有下劃 ...


一,定義和用法

所有瀏覽器都支持 <a> 標簽。

<a> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性,它指示鏈接的目標。

在所有瀏覽器中,鏈接的預設外觀是:

  • 未被訪問的鏈接帶有下劃線而且是藍色的
  • 已被訪問的鏈接帶有下劃線而且是紫色的
  • 活動鏈接帶有下劃線而且是紅色的
若想鏈接外觀與預設的鏈接外觀非常不同。您可以使用 CSS 偽類 向文本超鏈接添加複雜而多樣的樣式。  

二,提示和註釋

提示:如果不使用 href 屬性,則不可以使用如下屬性:download, hreflang, media, rel, target 以及 type 屬性。

提示:被鏈接頁面通常顯示在當前瀏覽器視窗中,除非您規定了另一個目標(target 屬性)。

提示:請使用 CSS 來設置鏈接的樣式。

三,屬性

屬性描述
charset char_encoding HTML5 中不支持。規定被鏈接文檔的字元集。
coords coordinates HTML5 中不支持。規定鏈接的坐標。
download(5) filename 規定被下載的超鏈接目標。
href URL 規定鏈接指向的頁面的 URL。
hreflang language_code 規定被鏈接文檔的語言。
media(5) media_query 規定被鏈接文檔是為何種媒介/設備優化的。
name section_name HTML5 中不支持。規定錨的名稱。
rel text 規定當前文檔與被鏈接文檔之間的關係。
rev text HTML5 中不支持。規定被鏈接文檔與當前文檔之間的關係。
shape
  • default
  • rect
  • circle
  • poly
HTML5 中不支持。規定鏈接的形狀。
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
規定在何處打開鏈接文檔。
type(5) MIME type 規定被鏈接文檔的的 MIME 類型。
  四,案例 本例演示如何在 HTML 文檔中創建鏈接。
<html>

<body>

<p>
<a href="/index.html">本文本</a> 是一個指向本網站中的一個頁面的鏈接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一個指向萬維網上的頁面的鏈接。</p>

</body>
</html>

 

本例演示如何使用圖像作為鏈接。

<html>

<body>
<p>
您也可以使用圖像來作鏈接:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>

 

本例演示如何使用鏈接跳轉至文檔的另一個部分 

<html>

<body>

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

 

 本例演示如何在新視窗打開一個頁面,這樣的話訪問者就無需離開你的站點了。

<html>

<body>

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<p>如果把鏈接的 target 屬性設置為 "_blank",該鏈接會在新視窗中打開。</p>

</body>

</html>

 

本例演示如何跳出框架,假如你的頁面被固定在框架之內。

<html>

<body>

<p>被鎖在框架中了嗎?</p> 

<a href="/index.html"
target="_top">請點擊這裡!</a> 

</body>
</html>

 

本例演示如何如何鏈接到一個郵件。(本例在安裝郵件客戶端程式後才能工作。)

<html>

<body>

<p>
這是郵件鏈接:
<a href="mailto:[email protected]?subject=Hello%20again">發送郵件</a>
</p>

<p>
<b>註意:</b>應該使用 %20 來替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。
</p>

</body>
</html>

 

本例演示更加複雜的郵件鏈接。
<html>

<body>

<p>
這是另一個 mailto 鏈接:
<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發送郵件!</a>
</p>

<p>
<b>註意:</b>應該使用 %20 來替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。
</p>

</body>
</html>

 

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 想記錄一下SQLAlchemy的入門學習,然後突發奇想覺得:為什麼不直接翻譯一下文檔呢?於是順手查了查怎麼使用Gitbook,2333 於是就在Github開了項目,然後導入了Gitbook,開始寫。今天開始的,決定每天寫一部分,爭取早日完成。 Github鏈接:https://github.com ...
  • 1.JAVA_HOME:該路徑為你自己安裝JDK的路徑 D:\ruanjian\jdk7 2.Path:是本身存在的 D:\ruanjian\jdk7\bin; 3.CLASSPATH:需要新建 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;%JAVA_HO ...
  • (原文來自:http://www.jb51.net/shouce/perl.htm) ...
  • URL中參數的值為中文時,servlet接收後顯示為亂碼,如下圖: 這時候需要修改tomcat的中的server.xml文件。該文件路徑為 tomcat安裝目錄下的conf文件夾。 為修改前的server.xml文件。 修改後的server.xml文件。增加了一行: URIEncoding="UTF ...
  • 一、CSS DIV網頁佈局中當解析度小於等於1024px(像素)時,DIV佈局對象顯示1000px寬度,當解析度大於1024px時候顯示1200px寬度等需求。使用CSS實現改變瀏覽器顯示寬度從而實現佈局的網頁寬度動態改變變化(網頁寬度自動隨瀏覽器顯示寬度而變寬變窄)。隨著發展,越來越多的電腦用戶顯 ...
  • github地址:https://github.com/lily1010/sass/tree/master/course03 用到的sass語法是: sass --watch test.scss:test.css --style expanded 如下圖: 1 導入外部文件,預設文件尾碼預設是sas ...
  • ...
  • 可以使用js來實現簡單的碰壁反彈效果,具體的內容請大家參考代碼部分。 其中movex和movey兩個變數是判斷運動的方向。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...