代碼符合標準

• 標準的頁面會保證正確的渲染
• 頁面容易被搜索引擎搜索儡陨，提高搜索排名(SEO)
• 提高網(wǎng)站的易用性
• 網(wǎng)頁更好維護和擴展（Validator豌研，HTML Validator 屬于Firefox插件)

停止使用不標準的標簽和屬性，簡化HTML代碼

• 標簽沒有實際意義蕴轨，僅設置樣式（不推薦使用）
• 不推薦使用blink词爬，marquee
• 讓HTML擁有更好的語義
• 移除不常用的HTML標簽

樣式和結構分離

• HTML頁面鏈接一個CSS（最優(yōu)）镐躲，提高加載速度
• HTML內(nèi)嵌CSS（單一頁面最佳改衩，減少加載CSS樣式文件的請求數(shù)目岖常，加快加載速度
• 內(nèi)聯(lián)CSS樣式，可以使用JS動態(tài)來統(tǒng)一修改葫督，很少使用竭鞍，JQ中使用其實現(xiàn)動畫效果
• 在CSS樣式文件中引用CSS文件，避免使用

添加JS禁用提示信息

• 使用noscrpt橄镜，HTML4只在body中起作用偎快，HTML5中可以出現(xiàn)在head中，支持HTML洽胶，不支持XHTML
• 最好使用noscript晒夹，采用漸進增強的模式，平穩(wěn)降級

添加必要的meta的標簽

• meta的屬性：name姊氓，http-equiv惋戏，content，charset
• name和content屬性組合他膳，構成名稱/值對
• name中keywords，description最常用
• http-equiv和content屬性結合绒窑，構成http命令
• 其中content-type棕孙，default-style，refresh已經(jīng)確定些膨，content-language蟀俊，set-cookie 未正式確定
• charset設置編碼

常用的meta方法

• 設置IE瀏覽器的兼容性
• 設置頁面在移動設備中的顯示
• 設置IE瀏覽器的固定網(wǎng)站功能

HTML語義化

• 語義化使搜索引擎和第三方抓取工具更容易讀懂代碼
• 去掉CSS也可以保持良好的外觀
• div，span盡量少使用
• 把無關的元素重HTML中刪除
• 添加一些隱藏文字
• 要求：
  • 熟悉所有規(guī)范中的HTML標簽订雾，理解各標簽的語義
  • 熟悉各標簽上規(guī)范的屬性肢预，給HTML標簽設置必要的屬性
  • 樣式和結構的分離
• 構建頁面標題的最佳實踐：
  • 使用hx標簽
  • 頁面只是使用一個h1
  • hx使用過程中不要跳級
  • 不要使用hx設置樣式
• 設計表單：
  • 使用label標簽，并設置label標簽的for屬性
  • 給輸入控件設置合適的水印提示
  • 輸入控件設置tab順序
  • 使用HTML5中引入的表單控件

HTML5新特性使用

• async和defer屬性
  • 不使用在內(nèi)聯(lián)里面
  • defer：以并行的方式下載腳本洼哎，而不是阻塞的方式下載烫映，在腳本加載完成后沼本，瀏覽器會在DOM觸發(fā)之前按照引用順序運行JS
  • async：以異步的方式下載腳本，在下載結束后立即執(zhí)行代碼锭沟，而不會等待頁面解析結束
  • 在設置async時候抽兆，推薦同時設置defer屬性，提高腳本加載執(zhí)行的性能
• 標簽上的自定義屬性data-*
• script可以編寫HTML模板和XML數(shù)據(jù)

選擇器注意

• 盡量不使用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區(qū)別
• script的defer和async