前端學習筆記一一HTML如何添加錨點

頁面添加錨點的三種方式

　　HTML中的連接，正確的說法應該稱做"錨點"，它命名錨點連接（也叫書籤連接）經常用於那些內容龐大繁瑣的網頁，經過點擊命名錨點，不只讓咱們能指向文檔，還能指向頁面裏的特定段落，更能看成"精準連接"的便利工具，讓連接對象接近焦點。便於瀏覽者查看網頁內容。相似於咱們閱讀書籍時的目錄頁碼或章回提示。在須要指定到頁面的特定部分時，標記錨點是最佳的方法。

錨點連接對SEO的做用

　　錨 連接是一個很是重要的概念，在網頁中增長恰當的錨連接，會讓所在網頁和所指向網頁的重要程度有所提高，從而影響到關鍵詞排名。錨連接對SEO的做用主要體如今如下幾個方面：

　　對錨連接所在的頁面的做用

　　正常來說，頁面中增長的連接錨連接都和頁面自己有必定的關係，所以， 錨文本能夠作爲錨連接所在的頁面的內容的評估。例如：本篇文章中含有「SEO」的連接，那麼，說明本篇文章和SEO有必定關係。

　　對錨連接所指向頁面的做用

　　錨 連接能精確的描述所指向頁面的內容，所以，錨連接能作爲對所指向頁面的評估。

　　錨連接對關鍵詞排名的影響

　　錨 連接對於 關鍵字排名的意義在於它可讓內容頁隨機連接在一塊兒，讓蜘蛛能夠很好的抓取更多頁面，權重也能均勻的傳遞，同時加強頁面的相關性，最終提高網站的關鍵詞排名。

錨點的添加方式

　　一、給錨點文本標籤添加id，使用<a href="#"></a>來定位，當單擊a連接時，就會跳到id爲a01的p標籤處；

<div>
    <a href="#a01"></a>
</div>
<p>練習</p>
<p>練習</p>
<p>練習</p>
<p>練習</p>
<p>練習</p>
<p id="a01">練習</p>
<p>練習</p>

　　這樣的定位能夠針對任何標籤來定位。　　

　　二、給a標籤的文本添加錨點，單擊連接可跳到name爲a01的a標籤處；

<div>
    <a href="#a01"></a>
</div>
<p>練習</p>
<p>練習</p>
<p>練習</p>
<p>練習</p>
<p>練習</p>
<a name="a01" href=「#」>練習</a>
<p>練習</p>

　　使用name屬性只能針對a標籤來定位，而對div等其餘標籤就不能起到定位做用。　

　   三、使用js。

<li class="" οnclick="javascript:document.getElementById('here').scrollIntoView()"></li>