閑著沒事兒寫了個小 demo ，獲取手機上已安裝應用信息，系統應用和 非系統應用
MD5 SHA1 SHA256 簽名信息 點擊簽名信息可復制到剪切板，
GitHub：https://github.com/sunan-n/GetAppInfo
如下圖：
<span style="white-space:pre;"> </span>主要就是這個方法，傳參數進來獲取相應的簽名類型 信息<br />
public static String getSignaturesInfo(Context context, String packageName, String tpye) {<br />
// //獲取包管理器<br />
PackageManager pm = context.getPackageManager();<br />
//返回包括在包中的簽名信息<br />
int flags = PackageManager.GET_SIGNATURES;<br />
PackageInfo packageInfo = null;<br />
try {<br />
//獲得包的所有內容信息類<br />
packageInfo = pm.getPackageInfo(packageName, flags);<br />
} catch (PackageManager.NameNotFoundException e) {<br />
e.printStackTrace();<br />
}<br />
//簽名信息<br />
Signature[] signatures = packageInfo.signatures;<br />
byte[] cert = signatures[0].toByteArray();<br />
//將簽名轉換為字節數組流<br />
InputStream input = new ByteArrayInputStream(cert);<br />
//證書工廠類，這個類實現了出廠合格證算法的功能<br />
CertificateFactory cf = null;<br />
try {<br />
cf = CertificateFactory.getInstance("X509");<br />
} catch (CertificateException e) {<br />
e.printStackTrace();<br />
}<br />
//X509證書，X.509是一種非常通用的證書格式<br />
X509Certificate c = null;<br />
try {<br />
c = (X509Certificate) cf.generateCertificate(input);<br />
} catch (CertificateException e) {<br />
e.printStackTrace();<br />
}<br />
String hexString = null;<br />
try {<br />
//加密算法的類，這里的參數可以使MD4,MD5等加密算法<br />
// MessageDigest md = MessageDigest.getInstance("SHA1");<br />
MessageDigest md = MessageDigest.getInstance(tpye);<br />
//獲得公鑰<br />
byte[] publicKey = md.digest(c.getEncoded());<br />
//字節到十六進制的格式轉換<br />
hexString = byte2HexFormatted(publicKey);<br />
} catch (NoSuchAlgorithmException e1) {<br />
e1.printStackTrace();<br />
} catch (CertificateEncodingException e) {<br />
e.printStackTrace();<br />
}<br />
return hexString;<br />
}<br />
<br />1.集成高德地圖發布版和調試版的sha獲取的問題
調試版，進入 ~/.android
執行
keytool -list -v -keystore debug.keystore
可以獲得sha
2.發布版的sha獲取需要找到發布版的key文件，例如
/Users/aboc/keys/phpec/key.jks
然后執行keytool -list -v -keystore /Users/aboc/keys/phpec/key.jks
會需要輸入密碼，密碼在項目
android/key.properties 這個文件夾中，但密碼是在創建的時候生成的
3.安卓打包的簽名就是上面文件里面顯示的md5
可以使用 一.查詢keystore的MD5
可以在運行窗口，定位到keystore所在的路徑，(以android默認keystore為例)執行cd /Users/aboc/.android定位到.android下
執行下面這條語句后就能顯示Key的所有信息
keytool -list -v -keystore phpec.jks
這個方法獲取到md5
或者用這里的這個工具
https://developers.weixin.qq.com/doc/oplatform/Downloads/Android_Resource.html
CSS bug是布局中最頭疼的問題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競爭導致很多問題的存在。而IE6與IE7在很多問題上也存在著很大的差別。在webjx.com大量的技術文檔中，也包含了這方面的內容。輕松的解決CSS bug是我們必須掌握的技能?，F在整理出最常用的12種CSS BUG解決方法以及CSS BUG類的小技巧。希望對您的學習、工作有所幫助新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
一、 針對瀏覽器的選擇器
這些選擇器在你需要針對某款瀏覽器進行css設計時將非常有用.
IE6及其更低版本
width: 300px;
height: 150px;
}
margin: auto;
position: relative;
}
六、IE6雙倍邊距的bug
給此對象加上display:inline即可解決問題。具體介紹：
七、Box Model 盒模型bug的一般解決辦法
八、兩個層之間的3px間隙
傳說中的“IE 3px bug”，解決的辦法：
九、在IE中的HTML注釋引起文字奇怪的復制
Duplicate Characters Bug很神奇。
十、圖片替換技術
用文字總比用圖片做標題好一些. 文字對屏幕閱讀機和SEO都是非常友好的.
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
你可以看到我們對標題使用了標準的<h1>作為標簽并且用css來將文本替換為圖片. text-indent屬性將文字推到了瀏覽器左邊5000px處, 這樣對于瀏覽者來說就看不見了.
關掉css,然后看看頭部會是什么樣子的.本文由webjx.com整理，轉載請注明出處！
十一、 最小寬度
IE6另外一個bug就是它不支持 min-width 屬性. min-width又是相當有用的, 特別是對于彈性模板來說, 它們有一個100%的寬度,min-width 可以告訴瀏覽器何時就不要再壓縮寬度了.
除IE6以外所有的瀏覽器你只需要一個 min-width: Xpx; 例如:
.container {
min-width:300px;
}
為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時候我們需要創建兩個div, 一個包含另一個:
<div class="container">
<div class="holder">Content</div>
</div>
然后你需要定義外層div的min-width屬性，本文由webjx.com整理，轉載請注明出處！
.container {
min-width:300px;
}
這時該是IE hack大顯身手的時候了. 你需要包含如下的代碼:
大多數文章中，我們并未特別注意CSS文件的可維護與可讀性的問題，當完成一項前端的工作之后，許多人都會忘記該項目的結構與細節。然而代碼并不是馬上就能完全定型，在余下的時間里還有不斷的維護工作，而這些工作也許不會是你自己完成。所以，結構優良的代碼能很大程度上優化它的可維護性。下面列出四則技巧提高CSS文件可維護性的方法，以此作為指南，以一種較好的CSS樣式組織習慣來進行WEB前端開發。
一、CSS樣式文件分解
對于小項目，在寫代碼之前，按頁面結構或頁面內容將代碼分為幾塊并給予注釋。例如，可以分別將 全局樣式、布局、字體樣式、表單、評論和其他分為幾個不同的塊來繼續工作。
而對于較大的工程，這樣顯然不會有什么效果。此時，就需要將樣式分解到幾個不同的樣式表文件。下面的master stylesheet 就是這一方法的例子，它的工作主要是導入其他樣式文件。使用這一方法不僅能優化樣式結構，而且有利于減少一些不必要的服務器請求。而分解文件的方法就有許多種，master stylesheet 使用了最常見的一種。
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/ @import "debugging.css"; /
同時對于大型項目，你也可以加上CSS文件的升級標志或者一些診斷等其他措施，這里不再詳述。大家注意在實現工作中總結與思考，也歡迎多參考webjx.com的相關文章。
二、為CSS文件建立索引
為了能夠迅速的了解整個CSS文件的結構，在文件開頭建立文件索引是一個不錯的選擇。
一種可行的方法是建立樹形的索引，結構上的id 和 class 都可以成為該樹的一個分支。
[Layout]
定義這樣一個樣式檢索可以很有效的使其他人閱讀學習你的代碼變得容易。在制作大項目的時候，你也可以將檢索打印出來從而在你閱讀代碼的時候方便查閱。您還可以參考下面的文章。
三、格式化CSS屬性
當我們編寫代碼的時候，使用一些特殊的編碼風格會對提高CSS代碼的可讀性有很大幫助。許多人都有各自不同的編碼風格。一部分人習慣于將顏色和字體的代碼放在前面，另外一部分則更喜歡將類似浮動和定位的更“重要”的屬性放在前面。類似的，也可以將頁面元素按照它在布局中的結構進行排序：
body,
h1, h2, h3,
p, ul, li,
form {
margin: 0;
padding: 0;
border: 0;
}
一些開發者用一種更為有意思的方法：他們將屬性按首字母的順序排列。值得注意的是，這樣一種方法可能對某些瀏覽器會產生問題。不管自己的格式如何，你要確保你已經清晰的定義了這些格式方法。這樣，你的同事在閱讀你的代碼的時候將會感謝你的努力。您還可以參考下面的文章。
四、合理的利用縮進
為了讓你的代碼給人感覺更為直觀，你可以使用一行來定義大綱元素的樣式。當指定的選擇器里的屬性超過三個的時候，這種方式將帶來混亂。但是，適度的使用這種方式，你可以很清楚的區分相同類的不同點。
#main-column h1 { margin-bottom: 20px; }
#main-column p { color: #333; }
同時，樣式修改的維護也是個比較麻煩的問題。很多人修改樣式之后就忘記了，結果后來又發現修改的樣式導致了頁面出錯，不得不苦苦尋找。因此，為修改的樣式構建一個特殊的格式就很必要了。一種很簡單的方式是，給修改過的樣式縮進，同時，也可以使用一些注釋（比如"@new"）來做一個標識。
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; / @new /
margin: 3px 0 3px 0;
padding: 3px; / @new /
}
總的來說，只有建立一個合適的樣式指南才會對樣式表的可讀性有所幫助。記住，移去每一個對你理解文件沒有幫助的樣式指南，避免對過多的元素使用過多的樣式指南。然后，為了一個可讀性可維護性良好的CSS文件而努力吧。不要忘記和webjx.com分享您的經驗，歡迎參與評論
在學習應用css之前我們要先了解一下什么是css。CSS是Cascading Style Sheets(層疊樣式表)的簡稱.
邊框(border): css控制的邊框屬性包括border-width, border-color, border-style.
Border之所以讓人很困惑主要源于IE5錯綜復雜的BUG, 由于IE5是一個“will soon be dead” 的瀏覽器, 這里只例舉一個最為知名的關于border-width的BUG, 讓大家更好的理解border的含義, 先看下圖:
如上圖所示, 對象A(白色矩形)周圍有藍色邊框B, 可以看出A的實際寬度為ef, 而IE5不這么認為, 它把cd的長度定義為對象A的寬度, 這個bug在邊框的寬度小時幾乎察覺不到, 但在邊框與對象寬度相差不大時顯得尤為明顯.
新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
現在, 結合以上說明, 可以看出border是獨立于對象之外, 位于magin與padding之間(后說明), 具有固定寬度, 顏色和樣式的區域.
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
可以看到如 Example2 的效果.
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
在css文件中寫入以上代碼, 目的在于控制盒子中鏈接的表現, 通過名為”#button a”的選擇器來實現. 鏈接的寬高為160px*60px, 背景為圖片button.png.
在這強調一下display:block的作用. 由于在html文件中,鏈接<a href=”#”> </a>中沒有任何的內容(content)填充, 如果沒有聲明”display:block”, 那么即使聲明了選擇器”#button a”的寬高, 瀏覽器也會因為html文件中沒有內容而無法顯示鏈接. 所以”display:block”在這里的作用就在于強制瀏覽器顯示沒有內容填充的鏈接.
用偽類選擇器a:link聲明鏈接的背景圖片在左上角顯示, 即距離左邊和頂邊分別0, 0. 但由于已經在選擇器 “#button a”中聲明了圖片位置, 此代碼可有可無.
用偽類選擇器a:hover聲明鼠標懸停時, 背景圖片上移60px, 而使排在第二位的綠色小圖片顯示出來;
用偽類選擇器a:active聲明在鼠標點擊與釋放之間的狀態時, 背景圖片上移120px, 而使排在第三位的紅色小圖片顯示;
用偽類選擇器a:visited聲明在鏈接被點擊或訪問過時, 背景圖片上移180px, 而使排在第四位的灰色小圖片顯示;
現在你基本了解了css動態按鈕的制作過程, 但以上css代碼還存在一個嚴重的缺陷, 相信你會很快發現問題所在——這個按鈕居然是一個”一次性按鈕“, 也就是說這個按鈕在點擊第一次后, 就一直顯示那個灰色小圖片, 你能想出解決方法嗎?
文章目錄
一、this
1.什么是this
2.this 代表什么
3.綁定 this 的方法
4.this的指向
5.改變指向
二、Function.prototype.bind()
三、call/apply
1.定義
2.語法
3.異同
一、this
1.什么是this
this 關鍵字在大部分語言中都是一個重要的存在，JS中自然不例外，其表達的意義豐富多樣甚至有些復雜，深刻理解this是學習JS、面向對象編程非常重要的一環。
2.this 代表什么
this代表函數（方法）執行的上下文環境（上下文，類似與你要了解一篇文章，了解文章的上下文你才能清晰的了解各種關系）。
但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。
1.在方法中，this 表示該方法所屬的對象。
2.如果單獨使用，this 表示全局對象。
3.在函數中，this 表示全局對象。
4.在函數中，在嚴格模式下，this 是未定義的(undefined)。
5.在事件中，this 表示接收事件的元素。
6.類似 call() 和 apply() 方法可以將 this 引用到任何對象。
3.綁定 this 的方法
this的動態切換，固然為 JavaScript 創造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把this固定下來，避免出現意想不到的情況。JavaScript 提供了call、apply、bind這三個方法，來切換/固定this的指向。
4.this的指向
1.在一般函數方法中使用 this 指代全局對象
function test(){
this.x = 1; //這里this就是window
console.log(this.x);
}
test(); // 1
JS規定，函數中的this，在函數被調用時確定，它指函數當前運行的環境。
2.作為對象方法調用，this 指代上級對象
var x =3;
function test(){
alert(this.x);
}
var o = {
x:1,
m:test
};
o.m(); // 1
如果函數作為對象的方法時，方法中的 this 指向該對象。
3.作為構造函數調用，this 指代new 出的對象
function test(){
console.log(this);
}
var o = new test();
test();
//可以看出o代表的不是全局對象
new關鍵詞的作用是調用某個函數并拿到其中的返回值，只是調用過程稍特殊。在上面的代碼實例中。test函數被new關鍵詞調用時，內部依次執行了以下步驟:
（1）創建一個空對象。
（2）將這個空對象的原型，指向這個構造函數的prototype。
（3）將空對象的值賦給函數內部的this（this就是個空對象了）。
（4）執行函數體代碼，為this這個對象綁定鍵值對。
（5）返回this，將其作為new關鍵詞調用oop函數的返回值。
所以構造函數中的this，依舊是在構造函數被new關鍵詞調用時確定其指向，指向的是當前被實例化的那個對象。
4.箭頭函數中的this
箭頭函數是ES6的新特性，最重要的特點是它會捕獲其所在上下文的this作為自己的this，或者說，箭頭函數本身并沒有this，它會沿用外部環境的this。也就是說，箭頭函數內部與其外部的this是保持一致的。
this.a=20
var test={
a:40，
init:()=>{
console.log(this.a)
function go(){
this.a=60
console.log(this.a)
}
go.prototype.a=50
return go
}
}
var p=test.init()
p()
new (test.init())()
//輸出 20 60 60 60
5.改變指向
this的動態切換，固然為 JavaScript 創造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把this固定下來，避免出現意想不到的情況。JavaScript 提供了call、apply、bind這三個方法，來切換/固定this的指向。
bind方法和apply、call稍有不同，bind方法返回一個新函數，以后調用了才會執行，但apply、call會立即執行。
二、Function.prototype.bind()
bind()方法主要就是將函數綁定到某個對象，bind()會創建一個函數，函數體內的this對象的值會被綁定到傳入bind()中的第一個參數的值，例如：f.bind(obj)，實際上可以理解為obj.f()，這時f函數體內的this自然指向的是obj；
示例：
function f(y, z){
return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6
1
2
3
4
5
6
這里bind方法會把它的第一個實參綁定給f函數體內的this，所以這里的this即指向{x : 1}對象，從第二個參數起，會依次傳遞給原始函數，這里的第二個參數2，即是f函數的y參數，最后調用m(3)的時候，這里的3便是最后一個參數z了，所以執行結果為1 + 2 + 3 = 6分步處理參數的過程其實是一個典型的函數柯里化的過程（Curry）。
三、call/apply
1.定義
每個函數都包含兩個非繼承而來的方法：call()方法和apply()方法。
call和apply可以用來重新定義函數的執行環境，也就是this的指向；call和apply都是為了改變某個函數運行時的context，即上下文而存在的，換句話說，就是為了改變函數體內部this的指向。
2.語法
call()
調用一個對象的方法，用另一個對象替換當前對象，可以繼承另外一個對象的屬性，它的語法是：
Function.call(obj[, param1[, param2[, [,...paramN]]]]);
1
obj：這個對象將代替Function類里this對象
params：一串參數列表
說明：call方法可以用來代替另一個對象調用一個方法，call方法可以將一個函數的對象上下文從初始的上下文改變為obj指定的新對象，如果沒有提供obj參數，那么Global對象被用于obj。
apply()
和call()方法一樣，只是參數列表不同，語法：
Function.apply(obj[, argArray]);
obj：這個對象將代替Function類里this對象
argArray：這個是數組，它將作為參數傳給Function
說明：如果argArray不是一個有效數組或不是arguments對象，那么將導致一個TypeError，如果沒有提供argArray和obj任何一個參數，那么Global對象將用作obj。
3.異同
相同點
call()和apply()方法的相同點就是這兩個方法的作用是一樣的。都是在特定的作用域中調用函數，等于設置函數體內this對象的值，以擴充函數賴以運行的作用域。
一般來說，this總是指向調用某個方法的對象，但是使用call()和apply()方法時，就會改變this的指向，看個例子：
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
console.log(add.call(sub, 2, 1));//3
為什么add.call(sub, 2, 1)的執行結果是3呢，因為call()方法改變了this的指向，使得sub可以調用add的方法，也就是用sub去執行add中的內容，再來看一個例子：
function People(name, age) {
this.name = name;
this.age = age;
}
function Student(name, age, grade) {
People.call(this, name, age);
this.grade = grade;
}
var student = new Student('小明', 21, '大三');
console.log(student.name + student.age + student.grade);//小明21大三
在這個例子中，我們并沒有給Student的name和age賦值，但是存在這兩個屬性的值，這還是要歸功于call()方法，它可以改變this的指向。
在這個例子里，People.call(this, name, age);中的this代表的是Student，這也就是之前說的，使得Student可以調用People中的方法，因為People中有this.name = name;等語句，這樣就將name和age屬性創建到了Student中。
總結一句話就是call()可以讓括號里的對象來繼承括號外函數的屬性。
至于apply()方法作用也和call()方法一樣，可以這么寫：
People.apply(this, [name, age]);
1
或者這么寫：
People.apply(this, arguments);
1
在這里arguments和[name, age]是等價的。
不同點
從定義中也可以看出來，call()和apply()的不同點就是接收參數的方式不同。
1.apply()方法接收兩個參數，一個是函數運行的作用域（this），另一個是參數數組。
2.call()方法不一定接受兩個參數，第一個參數也是函數運行的作用域（this），但是傳遞給函數的參數必須列舉出來。
在給對象參數的情況下,如果參數的形式是數組的時候,比如之前apply()方法示例里面傳遞了參數arguments,這個參數是數組類型,并且在調用Person的時候參數的列表是對應一致的(也就是Person和Student的參數列表前兩位是一致的)就可以采用apply()方法。
但是如果Person的參數列表是這樣的(age,name)，而Student的參數列表是(name,age,grade)，這樣就可以用call()方法來實現了,也就是直接指定參數列表對應值的位置Person.call(this,age,name)。
一、什么是字體圖標
字體圖標：簡單的說，就是一種特殊的字體，通過這種字體，顯示給用戶的就像一個個圖片一樣，但它的本質是文字。目前在移動端應用比較廣泛！
二、字體圖標的使用步驟
這里以阿里巴巴矢量圖標庫為例！?。?br />
sep1：
百度搜索iconfont,找到阿里巴巴矢量圖標庫官網
網址在這里https://www.iconfont.cn/
進去之后注冊或登錄，共有3種登錄方式，在這里我使用新浪微博賬號登錄
好了，登錄之后我們就可以在里面選擇自己想要的字體圖標啦?。?！那么，如何選擇下載并應用到自己的項目中呢？？別著急，跟著我走！
sep2：下載字體圖標字體庫
在這里我們可以根據自己的需求輸入相應的關鍵字進行搜索（中英文都可以）
鼠標放上去，然后就可以把自己喜歡的寶貝加入購物車啦！
網購的趕腳有木有，
我知道，看到這里大家就該有疑問了，
還要花錢買嗎？
放心！
答案是：不需要！
我們選的東西都在購物車里啦！
打開購物車，就能看到你選的圖標了??！
接下來你要做的是把它們下載到本地。
由于要在網頁中使用
在這里我們選擇 下載代碼
下載后將壓縮包解壓，為了方便后續使用我們改一下文件夾名稱，在這里我改為 icon (注意：在HTML中導入路徑時，記得帶上你所改的文件夾名稱)
打開之后你會發現里面有不同類型的文件（建議都不要刪除）
打開后綴名為.html的這個文件（可以更直觀地查看自己下載的字體圖標）
step3：在項目中引用字體圖標
不要走開，重點來了?。?！
官方提供了三種引用方法（下面對應的都有步驟）
Unicode 引用
Unicode 是字體在網頁端最原始的應用方式，特點是：
兼容性最好，支持 IE6+，及所有現代瀏覽器。
支持按字體的方式去動態調整圖標大小，顏色等等。
但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
注意：新版 iconfont 支持多色圖標，這些多色圖標在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式
Unicode 使用步驟如下
第一步：拷貝項目下面生成的 @font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }
第二步：定義使用 iconfont 的樣式
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
第三步：挑選相應圖標并獲取字體編碼，應用于頁面
<span class="iconfont">3</span>
font-class 引用
font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。
與 Unicode 使用方式相比，具有如下特點：
兼容性良好，支持 IE8+，及所有現代瀏覽器。
相比于 Unicode 語意明確，書寫更直觀?？梢院苋菀追直孢@個 icon 是什么。
因為使用 class 來定義圖標，所以當要替換圖標時，只需要修改 class 里面的 Unicode 引用。
不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
使用步驟如下：
第一步：引入項目下面生成的 fontclass 代碼：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑選相應圖標并獲取類名，應用于頁面：
<span class="iconfont icon-xxx"></span>
symbol 引用
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：
支持多色圖標了，不再受單色限制。
通過一些技巧，支持像字體那樣，通過 font-size, color 來調整樣式。
兼容性較差，支持 IE9+，及現代瀏覽器。
瀏覽器渲染 SVG 的性能一般，還不如 png。
使用步驟如下:
第一步：引入項目下面生成的 symbol 代碼：
<script src="./iconfont.js"></script>
第二步：加入通用 CSS 代碼（引入一次就行）：
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
第三步：挑選相應圖標并獲取類名，應用于頁面：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
下面，我就跟大家詳細說說 font-class 引用的引用方式：
打開編輯器（在這里我使用的是 VS Code編輯器），新建一個項目文件夾(demo)
將解壓后的字體圖標文件夾（icon）直接放到demo目錄下
在demo文件夾下面新建一個html文件 demo.html
導入icon文件夾里面的外部樣式表
<link rel="stylesheet" href="./icon/iconfont.css">
iconfont.css 里面就是我們下載的字體圖標的所有css樣式了，我們打開看看吧！
你會發現里面有一個 iconfont類名（這里劃重點！后面要用），它是所有字體圖標的公用樣式。
這時我們就可以在頁面中使用這些字體圖標啦！上面我們只是導入了整個css樣式表，現在我們要針對性地把某個圖標引用到html頁面中，并在網頁中顯示出來。
下面 我們就開始寫頁面的主體部分吧！
<p> 我有一個夢想：能夠擁有一套 <span class="iconfont icon-home"></span> </p>
這里的span標簽里面放的就是要用的某個字體圖標了，你會發現它用了兩個class類名。
第一個是iconfont，也就是我前面劃的重點（到這里不明白的話，可以再回頭看看）
第二個是icon-home，這個類名從何而來呢？
來，繼續往下看，再次打開icon文件夾下的
話不多說，直接看圖
是不是對應上啦！簡單地說就是你要用那個圖標就添加它的class類名。
到這里，恭喜你已經學會了如何在網頁中插入字體圖標啦?。?！
那么，趕快運行一下看看效果吧！
到這里是不是還滿足不了你的需求，會有這樣的疑問：如果是這樣的效果，跟一張圖片有什么區別呢？？？
當然不是啦！
之所以叫做字體圖標，顧名思義，它在網頁中就是一種字體的存在，不過它比普通字體長得好看些有木有！
我們可以像更改文字樣式一樣去更改它的樣式，比如說 大小、顏色、陰影…
Symbol 引用方式還可以實現下面原圖標的彩色效果哦！可以自己照著官方提供的步驟試試看
下面附上Font class引用方法的 源代碼 供參考
前面的步驟一定要看！?。?br />
如果前期工作沒做的話，直接用我的源代碼是實現不了的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字體圖標</title>
<link rel="stylesheet" href="./icon/iconfont.css">
<style>
.iconfont{
font-size: 200px;
color: palevioletred;
text-shadow: 18px 17px 17px gray;
}
</style>
</head>
<body>
<p>
我有一個夢想：能夠擁有一套
<span class="iconfont icon-home"></span>
</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
花費了很長時間整理出來的。
很簡單是不是?。。?br />
看到這里還不會的話，建議重新再看一遍！
其中有錯誤的話，還請指出，我會虛心接受并改正?。。?br />
————————————————
版權聲明：本文為CSDN博主「Humy.」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42678796/article/details/104569773
JavaScript基礎知識——JS預解析
js代碼是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器在運行JavaScript代碼時分為兩步：1預解析、2代碼執行。
預解析
預解析是指js引擎會把js里面所有的var與function提升到當前作用域的最前面。（這里的當前作用域包括：全局作用域與局部作用域）。
預解析可分為：變量預解析和函數預解析
變量預解析：就是把所有的變量聲明提升到當前的作用域的最前面但是不提升賦值操作。如下例所示：
<script>
console.log(num); //結果為undefined
var num = 10;
</script>
//其實際執行過程為
var num;
console.log(num);
num=10;
函數預解析：就是把所有的函數聲明提升到當期作用域的最前面 但是不包括調用函數。如下例所示：
var num = 10
fun();
function fun() { //結果是undefined
console.log(num);
var num = 20;
}
//其實際執行過程為
var num;
funtion fun() {
var num;
console.log(num);
num=20;
}
num = 10;
fun();
在idea中使用jdbc往數據庫里儲存中文亂碼問題
這里使用的數據庫是mysql。
ide為idea.
有時做一些web項目時需要往數據庫里面儲存中文，就是需要用到jdbc往數據庫里面儲存數據時，參數改為中文?？墒莾Υ嫱曛?，打開sqlyog查詢又是???這樣子的亂碼
上網找了很多方法，數據庫的編碼問題都改了，而且統一成utf-8了，但還是儲存時為亂碼。
后面檢查時在sqlyog里改中文又可以正常顯示。
這就說明數據庫上是沒有問題的，應該是連接這塊，于是在連接的url上加入了參數就可以正常顯示了characterEncoding=UTF-8
這里使用的是c3p0的連接池，不同的連接池可以去對應的配置文件中加上參數
藍藍設計的小編 http://www.syprn.cn