最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

如何寫出高效率的HTML_html/css_WEB-ITnose

來源：懂視網(wǎng) 責編：小采 時間：2020-11-27 16:04:14
文檔

如何寫出高效率的HTML_html/css_WEB-ITnose

如何寫出高效率的HTML_html/css_WEB-ITnose:如何寫出高效率的HTML 個人翻譯，歡迎轉(zhuǎn)載！ 英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/ 第一次翻譯國外的博文，有什么意見和建議歡迎提出！ 我們該如何提升網(wǎng)頁的性能 看到這個問題時，大多數(shù)開發(fā)者會想到圖片優(yōu)化、
推薦度：
導讀如何寫出高效率的HTML_html/css_WEB-ITnose:如何寫出高效率的HTML 個人翻譯，歡迎轉(zhuǎn)載！ 英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/ 第一次翻譯國外的博文，有什么意見和建議歡迎提出！ 我們該如何提升網(wǎng)頁的性能 看到這個問題時，大多數(shù)開發(fā)者會想到圖片優(yōu)化、

Web三基友

HTML的含義應該不多解釋了，請自行百度百科。
首先要說的是，HTML和CSS兩兄弟雖然彼此充滿基情，但是也不能把關系搞得太復雜，樣式由CSS來控制就夠了，不要用HTML元素來強行獲取想要的樣式，比如不要僅僅為了使文字變大而使用

、

、

這些標題標簽，也不要僅僅為了縮進而使用標簽。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默認樣式表，HTML元素默認的顯示方式都是由這些默認樣式表來決定的。比如，Chrome中

默認的樣式是32px bold，字體是Times.
基友三原則：

  • HTML用于建立結構，CSS用于渲染樣式，JavaScript用于控制行為；
  • 首先完成HTML的設計，然后根據(jù)樣式需求來設計CSS，最后在確實需要的情況下才設計JavaScript；
  • 將CSS和JavaScript文件進行歸檔，與HTML文件分開（這樣不僅有助于頁面緩存，而且可以使后期Debug更容易），這之后再把CSS和JavaScript鏈接到HTML中，可以根據(jù)需要來對CSS和JavaScript代碼進行壓縮加密。

    • 結構的搭建

    HTML在結構上搭建上需要注意這些：

  • 采用HTML5標準時開頭應該加上，像這樣：

      Recipes: pesto   
    Pesto
     
    Pesto is good!

  • 應在head標簽中引入CSS文件，這樣瀏覽器就可以在輸出HTML之前獲取CSS信息：

     My pesto recipe

  • 在標簽的末尾引入JavaScript文件，這樣可以在頁面顯示之后再編譯JavaScript文件，以加快頁面讀取速度，同時有助于JavaScript對頁面中的元素進行操作，像這樣：

     ... 
    javascriptinit(); var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo();

    • 代碼校驗

    雖然現(xiàn)在瀏覽器的容錯力越來越高，但這不能成為代碼粗制濫造的借口。不管什么時候，正確的HTML代碼都更易于debug、體積更小、運行更快、渲染時消耗資源更少，而錯誤的HTML代碼只會使頁面的最終設計難以實現(xiàn)想要的效果。特別是在使用模板來開發(fā)時，正確有效的HTML就更顯得尤為重要，也許一個正常運行的模塊會在其他環(huán)境中出現(xiàn)可怕的異常。
    如何才能提高HTML的正確性呢？可以有這些方式：

  • 在項目中加入校驗過程：可以在代碼編輯器中使用HTMLHint、SublimeLinter這類代碼校驗插件，也可以在build的時候使用HTMLHint with Grunt這類校驗工具，還可以通過W3C HTML validator等網(wǎng)站來在線檢測代碼；
  • 盡量采用HTML5標準；

  • 確保正確的HTML層級：嵌套元素時確保元素首尾完整，在一個有大量內(nèi)容的元素的結束標簽后應添加注釋，這樣有助于后期debug，特別是在使用模板的時候，如下所示：

     ...

  • 在所有不能自動結束的元素末尾添加結束標簽；

  • 比如這個例子，這樣寫也可以可以正常運行：
    • Pesto is good to eat...
    ...and pesto is easy to make.
  • 不過還是下面這樣比較不容易出錯：
    • Pesto is good to eat...
    ...and pesto is easy to make.

    • 結束標簽不是必須的，所以有些人認為可以不寫，這可以接受，但是和標簽一定要加：

     
  • Basil 
  • Pine nuts 
  • Garlic

    • 另一方面，要去掉冗余代碼：

  • 像和這一類元素可以不加結束標簽;

  • 布爾型的屬性可以不賦值，只要該屬性出現(xiàn)，值就為true；

  • 下面這樣是可以運行的（沒有加autoplay和controls）：
  • 這樣就不能運行，因為這兩個屬性值必須是true：
  • 這樣改一下就可以運行了：
  • 這樣寫會更易讀：
  • CSS和 JavaScript鏈接不需要type屬性，他們就是他們；

  • 外部鏈接可以省略協(xié)議部分（如http,ftp），這樣可以避免內(nèi)容太長而引起問題。像這樣寫是可以的：

    Tag soup

    • 良好的代碼排版

    保持一致的代碼排版可以使HTML代碼更易于理解、優(yōu)化和debug，要做到良好的代碼排版應注意以下這幾點：

  • 在項目中保持統(tǒng)一的HTML代碼風格；
  • 使用代碼編輯器來幫助你自動排版，比如在Sublime Text中可以使用自帶的Reindent，也可以找一些自動排版插件來幫助你。同樣也可以使用一些在線工具比如CSS Beautifier和JS Beautifier；
  • 在HTML中用縮進來分層更易于閱讀，如果代碼編輯器沒有自動縮進功能的話可以自行修改相應的設置。當你發(fā)現(xiàn)你的HTML層級過深的時候，那就表示你需要重構一下你的HTML了；
  • 縮進可以通過空格或者Tab來實現(xiàn)，但一定不要兩者同時使用；

  • 用更直接易讀的方式寫HTML代碼，比如這句話，就可以很明顯的看出這是個標題：

    Contact

    這樣寫的話就更像是一個鏈接：

    Contact
  • 元素要按常規(guī)放置，比如footer元素最好是放在HTML頁面的底部，雖然理論上把它放在任何地方都可以正常運行；
  • 統(tǒng)一所有引號的使用規(guī)則，不要這里用雙引號，那里又單引號；

  • 使用小寫字母來寫標簽和屬性，大寫字母很不易讀，像這樣：

    Home

    混合式的寫法簡直就是反人類：

    Pesto

    • 語義化設計

    語義化的意思是從名稱一眼就能看出其內(nèi)容和作用是什么，HTML的標簽就是通過使用淺顯易懂的元素名和屬性名來實現(xiàn)語義化的。HTML5又引進了一些新的語義化元素，比如

    ,