HTML5コーディング標(biāo)準(zhǔn)
HTML コーディング規(guī)約
多くの Web 開発者は、HTML コーディング規(guī)約についてほとんど知りません。
2000 年から 2010 年にかけて、多くの Web 開発者が HTML から XHTML に変換しました。
XHTML を使用する開発者は、より優(yōu)れた HTML 記述標(biāo)準(zhǔn)を徐々に開発してきました。
HTML5 については、より良いコード標(biāo)準(zhǔn)を形成する必要があります。以下にいくつかの標(biāo)準(zhǔn)的な提案を示します。
正しい文書タイプを使用してください
文書タイプ宣言は HTML 文書の最初の行にあります:
<!DOCTYPE html>
他のタグと同様に小文字を使用したい場(chǎng)合は、次のコード:
< ;!doctype html>
要素名には小文字を使用します
HTML5 要素名には大文字と小文字を使用できます。
小文字の使用を推奨します:
大文字と小文字が混在したスタイルは非常に悪いです。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルはより爽やかに見えます。
小文字は書きやすいです。
非推奨:
<SECTION> <p>這是一個(gè)段落。</p> </SECTION>
非常に悪い:
<Section> <p>這是一個(gè)段落。</p> </SECTION>
推奨:
<section> <p>這是一個(gè)段落。</p> </section>
すべてのHTML要素を閉じる
HTML5では、必ずしもすべての要素を閉じる必要はありません(例: <p>要素)) ですが、すべての要素に終了タグを追加することをお?jiǎng)幛幛筏蓼埂?
非推奨:
<section> <p>這是一個(gè)段落。 <p>這是一個(gè)段落。 </section>
推奨:
<section> <p>這是一個(gè)段落。</p> <p>這是一個(gè)段落。</p> </section>
空のHTML要素を閉じる
HTML5では、空のHTML要素を閉じる必要はありません:
次のように書くこともできます:
<meta charset="utf-8">
write:
<meta charset="utf-8" />
XHTML および XML ではスラッシュ (/) が必要です。
XML ソフトウェアがページを使用することが予想される場(chǎng)合は、このスタイルを使用するのが最適です。
屬性名は小文字を使用する
HTML5 屬性名では、大文字と小文字を使用できます。
屬性名には小文字を使用することをお?jiǎng)幛幛筏蓼?
同時(shí)に大文字を使用するのは非常に悪い習(xí)慣です。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルはより爽やかに見えます。
小文字は書きやすいです。
非推奨:
<div CLASS="menu">
推奨:
<div class="menu">
屬性値
HTML5 屬性値は引用符なしで使用できます。
屬性値には引用符を使用することをお?jiǎng)幛幛筏蓼?
屬性値にスペースが含まれる場(chǎng)合は、引用符を使用する必要があります。
スタイルを混合することはお?jiǎng)幛幛扦蓼护?。スタイルを統(tǒng)一することをお?jiǎng)幛幛筏蓼埂?
屬性値は引用符を使用すると読みやすくなります。
次のインスタンス屬性値にはスペースが含まれており、引用符が使用されていないため、機(jī)能しません:
<table class=table Striped>
以下では二重引用符が使用されていますが、これは正しいです:
<table class="テーブルストライプ">
畫像プロパティ
畫像には通常 alt 屬性が使用されます。 畫像が表示できない場(chǎng)合、畫像表示を代替することができます。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
畫像のサイズを定義し、読み込み時(shí)にちらつきを減らすために指定されたスペースを確保します。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
スペースと等號(hào)
等號(hào)の前後にスペースを使用できます。
<link rel = "stylesheet" href = "styles.css">
ただし、スペースは少なくすることをお?jiǎng)幛幛筏蓼?
<link rel="stylesheet" href="styles.css">
長すぎるコード行は避けてください
HTML エディターを使用する場(chǎng)合、コードを左右にスクロールするのは不便です。
コードの各行は 80 文字未満に抑えるようにしてください。
空白行とインデント
理由もなく空白行を追加しないでください。
読みやすくするために、各論理関數(shù)ブロックに空白行を追加します。
インデントには 2 つのスペースを使用します。TAB は推奨されません。
短いコードの間に不必要な空白行やインデントを使用しないでください。
不要な空白行とインデント:
<body> <h1>相思</h1> <h2>HTML</h2> <p> 紅豆生南國，春來發(fā)幾枝。 愿君多采擷，此物最相思。 </p> </body>
推奨:
<body> <h1>相思</h1> <h2></h2> <p>紅豆生南國，春來發(fā)幾枝。 愿君多采擷，此物最相思。</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>を省略します?
標(biāo)準(zhǔn)のHTML5では、<html> <body> タグは省略できます。
次の HTML5 ドキュメントは正しいです:
例:
<!DOCTYPE html> <head> <title>網(wǎng)頁標(biāo)題</title> </head> <h1>標(biāo)題</h1> <p>段落。</p>
<html> タグと <body> タグを省略することはお?jiǎng)幛幛扦蓼护蟆?
<html> 要素はドキュメントのルート要素であり、ページの言語を記述するために使用されます:
<!DOCTYPE html>
<html lang="zh">
宣言された言語スクリーン リーダーと検索エンジンの便宜のためです。
<html> または <body> を省略すると、DOM および XML ソフトウェアがクラッシュします。
<body> を省略すると、古いブラウザ (IE9) でエラーが発生します。
<head> を省略しますか?
標(biāo)準(zhǔn) HTML5 では、<head> タグを省略できます。
デフォルトでは、ブラウザはデフォルトの <head> 要素の前にコンテンツを追加します。
例
<!DOCTYPE html> <html> <title>頁面標(biāo)題</title> <body> <h1>標(biāo)題</h1> <p>段落。</p> </body> </html>
現(xiàn)在、head タグを省略することは推奨されていません。
メタデータ
<title> タイトル名はページのテーマを説明します:
<title>php 中國語のウェブサイト</title>
タイトルと言語により検索エンジンが高速化されます。ページのトピックを理解します:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>ask.php.cn</title> </head>
HTML コメント
コメントは <!-- および-->:
<!-- これはコメントです -->
長いコメントを書くこともできますbe の間で別々の行に記述します:
<!--
これは長いコメントです。 これは長いレビューです。これは長いレビューです。
これは長いレビューです これは長いレビューです。 これは長いレビューです。
-->
長いコメントの最初の文字はスペース2つでインデントされ、読みやすくなります。
スタイルシート
スタイルシートは簡(jiǎn)潔な構(gòu)文形式を使用します(type屬性は必要ありません):
<link rel="stylesheet" href="styles.css">
短いルールを記述できます1 行で:
p.into {font-family: Verdana;}
長いルールは複數(shù)行で記述することができます:
body {
background-color: lightgrey;
font-family: "Arial Black"、Helvetica、sans-serif;
font-size: 16em;
color: black;
左中括弧をセレクターと同じ行に置きます。
左中括弧とセレクターの間にスペースを追加します。
インデントにはスペースを 2 つ使用します。
コロンと屬性値の間にスペースを追加します。
カンマや記號(hào)の後にはスペースを使用してください。
各屬性と値の末尾に記號(hào)を使用します。
屬性値にスペースが含まれる場(chǎng)合にのみ引用符を使用します。
右中括弧を新しい行に置きます。
1 行あたり最大 80 文字。
一般的なルールは、カンマとセミコロンの後にスペースを追加することです。
HTML に JavaScript をロードします
外部スクリプト ファイルをロードするには簡(jiǎn)潔な構(gòu)文を使用します (type 屬性は必要ありません):
<script src="myscript.js">
JavaScript を使用して HTML 要素にアクセスします
A HTML の形式が不適切だと、JavaScript 実行エラーが発生する可能性があります。
次の 2 つの JavaScript ステートメントは、異なる結(jié)果を出力します:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 會(huì)被替換
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>HTML の JavaScript で同じ命名規(guī)則を使用してみてください。
JavaScript コード仕様にアクセスします。
ファイル名は小文字を使用してください
ほとんどの Web サーバー (Apache、Unix) では大文字と小文字が區(qū)別されます。London.jpg 経由では london.jpg にアクセスできません。
他の Web サーバー (Microsoft、IIS) は大文字と小文字を區(qū)別しません。london.jpg には、London.jpg または london.jpg 経由でアクセスできます。
一貫したスタイルを維持する必要があり、小文字のファイル名を一律に使用することをお?jiǎng)幛幛筏蓼埂?
ファイル拡張子
HTML ファイルの拡張子は .html (または r .htm) です。
CSS ファイルの拡張子は .css です。
JavaScript ファイルの拡張子は .js です。
.htm と .html の違い
.htm と .html の拡張子ファイルには基本的に違いはありません。ブラウザーと Web サーバーは両方とも、これらを HTML ファイルとして扱います。
の違いは次のとおりです:
.htm は初期の DOS システムで使用されており、現(xiàn)在システムには 3 文字しかありません。
Unix システムのサフィックスには特別な制限はなく、一般に .html が使用されます。
技術(shù)的な違い
URL でファイル名が指定されていない場(chǎng)合 (http://ipnx.cn/css/ など)、サーバーはデフォルトのファイル名を返します。通常、デフォルトのファイル名は、index.html、index.htm、default.html、default.htm です。
サーバーがデフォルトのファイルとして「index.html」のみを使用して構(gòu)成されている場(chǎng)合は、ファイルに「index.htm」ではなく「index.html」という名前を付ける必要があります。
ただし、通常、サーバーは複數(shù)のデフォルトファイルを設(shè)定できますが、必要に応じてデフォルトファイルを設(shè)定できますか。
とにかく、HTMLの完全な接尾辭は「.html」です。
