HTML コーディング規約
多くの Web 開発者は、HTML コーディング規約についてほとんど知りません。
2000 年から 2010 年にかけて、多くの Web 開発者が HTML から XHTML に変換しました。
XHTML を使用する開発者は、より優れた HTML 記述標準を徐々に開発してきました。
HTML5 については、より良いコード標準を形成する必要があります。以下にいくつかの標準的な提案を示します。
正しい文書タイプを使用してください
文書タイプ宣言は HTML 文書の最初の行にあります:
<!DOCTYPE html>
他のタグと同様に小文字を使用したい場合は、次のコード:
< ;!doctype html>
要素名には小文字を使用します
HTML5 要素名には大文字と小文字を使用できます。
小文字の使用を推奨します:
大文字と小文字が混在したスタイルは非常に悪いです。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルはより爽やかに見えます。
小文字は書きやすいです。
非推奨:
<SECTION> <p>这是一个段落。</p> </SECTION>
非常に悪い:
<Section> <p>这是一个段落。</p> </SECTION>
推奨:
<section> <p>这是一个段落。</p> </section>
すべてのHTML要素を閉じる
HTML5では、必ずしもすべての要素を閉じる必要はありません(例: <p>要素)) ですが、すべての要素に終了タグを追加することをお勧めします。
非推奨:
<section> <p>这是一个段落。 <p>这是一个段落。 </section>
推奨:
<section> <p>这是一个段落。</p> <p>这是一个段落。</p> </section>
空のHTML要素を閉じる
HTML5では、空のHTML要素を閉じる必要はありません:
次のように書くこともできます:
<meta charset="utf-8">
write:
<meta charset="utf-8" />
XHTML および XML ではスラッシュ (/) が必要です。
XML ソフトウェアがページを使用することが予想される場合は、このスタイルを使用するのが最適です。
属性名は小文字を使用する
HTML5 属性名では、大文字と小文字を使用できます。
属性名には小文字を使用することをお勧めします:
同時に大文字を使用するのは非常に悪い習慣です。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルはより爽やかに見えます。
小文字は書きやすいです。
非推奨:
<div CLASS="menu">
推奨:
<div class="menu">
属性値
HTML5 属性値は引用符なしで使用できます。
属性値には引用符を使用することをお勧めします:
属性値にスペースが含まれる場合は、引用符を使用する必要があります。
スタイルを混合することはお勧めできません。スタイルを統一することをお勧めします。
属性値は引用符を使用すると読みやすくなります。
次のインスタンス属性値にはスペースが含まれており、引用符が使用されていないため、機能しません:
<table class=table Striped>
以下では二重引用符が使用されていますが、これは正しいです:
<table class="テーブルストライプ">
画像プロパティ
画像には通常 alt 属性が使用されます。 画像が表示できない場合、画像表示を代替することができます。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
画像のサイズを定義し、読み込み時にちらつきを減らすために指定されたスペースを確保します。
<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>相思</h1> <h2>HTML</h2> <p> 红豆生南国，春来发几枝。 愿君多采撷，此物最相思。 </p> </body>
推奨:
<body> <h1>相思</h1> <h2></h2> <p>红豆生南国，春来发几枝。 愿君多采撷，此物最相思。</p> </body>
テーブルの例:
<table> <tr> <th>Name</th> <th>Description</th> </tr> <tr> <td>A</td> <td>Description of A</td> </tr> <tr> <td>B</td> <td>Description of B</td> </tr> </table>
リストの例:
<ol> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ol>
<html>と<body>を省略します?
標準のHTML5では、<html> <body> タグは省略できます。
次の HTML5 ドキュメントは正しいです:
例:
<!DOCTYPE html> <head> <title>网页标题</title> </head> <h1>标题</h1> <p>段落。</p>
<html> タグと <body> タグを省略することはお勧めできません。
<html> 要素はドキュメントのルート要素であり、ページの言語を記述するために使用されます:
<!DOCTYPE html>
<html lang="zh">
宣言された言語スクリーン リーダーと検索エンジンの便宜のためです。
<html> または <body> を省略すると、DOM および XML ソフトウェアがクラッシュします。
<body> を省略すると、古いブラウザ (IE9) でエラーが発生します。
<head> を省略しますか?
標準 HTML5 では、<head> タグを省略できます。
デフォルトでは、ブラウザはデフォルトの <head> 要素の前にコンテンツを追加します。
例
<!DOCTYPE html> <html> <title>页面标题</title> <body> <h1>标题</h1> <p>段落。</p> </body> </html>
現在、head タグを省略することは推奨されていません。
メタデータ
<title> タイトル名はページのテーマを説明します:
<title>php 中国語のウェブサイト</title>
タイトルと言語により検索エンジンが高速化されます。ページのトピックを理解します:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>ask.php.cn</title> </head>
HTML コメント
コメントは <!-- および-->:
<!-- これはコメントです -->
長いコメントを書くこともできますbe の間で別々の行に記述します:
<!--
これは長いコメントです。 これは長いレビューです。これは長いレビューです。
これは長いレビューです これは長いレビューです。 これは長いレビューです。
-->
長いコメントの最初の文字はスペース2つでインデントされ、読みやすくなります。
スタイルシート
スタイルシートは簡潔な構文形式を使用します(type属性は必要ありません):
<link rel="stylesheet" href="styles.css">
短いルールを記述できます1 行で:
p.into {font-family: Verdana;}
長いルールは複数行で記述することができます:
body {
background-color: lightgrey;
font-family: "Arial Black"、Helvetica、sans-serif;
font-size: 16em;
color: black;
左中括弧をセレクターと同じ行に置きます。
左中括弧とセレクターの間にスペースを追加します。
インデントにはスペースを 2 つ使用します。
コロンと属性値の間にスペースを追加します。
カンマや記号の後にはスペースを使用してください。
各属性と値の末尾に記号を使用します。
属性値にスペースが含まれる場合にのみ引用符を使用します。
右中括弧を新しい行に置きます。
1 行あたり最大 80 文字。
一般的なルールは、カンマとセミコロンの後にスペースを追加することです。
HTML に JavaScript をロードします
外部スクリプト ファイルをロードするには簡潔な構文を使用します (type 属性は必要ありません):
<script src="myscript.js">
JavaScript を使用して HTML 要素にアクセスします
A HTML の形式が不適切だと、JavaScript 実行エラーが発生する可能性があります。
次の 2 つの JavaScript ステートメントは、異なる結果を出力します:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>HTML の JavaScript で同じ命名規則を使用してみてください。
JavaScript コード仕様にアクセスします。
ファイル名は小文字を使用してください
ほとんどの Web サーバー (Apache、Unix) では大文字と小文字が区別されます。London.jpg 経由では london.jpg にアクセスできません。
他の Web サーバー (Microsoft、IIS) は大文字と小文字を区別しません。london.jpg には、London.jpg または london.jpg 経由でアクセスできます。
一貫したスタイルを維持する必要があり、小文字のファイル名を一律に使用することをお勧めします。
ファイル拡張子
HTML ファイルの拡張子は .html (または r .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」です。
