整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：一只小前端
鏈接：https://www.jianshu.com/p/2acb66b2ed28
什么是icon？
讓我們先來看一個例子：我們以簡書為例子，圖中看到的用圓圈起來的部分都是icon。
這個時候你就想問了，這不就是幾張圖片么？
不，它不是圖片，而是文字
什么？？這怎么可能是文字，文字怎么會是這樣的？...
icon到底是什么
正如你所看到的，現在市面上大多數網頁使用的圖標都是類似這樣的形式，也有不少icon圖標庫可供我們使用，它的實現方式有：
1、Icon Font
2、CSS Sprites
3、使用image
4、SVG（目前來看，是最完美的）
5、CSS手寫icon（太麻煩，而且自己做往往不好看（這時候你需要一個UI小姐姐的幫助））
為什么說現在大多數網頁里的圖標是文字？
首先我們需要了解，如何讓頁面展示一個圖標呢？我們可以把圖標當成文字來操作，步驟如下：
1、在頁面上放入該圖標的 unicode 碼 （可以自己創建一個）
2、讓該元素使用我們自定義的字體
3、字體對應著我們自己創建的字體庫文件
4、字體庫文件里有關于該 unicode 碼的外形描述
NO.1 iconfont
這里就要說到第一種方法：iconfont（阿里巴巴官方矢量圖標庫）
下面是具體用法范例，大家可以一試：
<p></p>
<style>
@font-face {
font-family: 'iconfont';
src:url('http://at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')
}
p{
font-family: iconfont;
}
</style>或者
<span class="icon-qq"></span>
<style>
@font-face {
font-family: "hello";
src: url('//at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')
}
.icon-qq:before { font-family:"hello";content: "\e600"; }
</style>NO.2 CSS Sprites
CSS Sprites在國內很多人叫css精靈（雪碧圖），是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
加速的關鍵，不是降低質量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。所以，圖片越多請求次數越多，造成延遲的可能性也就越大。
原理
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。
優點
1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2、CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
缺點誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點，如下：
1、在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2、CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；
3、CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動css。
4、CSS Sprites非常值得學習和應用，特別是頁面有一堆icon（圖標）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。
例子：
.bg_sprite{background-image:url(/整圖地址); background-repeat:no-repeat}引用該類 .. 然后在元素中逐一定義背景坐標 .. 以下為關鍵屬性 ..
#ico1 {width:容器寬度;height:容器高度;background-position:X坐標 Y坐標}
#ico2 {width:容器寬度;height:容器高度;background-position:X坐標 Y坐標}
#ico3 {width:容器寬度;height:容器高度;background-position:X坐標 Y坐標}
.nav {width:容器寬度;height:容器高度;background-position:X坐標 Y坐標}必須要限定容器大小符合背景圖元素位置 .. 另外 .. XY軸是相對于整張圖片的左上角來算的 .. 所以取值一定要算清楚。
NO.3 使用 image 實現
注意事項：
1、img 的大小設置
2、可以只設置寬度／高度，圖片會自適應縮放
3、img 的 vertical-align
請求數過多
1、因為每一個請求都是需要花時間去建立的，HTTP 1.1 時代，客戶端（瀏覽器）是慢的，但如果升級到了 HTTP 2，100個請求跟1個請求是差不了多少的
2、在服務器端（server），比如是用 php、java 實現的后端，請求過多，一般會導致線程過多，或大或小都會產生一定的壓力
3、另外，請求過多，對網站流量也會有一定的影響，流量要要花錢的
NO.4 SVG
svg 可以作為圖像的地址直接傳入：<\img src="svg">，但是這樣依然會造成請求數過多* 還可以使用 SVG "sprites"。
google：npm svg sprites，看排名靠前的，比如 svg-sprite。
它是以標簽的形式來組織所有的圖片的，移動端首選* 優點：可以方便的修改 icon 的大小、顏色，縮放沒有鋸齒。
NO.5 CSS手寫icon
CSS 能畫圓，能畫方，為什么不能畫 icon？
參考網站：CSS ICON（ https://cssicon.space/#/ ）。
兼容性：IE支持不太好，比如border-radius IE8-不支持。
近期文章：
等等，先別走！「碼個蛋」又有活動了！參與活動不但可以培養自己的好習慣，還能拿到「碼個蛋」IP系列專屬獎品，速度要快...
今日問題：
說說你的另一半都是什么職業？
留言格式：
打卡x 天，答：xxx。
告訴你一個小技巧：
只需3步，你將不會錯過任何一篇文章！
到漸變色，相信很多人也見過，也用過很多相類似的軟件，網站什么的
今天介紹的是一個在線的漸變色網站，這個網站的特色是你可以根據自己的思想隨意的改變漸變色，讓你尋找到適合自己的漸變色
隨意改變漸變色的顏色
方便快捷的改變漸變色的方向
可以在線生成對應的css代碼
還可以添加漸變的顏色（總共不能超過6個，這個只是這個網站規定的哦）
修改的漸變色也可以重置為修改前的漸變色
更多玩法，請自行打開網站體驗吧
下面會出一個動圖，給你們體驗看看是怎么樣的
網站體驗效果
網站截圖
更多體驗，請打開網站體驗
關于網站，請打開馨客棧導航：http://www.mackxin.com/nav.html ，然后看下圖
馨客棧導航
關注分享，體驗樂趣
眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據 區塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領取相關學習資料！
一、HTML
1、<image>標簽上title屬性與alt屬性的區別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》
2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體
加粗：<b>、<strong>
下標：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標簽列表》
3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景
section：定義文檔中的一個章節
nav：定義只包含導航鏈接的章節
header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
參考《HTML5 標簽列表》
4、請說說你對標簽語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
6、你知道多少種Doctype文檔類型？
標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，
Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
7、HTML與XHTML——二者有什么區別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關閉。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
h. sessionStorage 的數據在頁面會話結束時會被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術webworker, websocket等
移除的元素：
a. 純表現的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產生負面影響的元素：frame，frameset，noframes；
9、iframe的優缺點？
優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區別？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有布局、樣式解析和腳本執行三個方面的區別。
a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用
d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
11、請闡述table的缺點
a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td
c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂
d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
12、簡述一下src與href的區別
src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接
公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據 區塊鏈 測試 PPT JS HTML 簡歷 領取相關學習資料！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
