技術貼：一篇文章看懂鏈接（超鏈接）設計

人人都是產品經理【起點學院】，BAT實戰(zhàn)派產品總監(jiān)手把手系統(tǒng)帶你學產品、學運營。

產品設計時細節(jié)是產品經理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節(jié)問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣，大多會在下面加上下劃線以便識別，不過現如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉，國外的網站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內大多采用這種；第三種是提示用APP打開。當然現在出現了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態(tài)鏈接和靜態(tài)鏈接。動態(tài)超鏈接指的是可以通過改變HTML代碼來實現動態(tài)變化的鏈接，例如我們可以實現將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態(tài)鏈接，顧名思義，就是沒有動態(tài)效果的鏈接。

1. 內部鏈接

與外部鏈接（即反向鏈接）相反，內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接，乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接，因此內部鏈接我們也可以稱之為站內鏈接，對內部鏈接的優(yōu)化其實就是對網站的站內鏈接的優(yōu)化。

2. 錨點鏈接

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

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網站鏈接到你的網站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質量的外部鏈接指：和你的網站建立鏈接的網站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。

如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。

鏈接狀態(tài)

鏈接在交互上一般會呈現4種狀態(tài)，即默認狀態(tài)/懸停時狀態(tài)/點擊時狀態(tài)/點擊后狀態(tài)。比如谷哥網站的交互體驗。如下圖：

點擊前

懸停時，下面浮現半透明線條

點擊時，有波紋暈開的動態(tài)效果

點擊后，下面線條粗

有時候是3種狀態(tài)，比如百度網和知乎應用：

默認狀態(tài)

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統(tǒng)知乎應用的3種狀態(tài)，而在Android系統(tǒng)沒有用力點擊這一狀態(tài)。

默認狀態(tài)

點擊狀態(tài)

用力點擊會彈出預覽小窗口

有些時候只有2種狀態(tài)，如下圖谷歌網：

默認和點擊后狀態(tài)一樣

鼠標懸停時出現下劃線

默認狀態(tài)

點擊時

而有時候比如在APP里有時候就一直只有一種狀態(tài)，也可以稱靜態(tài)鏈接，之前的可以稱之為動態(tài)鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網頁不可缺少的構成部分，每一個鏈接的呈現都是經過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊授權發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

顏色設置的簡便方法

昨天我們在《使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作》（目錄在結尾）中學習了設置單元格以及其中內容的空間間距和背景顏色。

其中添加列向單元格背景顏色只需要修改對應的<tr>標簽中的style屬性，而修改行向標簽需要修改不同<tr></tr>標簽中的<td>標簽的style屬性，這樣操作起來就非常的麻煩，那有沒有簡便的修改行向單元格背景顏色的方法呢？

當然有！

開發(fā)團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題，下面讓我們詳細學習。

<colgroup></colgroup>標簽是一個給行向單元格打組的標簽，在頁面中不會顯示。

<col></col>標簽是來具體設置行向單元格數量和顏色的標簽。

示例代碼如下：

<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>

這段代碼添加到"第一個頁面.html"當中就可以，具體代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
  </head> 
  <body>
  <h1>第一個網頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

頁面效果如圖：

因為第一列和最后一列只有一行所以，也都變紅了。

其中span的數量代表行數。

如果把span等號后面的數改成2，因為表格只有兩行，所以整個表格都紅了。

表格嵌套

我們可以通過向表格中添加表格實現表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。

代碼示例如下：我們把"一列一行"分割成列向兩個單元格。

<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

使用

<table border = "1" width="100%">

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

這段代碼替換文字"一列一行"即可。

頁面效果如圖所示：

留個思考題，大家可以思考一下行向分割單元格怎么寫。

今天的內容結束了。

全部示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
  </head> 
  <body>
  <h1>第一個網頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

學到這里，相信大家已經有獨立讀懂HTML代碼說明的能力了，明天我會為大家講解16進制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎的話，學完16進制顏色表示方法后，基本上就可以無障礙的閱讀html代碼參考手冊了，如果閱讀起來還是有困難，請繼續(xù)看后面我為大家講解一些常用元素及屬性的文章，已及html中特殊符號的輸入方法，全部做完后再結束這套教程。

如果您有任何疑問或不解歡迎關注并私信我。

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯(lián)元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

先要安裝css的loader

npm install css-loader style-loader --save-dev

然后在webpack.config.js中配置如下代碼

意思是先用css-loader加載css文件，再用style-loader添加在頁面中

在app目錄下創(chuàng)建component.css文件

body{
 background-color: red;
}

在app/index.js中引入css文件

運行npm run start命令。

可以看到我們?yōu)g覽器整個背景都變成了紅色。

webpack做了什么呢？

看到build/app.js中有如下代碼。

再看下我們生產的index.html文件

奇怪了，并沒有內斂樣式也沒有引入的css文件，那瀏覽器是為什么變紅的呢？

我們在瀏覽器中打開調試工具。

原來樣式在這！

webpack動態(tài)的添加了內斂樣式在代碼中。

如果多人協(xié)作開發(fā)的情況下，會有很大可能出現代碼命名重復的情況，如果出現這種情況怎么辦呢？

來讓我們試驗一下。

在app目錄下添加兩個css文件，style1.css

body{
 background-color: red;
}.class1{
color: green;
}

和style2.css

body{
 background-color: black;
}.class1{
 color: blue;
}

在index.js中引入這兩個文件

修改component.js文件，使其給元素添加傳入的類名

在webpack.config.js中添加如下配置

我們執(zhí)行npm run start 命令若看到

即為打包成功。

打開瀏覽器http://localhost:8080/

可以看到同樣的類名都正常顯示出來了，看下右邊的文檔結構，發(fā)現我們的類名不是class1了。

原來CSS Modules對我們的類名做了哈希處理，我們再也不用擔心同事跟我們有相同的命名了。

是不是很方便呢？

讓我們再來面對另一個問題，現在這種情況下css是js動態(tài)添加上去的，如果當js文件有一個長時間的阻塞事件，頁面將會處于長時間的無樣式的狀態(tài)。

這是我們不希望看到的，怎么把css文件和js文件分離呢？

首先我們需要安裝一個插件

npm install extract-text-webpack-plugin --save-dev

安裝成功之后在webpack.config.js中添加如下配置

完成之后運行一下npm run start

打開瀏覽器http://localhost:8080/

可以看到我們兩個css文件合并為一個app.css文件并以外部樣式表的形式加載。

而且css文件比js文件要先請求，這樣就避免頁面會出現FOUC-Flas Of Unstyle Content無樣式內容閃爍。

webpack關于css的加載就講到這里。

在線咨詢

上一篇：HTML常用標簽
下一篇：html（網頁）運行本地程序（exe文件）的方法與源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

技術貼：一篇文章看懂鏈接（超鏈接）設計

定義

樣式

1. 文本樣式的鏈接

2. 按鈕樣式的鏈接

3. 圖片樣式的鏈接

打開方式

類型

1. 內部鏈接

2. 錨點鏈接

3. 外部鏈接

鏈接狀態(tài)

顏色設置的簡便方法

HTML完整學習目錄

您的項目需求