網(wǎng)頁美化你用過html小圖標(biāo)嗎？

©<>這幾個(gè)字符您一定不陌生吧，下面這幾個(gè)呢？ ›»«如果您還知道那再看這幾個(gè)呢？??? ?下面來看看他們的在網(wǎng)頁中的真面目吧 ，之前圖趣專題分享過一期文章，專門介紹超級(jí)實(shí)用的網(wǎng)頁html字符圖形。

 Example Source Code

  & nbsp;& copy;& lt;<& gt;& rsaquo;& raquo;& laquo;& #9742;& #9760;& #9998;& #10003;依次為空格©<<>›»«????

  看到這您是不是有點(diǎn)暈，不知道我在什么，下面貼幾張圖您就明白了。

您發(fā)現(xiàn)了沒有，圖中的文字中用到了許多修飾的小圖標(biāo)，是不是給界面的美觀增色不少？是的，合理的運(yùn)用這些小圖標(biāo)既可以使輕松指引讀者還可以從細(xì)節(jié)上為網(wǎng)頁整體增色，何樂而不為呢？那么是不是要去搜集一些類似的小圖標(biāo)呢？答案是不用。那些事只有美工才需要，我們一向比較懶，所以我們就…

今天的主角閃亮登場→HTML Symbol Entities。那么為什么要使用字符而不使用小圖標(biāo)呢好處有哪些呢？

1.它比圖標(biāo)加載速度快；

2.它的大小可以隨字體的大小而變化；

3.它可以隨意改變顏色。

下面用?做個(gè)demo，

正常情況：

 Example Source Code

以下為引用的內(nèi)容：

<p>正常電話圖標(biāo)：?</p>

正常電話圖標(biāo)：?

改變字體大?。?/span>

 Example Source Code

以下為引用的內(nèi)容：

<p style="font-size:26px;">大號(hào)電話圖標(biāo)：?</p>

大號(hào)電話圖標(biāo)：?

改變顏色：

 Example Source Code

以下為引用的內(nèi)容：

<p style="color:Red;font-size:26px;">大號(hào)紅色圖標(biāo)：?</p>

大號(hào)紅色圖標(biāo)：?

是不是很簡單，用起來很爽呢？但是有人又會(huì)問：“這么多字符我怎么記得住每個(gè)對(duì)應(yīng)的代碼是什么？”如果您是觀察仔細(xì)的人，可能會(huì)發(fā)現(xiàn)其實(shí)基本上每個(gè)字符都有對(duì)應(yīng)的名字，而且都是英文的縮寫如：©；就是copyright的縮寫,←就是left arrow的縮寫，是不是很好記呢？如果您還是懶的記，那就什么時(shí)候用，什么時(shí)候來這里（w3schools）或這里（Character Entity Reference HTML 4）看吧，很詳細(xì)而且比較權(quán)威。