整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
者：sunshine小小倩
轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/592d4a5b0ce463006b43b6da
程序開發(fā)過程中，我們始終要謹記的一點就是：程序是寫給人看的，不是寫給機器看的。任何項目開發(fā)，都必須要考慮到人員迭代，我們不能讓下一個接手你代碼的人，在看到你寫的代碼時會說出這樣的話，“這個代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規(guī)范，讓代碼的可讀性更強。
今天，我們就一起來看下前端開發(fā)過程所能涉及到的跟HTML有關(guān)的規(guī)范問題。
HTML5
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
首先是在文件的命名上，應當采用駝峰式命名，首字母小寫，后面每個單詞首字母大寫，而且對于具體的文件應當具有語義化，能夠給人一種直觀的感受這個文件的作用是什么。現(xiàn)在前端開發(fā)開發(fā)過程中都講求模塊化開發(fā)，甚至是組件化開發(fā)，在文件命名時更應該以模塊名或者組件名來命名。
例如在寫一個AngularJS應用時，由于會涉及到Controller，Service，F(xiàn)ilter等概念，我們會分別建立一個文件，假如這個模塊的名字是庫存管理stockManage，我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說的語義化指的是使用具有語義化的標簽，在H5中添加了類似于header, nav, article, section, aside, footer等標簽，從單詞的意思上我們也很容易看出標簽的含義。
我們不推薦使用只有div標簽的頁面，例如
不推薦使用
而是應該使用以下這種帶有語義化的標簽。
推薦使用
img標簽是網(wǎng)頁用來顯示照片的標簽，在頁面所有標簽中占據(jù)的比例非常之高，但是在使用img標簽時也有下面需要注意的點。
給定width和height屬性
因為瀏覽器在加載圖片的過程中，需要先下載圖片，然后再解析圖片的高度和寬度，如果不給img元素設(shè)定高度和寬度，這樣在圖片加載過程中會不斷的計算，重排頁面的布局，在網(wǎng)絡(luò)不好的時候就會經(jīng)常出現(xiàn)元素出現(xiàn)不規(guī)律移動的情況。因此給img元素設(shè)定width和height屬性是必要的。
alt屬性
img標簽的alt屬性表示的是在圖片無法顯示時，使用文字來代替顯示，它可以用在以下幾個場景中：
網(wǎng)路延遲太大
src屬性指定路徑出錯
瀏覽器禁用圖像
由于其有良好的信息提示效果，并且有助于網(wǎng)頁SEO效果，強烈建議在img標簽中使用alt屬性。
而且很重要的一點是img標簽的引入是需要呈現(xiàn)出與頁面相關(guān)的內(nèi)容，其他情況應該使用CSS樣式實現(xiàn)。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
前端文件主要包括HTML頁面文件，CSS樣式文件和Javascript腳本文件。我們應該讓三者各司其職，在HTML中不應該出現(xiàn)CSS和JS表達式；在JS文件中，不應該出現(xiàn)大量的HTML和CSS代碼。在HTML文檔中應當盡量少的引入CSS和JS文件。為了保證文件的純凈，我們應當遵循下面的原則。
一個HTML文件應該只引入一個CSS文件
合理運用JS合并技術(shù)（Gulp, Webpack插件），保證引入JS文件不多于兩個
不使用行內(nèi)腳本元素（<script>alert('Hello World')</script>）
不在標簽上使用style內(nèi)聯(lián)樣式
不要使用style屬性
腳本加載在網(wǎng)頁加載過程中是一個很耗性能的過程，如果把JS文件放在head標簽里，它的加載會一直阻塞DOM的解析，造成頁面延遲。
因此現(xiàn)在講求的是腳本的異步加載過程，我們會使用到async關(guān)鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點可以非常方便的實現(xiàn)當前頁面間的跳轉(zhuǎn)，現(xiàn)在越來越多的教程網(wǎng)頁由于是單頁面，經(jīng)常會用到錨點跳轉(zhuǎn)。
對錨點知識還不了解的，可以看看我寫的這篇文章《神奇的html錨點，讓你的網(wǎng)頁在內(nèi)部自由的跳轉(zhuǎn)》。
今天這篇文章主要總結(jié)了前端開發(fā)過程中的HTML規(guī)范問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認識。
程序開發(fā)過程中，我們始終要謹記的一點就是：程序是寫給人看的，不是寫給機器看的。任何項目開發(fā)，都必須要考慮到人員迭代，我們不能讓下一個接手你代碼的人，在看到你寫的代碼時會說出這樣的話，“這個代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規(guī)范，讓代碼的可讀性更強。
今天，我們就一起來看下前端開發(fā)過程所能涉及到的跟HTML有關(guān)的規(guī)范問題。
HTML5
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
首先是在文件的命名上，應當采用駝峰式命名，首字母小寫，后面每個單詞首字母大寫，而且對于具體的文件應當具有語義化，能夠給人一種直觀的感受這個文件的作用是什么。現(xiàn)在前端開發(fā)開發(fā)過程中都講求模塊化開發(fā)，甚至是組件化開發(fā)，在文件命名時更應該以模塊名或者組件名來命名。
例如在寫一個AngularJS應用時，由于會涉及到Controller，Service，F(xiàn)ilter等概念，我們會分別建立一個文件，假如這個模塊的名字是庫存管理stockManage，我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說的語義化指的是使用具有語義化的標簽，在H5中添加了類似于header, nav, article, section, aside, footer等標簽，從單詞的意思上我們也很容易看出標簽的含義。
我們不推薦使用只有div標簽的頁面，例如
不推薦使用
而是應該使用以下這種帶有語義化的標簽。
推薦使用
img標簽是網(wǎng)頁用來顯示照片的標簽，在頁面所有標簽中占據(jù)的比例非常之高，但是在使用img標簽時也有下面需要注意的點。
給定width和height屬性
因為瀏覽器在加載圖片的過程中，需要先下載圖片，然后再解析圖片的高度和寬度，如果不給img元素設(shè)定高度和寬度，這樣在圖片加載過程中會不斷的計算，重排頁面的布局，在網(wǎng)絡(luò)不好的時候就會經(jīng)常出現(xiàn)元素出現(xiàn)不規(guī)律移動的情況。因此給img元素設(shè)定width和height屬性是必要的。
alt屬性
img標簽的alt屬性表示的是在圖片無法顯示時，使用文字來代替顯示，它可以用在以下幾個場景中：
網(wǎng)路延遲太大
src屬性指定路徑出錯
瀏覽器禁用圖像
由于其有良好的信息提示效果，并且有助于網(wǎng)頁SEO效果，強烈建議在img標簽中使用alt屬性。
而且很重要的一點是img標簽的引入是需要呈現(xiàn)出與頁面相關(guān)的內(nèi)容，其他情況應該使用CSS樣式實現(xiàn)。例如我們不推薦下面這種情況。
不推薦
而推薦使用下面這種情況
推薦使用
前端文件主要包括HTML頁面文件，CSS樣式文件和Javascript腳本文件。我們應該讓三者各司其職，在HTML中不應該出現(xiàn)CSS和JS表達式；在JS文件中，不應該出現(xiàn)大量的HTML和CSS代碼。在HTML文檔中應當盡量少的引入CSS和JS文件。為了保證文件的純凈，我們應當遵循下面的原則。
一個HTML文件應該只引入一個CSS文件
合理運用JS合并技術(shù)（Gulp, Webpack插件），保證引入JS文件不多于兩個
不使用行內(nèi)腳本元素（<script>alert('Hello World')</script>）
不在標簽上使用style內(nèi)聯(lián)樣式
不要使用style屬性
腳本加載在網(wǎng)頁加載過程中是一個很耗性能的過程，如果把JS文件放在head標簽里，它的加載會一直阻塞DOM的解析，造成頁面延遲。
因此現(xiàn)在講求的是腳本的異步加載過程，我們會使用到async關(guān)鍵字，考慮到瀏覽器的兼容性，我們推薦使用下面的方式加載腳本。
推薦方式
合理使用ID和錨點可以非常方便的實現(xiàn)當前頁面間的跳轉(zhuǎn)，現(xiàn)在越來越多的教程網(wǎng)頁由于是單頁面，經(jīng)常會用到錨點跳轉(zhuǎn)。
對錨點知識還不了解的，可以看看我寫的這篇文章《神奇的html錨點，讓你的網(wǎng)頁在內(nèi)部自由的跳轉(zhuǎn)》。
今天這篇文章主要總結(jié)了前端開發(fā)過程中的HTML規(guī)范問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認識。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
