HTML5コーディング標準

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 属性値は引用符なしで使用できます。

属性値には引用符を使用することをお勧めします:

属性値にスペースが含まれる場合は、引用符を使用する必要があります。

スタイルを混合することはお勧めできません。スタイルを統一することをお勧めします。

属性値は引用符を使用すると読みやすくなります。

次のインスタンス属性値にはスペースが含まれており、引用符が使用されていないため、機能しません:

以下では二重引用符が使用されていますが、これは正しいです:

画像プロパティ

画像には通常 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属性は必要ありません):

短いルールを記述できます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 属性は必要ありません):

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 でファイル名が指定されていない場合 (//m.sbmmt.com/css/ など)、サーバーはデフォルトのファイル名を返します。通常、デフォルトのファイル名は、index.html、index.htm、default.html、default.htm です。

サーバーがデフォルトのファイルとして「index.html」のみを使用して構成されている場合は、ファイルに「index.htm」ではなく「index.html」という名前を付ける必要があります。

ただし、通常、サーバーは複数のデフォルトファイルを設定できますが、必要に応じてデフォルトファイルを設定できますか。

とにかく、HTMLの完全な接尾辞は「.html」です。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <p id="Demo">段落 1。</p> <p id="demo">段落 2。</p> <script> // 只有段落 2 会被替换 document.getElementById("demo").innerHTML = "HELLO."; </script> </body> </html>

提出するリセットコード

自動運転