9款最常用的響應式網站開發框架

TML5和CSS3的不斷風行，對的需求也越來越火，越來越受到開發者和設計師們的喜歡。不過大眾對響應式框架卻有著不同的態度和觀點，一些人認為一個懂HTML5和CSS3的專業設計師應該自己寫框架，這樣才能做出別具特色的網站；另一些人覺得響應式設計框架能夠方便設計師快速、有效的搭建出一個實用、漂亮的網站，在節省時間和精力等方面不可或缺。關于這個爭論我們易點科技還是比較支持后者的觀點。我們認為即使是再有經驗的Web前端開發人員也應該好好研究一下，它能給我們提供一些借鑒意義和便利，在今天這個快速發展的時代，設計師動手寫框架做網站（合理安排柵格、布局、media queries ）實在太耗時了。另外，在使用響應式框架時設計師也可以充分發揮自己的創造力，定制化一些特征，做出有新意的網站。今天我們就來介紹一些目前設計師經常使用的響應式框架，大家可以結合自己的實際需求合理選擇使用。

Bootstrap

Bootstrap是由Twitter推出的一個用于前端開發的開源工具包，它可謂是目前最流行的HTML5框架，用戶基數最大，在國內的知名度也最高。Bootstrap的口號就是"簡單、直觀、強悍，讓web開發更迅速、簡單"，它也確實在努力達成這一點：基本涵蓋了構建的所有組件，如bootstrap編輯器、定制jQuery插件，能夠實現自定義表單元素、Javascript交互性和跨瀏覽器兼容性等多項功能。對于大部分站長來說，Bootstrap方便簡單，搭建一個比較美觀的響應式網站也很快速，是他們的頭號選擇。

不過，Bootstrap也并非無可挑剔。雖然Bootstrap能夠兼容Chrome、Firefox、Safari、Opera、360和搜狗等多個瀏覽器，但由于它是基于HTML5和CSS3開發的，一些特征對IE瀏覽器并不是那么友好，在IE瀏覽器上可能出現無法顯示等問題。還有，如果你的網站定制化設計的內容太多，使用bootstrap作為框架底層進行修改一般會涉及到大量樣式的復寫，可能會造成CSS層級的混亂，不利于網站后期的維護。

Foundation

Foundation基于靈活的柵格，采用最新的技術，成為了先進的響應式前端框架的代表。它的整體框架設計觀是以移動端為先，因此它很突出的一個特點就是在手機等移動設備上表現更好。與此同時，Foundation支持用戶使用定制化服務（定義柵格、顏色、字體大小等），提供了多種Web的UI組件，比如表單、按鈕等，在操作使用上也足夠靈活。與Bootstrap受到廣泛使用相比，Foundation由于中文版文檔、教程較少在國內顯得比較低調，不過也有不少站長認為使用Bootstrap框架的人實在是太多了，做出的網站都像一個模子刻出來的，無法讓自己的網站在一眾競爭對手中脫穎而出，此時反而會更傾向于使用Foundation以做出一個高大上、別具一格的網站。不過這個框架也有自己的缺點，那就是兼容性的問題，Foundation 4已經放棄了對IE8的兼容，在國內瀏覽器的大環境下Foundation的行為究竟是利還是弊，我們也不好輕易下定論。

Skeleton

相比前兩者來說，Skeleton在國內用戶心目中沒有那么高的地位。它使用簡單的網格系統，有一系列CSS和JS文件的集合，這使得基于Skeleton的網站能夠根據不同分辨率的設備（電腦、平板、手機等）快速調整，能讓用戶界面更友好，優化用戶體驗。雖然Skeleton只定義了部分標準HTML元素以及960px的標準模板，但并不影響一般網站的搭建需求。也正是因為這個原因它比較容易上手，尤其適合一些小項目的搭建。

Golden Grid System

如果你對網格系統很感興趣，Golden Grid System一定是你的不二之選。它一開始呈現為16列網格，但是你也可以將它折疊起來，將視窗縮小到8列或4列的布局，適應平板和手機的瀏覽。總結來說，它是為了增加兼容性的折疊式網格，具有四個明顯的特征：列、跨頁、底線、script。使用Golden 柵格系統框架做網站有不少優點，比如，可以幫助建立清晰、規則的排版，增加網頁的可讀性；作為網頁設計師和前端開發人員的橋梁，方便他們溝通；實現自適應，改變布局響應不同大小的屏幕。這么多好處，你還沒心動嗎？

