搜狗：tubiao/icon
小圖標的處理方法有三種：
一，最直接就是切圖放在文件中進行讀取
缺點：
1，多次HTTP請求，影響性能
2，不方便修改和維護。（每次修改都要重新修改美工修改圖片大小，顏色等等）
二，使用base64，把圖片轉換為base64代碼
本質：把小圖標通過Base64轉換成 Base64格式的圖片 或者是 二進制編碼
1，打開網址：https://www.sojson.com/image2base64.html
2，點擊選擇文件---選擇需要轉換的圖片---確定---等待轉換完畢
3，經過Base64 編碼后的文件體積一般比源文件大 30% 左右
4，瀏覽器一般都有限制最大值，Opera9~11 限制為 64K，IE8 限制為 32KB
優點：
1，減少HTTP請求
缺點：
1，不兼容IE 6 / IE 7
2，編碼后比原圖大 30% 左右
3，手動修改，更麻煩
4，二進制編碼是不能作為對象單獨緩存的，除非緩存整個頁面。
三，通過CSS畫一個小圖標(一般都是比較簡單的圖標)
使用該種方法一般要提前和美工商量好的。
小圖標可以使用<i></i>標簽：
CSS代碼畫三角形如下：
向上的三角形：
.triangle {
margin-left: 8px;
height: 0;
width: 0;
border: 6px solid transparent;
border-top: none;//不設置，在控制台空看出，圖標的高度莫名的占據了12px,計算了透明的上邊框。
border-bottom: 6px solid blue;
}
向下的三角形：
.triangle {
height: 0;
width: 0;
border: 6px solid transparent;
border-bottom: none;//必須設置，否則向下圖標會跑動。
border-top-color: red;
}
優點：
1，減少HTTP請求
2，兼容性好
3，簡單不麻煩，性能好
4，跟原圖不會一模一樣，許提前跟設計或者交互提前溝通。
缺點：
1，不兼容IE6及以下瀏覽器
四，使用圖標字體
本質：就是字體，只是長了一個圖像的臉，說白了就是特殊符號。
怎么修改字體就怎么修改圖標字體。
優點：
1，矢量圖，不失真
2，減少HTTP請求
3，兼容性好
4，簡單操作，怎么操作字體，就怎么操作圖片字體(如顏色，大小等)
缺點：
1，基本作用於小圖標
2，有時無法百分百還原設計稿(因為圖標大小無法和設計稿一模一樣)
建議在設計之前就和設計或者交互溝通好。
獲取圖標字體的網站有兩個：
1，國外網站：https://icomoon.io/ 一般要付費的,速度比較慢，使用英文搜索
2，阿里巴巴矢量圖標庫：https://www.iconfont.cn/home/index 響應速度相對快，且免費的。使用中文搜索
解析下阿里巴巴矢量圖標庫的使用方法：
1，打開網站： https://www.iconfont.cn/home/index
2，使用中文搜索，輸入需要的圖標如：搜索，購物車，箭頭等等。
鼠標點擊圖標中購物車圖標，先加到購物車中，等等一起下載。
3，把所有需要的圖標字體添加到購物車中，點擊下載代碼，全部下載---右鍵解壓出來。
4，在項目中創建一個文件夾名字叫font , 和 css 平級，把文件以下5個文件復制到font中：
iconfont.eot iconfont.svg iconfont.ttf iconfont.woff iconfont.woff2
這 5 個文件是用於兼容其他瀏覽器，因為不同的瀏覽器支持的格式不同。
5，同時使用編輯器打開文件 iconfont.css 復制里面的所有內容，把它放到一個css文件中，並且引用該樣式。
6，修改 @font-face 中的 引用以下5個文件：iconfont.eot/iconfont.woff/iconfont.svg/iconfont.ttf/iconfont.woff2 的所有 url 的相對地址。
這里面的所有 url 都是引用文件夾 font 里面的字體，注意相對路徑的書寫，千萬別寫錯了。
其中有一個 url('data:application...') 這里千萬別進行修改，否則直接報錯。
7，把 @font-face 中的 類名 .iconfont 和 .icon-jiantoushang(就是需要顯示的圖標字體的類名) 放到需要顯示的標簽的類里面即可正常顯示。
比如需要在標簽 i 顯示 下拉箭頭，有兩種方式，如下：
第一種：
<i class="iconfont icon-jiantoushang"></i> 這樣即可正常顯示 向上的箭頭。
第二種：
<i class="iconfont "></i> 這樣即可正常顯示 向上的箭頭。
注意編碼：  是從 demo_index.html中獲得的，
打開demo_index.html幫助文檔 可以看到每個圖標字體下面都有相應的unicode編碼，
不同的是，以上編碼是 使用 &#x 代替了 unicode 編碼的 斜桿
如果使用了unicode的編碼，那么就不需要 icon-jiantoushang 這些圖標字體類了，可以刪了，只留一個對象@font-face 一個類.iconfont
后面具體的圖標字體類就不需要了。
難點：
如：這里使用的是下拉列表向下的圖標字體
.dropdown-arrow {
/* i 標簽有時要設置為行內塊級元素才可以進行旋轉，transform:rotate(180deg);*/
display: inline-block;
/* 設置所有字體的高度不繼承父元素的行高*/
line-height: 1;
/* background-repeat: no-repeat; */
}
搜狗：css CSS原生變量 :root{ --columns: 5; }yangshiyouxianji (樣式優先級)link 鏈入外部樣式xuanzeqi (jQuery選擇器)mingmingguifan (命名規范)textalign 元素內文本水平對齊方式vertical 多種方案：對文本元素上下左右垂直居中font 設置復合文字字體overflow/yichu 對文本溢出是否換行的操作wenbenyangshi 單詞和字母的間距，文本修飾和文本縮進word-spacing、letter-spacing、text-decoration、text-indentjuzhong/chuizhijuzhong 上下左右垂直居中liebiao/list 設置有無列表的樣式，及列表一些屬性position 相對、絕對，固定，磁貼定位buju/shengbeibuju/shuangfeiyibuju 經典布局(行/列布局，混合布局:聖杯布局，雙飛翼布局)xuanzeqi 包括CSS3選擇器和Jquery選擇器yuanjiao/borderradius 圓角屬性yinying/boxshadow 盒模型的陰影border/borderimage 用圖片做為邊框的背景圖片xianxingjianbian 線性漸變jingxiangjianbian 徑向漸變wenbenyinying/yinying 設置文本陰影transform 轉換rotate translate scale skewtransition/guodu 動畫過渡animation 動畫語法及實例luanma 解決亂碼問題teshufuhao 網頁上的一些特殊符號chaolianjie a標簽 錨 下載 郵箱等等get/post 方法innertext 設定通用方法獲取指定對象的文本內容ajax ajax 的用法及其封裝json json語法以及如何使用ajax進行訪問該數據jsonp/kuayu 如何使用JSONP進行跨域訪問數據html HTML5的標簽總結
JavaScriptjavascript js的組成等基礎bianliang 9種數據類型可以作為變量shujuleixing/jibenshujuleixing 具體的基本數據類型及其注意點zuoyongyu 全局作用域，局部作用域，構成作用域鏈yujiexi 預解析的過程和實例laji/neicun 垃圾收集機制和內存問題number/parseint/parsefloat 把字符串轉換為數值string 對字符串的各種操作、以及把指定對象轉換為字符串。boolean 布爾值true/falsesanyuanyunsuanfu 三元運算符 a?b:cluojiyunsuanfu/yu/huo/fei 邏輯運算符：與 或 非bijiaoyunsuanfu 比較運算符:> < >= <= == != === !==suanshuyunsuanfu/jiajianchengchu 加減乘除取模alert/prompt/shurukuang/jinggaokuang 提示框和警告框if/for/while/switch 三種條件語句的語法及實例duanlucaozuo 短路操作就是使用：邏輯運算符 或||for for實例/水仙花等break/continue 結合上面循環語句進行跳出循環function js函數的語法hanshu 函數的定義，即各種函數return 函數的各種返回值arguments 函數中的arguments各種屬性
js內置函數：String 對字符串的各種操作Array 數組Date 獲取時間Math 獲取js內部的各種函數