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>
他のタグと同様に使用してください。 小文字の場合は、次のコードを使用できます:
<!doctype html>
要素名には小文字を使用してください
HTML5 要素名には大文字と大文字を使用できます。小文字。
小文字の使用を推奨します:
大文字と小文字のスタイルを混在させると非常に良くありません。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルがより爽やかに見えます。
小文字は書きやすいです。
非推奨:
<SECTION>
<p>これは段落です。 </p>
</p></SECTION>
推奨:
非推奨:<section>
<p>これは段落です。 </p>< ですが、すべての要素に終了タグを追加することをお?jiǎng)幛幛筏蓼埂?<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 屬性名では、大文字と小文字を使用できます。
屬性名には小文字を使用することをお?jiǎng)幛幛筏蓼?
同時(shí)に大文字を使用するのは非常に悪い習(xí)慣です。
開発者は通常、小文字を使用します (XHTML と同様)。
小文字のスタイルがより爽やかに見えます。
小文字は書きやすいです。
非推奨:
<div CLASS="menu">
推奨: div class="メニュー">
屬性値
HTML5の屬性値は引用符なしで使用できます。 屬性値には引用符を使用することをお?jiǎng)幛幛筏蓼?
屬性値にスペースが含まれる場合は、引用符を使用する必要があります。
スタイルを混合することはお?jiǎng)幛幛扦蓼护蟆％攻骏ぅ毪蚪y(tǒng)一することをお?jiǎng)幛幛筏蓼埂?
- 屬性値は引用符を使用すると読みやすくなります。
- 次のインスタンス屬性値にはスペースが含まれており、引用符が使用されていないため、機(jī)能しません:
- <table class=table Striped>
以下では二重引用符が使用されていますが、これは正しいです。 :<table class="table Striped">
畫像の屬性
畫像は通常、alt屬性を使用します。 畫像が表示できない場合、畫像表示を代替することができます。 <img src="html5.gif" alt="HTML5" >
畫像のサイズを定義し、ちらつきを減らすためにロード時(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エディターを使用する場合、コードを左右にスクロールするのは不便です。
コードの各行は 80 文字未満に抑えるようにしてください。
空白行とインデント
理由もなく空白行を追加しないでください。
読みやすくするために、各論理関數(shù)ブロックに空白行を追加します。
インデントには 2 つのスペースを使用します。TAB は推奨されません。
短いコードの間に不必要な空白行やインデントを使用しないでください。
不要な空白行とインデント:
<body>
<h1>php中文網(wǎng)</h1>
<h2>HTML</h2>
<p> ;
php 中國語のウェブサイト、あなたが學(xué)ぶのは技術(shù)だけではなく、夢でもあります。
php 中國語のウェブサイト、あなたが學(xué)ぶのは技術(shù)だけではなく、夢でもあります。
php中文網(wǎng)、あなたが學(xué)ぶのは技術(shù)だけではなく、夢でもあります。
php中文網(wǎng)、あなたは技術(shù)だけでなく、夢も學(xué)びます。
</p>
</body>おすすめ:
<tr>A</td><body>
</tr>
<h1>php 中國語ウェブサイト</h1>
<h2></h2>
<p>php 中國語ウェブサイト、あなたが學(xué)ぶのはテクノロジーだけではなく、夢 。
php 中國語のウェブサイト、あなたが學(xué)ぶのは技術(shù)だけではなく、夢でもあります。
php 中國語のウェブサイト、あなたが學(xué)ぶのは技術(shù)だけではなく、夢でもあります。
php 中國語のウェブサイト、あなたが學(xué)ぶのは技術(shù)だけではなく、夢でもあります。 </p>
</body> gt; <th> ;説明</th>;tr> <ol>
<li>London</li><li>Paris</li><html> と <body> を省略しますか?
標(biāo)準(zhǔn) HTML5 、< ;html>タグとタグは省略できます。
次の HTML5 ドキュメントは正しいです:<!DOCTYPE html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <h1>這是一個(gè)標(biāo)題</h1> <p>這是一個(gè)段落。</p>
プログラムを?qū)g行して試してください
<html> タグと <body> タグを省略することはお?jiǎng)幛幛扦蓼护蟆?
<html> 要素はドキュメントのルート要素であり、ページの言語を記述するために使用されます:<!DOCTYPE html><html lang="zh">
宣言言語は、スクリーン リーダーや検索エンジンに便利です。<head>を省略しますか?<html> または <body> を省略すると、DOM および XML ソフトウェアがクラッシュします。
<body> を省略すると、古いブラウザ (IE9) でエラーが発生します。
標(biāo)準(zhǔn)の HTML5 では、<head> タグは省略できます。
デフォルトでは、ブラウザはデフォルトの <head> 要素の前にコンテンツを追加します。
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <body> <p id="Demo">段落 1。</p> <p id="demo">段落 2。</p> <script> // 只有段落 2 會(huì)被替換 document.getElementById("demo").innerHTML = "HELLO。"; </script> </body> </html>プログラムを?qū)g行して試してください
ヒント: ここで head タグを省略することはお?jiǎng)幛幛扦蓼护?span style="color: rgb(255, 0, 0);">。
ソースデータHTML5 タイトル名はページのテーマを表します:
<title>php 中國語のウェブサイト</title>タイトルと言語により、検索エンジンはページのトピックをすぐに理解できます:
<!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF -8">
<title>php 中國のウェブサイト</title>
</head>HTMLコメント
コメントは<!--と-で書くことができます-> 內(nèi):<!-- これはコメントです -->長いコメントは <!-- と --> で別々の行に書くことができます:
<!--これは長いコメントです。 これは長いレビューです。これは長いレビューです。 これは長いレビューです これは長いレビューです。 これは長いレビューです。
長いコメントの最初の文字はスペース2つでインデントされ、読みやすくなります。
-->スタイルシートスタイルシートは簡潔な構(gòu)文形式を使用します(type屬性は必要ありません):
<link rel="stylesheet" href="styles.css">短いルールは 1 行で書くことができます:
p.into {font-family: Verdana; font-size: 16em;}長いルールは複數(shù)行で書くことができます:
body {
background-color: lightgrey;
font-family: "Arial Black"、Helvetica、sans-serif;
font-size: 16em;
color: black;
}
左中括弧はセレクターと同じ行に配置されます。
左中括弧とセレクターの間にスペースを追加します。
インデントにはスペースを 2 つ使用します。
コロンと屬性値の間にスペースを追加します。
カンマと記號(hào)の後にスペースを使用してください。
各屬性と値の末尾に記號(hào)を使用します。
屬性値にスペースが含まれる場合にのみ引用符を使用します。
右中括弧を新しい行に置きます。
1 行あたり最大 80 文字。
一般的なルールは、カンマとセミコロンの後にスペースを追加することです。
HTMLにJavaScriptをロードします
外部スクリプトファイルをロードするには簡潔な構(gòu)文を使用します(type屬性は必要ありません):
<scriptsrc. js」 >
JavaScript を使用して HTML 要素にアクセスする
HTML 形式が不適切であると、JavaScript 実行エラーが発生する可能性があります。
HTML 內(nèi)の 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 (または .htm) です。
CSS ファイルの拡張子は .css です。
JavaScript ファイルの拡張子は .js です。
.htm と .html の違い
拡張子ファイル .htm と .html には基本的に違いはありません。ブラウザーと Web サーバーは両方とも、これらを HTML ファイルとして扱います。
の違いは次のとおりです:
.htm は初期の DOS システムで使用されており、現(xiàn)在システムには 3 文字しかありません。
Unix システムのサフィックスには特別な制限はなく、一般に .html が使用されます。
技術(shù)的な違い
URLでファイル名が指定されていない場合(http://www.miracleart.cn/css/など)、サーバーはデフォルトのファイル名を返します。 。通常、デフォルトのファイル名は、index.html、index.htm、default.html、default.htm です。
サーバーがデフォルトのファイルとして「index.html」のみを使用して構(gòu)成されている場合は、ファイルに「index.htm」ではなく「index.html」という名前を付ける必要があります。
ただし、通常、サーバーは複數(shù)のデフォルトファイルを設(shè)定できますが、必要に応じてデフォルトファイルを設(shè)定できますか。
とにかく、HTMLの完全な接尾辭は「.html」です。