Less Framework

Less Framework是經典的響應式框架之一，它是一款支持自適應的CSS網格系統，涵蓋4種布局和3種字體預設來滿足電腦、平板、手機等不同視窗的需求。Less Framework的工作原理是基于一個單一的網格，改變布局列的數量和外邊緣的寬度來做出不同的布局。CSS作為一門非程式語言，對不少設計師來說都比較有難度，Less的出現恰好解決了這一問題，它大大簡化了CSS代碼的編寫，降低了網頁的維護成本，讓設計師可以用更少的代碼做出更出更好的網站。這一點跟它的名稱less相呼應，難怪這么多設計師愛上了這個框架。

Gumby

如果你在方面是個新手，Gumby框架對你來說絕對是個上手的好地方。 Gumby是一個基于SASS（一門CSS擴展語言解析器）響應式的CSS框架，它自帶模板以及Web UI工具包，有各種好看的按鈕、表格、導航、標簽、JS文件，響應速度快。它還支持無編碼設計，就算你不懂技術操作起來也很簡單，很容易上手，在后期維護方面也沒有什么障礙。

320 and UP

這個框架首先面向小屏幕，使用一個小型的屏幕樣式表，包含了一些顏色、排版布局等設置屬性，確保了網站內容的優先。小屏幕都能適應良好，在大屏幕上就更沒有什么問題了。

1140px CSS Grid System

一個響應式網站并不僅僅意味著滿足小分辨率設備的需要，還需要在一般電腦屏幕上顯示良好的同時適應更大分辨率的布局。1140網格框架就能夠做到這一點，它可以完美適應1280分辨率顯示器。在較小的顯示器上，它可以根據瀏覽器的寬度變成流體形式，并自適應瀏覽窗口。

以上就是有關的介紹。不同的響應式框架各有優缺點，沒有一個響應式框架是完美的。還有，要記住使用框架做網站并不意味著我們可以當甩手掌柜，還是需要合理評估自己的需求，適當的自定義一些內容，將框架與自己的想法相結合，這樣才能充分發揮響應式框架在網站建設中的積極作用，在節省時間的同時做出一個美觀、實用的響應式網站。

當然，如果您確實天生對代碼過敏，又想擁有一個高質量易推廣的響應式網站，那么也可以聯系我們易點科技，讓我們幫您實現夢想

天好學的Jack負責的網站終于上線了，特此開貼記錄下這一路走過來的經歷，給大家指導個方向。有些坑我踩進去了，大家可以避免踩坑。從九月下旬到十一月下旬，前后差不多兩個月時間，說長不長說短也不短。長的話是因為商量網站整體風格花了很多時間，比如首頁以什么樣形式呈現，關鍵詞調研，整個網站版面設計，涉及到了一些代碼的修改，所以比較費時間。短的話因為實際上傳圖片產品文案的很快，包括域名遷移，綁定谷歌分析GA, Facebook Pixel，后期就是慢慢做on page seo 站內優化了。關于on page seo 站內優化和關鍵詞調研的可以看我之前的文章：

On Page SEO 單頁面優化,你需要知道這8點

關鍵詞不夠用？試試這幾個工具本篇文章一共4385字，13張照片，1張思維導圖，閱讀完需要13分鐘。

一選擇合適的運營級網站系統

建站前我們需要選擇哪個網站系統，目前國內市面上比較流行的建站系統有這么幾個：Wordpress, Shopify, Magento。Wordpress主要適合搭建個人博客，搭建B2B網站，對代碼有一些基礎要求，要求不是很高，可以去W3schools去學些基礎代碼。Shopify主要適合搭建中小型B2C在線商城網站，公司產品SKU幾十上百個那種的。對代碼沒什么要求，基本0代碼要求，不過你要是實現某些定制功能，還是需要懂點代碼知識。Magento 適合搭建大型B2C在線商城網站，公司產品SKU上千個以上那種。Magento的功能比較多了，對代碼要求很高，一般需要配備2個技術維護網站后臺。PS: 運營還是需要懂些基礎代碼知識，不需要會編寫代碼，起碼能看懂，簡單的修改一些，很多功能在HTML代碼里操作，會很簡單。代碼對于運營而言就像語法對于學英語的人一樣，懂得越多越好，多多益善。

