HTML5 の概要

HTML5 とはどのようなもので、その使用方法は何ですか?実際、HTML チュートリアルの最初の章で示した例で使用されているコードはすべて HTML で書かれています。 HTML5 について詳しく見てみましょう

HTML5 の概要

HTML5 は、2014 年 10 月に World Wide Web Consortium (W3C) によって標(biāo)準(zhǔn)策定が完了しました。。

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

HTML5 は習(xí)得が簡単です。

HTML5 とは何ですか?

HTML5 は次世代の HTML 標(biāo)準(zhǔn)です。

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

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

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

HTML5 は、W3C と Web Hypertext Application Technology Working Group の略である WHATWG とのコラボレーションの成果です。。

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

HTML5 のいくつかの興味深い新機(jī)能:

描畫用の Canvas 要素

メディア再生用のビデオ要素とオーディオ要素

ローカルオフラインストレージのサポートの改善

新しい特別なコンテンツ要素 (記事、フッター、ヘッダー、ナビゲーションなど) 、セクション

カレンダー、日付、時(shí)刻、メール、URL、検索などの新しいフォームコントロール

HTML5 <!DOCTYPE>

<! HTML5 ドキュメントの最初の行で、使い方は非常に簡単です:

<!DOCTYPE html>

最初の章の例が <DOCTYPE> で構(gòu)成されているかどうかを確認(rèn)できます。

で始まる以下は単純な HTML5 ドキュメントです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標(biāo)題</title>
</head>
<body>
文檔內(nèi)容......
</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
XHTMLHttpRequest 2

HTML5グラフィックス

HTML5 を使用すると、簡単にグラフィックを描畫できます:

<canvas> 要素を使用します
インライン SVG を使用します
CSS3 2D/3D を使用します

CSS3を使用したHTML5

新しいセレクター
新しい屬性
アニメーション
2D/3D変換
角丸
影効果
ダウンロード可能なフォント

CSS3 について詳しくは、このサイトの CSS3 チュートリアルをご覧ください。

セマンティック要素

HTML5 では、次のような多くのセマンティック要素が追加されます。

ページの獨(dú)立性を定義するコンテンツエリア。 <aside>	ページのサイドバーのコンテンツを定義します。
を使用すると、親要素のテキスト方向の設(shè)定とは獨(dú)立してテキストを設(shè)定できます。
ラジオボタン、チェックボックス、ボタンなどのコマンドボタンを定義します

タグには詳細(xì)要素のタイトルが含まれます

は獨(dú)立したフローの內(nèi)容を指定します（畫像、チャート、寫真、コードなど）。

<figure>要素のタイトルの定義

<footer>	セクションまたはドキュメントのフッターを定義します。
<header>	はドキュメントのヘッダー領(lǐng)域を定義します
<mark>	はマーク付きのテキストを定義します。
<メートル>	度量衡の定義。最大値と最小値がわかっている測定にのみ使用してください。
<nav>	ナビゲーションリンクの部分を定義します。

<progress>	あらゆる種類のタスクの進(jìn)捗狀況を定義します。
<ruby>	ルビのコメント（ふりがなまたは文字）を定義します。
<rt>	文字（中國語の表音文字または文字）の解釈または発音の定義。
<rp>	は、ruby要素をサポートしていないブラウザで表示されるコンテンツを定義するためにrubyコメントで使用されます。
<section>	ドキュメント內(nèi)のセクション (セクション、セクション) を定義します。

<time>	日付または時(shí)刻を定義します。
<wbr>	テキスト內(nèi)の改行を追加するのが適切な場所を指定します。

HTML5 フォーム

新しいフォーム要素、新しい屬性、新しい入力タイプ、自動(dòng)検証。

削除された要素

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

<頭字語>
<アプレット>
<basefont>
<big>
<center>
<dir>
<font>

例次の例は、Web ページで誰でも見ることができるものです。ビデオを再生する

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文檔標(biāo)題</title>
</head>
<body>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    你的瀏覽器不支持 video 標(biāo)簽。
</video>
</body>
</html>

あなたはできますローカルでビデオを検索し、ビデオの場所と名前を src に入力して試してみてください

HTML5 ブラウザのサポート

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

一部の古いブラウザ (HTML5 をサポートしていない) を HTML5 にサポートさせることができます。

最新のブラウザは HTML5 をサポートしています。

さらに、古いブラウザでも最近のブラウザでも、認(rèn)識(shí)されない要素は自動(dòng)的にインライン要素として扱われます。

このため、ブラウザに「不明」HTML要素を処理するように「教える」ことができます。

IE6 (Windows XP 2001) ブラウザに未知の HTML 要素を処理するように教えることもできます。

HTML5 要素をブロック要素として定義する

HTML5 は 8 つの新しい HTML セマンティック要素を定義します。これらの要素はすべてブロックレベルの要素です。

古いバージョンのブラウザでこれらの要素を正しく表示できるようにするには、CSS 表示屬性値をブロックに設(shè)定できます:

header、section、footer、aside、nav , main, article, figure {
display: block;
}

HTMLに新しい要素を追加できます。 この例では、HTML に新しい要素を追加し、その要素のスタイルを定義します。要素の名前は <myHero>:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
    <meta charset="utf-8">
    <title>為 HTML 添加新元素</title>
    <script>document.createElement("myHero")</script>
    <style>
        myHero {
            display: block;
            background-color: #9dddd7;
            padding:40px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
<myHero>我的第一個(gè)新元素</myHero>
</body>
</html>

プログラムを?qū)g行して確認(rèn)してください

JavaScript ステートメント document.createElement("myHero") は、IE ブラウザーに新しい要素を追加します。

Internet Explorer ブラウザの問題

上記の方法を使用して HTML5 要素を IE ブラウザに追加できますが、:

Internet Explorer 8 およびそれ以前の IE バージョンのブラウザは、上記の方法をサポートしていません。

この問題は、Sjoerd Visscher が作成した「HTML5 Enabling JavaScript」「shiv」を使用して解決できます:

上記のコードはコメントとその機(jī)能ですIE ブラウザのバージョンが IE9 より小さい場合、html5.js ファイルが読み取られて解析されます。

注: 國內(nèi)ユーザーは Baidu 靜的リソースライブラリを使用してください (Google リソースライブラリは中國では不安定です):

html5shiv は、IE ブラウザプランのより良いソリューションです。 html5shiv は主に、HTML5 で提案された新しい要素が IE6-8 で認(rèn)識(shí)されず、子要素をラップする親ノードとして使用できず、CSS スタイルを適用できないという問題を解決します。

完璧な Shiv ソリューション

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文網(wǎng)(php.cn)</title> 
    <meta charset="utf-8">
    <title>渲染 HTML5</title>
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>學(xué)習(xí)HTML就到PHP中文網(wǎng)</h1>
<article>
    php中文網(wǎng) ——  php中文網(wǎng)??！
</article>
</body>
</html>

IE ブラウザは新しい HTML5 要素を解析するときに最初にこのファイルを読み込む必要があるため、html5shiv.js 參照コードを <head> 要素に配置する必要があります。

學(xué)び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> <meta charset="utf-8"> <title>為 HTML 添加新元素</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #9dddd7; padding:40px; font-size: 30px; } </style> </head> <body> <h1>我的第一個(gè)標(biāo)題</h1> <p>我的第一個(gè)段落。</p> <myHero>我的第一個(gè)新元素</myHero> </body> </html>

提出するリセットコード

自動(dòng)運(yùn)転

前のセクション次のセクション

チュートリアルリスト

ヘルプの取得