HTML5 の概要

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

HTML5 の概要

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

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>

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

<!DOCTYPE html>

最初の章の例が <DOCTYPE> で構成されているかどうかを確認できます。

で始まる以下は単純な 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
XHTMLHttpRequest 2

HTML5グラフィックス

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

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

CSS3を使用したHTML5

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

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

セマンティック要素

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

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

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

は独立したフローの内容を指定します（画像、チャート、写真、コードなど）。

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

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

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

<time>	日付または時刻を定義します。
<wbr>	テキスト内の改行を追加するのが適切な場所を指定します。

HTML5 フォーム

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

削除された要素

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档标题</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>

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

HTML5 ブラウザのサポート

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

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

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

さらに、古いブラウザでも最近のブラウザでも、認識されない要素は自動的にインライン要素として扱われます。

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(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>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>

プログラムを実行して確認してください

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

Internet Explorer ブラウザの問題

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

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

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

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

注: 国内ユーザーは Baidu 静的リソースライブラリを使用してください (Google リソースライブラリは中国では不安定です):

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

完璧な Shiv ソリューション

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(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>学习HTML就到PHP中文网</h1>
<article>
    php中文网 ——  php中文网！！
</article>
</body>
</html>

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

次のセクション

新しいファイル

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>php中文网(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>我的第一个标题</h1>

<p>我的第一个段落。</p>

<myHero>我的第一个新元素</myHero>

</body>
</html>

提出するリセットコード

自動運転

全画面表示

なし