HTML5 の新しい要素

HTML の新しい要素

HTML5 のセマンティックタグと属性を使用すると、開発者は CSS3 効果のレンダリングと組み合わせて、非常に簡単に、リッチで柔軟な Web ページを迅速に作成できます。

今回の HTML5 学習用の新しいタグ要素は次のとおりです。

<header> はページまたはセクションの末尾を定義します。ページまたはセクションのナビゲーション領域

<article> 本文または完全なコンテンツを定義します。補足または関連コンテンツ;

学習これらのタグを使用する最善の方法は、もちろん、実際に使用してみることです。簡単に使用できる既製の Web ページレイアウトテンプレートが多数ありますが、初心者の場合は、簡単なページレイアウトを自分で実装することが絶対に必要です。上記のタグの使用法を示す簡単なページレイアウトの例を次に示します。

例: ブログのホームページのレイアウトを模倣します

図 2-1 に示す Web ページ構造を実装するには、非常に典型的なブログページ (ヘッダー、末尾、水平ナビゲーションバー、サイドバーナビゲーション、およびコンテンツ) を構成します。

図 2-1

図 2-1 でわかるように、対応するタグによって実装される領域には、Header などの名前が付いています

ページを書く前に、次のように言う必要があります: page要素 HTML5 によって実装され、要素の表示効果は CSS3 によってレンダリングされます。CSS3 コードは、HTML5 コードと同じファイルに配置することも、HTML5 で参照される限り、独立したファイルにすることもできます。ファイル。それぞれを独立したファイルにすることをお勧めします。利点は次のとおりです。

1) 単一責任の原則に従う: HTML5 ページは要素の管理を担当しますが、CSS3 ファイルは対応する HTML5 の表示効果のレンダリングのみを担当します。ファイルは互いに独立しており、結合されていません。

2) ページの複雑さを軽減し、メンテナンスを容易にする: ページ上の要素の数が膨大になったとき、要素と要素の表示属性を 1 つのページで管理すると、可読性がどれほど悪くなるかを想像してください。同時にその後のメンテナンスも大変になります。

3) ブラウザの読み込み速度の高速化: ポイント 2) のもう 1 つの利点は、単純なページの読み込みが自然に速くなることです。

もちろん、HTML5 + CSS3 を 1 つのファイルに入れることに慣れているのであれば、これは単なる提案です。

図 2-1 を詳しく実装してみましょう。

1. HTML5 ドキュメントステートメント

使用する Web ページ作成ツールが既に HTML5 ファイルタイプをサポートしている場合は、次の HTML5 テンプレートを生成する必要があります。

<!DOCTYPE html>
  <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Layout TEST</title>
 </head>
  <body>
 </body>
 </html>

当面は、Web ページ作成ツールが HTML5 をサポートしていなくても問題ありません。これらのコード行を自分で記述するのは非常に簡単です。
説明: 最初の行: <!DOCTYPE html> は、HTML5 のドキュメントタイプを簡略化し、複雑なものを単純化したものです (ドキュメントタイプの役割: バリデーターはコードを検証するためにどのルールを使用するかを決定します。ブラウザ標準モードでページをレンダリングします)
2. ヘッダー
<header>
<header id="page_header">
<h1>Header</h1>
</header>
手順: 1 ) ヘッダーを h1、h2、h3 ヘッダーと混同することはできません。 <header> には、会社のロゴから検索ボックスまですべてを含めることができます。この例にはタイトルのみが含まれています。
2) 同じページに複数の <header> 要素を含めることができます。各独立したブロックまたはアーティクルには、独自の

を含めることができます。そのため、この例では、CSS3 での柔軟なレンダリングを容易にするために、一意の id 属性が

に追加されています。 CSS ファイル内の ID タグの役割がわかります。
3. Tail
<footer> タグの実装

<footer id="page_footer">
    <h2>Footer</h2>
</footer>

説明: 位置は基本的に <header> と同じで、他の要素も含まれます。

4. ナビゲーション
<nav> タグの実装

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>

説明: Web ページにとってナビゲーションの重要性は重要であり、訪問者を維持するには高速で便利なナビゲーションが必要です。

1) <header<footer> またはその他のブロックに含めることができ、ページには複数のナビゲーションを含めることができます。
2) ナビゲーションには通常、レンダリングに CSS が必要です。CSS レンダリングについては後ほど説明します。
5. ブロックと記事
<section> と <article> タグは、ページのコンテンツを適切に分類してレイアウトします。
以下は <article> の一般的な内容です

<section id="posts">
        /*可以包含多个< article>*/
    <article>
         /*article的内容*/
        </article>
        <article>
         /*article的内容*/
        </article>
