English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML5 図形

HTML5 チュートリアル

HTML5はWebコンテンツを構築するための言語記述方法です。HTML5はインターネットの次世代標準であり、インターネットコンテンツの構築および表示のための言語方法であり、インターネットの核心技术の一つと考えられています。HTMLは1990年、1997年HTML4としてインターネット標準化され、インターネットアプリケーションの開発に広く使用されています。

HTML5はHTMLの最新の修订版であり、2014年10月、万维网联盟（W3Cが標準規格を完成させました。

HTML5の設計目的は、モバイルデバイス上でマルチメディアをサポートすることです。
HTML5は、ユーザーがどんな手段でウェブページを閲覧しても見る内容が元々HTML形式であることを規定しており、ブラウザ内で技術処理を通じて認識可能な形式に変換されます。

HTML5 簡単に学べます。

HTMLとは何ですか？5?

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

HTML、HTML 4.01の前のバージョンは 1999 年。それ以来、Web世界は大きな変革を遂げました。

HTML5 まだ完成していない状態ですが、多くの現代のブラウザはHTMLの一部をサポートしています。5 サポートしています。

HTML5 はどのように始まったのでしょうか？

HTML5 はW3CとWHATWGが協力した結果、WHATWGはWeb Hypertext Application Technology Working Groupを指します。

WHATWGはウェブフォームとアプリケーションに専念し、W3CはXHTMLに焦点を当てていました。 2.0。在 2006 年、双方が協力して新しいHTMLのバージョンを作成することに決めました。

HTML5 中の面白い新しい機能：

  • 絵を描くためのcanvas要素

  • メディア再生用のvideoとaudio要素

  • ローカルオフラインストレージ（localStorageとsessionStorage）に対するより良いサポート

  • 新しい特殊なコンテンツ要素、例えばarticle、footer、header、nav、section

  • 新しいフォームコントロール、例えばcalendar、date、time、email、url、search

  • HTML5ウェブを成熟したアプリケーションプラットフォームに導入し、そのプラットフォームでは、ビデオ、オーディオ、画像、アニメーション、デバイスとのインタラクションが規格化されています。

HTML5 !DOCTYPE

<!doctype>宣言はHTML5 ドキュメントの最初の行、非常に簡単に使用できます:

<!DOCTYPE　html>

　 これにより、まだサポートしていないHTML5のブラウザは標準モードで解析を行います。これは、それらがHTMLを解析するという意味です。5には旧HTMLのタグの一部が互換性があり、それらがHTMLをサポートしていない部分は無視されます。5の新機能。
このdoctypeは以前よりも短く、シンプルで、覚えやすく、ダウンロードする必要のあるバイト数を減らすことができます。

文字コードを宣言する<meta charset>

　　 ページで最初に行うことは、使用する文字コードを宣言することです。以前のHTMLバージョンでは、これは非常に複雑な<meta>要素でしたが、現在では非常にシンプルです：

<meta　charset="UTF-8">

　　　 これを<head>に配置してください、なぜなら、一部のブラウザでは、宣言された文字コードが期待とは異なる場合、HTMLドキュメントを再解析する可能性があるためです。また、UTFを使用していない場合、-8、このエンコーディングを使用してあなたのウェブページを変更することをお勧めします。これは、異なるスクリプトがファイルのキャラクタの処理を簡素化するために行われます。
　 HTMLについて言えば、5利用可能なキャラクタセットを制限し、彼らは互換性を持たなければなりません8ASCIIの位置。これはセキュリティを強化し、特定の攻撃を防ぐために行われます

最小のHTML5ドキュメント

以下は簡単なHTML5ドキュメント：

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">
<title>私はHTML5ドキュメントタイトル</title>
</head>
　
<body>
html5ドキュメント内容......
</body>
　
</html>

注意：中国語のウェブページでは、<meta charset="utf-8"> 文字コードを宣言しないと、文字化けが発生します。

HTML5 の改善

  • 新しい要素

  • 新しい属性

  • 完全にCSSをサポート3

  • VideoとAudio

  • 2D/3D グラフィック

  • ローカルストレージ

  • ローカルSQLデータ

  • Webアプリケーション

HTML5 マルチメディア

HTMLを使用して5 ウェブページで簡単にビデオ(video)とオーディオ(audio)を再生できます

HTML5 アプリケーション

HTMLを使用して5 アプリケーションを簡単に開発できます

  • ローカルデータストレージ

  • ローカルファイルにアクセス

  • ローカルSQLデータ

  • キャッシュリファレンス

  • Javascript ワーカー

  • XHTMLHttpRequest 2

HTML5 図形

HTMLを使用して5 簡単に図形を描画できます：

HTML5 CSSを使用して3

  • 新しいセレクタ

  • 新しい属性

  • アニメーション

  • 2D/3D 変換

  • 角丸

  • 影効果

  • ダウンロード可能なフォント

CSSについてもっと詳しく知りたい場合は3知識については、このサイトの CSS3 チュートリアル。

意味のある要素

HTML5 以下のように多くの意味のある要素を追加しました：

タグ説明
<article>ページの独立した内容エリアを定義します
<aside>ページのサイドバー内容を定義します
<bdi>親要素のテキスト方向設定からテキストを切り離すことができます
<command>コマンドボタンの定義、例えばオプションボタン、チェックボックスまたはボタン
<details>ドキュメントやドキュメントの一部の詳細を説明するために使用されます
<dialog>ダイアログを定義します、例えばポップアップボックス
<summary>details要素を含むタイトル
<figure>独立したストリームコンテンツ（画像、グラフ、写真、コードなど）を指定します。
<figcaption><figure>要素のタイトルを定義します。
<footer>セクションやドキュメントのフッターを定義します。
<header>ドキュメントのヘッダーエリアを定義します。
<mark>マークを付けるテキストを定義します。
<meter>測定単位を定義します。最大値と最小値が既知の測定のみに使用されます。
<nav>ナビゲーションリンクの一部を定義します。
<progress>どんな種類のタスクの進捗を定義します。
<ruby>rubyコメント（中国語の発音や文字）を定義します。
<rt>文字（中国語の発音や文字）の説明や発音を定義します。
<rp>rubyコメントの中で使用し、ruby要素をサポートしないブラウザに表示される内容を定義します。
<section>ドキュメント内のセクション（セクション、区間）を定義します。
<time>日付や時間を定義します。
<wbr>テキスト内に適切な場所に改行符を追加する方法を指定します。

HTML5 スマートフォーム

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

削除された要素

以下のHTML 4.01 HTMLで要素5中で削除されています:

  • <acronym>

  • <applet>

  • <basefont>

  • <big>

  • <center>

  • <dir>

  • <font>

  • <frame>

  • <frameset>

  • <noframes>

  • <strike>

HTML5ビデオ再生の例

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">　
<title>基礎チュートリアルウェブ(oldtoolbag.com)</title>　
</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は、一部のHTMLをサポートしています。5 機能をサポートします。Internet Explorer 9 以下のHTML5 機能

IE9 以下のバージョンのブラウザはHTMLに対応しています5の方法を使用して、本サイトの静的リソースのhtml5shivパッケージ：

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

読み込んだ後に、新しいタグのCSSを初期化します：

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

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

本サイトではHTML5 のタグおよび属性の説明、詳細は以下をクリックしてください HTML5リファレンスマニュアル。

HTML5 インライン SVG