HTML 注釋規(guī)范

遵循標準

HTML注釋規(guī)范寫法應該遵循以下標準：

Comments must start with the four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS ( ” (U+003E) character, nor start with a U+002D HYPHEN-MINUS character (-) followed by a “>” (U+003E) character, nor contain two consecutive U+002D HYPHEN-MINUS characters (–), nor end with a U+002D HYPHEN-MINUS character (-). Finally, the comment must be ended by the three character sequence U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN (–>).

• 必須以4個有序字符開始：編碼為 U+003C LESS-THAN SIGN 的小于號, 編碼為 U+0021 EXCLAMATION MARK 的感嘆號, 編碼為 U+002D HYPHEN-MINUS 橫線, 編碼為 U+002D HYPHEN-MINUS橫線 ，即 “<!–”
• 在此之后是注釋內容，注釋的內容有以下限制：不能以單個 “>” (U+003E) 字符開始不能以由 “-“（U+002D HYPHEN-MINUS）和 ”>” (U+003E) 組合的字符開始，即 “->”不能包含兩個連續(xù)的 U+002D HYPHEN-MINUS 字符，即 “–”不能以一個 U+002D HYPHEN-MINUS 字符結束，即 “-”
• 必須以3個有序字符結束：U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN，即 “–>”

標準寫法：

<!--Comment Text-->

錯誤的寫法：

<!-->The Wrong Comment Text-->
?
<!--->The Wrong Comment Text-->
?
<!--The--Wrong--Comment Text-->
?
<!--The Wrong Comment Text--->

參考 www.w3.org #Comments

團隊約定

單行注釋

一般用于簡單的描述，如某些狀態(tài)描述、屬性描述等

注釋內容前后各一個空格字符，注釋位于要注釋代碼的上面，單獨占一行

推薦：

<!-- Comment Text -->
<div>...</div>

不推薦：

<div>...</div><!-- Comment Text --> 
    
<div><!-- Comment Text -->
    ...
</div>

模塊注釋

一般用于描述模塊的名稱以及模塊開始與結束的位置

注釋內容前后各一個空格字符，<!-- S Comment Text --> 表示模塊開始，<!-- E Comment Text --> 表示模塊結束，模塊與模塊之間相隔一行

推薦寫法：

<!-- S Comment Text A -->   
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
    
<!-- S Comment Text B -->   
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

不推薦寫法：

<!-- S Comment Text A -->
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->   
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

嵌套模塊注釋

當模塊注釋內再出現(xiàn)模塊注釋的時候，為了突出主要模塊，嵌套模塊不再使用

<!-- S Comment Text -->
<!-- E Comment Text -->

而改用

<!-- /Comment Text -->

注釋寫在模塊結尾標簽底部，單獨一行。

<!-- S Comment Text A -->
<div class="mod_a">
        
    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->
        
    <div class="mod_c">
        ...
    </div>
    <!-- /mod_c -->
        
</div>
<!-- E Comment Text A -->