HTML コーディング規約
多くの Web 開発者は、HTML コーディング規約についてほとんど知りません。
2000 年から 2010 年にかけて、多くの Web 開発者が HTML から XHTML に変換しました。
XHTML を使用する開発者は、より優れた HTML 記述標準を徐々に開発してきました。
HTML5 については、より良いコード標準を形成する必要があります。以下にいくつかの標準的な提案を示します。
正しい文書タイプを使用してください
文書タイプ宣言は HTML 文書の最初の行にあります:
<!DOCTYPE html>
他のタグと同様に使用してください。 小文字の場合は、次のコードを使用できます:
<!doctype html>
要素名には小文字を使用してください
HTML5 要素名には大文字と大文字を使用できます。小文字。
小文字の使用を推奨します:
大文字と小文字のスタイルを混在させると非常に良くありません。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルがより爽やかに見えます。
小文字は書きやすいです。
非推奨:
<SECTION>
<p>これは段落です。 </p>
</p></SECTION>
推奨:
非推奨:<section>
<p>これは段落です。 </p>< ですが、すべての要素に終了タグを追加することをお勧めします。<section> <p>これは段落です。 <p>これは段落です。 </section>
推奨:
<section><p>これは段落です。 </p> <p>これは段落です。 </p>
</section>空の HTML 要素を閉じる
HTML5 では、空の HTML 要素を閉じる必要はありません:次のように書くことができます:
< ;meta charset="utf-8">
は次のように書くこともできます:<meta charset="utf-8" />
XHTML および XML の斜体(/) が必要です。 XML ソフトウェアがページを使用することが予想される場合は、このスタイルを使用するのが最適です。属性名は小文字を使用する
HTML5 属性名では、大文字と小文字を使用できます。
属性名には小文字を使用することをお勧めします:
同時に大文字を使用するのは非常に悪い習慣です。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルがより爽やかに見えます。
小文字は書きやすいです。
非推奨:
<div CLASS="menu">
推奨: div class="メニュー">
属性値
HTML5の属性値は引用符なしで使用できます。 属性値には引用符を使用することをお勧めします:
属性値にスペースが含まれる場合は、引用符を使用する必要があります。
スタイルを混合することはお勧めできません。スタイルを統一することをお勧めします。
- 属性値は引用符を使用すると読みやすくなります。
- 次のインスタンス属性値にはスペースが含まれており、引用符が使用されていないため、機能しません:
- <table class=table Striped>
以下では二重引用符が使用されていますが、これは正しいです。 :<table class="table Striped">
画像の属性
画像は通常、alt属性を使用します。 画像が表示できない場合、画像表示を代替することができます。 <img src="html5.gif" alt="HTML5" >
画像のサイズを定義し、ちらつきを減らすためにロード時に指定されたスペースを確保します。<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
スペースと等号
等号の前後にスペースを使用できます。
<link rel = "stylesheet" href = "styles.css">
ただし、スペースは少なくすることをお勧めします:
<link rel="stylesheet" href="styles.css ">
長すぎるコード行は避けてください
HTMLエディターを使用する場合、コードを左右にスクロールするのは不便です。
コードの各行は 80 文字未満に抑えるようにしてください。
空白行とインデント
理由もなく空白行を追加しないでください。
読みやすくするために、各論理関数ブロックに空白行を追加します。
インデントには 2 つのスペースを使用します。TAB は推奨されません。
短いコードの間に不必要な空白行やインデントを使用しないでください。
不要な空白行とインデント:
<body>
<h1>php中文网</h1>
<h2>HTML</h2>
<p> ;
php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。
php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。
php中文网、あなたが学ぶのは技術だけではなく、夢でもあります。
php中文网、あなたは技術だけでなく、夢も学びます。
</p>
</body>おすすめ:
<tr>A</td><body>
</tr>
<h1>php 中国語ウェブサイト</h1>
<h2></h2>
<p>php 中国語ウェブサイト、あなたが学ぶのはテクノロジーだけではなく、夢 。
php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。
php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。
php 中国語のウェブサイト、あなたが学ぶのは技術だけではなく、夢でもあります。 </p>
</body> gt; <th> ;説明</th>;tr> <ol>
<li>London</li><li>Paris</li><html> と <body> を省略しますか?
標準 HTML5 、< ;html>タグとタグは省略できます。
次の HTML5 ドキュメントは正しいです:<!DOCTYPE html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <h1>这是一个标题</h1> <p>这是一个段落。</p>
プログラムを実行して試してください
<html> タグと <body> タグを省略することはお勧めできません。
<html> 要素はドキュメントのルート要素であり、ページの言語を記述するために使用されます:<!DOCTYPE html><html lang="zh">
宣言言語は、スクリーン リーダーや検索エンジンに便利です。<head>を省略しますか?<html> または <body> を省略すると、DOM および XML ソフトウェアがクラッシュします。
<body> を省略すると、古いブラウザ (IE9) でエラーが発生します。
標準の HTML5 では、<head> タグは省略できます。
デフォルトでは、ブラウザはデフォルトの <head> 要素の前にコンテンツを追加します。
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <body> <p id="Demo">段落 1。</p> <p id="demo">段落 2。</p> <script> // 只有段落 2 会被替换 document.getElementById("demo").innerHTML = "HELLO。"; </script> </body> </html>プログラムを実行して試してください
ヒント: ここで head タグを省略することはお勧めできません。
ソースデータHTML5 タイトル名はページのテーマを表します:
<title>php 中国語のウェブサイト</title>タイトルと言語により、検索エンジンはページのトピックをすぐに理解できます:
<!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF -8">
<title>php 中国のウェブサイト</title>
</head>HTMLコメント
コメントは<!--と-で書くことができます-> 内:<!-- これはコメントです -->長いコメントは <!-- と --> で別々の行に書くことができます:
<!--これは長いコメントです。 これは長いレビューです。これは長いレビューです。 これは長いレビューです これは長いレビューです。 これは長いレビューです。
長いコメントの最初の文字はスペース2つでインデントされ、読みやすくなります。
-->スタイルシートスタイルシートは簡潔な構文形式を使用します(type属性は必要ありません):
<link rel="stylesheet" href="styles.css">短いルールは 1 行で書くことができます:
p.into {font-family: Verdana; font-size: 16em;}長いルールは複数行で書くことができます:
body {
background-color: lightgrey;
font-family: "Arial Black"、Helvetica、sans-serif;
font-size: 16em;
color: black;
}
左中括弧はセレクターと同じ行に配置されます。
左中括弧とセレクターの間にスペースを追加します。
インデントにはスペースを 2 つ使用します。
コロンと属性値の間にスペースを追加します。
カンマと記号の後にスペースを使用してください。
各属性と値の末尾に記号を使用します。
属性値にスペースが含まれる場合にのみ引用符を使用します。
右中括弧を新しい行に置きます。
1 行あたり最大 80 文字。
一般的なルールは、カンマとセミコロンの後にスペースを追加することです。
HTMLにJavaScriptをロードします
外部スクリプトファイルをロードするには簡潔な構文を使用します(type属性は必要ありません):
<scriptsrc. js」 >
JavaScript を使用して HTML 要素にアクセスする
HTML 形式が不適切であると、JavaScript 実行エラーが発生する可能性があります。
HTML 内の JavaScript は、同じ命名規則を使用しようとします。
JavaScript コード仕様にアクセスします。
ファイル名は小文字を使用してください
ほとんどの Web サーバー (Apache、Unix) では大文字と小文字が区別されます。London.jpg を介して london.jpg にアクセスすることはできません。
他の Web サーバー (Microsoft、IIS) は大文字と小文字を区別しません。london.jpg には、London.jpg または london.jpg 経由でアクセスできます。
一貫したスタイルを維持する必要があり、小文字のファイル名を一律に使用することをお勧めします。
ファイル拡張子
HTML ファイルの拡張子は .html (または .htm) です。
CSS ファイルの拡張子は .css です。
JavaScript ファイルの拡張子は .js です。
.htm と .html の違い
拡張子ファイル .htm と .html には基本的に違いはありません。ブラウザーと Web サーバーは両方とも、これらを HTML ファイルとして扱います。
の違いは次のとおりです:
.htm は初期の DOS システムで使用されており、現在システムには 3 文字しかありません。
Unix システムのサフィックスには特別な制限はなく、一般に .html が使用されます。
技術的な違い
URLでファイル名が指定されていない場合(http://www.php.cn/css/など)、サーバーはデフォルトのファイル名を返します。 。通常、デフォルトのファイル名は、index.html、index.htm、default.html、default.htm です。
サーバーがデフォルトのファイルとして「index.html」のみを使用して構成されている場合は、ファイルに「index.htm」ではなく「index.html」という名前を付ける必要があります。
ただし、通常、サーバーは複数のデフォルトファイルを設定できますが、必要に応じてデフォルトファイルを設定できますか。
とにかく、HTMLの完全な接尾辞は「.html」です。
次のセクション