Web最佳實踐閱讀總結(2)

smilesoul發表於2017-10-09
Web
程式碼符合標準
  • 標準的頁面會保證正確的渲染
  • 頁面容易被搜尋引擎搜尋，提高搜尋排名(SEO)
  • 提高網站的易用性
  • 網頁更好維護和擴充套件（Validator，HTML Validator 屬於Firefox外掛)
停止使用不標準的標籤和屬性，簡化HTML程式碼
  • 標籤沒有實際意義，僅設定樣式（不推薦使用）
  • 不推薦使用blink，marquee
  • 讓HTML擁有更好的語義
  • 移除不常用的HTML標籤
樣式和結構分離
  • HTML頁面連結一個CSS（最優），提高載入速度
  • HTML內嵌CSS（單一頁面最佳，減少載入CSS樣式檔案的請求數目，加快載入速度
  • 內聯CSS樣式，可以使用JS動態來統一修改，很少使用，JQ中使用其實現動畫效果
  • 在CSS樣式檔案中引用CSS檔案，避免使用
新增JS禁用提示資訊
  • 使用noscrpt，HTML4只在body中起作用，HTML5中可以出現在head中，支援HTML，不支援XHTML
  • 最好使用noscript，採用漸進增強的模式，平穩降級
新增必要的meta的標籤
  • meta的屬性：name，http-equiv，content，charset
  • name和content屬性組合，構成名稱/值對
  • name中keywords，description最常用
  • http-equiv和content屬性結合，構成http命令
  • 其中content-type，default-style，refresh已經確定，content-language，set-cookie 未正式確定
  • charset設定編碼
常用的meta方法
  • 設定IE瀏覽器的相容性
  • 設定頁面在移動裝置中的顯示
  • 設定IE瀏覽器的固定網站功能
HTML語義化
  • 語義化使搜尋引擎和第三方抓取工具更容易讀懂程式碼
  • 去掉CSS也可以保持良好的外觀
  • div，span儘量少使用
  • 把無關的元素重HTML中刪除
  • 新增一些隱藏文字
  • 要求：
    • 熟悉所有規範中的HTML標籤，理解各標籤的語義
    • 熟悉各標籤上規範的屬性，給HTML標籤設定必要的屬性
    • 樣式和結構的分離
  • 構建頁面標題的最佳實踐：
    • 使用hx標籤
    • 頁面只是使用一個h1
    • hx使用過程中不要跳級
    • 不要使用hx設定樣式
  • 設計表單：
    • 使用label標籤，並設定label標籤的for屬性
    • 給輸入控制元件設定合適的水印提示
    • 輸入控制元件設定tab順序
    • 使用HTML5中引入的表單控制元件
HTML5新特性使用
  • async和defer屬性
    • 不使用在內聯裡面
    • defer：以並行的方式下載指令碼，而不是阻塞的方式下載，在指令碼載入完成後，瀏覽器會在DOM觸發之前按照引用順序執行JS
    • async：以非同步的方式下載指令碼，在下載結束後立即執行程式碼，而不會等待頁面解析結束
    • 在設定async時候，推薦同時設定defer屬性，提高指令碼載入執行的效能
  • 標籤上的自定義屬性data-*
  • script可以編寫HTML模板和XML資料
選擇器注意
  • 儘量不使用ID選擇器
  • 減少子選擇器的層級（less和Sass的濫用）
  • 使用組合CSS類選擇器
相容IE瀏覽器
  • 相容舊瀏覽器的程式碼，被稱為hack程式碼
  • 熟悉IE瀏覽器中常見的相容樣式

  • 分離樣式相容程式碼

    ```

          .color{ _color:green;}  ( IE6 (含 IE6 ) 以下)

      .color{ *color:gray; }  ( IE7 ( 含 IE7 )以下)

      .color { color:green \0; } ( IE8 + )

      .color { color:green \ ; }   ( IE8 . IE9 )

      :root .color { color:green \0; } ( IE9 + )

      .color { color:green \9\0; }   ( IE9+ )

      .color { color:green \9; }   ( IE10 ( 含 IE10 ) 以下 )

      *::-ms-backdrop, .color{ color:red; }   ( IE11 )

      * html .color { color: red; } (IE6 ONLY )

      *+html .color { color: red; } ( IE7 ONLY )

      @media screen\9 { 
              .color { color: black; } 
              }  ( IE6 . IE7 )      
      @media \0screen {
               .color { color: black; } 
              }  ( IE8 ONLY )      
      @media \0screen, screen\9 {
               .color { color: black; } 
              } ( IE6 . IE7 . IE8 ) 
      @media screen\0 {
               .color { color: black; } 
              }  ( IE8 . IE9 . IE10 )
              @media screen and (min-width: 0\0) {
               .color { color: black; }
              }  ( IE9 . IE10 )複製程式碼
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
        .color { color: black; }
        }   ( IE10 ONLY )

        @media all and (-ms-high-contrast:none){
        .color { color:greeny \0; }
        } ( IE10 + )

        @media all and (-ms-high-contrast:none){ 
        *::-ms-backdrop, .color { color:green \0; }
         } ( IE11 + )
  ```複製程式碼
em，px，%
  • px：絕對尺寸，em：應用元素上字型大小的兩倍，%：相對於父元素的百分比
  • 儘量設定相對尺寸
  • 只有在可預知元素尺寸的情況下才使用絕對尺寸
  • 使用em設定字型的大小

相關文章