HTML5 チュートリアル

HTML5 は、World Wide Web Consortium (W3C) によって 2014 年 10 月に完成された HTML の最新改訂版です。

HTML5 は、モバイルデバイスでマルチメディアをサポートするように設計されています。

HTML5 は習得が簡単です。

HTML5 とは何ですか?

HTML5 は次世代の HTML 標準です。

HTML の前のバージョン HTML 4.01 は 1999 年に誕生しました。それ以来、Web の世界は劇的に変化しました。

HTML5 はまだ開発中です。ただし、最新のブラウザのほとんどはすでに HTML5 をある程度サポートしています。

HTML5はどのようにして始まったのですか?

HTML5 は、W3C と Web Hypertext Application Technology Working Group を指す WHATWG との協力の成果です。。

WHATWG は Web フォームとアプリケーションに取り組んでいますが、W3C は XHTML 2.0 に重点を置いています。 2006 年に、両者は協力して新しいバージョンの HTML を作成することにしました。

HTML5 のいくつかの興味深い新機能:

描画用の Canvas 要素
メディア再生用のビデオおよびオーディオ要素
ローカルオフラインストレージのサポートの強化
記事などの新しい特別なコンテンツ要素、フッター、ヘッダー、ナビゲーション、セクション
カレンダー、日付、時刻、電子メール、URL、検索などの新しいフォームコントロール

HTML5 <!DOCTYPE>

<!doctype> HTML5 ドキュメントの最初の行にあります。使い方は非常に簡単です:

<!DOCTYPE html>

最低限の HTML5 ドキュメント

簡単な HTML5 ドキュメントは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

注:中国語の Web ページの場合は を使用する必要があります。 <meta charset="utf-8"> でエンコーディングを宣言しないと文字化けが発生します。

HTML5の改善

新しい要素
新しい属性
CSS3の完全サポート
ビデオとオーディオ
2D/3Dカートグラフィー
ローカルストレージ
ローカル SQL データ
Web アプリケーション

HTML5 マルチメディア

HTML5 を使用すると、Web ページでビデオとオーディオを簡単に再生できます。

HTML5 <video>
HTML5 <audio>

HTML5アプリ

HTML5を使用するとアプリを簡単に開発できます

ローカルデータストレージ
ローカルファイルにアクセス
ローカル SQL データ
キャッシュ参照
Javascript Worker
グラフィックを描画する:

インライン SV を使用して < Canvas> G

CSS3 2D/3D を使用

アニメーション

2D/3D変換
角丸
影効果
ダウンロード可能フォント
CSS3 の詳細については、このサイトの CSS3 チュートリアルをご覧ください。
セマンティック要素

タグ	説明
<article>	は、ページの独立したコンテンツ領域を定義します。
<aside>	ページのサイドバーのコンテンツを定義します。
<bdi>	親要素のテキスト方向設定とは独立してテキストを設定できます。
<コマンド>	ラジオボタン、チェックボックス、ボタンなどのコマンドボタンを定義します
<詳細>	ドキュメントまたはドキュメントの一部の詳細を説明するために使用されます
<dialog>	プロンプトボックスなどのダイアログボックスを定義します
<summary>	タグには詳細要素のタイトルが含まれます
<figure>	独立したフローコンテンツを指定します(画像、チャート、写真、コードなど)。
<figcaption>	<figure>要素のタイトルを定義します
<footer>	セクションまたはドキュメントのフッターを定義します。
<header>	はドキュメントのヘッダー領域を定義します
<mark>	はマーク付きのテキストを定義します。
<メートル>	度量衡の定義。最大値と最小値がわかっている測定にのみ使用してください。
<nav>	ナビゲーションリンクの部分を定義します。
<進捗状況>	あらゆる種類のタスクの進捗状況を定義します。
<ruby>	ルビのコメント（中国語の発音表記または文字）を定義します。
<rt>	文字 (中国語の表音文字または文字) の解釈または発音の定義。
<rp>	は、ruby 要素をサポートしていないブラウザによって表示されるコンテンツを定義するために、ruby コメントで使用されます。
<section>	ドキュメント内のセクション(セクション、セクション)を定義します。
<時間>	日付または時間を定義します。
<wbr>	テキスト内の改行を追加するのが適切な場所を指定します。

HTML5 フォーム

新しいフォーム要素、新しい属性、新しい入力タイプ、自動検証。

削除された要素

次の HTML 4.01 要素が HTML5 で削除されました:

<頭字語>
<アプレット>
<basefont>
<big>
<center>
<dir>
<font>
<フレーム>
<フレームセット>
<フレームなし>
<strike>

各章の例

HTML エディターを使用して、HTML を編集し、ボタンをクリックして結果を確認できます。

インスタンス

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<meta charset="utf-8">
</head>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  你的浏览器不支持 video 标签。
</video>

</body>
</html>

インスタンスの実行 »「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

「試してみる」ボタンをクリックしてオンラインの実行結果を表示します。

HTML5 ブラウザのサポート

Safari、Chrome、Firefox、Opera の最新バージョンは、一部の HTML5 機能をサポートしています。 Internet Explorer 9 は、特定の HTML5 機能をサポートします。

IE9 以下のバージョンのブラウザは HTML5 メソッドと互換性があり、Baidu 静的リソース html5shiv パッケージを使用します:

<!--[if lt IE9]> 
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

ロード後、新しいタグの CSS を初期化します:

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

HTML5 リファレンスマニュアル

このサイトでは、 HTML5 に関するタグと属性の説明については、「HTML5 リファレンスマニュアル」をクリックしてください。

HTML5ブラウザのサポート →