HTML5 基本チュートリアル

HTML5 アプリケーションキャッシュ

HTML5 サーバーから送信されるイベント

HTML5 Audio(オーディオ)

HTML5 歴史記録API HTML5 WebSocket

Canvasでアニメーションを作成する5HTML(

) コードの書き方の規範

以下に、よく使われる、そしてよく使われるhtmlコードの規範をリストアップします。良い書き方の習慣は、コードの後期のメンテナンスとアップグレードを有利にし、作業効率を向上させます。皆さんに役立つことを願っています。

HTMLコードの約束

多くのWeb開発者がHTMLのコード規範についてほとんど知りません。2000年から2010年、多くのWeb開発者がHTMLからXHTMLに移行しました。

XHTMLを使用して開発者が良いHTML書き方の規範を形成し始めました。

HTMLに対して5 、良いコード規範を形成すべきです。以下にいくつかの規範の提案を提供します。

正しいドキュメントタイプを使用する

ドキュメントタイプ宣言はHTMLドキュメントの最初の行に位置します：

!DOCTYPE html>

他のタグと同じように小文字を使用したい場合は、以下のコードを使用できます：

<!doctype　html>

小文字の要素名を使用する

HTML5 要素名は大文字と小文字の両方を使用できます。

推奨します：

大小写の混在したスタイルは非常に悪いです。
開発者は通常小文字を使用します（XHTMLに似ています）。
小文字スタイルは清潔に見えます。
小文字の文字は書きやすいです。

推奨しません：

<SECTION>　
　　<p>これは段落です。</p>
</SECTION>

非常に悪いです：

<Section>　
　　<p>これは段落です。</p>
</SECTION>

すべてのHTML要素を閉じる

HTMLでは5 中、すべての要素（例えば<p>要素）を閉じる必要はありませんが、各要素に閉じタグを追加することをお勧めします。

推奨しません：

<section>
　　<p>これは段落です。
　　<p>これは段落です。
</section>

空のHTML要素を閉じる

HTMLでは5 中、空のHTML要素も必ず閉じる必要はありません：

こんな風に書けます：

<meta　charset="utf-8">

もこんな風に書けます：

<meta　charset="utf-8"　/>

XHTMLとXMLでは、スラッシュ(/)は/)は必須です。

XMLソフトウェアがあなたのページを使用するように期待する場合は、このスタイルを使用することは非常に良いです。

小文字の属性名を使用します

HTML5 属性名は大文字と小文字の両方を使用できます。

小文字の属性名を使用することをお勧めします:

大文字と小文字を同時に使用することは非常に悪い習慣です。
開発者は通常小文字を使用します（XHTMLに似ています）。
小文字スタイルは清潔に見えます。
小文字の文字は書きやすいです。

不推荐：

<div　CLASS="Style">

属性値

HTML5 属性値にはクォートを使用しなくても構いません。

属性値にはクォートを使用することをお勧めします:

属性値にスペースが含まれている場合、クォートを使用する必要があります。
ミックススタイルは推奨されません。一貫したスタイルを推奨します。
属性値にはクォートを使用すると読みやすくなります。

以下の例では属性値にスペースが含まれており、クォートを使用していないため、機能しません:

<table　class=table　striped>

以下はダブルクォートを使用していますが、正しいです：

<table　class="table　striped">

画像属性

画像は通常alt属性を使用します。画像が表示されない場合、画像の代わりに表示されます。

!DOCTYPE html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎教程網(oldtoolbag.com)</title>　
</head>
<body>
<img　src="logo.png"　alt="HTML5基礎教程">
</body>
</html>

画像のサイズを定義しておくと、読み込む際に指定されたスペースを確保し、フラッシュを減らすことができます。

<img　src="logo.png"　alt="HTML5基礎教程"　style="width:128px;height:40px">

スペースと等号

等号の前後にはスペースを使用できます。

<link　　rel　=　"stylesheet"　href　=　"styles.css">

ただし、空格は少なく使用することをお勧めします:

<link rel="stylesheet" href="styles.css">

一行のコードが長すぎないように避けましょう

HTMLエディタを使用すると、コードの左右にスクロールすることが不便です。

各行のコードは可能な限り 80文字。

空行とインデント

無理に空行を追加しないでください。

各論理機能ブロックに空行を追加し、読みやすくします。

インデントは2つのスペースを使用し、TABは使用しないことをお勧めします。

短いコードの間では不要な空行やインデントを使わないように。

不要な空行とインデント:

　　　　　　　　<body>
　　<h1>基礎を学ぶことができれば、もっと遠くまで行ける。3codebox.com)</h1>
　　<h2>HTML</h2>
　　<p>
　　　　基礎を学ぶことができれば、もっと遠くまで行ける。
　　　　基礎を学ぶことができれば、もっと遠くまで行ける。
　　　基礎を学ぶことができれば、もっと遠くまで行ける。
　　基礎を学ぶことができれば、もっと遠くまで行ける。
　　</p>
</body>

<html>や<body>タグを省略できますか？