因為公司對這個網站定位是品牌網站，到了后期肯定要開通在線商城的，這次好學的Jack 選擇的是Shopify這個平臺。有的朋友會問為什么不用WordPress，因為Shopify相對簡單點，相對省時間點，老板對網站交期也是比較趕的。當然后期選擇了Shopify某個主題，發現這個主題有點坑，很多自定義功能實現不了，這個時候Jack果斷選擇了外包，找了個之前懂技術的朋友，他對shopify后臺操作是相當的溜！所以后期交流的很順暢，和這位技術朋友來回修改了至少7-8次，因為有記錄的word 文檔需求有7-8個，其他的聊天截圖還沒考慮在內。所以如果大家后期建站遇到自己解決不了的問題，不妨考慮外包，一來節約時間，二來交流提高自己能力。

因為Jack來之前網站是用Wix搭建的，用過Wix的朋友都知道，Wix有這么幾個坑：1. 不是自適應網站，桌面端和移動端是分開的，意味著需要搞兩套系統，圖片尺寸，網站位置排版都要搞兩套，如果只是個人博客或者單頁面網站其實也還好。但是如果需要經常上傳產品，博客，banner圖片，對于運營和設計來說都很費時間和精力，因為同樣的事情做重復做兩遍。

2. 打開網速很慢，翻墻才能打開，前端和前端都慢，前端慢很多客戶反饋打開網站很慢，進不去，懷疑你們公司是不是出了什么問題。很多新客戶因為等不急就關掉了網站，一來直接導致影響SEO數據下降，畢竟網站停留時間，網站跳出率，瀏覽頁面很影響SEO排名的。二來，知道導致轉化減少，因為沒有流量進來，這是個硬傷！

3. 國內使用的人相對較少，所以不好和同行交流。現在做網站很多公司選擇Wordpress 和 Shopify了，你選擇用Wix系統搭建網站，很難和同行交流，也就很難進步。有人會說可以自己去谷歌YouTube看博客視頻自學啊，那樣子不是不可以，就是效率低了，特別是你的問題很緊急，你去問群友，群友們都沒遇到過，也很難給你建議，你自己經驗又不足，但是問題馬上要解決，這個時候矛盾就比較突出了。

說了Wix的幾個缺點，我們現在來看下Wix的優點：

1. 價格便宜，一年套餐150美金，差不多1000RMB，Shopify一年套餐接近300美金，是Wix的兩倍了。2. 拖拽方便，像做PPT一樣。

所以這次網站選擇用Shopify搭建，那么Wix的缺點就是Shopify的優點了，shopify主要有以下3個優點：1. Shopify是支持自適應的，也就是桌面端和移動端是一起的，不需要編輯兩次，可以節約很多時間，特別是當你產品SKU很多的時候，不需要同一個產品上傳兩次。

2. 打開網速快，相對于Wix，shopify網速很快了，特別是后臺，不需要等后臺一直在加載，等后臺加載那段時間，整個人都要崩潰。3. 國內使用的人很多，交流起來方便，主要shopify還搞了個中文論壇，把很多疑問翻譯成中文了，節約了很多我們找資料時間。

二網站頁面規劃

選好了建站平臺之后，我們需要進入建站的第二個要素：網站的布局和設計。網站的布局和設計主要考慮這四個因素，基礎規劃，首頁規劃，列表頁規劃，詳情頁規劃。

網站的布局和設計--基礎規劃

基礎規劃主要包括logo，產品方向，色彩風格，字體等。logo我們之前就已經有了，所以這次沒花什么時間在logo上面，由于我們logo和Google的logo顏色很接近，所以后面的一些banner和圖片借鑒了Google的logo設計。產品方向這塊，我們主要做單一種類產品，沒做多種類產品，所以這一塊也沒怎么花時間，如果你們公司產品種類很多的話，要做ABCD幾類產品，Jack建議你們多花點時間在產品方向上面。色彩風格主要是確定網站傳遞什么樣的品牌形象和個性，這一塊我們討論了好幾次，花費了很多時間，因為我們主要做蘋果手機配件，查看了很多國內外同行網站，保守估計起碼有30個國內外同行網站。最終決定借鑒蘋果公司官網的灰色和黑色那個色彩，最終讓設計重新設計主頁banner，網站詳情頁banner也是主要是灰黑色的。字體這塊，我們也是借鑒了好多種，最終選擇了比較合適的字體，大家可以根據自己公司的情況選擇適合自己公司網站的字體，字體建議不超過3種。

