HTMLのコーディング規則ブートストラップ2024 年の最新の入門チュートリアル。このコースでは 文法,HTML5のDOCTYPE,Languageプロパティ,IE互換モード,文字コード,CSSとJavaScriptファイルの導入,実用的には王であります,属性の順序,ブール(ブール値)type属性,ラベルの数を減らして,JavaScriptが生成されたラベル, について学習できます。
</li>
または</body>
)。 例:
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </body> </html>
標準モード(標準モード)ステートメントを追加したHTMLページの最初の行ごとに、これを使用すると、各ブラウザで一貫性のあるディスプレイを持っていることを確認することができます。
例:
<!DOCTYPE html> <html> <head> </head> </html>
HTML5仕様に従って:
強く文書の正しい言語を設定するように、htmlのルート要素をlang属性を指定することをお勧めします。 これは、翻訳ツールがというようにルールとを遵守する必要があり、その翻訳を判断するのに役立ちます、自分の発音を決定するために使用されるべき音声合成ツールに役立ちます。
もっと上のlang
から知識を属性この仕様を理解します。
ここに言語コードテーブルが 。
<html lang="zh-CN"> <!-- ja. --> </html>
特定を通じてIEのサポート<meta>
IEのレンダリングページの現在のバージョンを確認するためにタグを使用する必要があります。 強い特別なニーズがある場合を除き、それ以外の場合は、それによってそれがサポートする最新のモデルを使用してIEを通知、エッジモードを設定することが最善です。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
明示的に文字エンコーディングを宣言することで、ブラウザが迅速に確保し、簡単にページコンテンツのレンダリングを決定することができます。 この利点は、ドキュメント全体のエンコーディング(一般的にUTF-8エンコーディングを使用)と一致しているHTML内の文字エンティティマーク(文字エンティティ)の使用を避けることです。
<head> <meta charset="UTF-8"> </head>
HTML5仕様によると、CSSおよびJavaScriptファイルの導入時には、一般的に指定する必要はありませんtype
などの属性をtext/css
とtext/javascript
そのデフォルト値です。
<!-- External CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* ja. */ </style> <!-- JavaScript --> <script src="code-guide.js"></script>
価格のための実用性を犠牲にしてHTML標準と意味ではなく、に従うようにしてください。 最小限のラベルを持つと複雑さの最小値を維持することが可能任意の時間。
HTML属性は、コードの可読性を確保するために、下記の順に優先度の高い順にする必要があります。
class
id
、 name
data-*
src
、 for
、 type
、 href
title
、 alt
aria-*
、 role
クラスは非常に再利用可能なコンポーネントを識別するために使用され、したがって、上部にあるべきです。 idは、特定のコンポーネントを識別するために使用されている(例えば、ページ内のブックマークなど)慎重に使用する必要があり、それは第二位になりました。
<a class="ja." id="ja." data-modal="toggle" href="#"> Example link </a> <input class="form-control" type="text"> <img src="ja." alt="ja.">
ブール属性は宣言の時点で譲渡することはできません。 その割り当てのためのXHTMLの仕様が、HTML5仕様は必要ありません。
詳細については、を参照してくださいブールON WHATWG sectionTop属性 :
何の値がfalseでない場合、値がtrueの場合、要素の属性ブール。
あなたは値を割り当てる必要がある場合は 、WHATWG仕様を参照してください。
属性が存在する場合、その値は空の文字列でなければなりませんか[ja.]正規名属性、および最初と最後に空白を追加しないでください。
単に、それが割り当てられていません。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
不要な親要素を回避するためにHTMLコードを記述する場合。 多くの場合、これは達成するために反復的再構成を必要とします。 次のケースを考えてみます。
<!-- Not so great --> <span class="avatar"> <img src="ja."> </span> <!-- Better --> <img class="avatar" src="ja.">
タグは、コンテンツは、検索、編集、及び性能を低下させることが困難になるようにするJavaScriptによって生成されます。 避けるようにしないようにしてください。