html 錨點的使用

最近瞭解到html裏面的錨點在跳轉流暢方面很有些作用,這裏就簡單介紹一下:

我目前瞭解到的錨點作用有兩個方面的用途,一個是本頁面上的跳轉,另一個就是跳轉到另外一個頁面

其實錨點只需name就可以實現兩個鏈接直接的跳轉

1、本頁面的錨點應用示例:

        <div style="height:1000px;">
            <a href="123.html#002">跳到002</a>
...文字省略
                        <a href="123.html#001">跳到001</a>
      <a href="#003">跳到003</a>


        </div>
                    <a name="003"></a>
            <div>003的錨點在這裏</div>

當點擊跳到003時,我們就跳轉到name="003"的地方。


2、跳轉到另外頁面

此時,我們需要建立一個123.html

然後在裏面加入代碼:


當我們點擊上面的跳轉到002或跳轉到001時頁面就會跳轉到123.html 裏面的001或002處

    <a name="001" id="001"></a>
    <div style="height:1500px;"> Chapter 7 錨點
HTML中的鏈接,正確的說法應該稱作"錨點",它不僅讓我們能指向文檔,還能指向頁面裏的特定段落,
    更能當作"精準鏈接"的便利工具.讓鏈接對象接近焦點.在這一章裏,我們將看到四種不同的錨點做法,說明每個方法的優點,也會介紹title屬性如何能提升鏈接的易用性,另外也將使用CSS爲鏈接設計樣式
  </div>  <a name="002" id="002"></a>
   <div style="height:1000px;"> HTML中的鏈接,正確的說法應該稱作"錨點",它命名錨點鏈接(也叫書籤鏈接)常常用於那些內容龐大繁瑣的網頁,通過點擊命名錨點,不僅讓我們能指向文檔,還能指向頁面裏的特定段落,更能當作"精準鏈接"的便利工具,讓鏈接對象接近焦點.,便於瀏覽者查看網頁內容。類似於我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時,標記錨點是最佳的方法。
      </div>  <a name="003" id="A1"></a>
        <a name="004" id="A2"></a>
        <a name="005" id="A7"></a>
        <a name="006" id="A6"></a>
        <a name="007" id="A5"></a>
        <a name="008" id="A4"></a>
        <a name="009" id="A3"></a> 

   

發佈了35 篇原創文章 · 獲贊 2 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章