前端開發過程中的HTML規範，來學習一下吧
前言
程序開發過程中，我們始終要謹記的一點就是：程序是寫給人看的，不是寫給機器看的。任何項目開發，都必須要考慮到人員迭代，我們不能讓下一個接手你代碼的人，在看到你寫的代碼時會說出這樣的話，“這個代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規範，讓代碼的可讀性更強。
今天，我們就一起來看下前端開發過程所能涉及到的跟HTML有關的規範問題。
HTML5
文檔類型
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
命名規範
首先是在文件的命名上，應當採用駝峰式命名，首字母小寫，後面每個單詞首字母大寫，而且對於具體的文件應當具有語義化，能夠給人一種直觀的感受這個文件的作用是什麼。現在前端開發開發過程中都講求模塊化開發，甚至是組件化開發，在文件命名時更應該以模塊名或者組件名來命名。
例如在寫一個AngularJS應用時，由於會涉及到Controller，Service，Filter等概念，我們會分別建立一個文件，假如這個模塊的名字是庫存管理stockManage，我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
語義化
我們所說的語義化指的是使用具有語義化的標籤，在H5中添加了類似於header, nav, article, section, aside, footer等標籤，從單詞的意思上我們也很容易看出標籤的含義。
我們不推薦使用只有div標籤的頁面，例如
不推薦使用
而是應該使用以下這種帶有語義化的標籤。
推薦使用
img標籤
img標籤是網頁用來顯示照片的標籤，在頁面所有標籤中佔據的比例非常之高，但是在使用img標籤時也有下面需要注意的點。
給定width和height屬性
因為瀏覽器在加載圖片的過程中，需要先下載圖片，然後再解析圖片的高度和寬度，如果不給img元素設定高度和寬度，這樣在圖片加載過程中會不斷的計算，重排頁面的佈局，在網絡不好的時候就會經常出現元素出現不規律移動的情況。因此給img元素設定width和height屬性是必要的。
alt屬性
img標籤的alt屬性表示的是在圖片無法顯示時，使用文字來代替顯示，它可以用在以下幾個場景中：
網路延遲太大
src屬性指定路徑出錯
瀏覽器禁用圖像
由於其有良好的信息提示效果，並且有助於網頁SEO效果，強烈建議在img標籤中使用alt屬性。
而且很重要的一點是img標籤的引入是需要呈現出與頁面相關的內容，其他情況應該使用CSS樣式實現。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
文件分離
前端文件主要包括HTML頁面文件，CSS樣式文件和Javascript腳本文件。我們應該讓三者各司其職，在HTML中不應該出現CSS和JS表達式；在JS文件中，不應該出現大量的HTML和CSS代碼。在HTML文檔中應當儘量少的引入CSS和JS文件。為了保證文件的純淨，我們應當遵循下面的原則。
一個HTML文件應該只引入一個CSS文件
合理運用JS合併技術（Gulp, Webpack插件），保證引入JS文件不多於兩個
不使用行內腳本元素（<script>alert('Hello World')</script>）
不在標籤上使用style內聯樣式
不要使用style屬性
腳本加載
腳本加載在網頁加載過程中是一個很耗性能的過程，如果把JS文件放在head標籤裡，它的加載會一直阻塞DOM的解析，造成頁面延遲。
因此現在講求的是腳本的異步加載過程，我們會使用到async關鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點
合理使用ID和錨點可以非常方便的實現當前頁面間的跳轉，現在越來越多的教程網頁由於是單頁面，經常會用到錨點跳轉。
對錨點知識還不瞭解的，可以看看我寫的這篇文章《神奇的html錨點，讓你的網頁在內部自由的跳轉》。
總結
今天這篇文章主要總結了前端開發過程中的HTML規範問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認識。
相關推薦