網站的布局和設計--首頁規劃

首頁規劃主要包括導航條，核心產品，價值信息，底部導航這四塊。導航條我們用了這幾個部分：Home, About, Products, Blog, Videos, Contact。導航條主要為了解決網站訪客所在的位置，方便用戶了解我們公司品牌，展示公司信息，方便客戶搜索產品和服務。Home 主頁是我們花的時間最多的版面，主頁5張大banner前后修改了十幾二十次吧，最后才弄出想要的style。我們首頁從上到下具體頁面就是這七個部分：5張大banner，最新產品，公司介紹，代理商招聘，產品結構展示，博客。核心產品我們目前主要是iPhone X系列產品，這個產品放在了首頁5張大banner下面，客戶進網站，第一眼就可以看到我們的核心產品，方便詢價。所以這個產品的詳情頁做的時候花了很多時間，文案介紹，參數介紹，詳情頁大圖等也是修改了七八次。后期會考慮做些內鏈，鏈接到這個核心產品上面。

價值信息我們放了真實客戶的評價，考慮到首頁網速加載問題，放在了About us頁面。首頁傳遞給客戶的信息就是我們公司做高端定制產品，可以提供OEM/ODM服務，首頁的代理商招聘，就是我們想要傳達給客戶的，讓客戶成為我們代理商，這是個比較核心的Call To Action.底部導航我們放了公司的社媒鏈接，客戶可以直接從網站到達公司的各大社媒頻道，可以快速了解我們的最新動態，因為有些即時信息是適合放在社媒的，不太合適放在官網的。底部導航增加了公司的品牌介紹，進一步強化了代理商合作按鈕，也放了公司重點產品，方便客戶從底部跳轉到產品詳情頁。

網站的布局和設計--列表頁規劃

列表頁我們采用了2級目錄，這個也是參考了很多同行的，發現客戶都比較懶，所以盡量把所有產品型號全部羅列出來，客戶喜歡哪個型號點擊那個型號就好了。由于Jack公司產品SKU不多，做的又是單一產品，所以列表頁規劃暫時介紹到這了。不同行業目錄參考標準肯定也不一樣，這里大家根據自己公司和行業特點，針對性做目錄。

網站的布局和設計--詳情頁規劃

詳情頁這塊我們還是花了很多心思的，目前展示效果還是挺不錯的，詳情頁我們主要做了展示規劃和賣點規劃。展示規劃第一次考慮的就是圖片的尺寸了，因為桌面端和移動端圖片展示尺寸是不一樣大的，所以我們用了主題推薦的1920*750尺寸，在上傳圖片的時候選擇了original尺寸，因為不選擇original尺寸，系統默認是480*480，這樣子顯得很不自然。考慮到網頁加載速度問題，我們沒有做Gif動圖，就是簡單的圖文+參數表格，后期可能會放YouTube視屏鏈接，做到圖片文字表格視屏四位一體。賣點規劃，借鑒了很多國內外同行的，公司的業務根據客戶那邊的反饋，提煉了很多針對客戶痛點的賣點，比之前的賣點要好一些，后期看到同行或者客戶好的賣點，會在借鑒過來，賣點總結是個持續性學習的過程。

三站內內容和SEO優化

