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

代碼符合標準

• 標準的頁面會保證正確的渲染
• 頁面容易被搜索引擎搜索，提升搜索排名(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設置字體的大小

---

• 經常使用的meta方法
• CSS: em, rem區別
• script的defer和async