前端開發過程中的HTML規範，來學習一下吧

前言

程序開發過程中，我們始終要謹記的一點就是：程序是寫給人看的，不是寫給機器看的。任何項目開發，都必須要考慮到人員迭代，我們不能讓下一個接手你代碼的人，在看到你寫的代碼時會說出這樣的話，「這個代碼是人寫出來的嗎？可讀性太差了」。因此，我們必須遵循一定的規範，讓代碼的可讀性更強。

今天，我們就一起來看下前端開發過程所能涉及到的跟HTML有關的規範問題。

HTML5

文檔類型

在HTML文件中，推薦使用支持HTML5特性的文檔聲明，。

可以加裙六二三九六六八零六 還有大神解答問題分享學習資料

命名規範

首先是在文件的命名上，應當採用駝峰式命名，首字母小寫，後面每個單詞首字母大寫，而且對於具體的文件應當具有語義化，能夠給人一種直觀的感受這個文件的作用是什麼。現在前端開發開發過程中都講求模塊化開發，甚至是組件化開發，在文件命名時更應該以模塊名或者組件名來命名。

例如在寫一個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文件不多於兩個

不使用行內腳本元素（）

不在標籤上使用style內聯樣式

不要使用style屬性

腳本載入

腳本載入在網頁載入過程中是一個很耗性能的過程，如果把JS文件放在head標籤里，它的載入會一直阻塞DOM的解析，造成頁面延遲。

因此現在講求的是腳本的非同步載入過程，我們會使用到async關鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式載入腳本。

推薦方式

合理使用ID和錨點

合理使用ID和錨點可以非常方便的實現當前頁面間的跳轉，現在越來越多的教程網頁由於是單頁面，經常會用到錨點跳轉。

如果你你熱愛WEB前端，熱愛這個行業就應該持續走下去，如果你看到這裡歡迎一起來學習交流

可以加裙六二三九六六八零六 還有大神解答問題分享學習資料

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！