字體圖標(biāo)
- 單張圖片缺點(diǎn)
- 1.1會(huì)增加訪問(wèn)時(shí)請(qǐng)求次數(shù)
- 1.2體積相對(duì)較大, 傳輸速度較慢
- 1.3圖片變大失真
- 精靈圖:
- 2.1適當(dāng)減少訪問(wèn)時(shí)請(qǐng)求次數(shù)
- 2.2體積相對(duì)較大, 傳輸速度較慢
- 2.3圖片變大失真
- 字體圖標(biāo)
- 3.1可以做出跟圖片一樣效果
- 3.2本質(zhì)是文字摹蘑，可以很隨意改變顏色宛瞄、大小等等...
- 3.3本身體積更小豪筝，傳輸速度更快
- 3.4幾乎支持所有的瀏覽器
- 3.5移動(dòng)端設(shè)備必備
字體圖標(biāo)使用
- 1.字體圖標(biāo)使用步驟
1.1設(shè)計(jì)師設(shè)計(jì)svg格式圖標(biāo)
1.2上傳生成字體包
1.3下載兼容字體包
1.4使用字體包
具體使用方式參考網(wǎng)站: http://www.iconfont.cn/
編寫網(wǎng)站的基本步驟
1.新建站點(diǎn)文件夾
- 1.1文件夾名稱不能是中文
- 1.2里面至少應(yīng)該包含css/js/images三個(gè)子文件夾
- 1.3里面至少應(yīng)該包含index.html文件
2.設(shè)置favorites icon網(wǎng)頁(yè)圖標(biāo)
- 顯示在網(wǎng)頁(yè)選項(xiàng)卡和收藏夾中的圖標(biāo), 我們稱之為favicon
- 2.1生成網(wǎng)頁(yè)圖標(biāo)
搜索ico圖標(biāo)生成--上傳圖標(biāo)--下載生成好的圖標(biāo) - 2.2放到站點(diǎn)目錄根目錄下
- 2.3在head標(biāo)簽中間添加
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>引入favicon圖標(biāo)
3.網(wǎng)站優(yōu)化三大標(biāo)簽
-
3.1網(wǎng)頁(yè)title標(biāo)題
- title是網(wǎng)頁(yè)中第一重要的標(biāo)簽芋浮，是搜索引擎了解網(wǎng)頁(yè)的入口，和對(duì)網(wǎng)頁(yè)主題歸屬的最佳判斷點(diǎn)。
- 標(biāo)題長(zhǎng)度: Google 35個(gè)中文, baidu 28個(gè)中文
- 格式: 網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹
<title>淘寶網(wǎng) - 淘吝秕！我喜歡</title>
<title>京東(JD.COM)-正品低價(jià)、品質(zhì)保障空幻、配送及時(shí)烁峭、輕松購(gòu)物！</title> - 特點(diǎn): 越先出現(xiàn)的詞語(yǔ), 權(quán)重越高
-
3.2Keywords 關(guān)鍵字
- Keywords是頁(yè)面關(guān)鍵詞秕铛，是搜索引擎重點(diǎn)關(guān)注點(diǎn)之一约郁。
- Keywords應(yīng)該限制在6～8個(gè)關(guān)鍵詞左右，電商類網(wǎng)站可以多幾個(gè)但两。
<meta name="keyword" content="淘寶,掏寶,網(wǎng)上購(gòu)物,C2C,在線交易,交易市場(chǎng),網(wǎng)上交易,交易市場(chǎng),網(wǎng)上買,網(wǎng)上賣,購(gòu)物網(wǎng)站,團(tuán)購(gòu),網(wǎng)上貿(mào)易,安全購(gòu)物,電子商務(wù),放心買,供應(yīng),買賣信息,網(wǎng)店,一口價(jià),拍賣,網(wǎng)上開店,網(wǎng)絡(luò)購(gòu)物,打折,免費(fèi)開店,網(wǎng)購(gòu),頻道,店鋪" />
<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,京東" />
- 3.3Description網(wǎng)站說(shuō)明
- 對(duì)于關(guān)鍵詞的作用明顯降低鬓梅，但由于很多搜索引擎，仍然大量采用網(wǎng)頁(yè)的MATA標(biāo)簽中描述部分作為搜索結(jié)果的“內(nèi)容摘要”谨湘。 就是簡(jiǎn)要說(shuō)明我們網(wǎng)站的主要做什么的
- Description作用
- 補(bǔ)充在 title 和 keywords 中未能充分表述的說(shuō)明.
- 字符數(shù)含空格在內(nèi)不要超過(guò) 120 個(gè)漢字
- 描述中出現(xiàn)關(guān)鍵詞绽快，與正文內(nèi)容相關(guān)，這部分內(nèi)容是給人看的紧阔，所以要寫的很詳細(xì)坊罢，讓人感興趣， 吸引用戶點(diǎn)擊
<meta name="description" content="淘寶網(wǎng) - 亞洲較大的網(wǎng)上交易平臺(tái)擅耽，提供各類服飾活孩、美容、家居乖仇、數(shù)碼憾儒、話費(fèi)/點(diǎn)卡充值… 數(shù)億優(yōu)質(zhì)商品，同時(shí)提供擔(dān)保交易(先收貨后付款)等安全交易保障服務(wù)乃沙，并由商家提供退貨承諾起趾、破損補(bǔ)寄等消費(fèi)者保障服務(wù)，讓你安心享受網(wǎng)上購(gòu)物樂(lè)趣警儒！" />
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷售家電训裆、數(shù)碼通訊、電腦、家居百貨缭保、服裝服飾、母嬰蝙茶、圖書艺骂、食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷、誠(chéng)信的服務(wù)隆夯，為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!" />
4.導(dǎo)入CSS Rest 類庫(kù)清除默認(rèn)樣式
4.1 reset.css
無(wú)論是否有用, 一律清零
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css4.2 normalize.css
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
優(yōu)化CSS可用性：用一些小技巧
解釋代碼：用注釋和詳細(xì)的文檔來(lái)
使用網(wǎng)址: https://github.com/necolas/normalize.css/
https://necolas.github.io/normalize.css/
5.兼容性選擇
5.1漸進(jìn)增強(qiáng)
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面钳恕，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果蹄衷、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)5.2優(yōu)雅降級(jí)
一開始就構(gòu)建完整的功能忧额，然后再針對(duì)低版本瀏覽器進(jìn)行兼容-
5.3個(gè)人建議:
- 現(xiàn)在微軟都拋棄了ie瀏覽器轉(zhuǎn)而支持 edge了，所以我們很多情況下沒(méi)有必要再時(shí)刻想著低版本瀏覽器了愧口，而是一開始就構(gòu)建完整的效果睦番，根據(jù)實(shí)際情況，修補(bǔ)低版本瀏覽器問(wèn)題
- 修補(bǔ)時(shí)現(xiàn)在最常見(jiàn)的做法就是為低版本瀏覽器 單獨(dú)制作一個(gè)跳轉(zhuǎn)頁(yè)面