</section>

多くの要素を含むことができることがわかります。

6. ナレーションとサイドバー
<aside> タグはナレーションを実装し、サイドバーは <section> によって実装されます。
<aside> は、紹介文や写真など、メインコンテンツに追加される追加情報です。

<article>
        <header>
            <h2>Article Header</h2>
        </header>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>

<aside> は、通常、<article> に追加され、

<aside>
    <p>sth. in aside
    </p>
</aside>

サイドバーとして使用されます。これをリンクを含む右側の領域として考え、<section> と <nav> を使用します。

<article>
        <header>
            <h2>Article Header</h2>
        </header>
        <aside>
            <p>sth. in aside
            </p>
        </aside>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>

この時点での各タグの使い方は次のようになります
HTML5の完全なコードindex.htmlファイルです

<section id="sidebar">
    <nav>
    <ul>
          <li><a href="2012/04">April 2012</a></li>
          <li><a href="2012/03">March 2012</a></li>
          <li><a href="2012/02">February 2012</a></li>
          <li><a href="2012/01">January 2012</a></li>
    </ul>
    </nav>
</section>

以下は新しい要素の詳細な紹介です

<canvas> 新しい要素

<canvas>その他の画像。このタグは JavaScript の描画 API に基づいています

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Layout TEST</title>
</head>
<body>
    <h2>body</h2>
    <header id="page_header">
        <h1>Header</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </nav>
    </header>
    <section id="posts">
        <h2>Section</h2>
        <article>
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose.
                        </p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
        <article>
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose. </p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
    </section>
    <section id="sidebar">
        <h2>Section</h2>
        <header>
            <h2>Sidebar Header</h2>
        </header>
        <nav>
            <h3></h3>
            <ul>
                <li><a href="2012/04">April 2012</a></li>
                <li><a href="2012/03">March 2012</a></li>
                <li><a href="2012/02">February 2012</a></li>
                <li><a href="2012/01">January 2012</a></li>
            </ul>
        </nav>
    </section>
 
    <footer id="page_footer">
        <h2>Footer</h2>
    </footer>
 
</body>
</html>

新しいマルチメディア要素

タグの説明

< ;audio>音声コンテンツ

<ビデオ> の定義ビデオ (ビデオまたはムービー)

<source> マルチメディアリソースを定義します <audio> プラグインなどの埋め込みコンテンツを定義します。

<track> <video> や <audio> などのメディアの外部テキストトラックを指定します。

新しいフォーム要素

タグ「 ‐‐‐‐‐‐‐‐‐‐‐‐‐‐ フォームこの要素を入力要素と組み合わせて使用して、入力の可能な値を定義します。

<keygen> フォームで使用するキーペアジェネレーターフィールドを指定します。

<出力> スクリプト出力など、さまざまなタイプの出力を定義します。

新しい意味要素と構造要素 HTML5 は、より良いページ構造を作成するための新しい要素を提供します:

タグ説明

<article> ; 定義ページ独立コンテンツ領域。

<aside> ページのサイドバーのコンテンツを定義します。

<bdi> 親要素のテキスト方向設定とは独立してテキストを設定できます。

<command> ラジオボタン、チェックボックス、ボタンなどのコマンドボタンを定義します

<details> ドキュメントまたはドキュメントの特定の部分を説明するために使用します

<ダイアログ> 、プロンプトボックスなど

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

<figure> 独立したフローコンテンツ (画像、グラフ、写真、コードなど) を指定します。

<figcaption> <figure> 要素のタイトルを定義します。

<footer> セクションまたはドキュメントのフッターを定義します。

<header> ドキュメントのヘッダー領域を定義します

<mark> マーク付きのテキストを定義します。

<メートル> 度量衡の定義。最大値と最小値がわかっている測定にのみ使用してください。

<nav> ナビゲーションリンクの部分を定義します。

<進捗状況> あらゆる種類のタスクの進捗状況を定義します。

<ruby> ルビのコメント (中国語のピンインまたは文字) を定義します。

<rt> 文字 (中国語の発音記号または文字) の解釈または発音の定義。

<rp> Ruby要素をサポートしていないブラウザで表示されるコンテンツを定義するために、Rubyコメントで使用されます。

<section> ドキュメント内のセクション (セクション、セクション) を定義します。

<時刻> 日付または時刻を定義します。

<wbr> テキスト内の改行を追加するのが適切な場所を指定します。

削除された要素

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

<頭字語>

<アプレット>

<big& g t;

<中央> lt;tt>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>

提出するリセットコード

自動運転