新建站點(diǎn)文件夾

1. 文件夾名稱不能是中文命名
2. 文件夾根目錄里面至少包含了css、js、images三個子文件夾
3. 文件里根目錄里面至少應(yīng)該有index.html

設(shè)置網(wǎng)頁圖標(biāo)

1. 設(shè)置favorites.icon網(wǎng)頁圖標(biāo)
   注意點(diǎn):favorites圖標(biāo)就是顯示在網(wǎng)頁選項(xiàng)卡和收藏夾中的圖標(biāo)
2. 把制作好的網(wǎng)頁圖標(biāo)上傳到favicon.ico在線制作網(wǎng)站，選擇尺寸，然后把圖標(biāo)文件下載到本地
   3.把圖標(biāo)命名為favicon.ico并且放在網(wǎng)頁站點(diǎn)文件夾的根目錄中
   4.在head標(biāo)簽中添加

<link rel = "shortcut icon"  href ="favicon.ico"  type = “image/x.icon>

添加網(wǎng)站優(yōu)化的三大標(biāo)簽

1. 網(wǎng)頁title標(biāo)題
   • 注意點(diǎn):title是網(wǎng)頁中第一重要的標(biāo)簽，是搜索引擎了解網(wǎng)頁的入口，和對網(wǎng)頁主題歸屬的最佳判斷點(diǎn)。
   • 標(biāo)題長度:Google 35個中文，baidu 28個中文
   • 格式:網(wǎng)站名(產(chǎn)品名) - 網(wǎng)站的介紹
     例如以下的網(wǎng)站格式:

<title>淘寶網(wǎng) - 淘！我喜歡</title>
<title>京東(JD.COM)-正品低價、品質(zhì)保障、配送及時、輕松購物！</title>
<title>蘇寧易購(Suning.com)-送貨更準(zhǔn)時、價格更超值、上新貨更快</title>
<title>國美(GOME)-綜合網(wǎng)購商城，正品低價、品質(zhì)保障、快速送達(dá)、安心服務(wù)！</title>
/* 在title中 ， 最前面出現(xiàn)的詞匯，權(quán)重就越高*/

2. Keywords 關(guān)鍵字

• Keywords是頁面的關(guān)鍵字，是搜索引擎重點(diǎn)關(guān)注點(diǎn)之一
  • keywords應(yīng)該限制在6~8個關(guān)鍵之以內(nèi)，如果是電商網(wǎng)站的話，那么可以適量多幾個
    例如:

<meta name="keywords" content="蘇寧易購網(wǎng)上商城,蘇寧電器,Suning,手機(jī),電腦,冰箱,洗衣機(jī),相機(jī),數(shù)碼,家居用品,鞋帽,化妝品,母嬰用品,圖書,食品,正品行貨"/>

3. Description 網(wǎng)站說明

• 對于關(guān)鍵詞的作用明顯降低，但由于很多搜索引擎，仍然大量采用網(wǎng)頁的mata標(biāo)簽中的描述部分作為搜索結(jié)果的。
• "內(nèi)容摘要"，就是簡要說明我們的網(wǎng)站主要是做什么的
• 補(bǔ)充title和keywords中未能充分表述的說明
• 字符數(shù)含空格在內(nèi)不要超過 120 個漢字
• 描述中出現(xiàn)關(guān)鍵詞，與正文內(nèi)容相關(guān)，這部分內(nèi)容是給用戶看的，所以要寫的很詳細(xì)，讓用戶感興趣，吸引用戶點(diǎn)擊
  例如:

<meta name="description" content="蘇寧易購-綜合網(wǎng)上購物平臺，商品涵蓋家電、手機(jī)、電腦、超市、母嬰、服裝、百貨、海外購等品類。送貨更準(zhǔn)時、價格更超值、上新貨更快，正品行貨、全國聯(lián)保、可門店自提，全網(wǎng)更低價，讓您放心去喜歡！" />

4. 導(dǎo)入CSS Rest 類庫，將所有的瀏覽器的自帶樣式重置掉，保持各瀏覽器的一致性

推薦兩種方式:

• . reset.css
  • 無論有沒有用，全部默認(rèn)的樣式都清空
• . normalize.css
  • 保護(hù)有用的瀏覽器默認(rèn)樣式，而不是完全去除
  • 一般化的樣式，為大部分的html元素提供
  • 修復(fù)瀏覽器自身的bug并且保證各瀏覽器的一致性
  • 優(yōu)化CSS可用性:用一些小技巧
  • 點(diǎn)擊查看normalize.css官網(wǎng)文檔

5.設(shè)置全局樣式
例如:

body{
    font: 12px/1.5em "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";
    color: #999;
    background: #f2f2f2;
}

以上步驟完成之后，一個網(wǎng)站的基本配置已經(jīng)搞定了

優(yōu)雅降級

一開始就在高級瀏覽器上構(gòu)建完整的功能，然后再針對低版本的瀏覽器進(jìn)行兼容

漸進(jìn)增強(qiáng)

針對低版本的瀏覽器先進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果，交互等改進(jìn)和追加功能，達(dá)到更好的用戶體驗(yàn)

個人建議

現(xiàn)在開發(fā)應(yīng)用優(yōu)雅降級的會比較多一些，因?yàn)楝F(xiàn)在很少人用ie之類的低版本瀏覽器了，所以我們直接構(gòu)建好最完整的界面，然后根據(jù)實(shí)際情況去適配需要的瀏覽器。

• 最常用的修補(bǔ)手法就是為了低版本的瀏覽器單獨(dú)制作一個頁面，提示使用高級瀏覽器

例如:

www.zhihu.com
www.jd.com
www.taobao.com