網站的布局和設計敲定之后，我們就進入下一部分，站內內容和SEO優化了。這一塊主要有三個部分：內容原創，圖片優化，站內SEO優化。站內內容和SEO優化--內容原創內容原創顧名思義就是提供給客戶我們自己原創的有價值的內容，內容最重要作用是給客戶提供價值，可以借鑒同行和客戶的內容，再結合自己公司的產品特點進行加工修改，這種的偽原創也是可以的。也可以把框架搭建好，外包給老外寫手，后面我們自己在修改優化。站內內容和SEO優化--圖片優化圖片優化主要包含：圖片的大小，圖片Alt標簽，圖片命名規劃。一般圖片尺寸越大加載速度越慢，到了后期網站圖片多了，網速會更慢。如果公司有設計和美工，務必讓他們把照片給我們的時候壓縮下。如果公司沒有設計和美工，我們可以使用Tinypng這個工具壓縮圖片，這個工具一次性最多壓縮20張照片，每張照片尺寸不超過5M都可以。大部分圖片可以壓縮到之前大小的80%，加入之前照片是100Kb, 用這個工具壓縮后就變成20Kb了。如果網站1000個照片體積都可以壓縮80%，那么網速會提高很多。

圖片Alt標簽允許你提供文字描述給圖片（通俗點就是在Html代碼給圖片命名），這樣子做有3個好處：好處1. 當你圖片加載不出來的時候，alt文本會出現替代圖片，假如你圖片alt命名為rugged tablet, 圖片沒加載出來，網頁會顯示rugged tablet這個，假如你圖片直接從相機復制到網頁，會顯示2849，2849是你相機第2849張照片，你的受眾很難理解2849是什么意思。好處2. 幫助視力障礙的人閱讀，視力障礙的人會使用輔助程序例如屏幕閱讀器將alt屬性的可讀文字全部讀出，讓用戶以聆聽理解影像內容。在維基百科中，影像指令都是作為鏈接存在所以都會輸入alt屬性。好處3.幫助提高圖片在Google Image 的排名，這樣子用戶用谷歌圖片搜索rugged tablet時候，我們排名靠前，也會增加網站流量和排名。

圖片命名規劃，我們需要針對不同的型號產品建立不同的產品文件夾，然后先去搜集不同型號的關鍵詞，再把這些關鍵詞和這些產品命名。產品命名的好處可以方便自己找圖片，也方便接收我們圖片的同事和客戶，他那邊不打開圖片的情況下，可以看到關鍵詞，大概知道是什么產品。站內內容和SEO優化--站內SEO優化站內SEO優化主要就是On Page SEO單頁面優化了，包含這八個地方

1、站內標題、描述、H1標簽

2、關鍵詞的密度、LSI關鍵詞以及TF-IDF關鍵詞的植入

3、頁面的文案

4、站內的內鏈以及導出外鏈

5、301、404的異常鏈接檢測

6、搜索者意圖分析

7、單頁面的速度測試

8、鏈接建設策略關于On Page SEO單頁面SEO優化，大家可以看我之前寫的：

On Page SEO 單頁面優化,你需要知道這8點

以上這些就是如何用shopify搭建營銷型網站的全部步驟了，最后我們再復盤一次怎么用shopify搭建營銷型網站。主要是先選擇一個合適的運營系統，WordPress, Shopify, Magento, The choice is yours。第二個就是確定網站的布局和設計了，這一塊比較費時間，需要好好構思。第三個就是做站內優化了。貼心的Jack為大家準備好了思維導圖，老規矩需要思維導圖PDF的私信我。

（來源：好學的Jack）

以上內容屬作者個人觀點，不代表雨果網立場！本文經原作者授權轉載，轉載需經原作者授權同意。

上雨果網搜索“跨境資料庫”,領取歐美/東南亞各國市場商機、各大平臺熱銷品報告、跨境電商營銷白皮書！

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

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

實例

[demo]

<html>

<head>

</head>

<body>

<p>

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

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

</body>

</html>

[/demo]

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

將圖像作為鏈接

[demo]

<html>

<head>

</head>

<body>

<p>

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

</a>

</p>

</body>

</html>

[/demo]

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

（可以在本頁底端找到更多實例）

HTML 超鏈接（鏈接）

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

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

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

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

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

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

什么是超文本？

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

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

超文本的基礎知識

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

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

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

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

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

注釋

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

HTML 鏈接語法

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

href 屬性規定鏈接的目標。

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

實例

<a >Visit W3School</a>

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

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

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

HTML 鏈接 - target 屬性

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

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

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

[demo]

<html>

<head>

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

</head>

<body>

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

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

</body>

</html>

[/demo]

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

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

[demo]

<html>

<head>

</head>

<body>

<p>

<a href="#C4">查看 Chapter 4。</a>

</p>

<h2>Chapter 1</h2>