整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
程序開發過程中，我們始終要謹記的一點就是：程序是寫給人看的，不是寫給機器看的。任何項目開發，都必須要考慮到人員迭代，我們不能讓下一個接手你代碼的人，在看到你寫的代碼時會說出這樣的話，“這個代碼是人寫出來的嗎？可讀性太差了”。因此，我們必須遵循一定的規范，讓代碼的可讀性更強。
今天，我們就一起來看下前端開發過程所能涉及到的跟HTML有關的規范問題。
HTML5
在HTML文件中，推薦使用支持HTML5特性的文檔聲明，<!DOCTYPE html>。
首先是在文件的命名上，應當采用駝峰式命名，首字母小寫，后面每個單詞首字母大寫，而且對于具體的文件應當具有語義化，能夠給人一種直觀的感受這個文件的作用是什么。現在前端開發開發過程中都講求模塊化開發，甚至是組件化開發，在文件命名時更應該以模塊名或者組件名來命名。
例如在寫一個AngularJS應用時，由于會涉及到Controller，Service，Filter等概念，我們會分別建立一個文件，假如這個模塊的名字是庫存管理stockManage，我們可以這樣來命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我們所說的語義化指的是使用具有語義化的標簽，在H5中添加了類似于header, nav, article, section, aside, footer等標簽，從單詞的意思上我們也很容易看出標簽的含義。
我們不推薦使用只有div標簽的頁面，例如
不推薦使用
而是應該使用以下這種帶有語義化的標簽。
推薦使用
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和錨點可以非常方便的實現當前頁面間的跳轉，現在越來越多的教程網頁由于是單頁面，經常會用到錨點跳轉。
對錨點知識還不了解的，可以看看我寫的這篇文章《神奇的html錨點，讓你的網頁在內部自由的跳轉》。
今天這篇文章主要總結了前端開發過程中的HTML規范問題，相信大家也或多或少遇到過，希望這篇文章能加深大家的認識。
者：sunshine小小倩
轉發鏈接：https://juejin.im/post/592d4a5b0ce463006b43b6da
使用2個空格縮進
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>.example {
color: blue;
}只允許使用小寫。
所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和CDATA）， 選擇器，特性，特性值（除了字符串）。
<!-- 不推薦 -->
<A HREF="/">Home</A><!-- 推薦 -->
<img src="google.png"
alt="Google">建議刪除行尾白空格。
<!-- 不推薦 -->
<p>What? </p><!-- 推薦 -->
<p>Yes please.</p>如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規則。
<!-- 網頁編碼 -->
<meta charset="utf-8">盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。
注釋是否需要詳盡，取決于項目的復雜程度。
一般單行注釋：
<!-- col -->模塊間注釋：
<!-- news -->
<div class="news">
<h2>News</h2>
<p>...</p>
</div>
<!--/ news -->循環注釋：
<ul>
<!-- loop: new list -->
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
<!-- /loop: new list -->
</ul>cms輸出注釋：
<!-- cms: news list -->
<ul>
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
</ul>
<!-- /cms: news list -->Tab選項卡內容注釋：
<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。
HTML5是目前所有HTML文檔類型中的首選：
<!DOCTYPE html>編寫有效、正確的HTML代碼，否則很難達到性能上的提升。
可以使用一些工具驗證你的代碼，如 W3C HTML validator
根據HTML各個元素的用途而去使用它們。
<!-- 不推薦 -->
<div class="col">
<div class="title">
news</div>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div><!-- 推薦 -->
<div class="col">
<h2 class="title">
news</h2>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>部分標簽說明：
不推薦使用的標簽：
給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標簽，盡可量得加上alt屬性，提供圖片的描述信息）。
<!-- 不推薦 -->
<img src="world.jpg"><!-- 推薦 -->
<img src="world.jpg"
alt="our world images">在樣式表和腳本的標簽中忽略type屬性。
HTML5默認type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。
<!-- 不推薦 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css"
type="text/css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js"
type="text/javascript">
</script><!-- 推薦 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js">
</script>每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。
如上面頁面框架，推薦寫法：
<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
<!-- container -->
<div class="container">
<!--news-->
<div class="news">
<h2>news<h2>
<p>...</p>
</div>
<!--news-->
</div>
<!--/container-->
<!--sidebar-->
<div class="sidebar">
sidebar</div>
<!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。
<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Mobile</a>
</div>
<div class="news">
<div>News</div>
<a href="#">
news list 1</a>
<a href="#">
news list 2</a>
<a href="#">
news list 3</a>
</div><!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
<li><a href="#">
Home</a></li>
<li><a href="#">
News</a></li>
<li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
<h2>News</h2>
<ul>
<li><a href="#">
news list 1</a>
</li>
<li><a href="#">
news list 2</a>
</li>
<li><a href="#">
news list 3</a>
</li>
</ul>
</div>H標簽使用
strong、b使用
將需要加粗的文字使用b標簽來顯示。
將需要強調的文字（主要指包含關鍵詞的信息）使用strong標簽來強調主要內容。
注：b是粗體標簽，屬于實體標簽，它所包圍的字符將被設為bold（粗體）；strong 是加重語氣標簽，屬于邏輯標簽，它的作用是加強字符語氣。
在很多情況下，a都要使用title來說明該鏈接的相關說明或目的意義。
例如：當使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內容是什么；又或者當一個圖片型鏈接出現時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。
注：僅在img里添加alt標簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標移上去顯示提示信息應該用title，嚴謹的寫法是img里加入alt和title這兩個標簽。
代碼保持精簡，最優化，這樣搜索引擎才更喜歡。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
