このドキュメントの目標は、HTML コード スタイルに一貫性を持たせ、理解と保守を容易にすることです。この習慣がない場合は、IDE を慎重に選択し、使用しないでください。 「テキスト」エディタを使用してください。
1.1 インデントと改行
[必須] 4# を使用します## スペースはインデント レベルとして使用されます。2 スペースや tab 文字は使用できません。
<ul>
<li>first</li>
<li>second</li>
</ul>[推奨事項] 各行は 120 文字を超えてはなりません。
1.2 名前付け
[必須] class すべての単語は小文字で、単語の間に ## を入れる必要があります。 #- 分離されました。
class は、対応するモジュールまたはコンポーネントのコンテンツまたは関数を表す必要があり、スタイル情報を使用して名前を付けることはできません。 例:
<!-- good --> <div class="sidebar"></div> <!-- bad --> <div class="left"></div>
id はページ上で一意である必要があります。 説明:
同じページ内の異なる要素に同じ ID が含まれていますが、これは ID の属性の意味に準拠していません。また、document.getElementById を使用すると、追跡が困難な問題が発生する可能性があります。
[提案]id すべての単語を小文字にし、- で区切ることをお勧めします。スタイルは同じプロジェクト内で一貫している必要があります。
id、class 名前は、競合を避け、明確に説明しながら、できるだけ短くする必要があります。 例:
<!-- good --> <div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p class="comment"></p> <!-- bad --> <p class="com"></p> <!-- good --> <span class="author"></span> <!-- bad --> <span class="red"></span>
name と id を使用しないでください。 説明:
IE ブラウザは要素の id 属性と name 属性を混同し、document.getElementById が予期しない要素を取得する可能性があります。したがって、要素の id 属性と name 属性に名前を付けるときは十分に注意する必要があります。
ID と名前に異なる命名規則を使用することをお勧めします。
例:
<input name="foo"> <div id="foo"></div> <script> // IE6 将显示 INPUT alert(document.getElementById('foo').tagName); </script>
1.3 タグ[必須] タグ名には小文字を使用する必要があります。
例:
<!-- good --> <p>Hello StyleGuide!</p> <!-- bad --> <P>Hello StyleGuide!</P>
説明:
自己終了である必要のない一般的なタグには、input、br、img、hr などが含まれます。
例:
<!-- good --> <input type="text" name="title"> <!-- bad --> <input type="text" name="title" />
HTML5で省略できる終了タグについて、終了タグは省略できません。 例:
<ul>
<li>first</li>
<li>second</li>
</ul>
説明:
たとえば、div を p に配置することはできず、tbody を table に配置する必要があります。
例:
<!-- good --> <div><h1><span></span></h1></div> <a href=""><span></span></a> <!-- bad --> <span><div></div></span> <p><div></div></p> <h1><div></div></h1> <h6><div></div></h6> <a href="a.html"><a href="a.html"></a></a>
HTML タグの使用は、タグのセマンティクスに従う必要があります。 #説明:
##h1 ,h2,h3,h4,h5,h6 - 階層タイトル
strong, em - 強調
ins -
## を挿入
<!-- good -->
<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>
<!-- bad -->
<div>
Esprima serves as an important
<span class="strong">building block</span> for some JavaScript language tools.
</div>が同じ要件を達成できる場合、レイアウトにテーブルを使用しないでください。 。
説明: 互換性が許す限り、セマンティックな正確性を可能な限り維持する必要があります。複数の列を含む複雑なフォームなど、グリッドの配置と伸縮性に関する厳密な要件があるシナリオでは例外が許可されます。
[推奨事項] タグの使用はできる限り簡潔にし、不要なタグを減らす必要があります。
例:<!-- good -->
<img class="avatar" src="image.png">
<!-- bad -->
<span class="avatar">
<img src="image.png">
</span>[必須] 属性名には小文字を使用する必要があります。
例:<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table>
一重引用符は使用できず、引用符も使用できません。
例:<!-- good --> <script src="esl.js"></script> <!-- bad --> <script src='esl.js'></script> <script src=esl.js></script>
[提案] ブール型属性の場合は、属性値を追加しないことをお勧めします。
例:<!-- good --> <input type="text" disabled> <input type="checkbox" value="1" checked> <!-- bad --> <input type="text" disabled="disabled"> <input type="checkbox" value="1" checked="checked">
および
data- を付けることをお勧めします。がおすすめ。 。 説明: プレフィックスを使用すると、カスタム プロパティと標準定義のプロパティを区別するのに役立ちます。
<ol data-ui-type="Select"></ol>
[必須] 使用HTML5 の
doctype で標準モードを有効にするには、大文字の DOCTYPE を使用することをお勧めします。 例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html></pre><div class="contentsignin">ログイン後にコピー</div></div>[推奨] IE Edge および Chrome Frame モードを有効にします。 ＃＃＃＃＃＃＃＃＃例：＃＃＃
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
[建议] 在 html 标签上设置正确的 lang 属性。
解释：
有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。
示例：
<html lang="zh-CN">
[建议] 开启双核浏览器的 webkit 内核进行渲染。
解释：
见浏览器内核控制Meta标签说明文档 一文。
示例：
<meta name="renderer" content="webkit">
[建议] 开启浏览器的DNS预获取。
解释：
减少DNS请求次数、对DNS进行预获取。
示例：
<link rel="dns-prefetch" href="//global.zuzuche.com/"> <link rel="dns-prefetch" href="//imgcdn1.zuzuche.com/"> <link rel="dns-prefetch" href="//qiniucdn.com/">
2.2 编码
[强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
解释：
见 HTML5 Charset能用吗 一文。
示例：
<html lang="zh-CN">
......
......