整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML使用錨鏈接制作電子書閱讀網頁

          超鏈接除了可以鏈接特定的文件和網站之外,還可以鏈接到網頁內的特定內容。這可以使用<a>標簽name或id屬性,創建一個文檔內部的書簽。也就是說,可以創建指向文檔片段的鏈接。

          例如,使用以下命名可以將網頁中的文本,“你好”定義為一個內部書簽,書簽名稱為“name1”。

          <a name="name1">你好</a>

          在網頁中的其它位置可以插入超鏈接引用該書簽,引用命名如下:

          <a href="#name">使用內部書簽</a>

          一般網頁內容比較多的網站會采用這種方法,如一個電子書網頁。

          下面就使用錨鏈接制造一個電子書網頁。

          (1)編寫代碼如下圖所示:

          (2)在瀏覽器中打開文件,預覽效果圖如下所示,由于內容較少,還看不出效果 。

          (3)為每一個詩詞添加內容,完善后的代碼如下:

          (4)在瀏覽器中打開文件,預覽整體效果圖如下所示:

          (5)單擊《書憤二首》,頁面會自動跳轉《書憤二首》對應的內容,如下所示:

          更多精彩等你來學習哦!

          TML 使用超級鏈接與網絡上的另一個文檔相連。

          幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

          實例

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

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

          <p><a >本文本</a> 是一個指向萬維網上的頁面的鏈接。</p>

          </body>

          </html>

          [/demo]

          本例演示如何在 HTML 文檔中創建鏈接。

          將圖像作為鏈接

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

          您也可以使用圖像來作鏈接:

          <a href="/example/html/lastpage.html">

          <img border="0" src="./imagecopy1234567890/test.gif" />

          </a>

          </p>

          </body>

          </html>

          [/demo]

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

          (可以在本頁底端找到更多實例)

          HTML 超鏈接(鏈接)

          超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

          當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。

          我們通過使用 <a> 標簽在 HTML 中創建鏈接。

          有兩種使用 <a> 標簽的方式:

          通過使用 href 屬性 - 創建指向另一個文檔的鏈接

          通過使用 name 屬性 - 創建文檔內的書簽

          什么是超文本?

          標記語言的真正威力在于其收集能力,它可以將收集來的文檔組合成一個完整的信息庫,并且可以將文檔庫與世界上的其他文檔集合鏈接起來。

          這樣的話,讀者不僅可以完全控制文檔在屏幕上的顯示,還可以通過超鏈接來控制瀏覽信息的順序。這就是 HTML 和 XHTML 中的 “HT” - 超文本(hypertext),就是它將整個 Web 網絡連接起來。

          超文本的基礎知識

          超文本的基本特征就是可以超鏈接文檔;你可以指向其他位置,該位置可以在當前的文檔中、局域網中的其他文檔,也可以在因特網上的任何位置的文檔中。這些文檔組成了一個雜亂的信息網。目標文檔通常與其來源有某些關聯,并且豐富了來源;來源中的鏈接元素則將這種關系傳遞給瀏覽者。

          超鏈接可以用于各種效果。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標或在鍵盤上按下按鍵,從而選擇并自動跳轉到文檔中自己感興趣的那個主題,或跳轉到世界上某處完全不同的集合中的某個文檔。

          超鏈接還可以向瀏覽者指出有關文檔中某個主題的更多信息。例如,“如果您想了解更詳細的信息,請參閱某某頁面。”。作者可以使用超鏈接來減少重復信息。例如,我們建議創作者在每個文檔中都簽署上自己的姓名。這樣就可以使用一個將名字和另一個包含地址、電話號碼等信息的單獨文檔鏈接起來的超鏈接,而不必在每個文檔中都包含完整的聯系信息。

          超鏈接(hyper text),或者按照標準叫法稱為錨(anchor),是使用 <a> 標簽標記的,可以用兩種方式表示。錨的一種類型是在文檔中創建一個熱點,當用戶激活或選中(通常是使用鼠標)這個熱點時,會導致瀏覽器進行鏈接。瀏覽器會自動加載并顯示同一文檔或其他文檔中的某個部分,或觸發某些與因特網服務相關的操作,例如發送電子郵件或下載特殊文件等。錨的另一種類型會在文檔中創建一個標記,該標記可以被超鏈接引用。

          還有一些與超鏈接相關聯的鼠標相關事件。這些事件與 JavaScript 結合使用可以產生一些令人激動的效果。

          注釋

          錨的這兩種類型都使用同樣的標簽;也許這就是它們擁有同樣的名稱的原因。但是我們發現,如果將它們區分開,把提供熱點和超鏈接地址的錨看作“鏈接”,而用于標記文檔的目標部分的錨稱為“錨”,那么您將更容易理解這兩種類型的錨。

          HTML 鏈接語法

          鏈接的 HTML 代碼很簡單。它類似這樣:

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

          href 屬性規定鏈接的目標。

          開始標簽和結束標簽之間的文字被作為超級鏈接來顯示。

          實例

          <a >Visit W3School</a>

          上面這行代碼顯示為:Visit W3School

          點擊這個超鏈接會把用戶帶到 W3School 的首頁。

          提示:"鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

          HTML 鏈接 - target 屬性

          使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。

          下面的這行會在新窗口打開文檔:

          <a target="_blank">Visit W3School!</a>

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <a target="_blank">Visit W3School!</a>

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

          </body>

          </html>

          [/demo]

          HTML 鏈接 - name 屬性

          name 屬性規定錨(anchor)的名稱。

          您可以使用 name 屬性創建 HTML 頁面中的書簽。

          書簽不會以任何特殊方式顯示,它對讀者是不可見的。

          當使用命名錨(named anchors)時,我們可以創建直接跳至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。

          命名錨的語法:

          <a name="label">錨(顯示在頁面上的文本)</a>

          提示:錨的名稱可以是任何你喜歡的名字。

          提示:您可以使用 id 屬性來替代 name 屬性,命名錨同樣有效。

          實例

          首先,我們在 HTML 文檔中對錨進行命名(創建一個書簽):

          <a name="tips">基本的注意事項 - 有用的提示</a>

          然后,我們在同一個文檔中創建指向該錨的鏈接:

          <a href="#tips">有用的提示</a>

          您也可以在其他頁面中創建指向該錨的鏈接:

          <a >有用的提示</a>

          在上面的代碼中,我們將 # 符號和錨名稱添加到 URL 的末端,就可以直接鏈接到 tips 這個命名錨了。

          基本的注意事項 - 有用的提示:

          注釋:請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:,就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址,然后創建一個新的請求,就像這樣:。

          提示:命名錨經常用于在大型文檔開始位置上創建目錄。可以為每個章節賦予一個命名錨,然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科,您會發現其中幾乎每個詞條都采用這樣的導航方式。

          提示:假如瀏覽器找不到已定義的命名錨,那么就會定位到文檔的頂端。不會有錯誤發生。

          更多實例

          在新的瀏覽器窗口打開鏈接

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <a target="_blank">Visit W3School!</a>

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

          </body>

          </html>

          [/demo]

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

          鏈接到同一個頁面的不同位置

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <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>

          <h2>Chapter 7</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 8</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 9</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 10</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 11</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 12</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 13</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 14</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 15</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 16</h2>

          <p>This chapter explains ba bla bla</p>

          <h2>Chapter 17</h2>

          <p>This chapter explains ba bla bla</p>

          </body>

          </html>

          [/demo]

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

          跳出框架

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

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

          <a href="/index.html"

          target="_top">請點擊這里!</a>

          </body>

          </html>

          [/demo]

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

          創建電子郵件鏈接

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

          這是郵件鏈接:

          <a href="mailto:someone@microsoft.com?subject=Hello%20again">發送郵件</a>

          </p>

          <p>

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

          </p>

          </body>

          </html>

          [/demo]

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

          創建電子郵件鏈接 2

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>

          這是另一個 mailto 鏈接:

          <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發送郵件!</a>

          </p>

          <p>

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

          </p>

          </body>

          </html>

          [/demo]

          本例演示更加復雜的郵件鏈接。

          HTML 鏈接標簽

          標簽 描述

          <a> 定義錨。

          、鏈接標簽

          鏈接標簽是HTML頁面中最為常見,而且用途最廣的一個標簽,只要我們瀏覽網頁,就會有超鏈接。比如,通過點擊新聞標題鏈接到新聞詳情頁面,通過點擊商品名稱鏈接到商品列表或者詳情頁等等。

          • 縮寫

          anchor , 錨

          • 說明

          在HTML中創建超鏈接,只需用a標簽包括被鏈接的對象

          • 語法

          <a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

          href:用于指定鏈接目標的url地址,必須屬性

          target:用于指定鏈接頁面的打開方式,其取值有 self和 _blank兩種,其中 _self為默認值,_blank為在新窗口中打開方式

          • 注意

          (1)當需要鏈接到 外部鏈接時,需要添加 http://

          (2)當需要內部鏈接時,直接鏈接內部頁面名稱即可 如 < a href=“index.html”> 首頁

          (3)如果暫時沒確定鏈接目標時,一般將href屬性值定義為“#”,表示暫時為一個空鏈接

          (4)不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈 接, 只要用a標簽包括即可

          錨點定位

          在當前html頁面上,通過創建錨點鏈接,用戶能夠快速定位到指定內容。

          適用于內容較多的頁面,通過點擊關鍵詞,可以快速到達指定區域。

          • 步驟

          (1)使用唯一的id標注目標位置

          (2)使用<a href="#id名“>鏈接文本創建鏈接

          二、特殊字符標簽(了解)

          在html頁面中,有些符號直接添加是無法正常顯示的,這個時候就用一些特殊的標簽來表示這類符號,而這類特殊的標簽,我們就叫做特殊字符標簽。

          • 常用的特殊字符標簽

          主站蜘蛛池模板: 丰满岳乱妇一区二区三区| 人妻无码一区二区三区| 夜色阁亚洲一区二区三区| 国产一区韩国女主播| 国产精品视频免费一区二区| 日韩精品中文字幕无码一区 | 无码日韩精品一区二区人妻| 日本一区二区三区不卡视频| 精品一区二区三区在线观看视频| 日韩精品无码一区二区三区AV| 精品一区狼人国产在线| 国产精品日韩欧美一区二区三区 | 国产高清不卡一区二区| 亚洲日本一区二区三区在线| 无码国产精品一区二区免费16| 国产精品视频第一区二区三区| 亚洲日本一区二区三区在线| 国产激情视频一区二区三区| 久久精品亚洲一区二区三区浴池| 亚洲av无码一区二区三区天堂古代 | 国产一区二区三区免费在线观看| 性色av闺蜜一区二区三区| 国产伦精品一区二区三区无广告| av在线亚洲欧洲日产一区二区| 国产精品自在拍一区二区不卡| 国产精品视频第一区二区三区| 精品一区二区三区AV天堂| 成人区精品人妻一区二区不卡 | 日本一区二区三区不卡在线视频| 精品人妻一区二区三区四区在线| 日本一区二区不卡在线| 国产精品538一区二区在线| 亚洲不卡av不卡一区二区| 精品国产一区在线观看| 亚洲国产成人久久综合一区 | 2021国产精品一区二区在线 | 色久综合网精品一区二区| 日本在线视频一区| 国产精品资源一区二区| 中文字幕人妻第一区| 日本一区二区在线播放|