html語義化

• 為什么要語義化

  • 在沒有css的情況下，頁面也能呈現出內容結構；

  • 有利于SEO有助于爬蟲住區更多的有效信息，爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

  • 方便其他設備解析：屏幕閱讀器、盲人閱讀器、移動設備，以更有意義的方式渲染網頁。

• 如何實現語義化

  • 盡可能少的使用div、span等無語義的標簽，只作為布局框架使用；

  • 不要使用純樣式標簽，如b(文本加粗)、font(規定字體格式)、u(下劃線文本)、i(規定斜體文本)等，使用css代替；

  • 需要強調的文本放在strong(語義更強)或em標簽中，其攜帶的默認樣式最好用css代替。

  • 每個input的說明文本都要用label標簽包裹起來，并設置label的for屬性為input的id讓其相關聯。

  • 可以使用W3C HTML Validator驗證并規范代碼。

css規范

• CSS頁面文件，其文件名與HTML文件名一致；

• 使用soft tab (四個空格)進行縮進；

• 每個屬性生命末尾后都要加分號；

• 注意空格的使用(不在詳解)；

• 注釋統一使用/* */；

• 命名：

  • 依據其內容、功能來命名，而不是其表現形式；
  • 類名使用小寫字母，以中劃線(相比下劃線可少按一次shift)分割；
  • id使用駝峰命名法；
  • 不允許使用拼音；
    • sdfsdf

• 樣式聲明順序按下面的例子做分組處理：

    .declaration-order {
        display: block;
        float: right;
  
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
    
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        width: 100px;
        height: 100px;
    
        font: normal 13px "Helvetica Neue", sans-serif;
        line-height: 1.5;
        text-align: center;
    
        color: #333;
        background-color: #f5f5f5;
    
        opacity: 1;
    }
  

• 盡量將媒體查詢的規則靠近與他們相關的規則，不要將他們一起放到一個獨立的樣式文件中，或者丟在文檔的最底部，這樣做只會讓大家以后更容易忘記他們；

• 避免使用@import指令引入css文件，指令慢，并且增加額外請求；

• 禁止使用！important；

• 屬性值0后不加單位；

• 用border：0代替border：none;

• 盡量少用*選擇器。

圖片規范

• 圖片使用英文字母、數字與下劃線的組合；
• 要盡量壓縮圖片到最小；
• 可使用base64編碼代替較小圖片的鏈接，可以節省一次請求;
• 運用css sprite技術集中小的背景圖或圖標, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線。
• 可用W3C css Validator驗證并規范css代碼；
• 必須為img標簽添加alt屬性；