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
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...