標準のHTML5 では、<html>や<body>タグは省略可能です。

以下のHTML5 ドキュメントは正しいです：

例：

!DOCTYPE html>
<head>
　 <title>ページタイトル</title>
</head>
<h1>これはヘッダーです</h1>
<p>これは段落です。</p>

<html>や<body>タグを省略することは推奨されません。

<html>要素はドキュメントのルート要素であり、ページの言語を説明するために使用されます：

!DOCTYPE html>
<html lang="zh-CN">

言語宣言はスクリーンリーダーや検索エンジンのための便利なものです。

DOMとXMLソフトウェアでは、<html>や<body>タグを省略するとクラッシュします。

旧版ブラウザ（IE）では <body> を省略するとエラーが発生します。9) ではエラーが発生します。

headタグを省略できますか？

標準のHTML5 タグは省略可能です。

デフォルトでは、ブラウザは <body> 之前の内容をデフォルトの <head> に追加します。要素上です。

例

!DOCTYPE html>
<html>
<title>ページタイトル</title>
<body>
　　<h1>これはヘッダーです</h1>
　　<p>これは段落です。</p>
</body>
</html>

　現在、headタグを省略することは推奨されていません。

メタデータ

HTML5 中の <title> 要素は必須であり、タイトル名はページのトピックを説明します：

<title>基礎チュートリアルウェブ</title>

タイトルと言語は、検索エンジンがあなたのページのトピックをすぐに理解できるようにします：

!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>基礎チュートリアルウェブ</title>
</head>

HTML コメント

コメントは <! で書ける：-- および --> 中で：

<!--　これはコメントです　-->

非常に長いコメントは <! で書ける：-- および --> 中間行に分けて書きます：

<!--　
　　これは長いコメント。これは
　　長いコメント。これは長いコメントです。
　　これは
　　長いコメント　これは長いコメントです。これは
　　長いコメント。
-->

長いコメントの最初の文字は2つのスペースでインデントされ、読みやすくなります。

スタイルシート

スタイルシートはシンプルな文法形式を使用しています（type属性は必須ではありません）:

<link rel="stylesheet" href="styles.css">

短いルールは一行に書くことができます：

p.into　{font-family:　Verdana;　font-size:　14px;}

長いルールは複数行に書くことができます：

body　{
　　background-color:　yellow;
　　font-family:　"Arial　Black",　Helvetica,　sans-serif;
　　font-size:　14px;
　　color:　red;
}

左括弧とセレクタを同じ行に置きます。
左括弧とセレクタの間にスペースを追加します。
2つのスペースを使用してインデントします。
コロンと属性値の間にスペースを追加します。
カンマとシーケンスマークの後ろにスペースを使用します。
属性と値の終わりにはセミコロンを使用します。
属性値にスペースが含まれている場合のみ引用符を使用します。
右括弧は新しい行に置きます。
行あたりの最大文字数 80文字。

カンマとコロンの後ろにスペースを追加することは一般的なルールです。

HTMLにJavaScriptを読み込む

外部のスクリプトファイルを簡潔な文法で読み込む（type属性は必須ではありません）：

<script　src="myscript.js">

JavaScriptを使用してHTML要素にアクセスする

悪いHTMLフォーマットはJavaScriptの実行エラーを引き起こす可能性があります。

以下の2つのJavaScriptステートメントは異なる結果を出力します：

例

var　obj　=　getElementById("w3codebox")
var　obj　=　getElementById("w3codebox")

HTMLでJavaScriptを使用する際は、できるだけ同じ命名規則を使用してください。

小文字のファイル名を使用する

多くのWebサーバー（Centos、 *Unixは大文字小文字を区別します： loading.jpgはLoading.jpgでアクセスできません。

他のWebサーバー（Windows、IIS）は大文字小文字を区別しません： loading.jpgはLoading.jpgまたはloading.jpgでアクセスできます。

一貫したスタイルを保つ必要があります。小文字のファイル名を使用することをお勧めします。

ファイル拡張子

HTMLファイルの拡張子は．html（または．htm）ができます。

CSSファイルの拡張子は．cssです。

JavaScriptファイルの拡張子は．jsです。

．htmと．htmlの違い

．htm と．htmlの拡張子のファイルは本質的に区別はありません。ブラウザとWebサーバーはそれらをHTMLファイルとして処理します。

違いは：

.htmは初期のDOSシステムに適用され、現在では3文字に制限されています。

Unixシステムでは拡張子に特別な制限はありません。一般的には「.html」を使用します。

技術的な区別

URLにファイル名が指定されていない場合（例えばhttps:）//ja.oldtoolbag.com/html/) サーバーはデフォルトのファイル名を返します。通常、デフォルトのファイル名は「index.html」です。 index.htm、default.html、およびdefault.htm。

サーバーが「index.html」をデフォルトファイルとして設定している場合、ファイル名を「index.html」と名付ける必要があります。それが「index.htm」ではありません。

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

どんなにしても、HTMLの完全な拡張子は「.html」です。

HTML5 歴史記録API HTML5 WebSocket