HTML 鏈接展現形式與target屬性和錨文本設置

来源:https://www.cnblogs.com/dhnblog/archive/2020/03/25/12565655.html
-Advertisement-
Play Games

HTML 鏈接:HTML 使用超級鏈接與網路上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。 HTML 超鏈接(鏈接)? HTML使用標簽 <a>來設置超文本鏈接,是可以從一個頁面指向另一個目的端的鏈接。 超鏈接可以是一個字,一個詞,或者一組詞,也可以是一 ...


HTML 鏈接:HTML 使用超級鏈接與網路上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

HTML 超鏈接(鏈接)?

  1. HTML使用標簽 <a>來設置超文本鏈接,是可以從一個頁面指向另一個目的端的鏈接。

  2. 超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
  3. 當您把滑鼠指針移動到網頁中的某個鏈接上時,箭頭會變為一隻小手。
  4. 在標簽<a> 中使用了href屬性來描述鏈接的地址。

預設情況下,鏈接將以以下形式出現在瀏覽器中(如果為這些超鏈接設置了CSS樣式,展示樣式會根據CSS的設定來顯示)

  • 一個未訪問過的鏈接顯示為藍色字體並帶有下劃線
  • 訪問過的鏈接顯示為紫色並帶上下劃線
  • 點擊鏈接時,鏈接顯示為紅色並帶上下劃線
1 <a href="#">鏈接文字</a>

以上代碼HTML 空鏈接:指指向鏈接後,滑鼠變成手形,但單擊後仍停留在當前頁面,臨時加的空鏈接,主要為了能更好的看到最終的效果,其中“ # ”表示空鏈接。

HTML 鏈接語法:鏈接的 HTML 代碼很簡單,href 屬性描述了鏈接的目標,URL為要鏈接地址,舉例:<a href="//www.wzjskf.com/">跳轉網址</a>

1 <a href="url">Link text</a>

其中HTML 鏈接預設的被鏈接文檔會在原有的視窗中打開的。如果將 target 屬性設置為 "_blank" 則文檔就會在新視窗打開,使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示(在新的視窗打開,還是在原有的視窗中打開)。

1 <a href="//www.wzjskf.com/" target="_blank">新視窗打開</a>
2 <a href="//www.wzjskf.com/" target="_self">當前視窗打開</a>

錨文本||HTML 鏈接 - id 屬性:id 屬性可用於在一個 HTML 文檔中創建書簽標記, 書簽是不以任何特殊的方式顯示,在HTML文檔中是不顯示的,所以對於讀者來說是隱藏的。

1 在HTML文檔中插入ID:   
2 <a id="tips">Useful Tips Section</a>
3 在HTML文檔中創建一個鏈接到"有用的提示部分(id="tips")":    
4 <a href="#tips">Visit the Useful Tips Section</a>
5 或者,從另一個頁面創建一個鏈接到"有用的提示(id="tips")部分":  
6 <a href="//www.w3cschool.cn/html_links.html#tips"> Visit the Useful Tips Section</a>

e.g: 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:href="//www.w3cschool.cn/html",就會向伺服器產生兩次 HTTP 請求。這是因為伺服器會添加正斜杠到這個地址,然後創建一個新的請求,就像這樣:href="//www.w3cschool.cn/html/"。


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

-Advertisement-
Play Games
更多相關文章
  • 使用背景: 項目中使用了jquery-weui的左滑刪除組件,但在蘋果上使用會有左滑點擊穿透的現象,只能改源碼了。 在github上找,發現是gulp構建的,但版本很低,對於node版本大概要4.5.0才行,本機node版本過高用不了,所以把 node卸載了裝nvm來管理。 使用步驟: 1. 卸載本 ...
  • HTML + CSS 就是當代網頁的基石 。全世界的網站,無論其伺服器端的語言是什麼,前端都使用了 HTML + CSS。 隨著互聯網行業的快速發展,前端這一職位也越來越火熱,前端工程師的高薪資,也讓越來越多的人想要進入這個行業。 那麼,零基礎小白如何才能成為一名前端工程師呢? 首先大家要瞭解的是, ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue 同步 $n ...
  • vuex控制台告警There are multiple modules with names that only differ in casing ...
  • 如今前端開發的任職要求越來越高了,不僅要掌握 javascript,熟悉vue、react等各種框架,甚至連後端和 python 都得懂。 前幾年只要熟練HTML、CSS、JavaScript ,靠扒代碼套用代碼工具就能找到一份相對不錯的工作,看來現在這套是行不通了。 要是碰上面試官問你“Vue數據 ...
  • 對於web中的icons的各種實現的利弊,請參考:Web中實現Icon的利弊 本文以阿裡矢量圖標庫為例,說下svg圖標簡單的使用: 挑選圖標下載到本地,文件結構如下: 運行demo_index.html文件,裡面有很詳細的介紹: Unicode 引用 font-class 引用 Symbol 引用 ...
  • 模版字元串 ``反引號表示 var cyy={ name:"cyy", age:18, say:function(){ console.log('我叫'+this.name+',我今年'+this.age+'歲'); }, say2:function(){ console.log(`我叫`+this ...
  • `react router ^5.1.2` 在有正在編輯的內容未保存時,發生了路由切換,此時需要給出一些提示,並由用戶控制是否進行跳轉。 在 進行路由管理時,可以使用 組件實現此功能,其中的 屬性可以接受一個函數,返回 的時候就提示,預設為window.confirm進行提示,用戶可以選擇是否跳轉; ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...