HTML 5の新しい要素

9228 ワード

タグは、独立したストリームコンテンツ(画像、グラフ、写真、コードなど)を規定する.

要素の内容はメインコンテンツに関連するべきであり、要素の位置はメインコンテンツに対して独立している.削除された場合、ドキュメントフローに影響はありません.

ラベルは

要素定義タイトルです.

要素は、

要素の最初のサブ要素または最後のサブ要素の位置に配置されるべきである.
IE 9+、Firefox、Opera、Chrome、Safariともに

タグをサポートしています.
注記:IE 8以降のIEブラウザでは、

タグはサポートされていません.

<!DOCTYPE html>
<html>
<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

</body>
</html>

ラベル定義

ラベル外の内容.
asideの内容は近くの内容と関係があるはずです.

の内容は、文章のサイドバーとして使用できます.
IE 9+、Firefox、Opera、Chrome、Safariともに

タグをサポートしています.
注記:IE 8以降のIEブラウザでは

タグはサポートされていません.
　 3.ラベルは、ラジオボタン、チェックボックス、ボタンなど、ユーザーが呼び出す可能性のあるコマンドを定義します.
現在、主流ブラウザではラベルはサポートされていません.
注記:IE 9のみがタグをサポートし、他の前バージョンまたは後バージョンのIEブラウザではタグはサポートされていません.
　 4.

ラベルは、ユーザーが表示または非表示にするニーズの補足詳細を規定します.

ラベルは、ユーザーが閉じるインタラクティブなコントロールを開くために使用されます.どんな形式の内容でも

ラベルの中に入れることができます.

要素の内容はopenプロパティが設定されていない限り、ユーザーには表示されません.

<!DOCTYPE html>
<html>
<body>

<details open>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<p><b>Note:</b> The details tag is currently only supported in Chrome and in Safari 
6.</p>

</body>
</html>

ラベルはChromeとSafari 6のみサポートされています.
ヒント:

ラベルと組み合わせてdetailsのタイトルを定義できます.タイトルは表示され、ユーザーがタイトルをクリックするとdetailsが表示されます.

<!DOCTYPE html>
<html>
<body>

<details >
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<p><b>Note:</b> The details tag is currently only supported in Chrome and in Safari 
6.</p>

</body>
</html>

ラベルは、ドキュメントまたはドキュメントの一部の領域のフッターを定義します.　

要素には、その要素に含まれる情報が含まれている必要があります.
典型的には、この要素には、ドキュメント作成者の名前、ドキュメントの著作権情報、使用条件のリンク、連絡情報などが含まれます.
1つのドキュメントで、複数の

要素を定義できます.
IE 9、Firefox、Opera、Chrome、Safariは

タグをサポートします.
注記:IE 8以降のIEブラウザでは

タグはサポートされていません.
　　6.

ラベルは、ドキュメントまたはドキュメントの一部の領域のヘッダーを定義します.

要素は、紹介またはナビゲーションリンクバーのコンテナとして使用する必要があります.
1つのドキュメントで、複数の

要素を定義できます.
注記:

ラベルは

、

または別の

要素の内部に配置できません.
　　7.ラベルは、記号付きテキストを定義します.テキストを強調表示する必要がある場合はラベルを使用してください.

<!DOCTYPE html>
<html>
<body>

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

</body>
</html>

　　8.ラベル定義メトリック衡.最大値と最小値が既知のメトリックにのみ使用されます.
たとえば、ディスクの使用状況、クエリー結果の相関などです.
注意:は進捗バーとして使用できません.進捗バーラベルです.
Firefox、Opera、Chrome、Safari 6はタグをサポートします.

<!DOCTYPE html>
<html>
<body>

<p>Display a gauge:</p>

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<p><strong>Note:</strong> The meter tag is not supported in Internet Explorer.</p>

</body>
</html>

ラベルは、ナビゲーションリンクの部分を定義します.
現在、ほとんどのブラウザでは

ラベルがサポートされています.
すべてのHTMLドキュメントが

要素に使用されるわけではありません.

要素は、ナビゲーションリンクをマークする領域としてのみ使用されます.
異なるデバイス(携帯電話またはPC)では、異なる画面のニーズに適応するためにナビゲーションリンクが表示されるかどうかを設定することができます.

<!DOCTYPE html>
<html>
<body>

<nav>
　　<a href="/html/">HTML</a> |
　　<a href="/css/">CSS</a> |
　　<a href="/js/">JavaScript</a> |
　　<a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

　　10.ラベルは、実行中のタスクの進捗状況(プロセス)を定義します.
ヒント:ラベルをJavaScriptとともに使用して、タスクの進捗状況を表示してください.
注記:ラベルは、メジャー衡(ディスク領域の使用状況や関連するクエリー結果など)を表すのに適していません.メジャー衡を表します.代わりにラベルを使用します.
maxプロパティは、タスクが合計でどれだけの作業を必要とするかを規定します.valueプロパティは、どのくらいのタスクが完了したかを規定します.

<!DOCTYPE html>
<html>
<body>

Downloading progress:
<progress value="22" max="100">
</progress>

<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

　　11.ラベルはrubyコメント(中国語の注記または文字)を定義します.
東アジアでは、東アジア文字の発音が表示されます.
ラベルをおよびラベルとともに使用します.要素は、ブラウザが"ruby"要素をサポートしていない場合に表示される内容を定義するオプションの要素と、解釈/発音を必要とする1つ以上の文字と、その情報を提供する要素から構成されます.
IE 9+、Firefox、Opera、Chrome、Safariはタグをサポートします.
注記:IE 8以降のIEブラウザではタグはサポートされていません.

<!DOCTYPE html>
<html>
<body>

<ruby>
    <rp>(</rp><rt>Kan</rt><rp>)</rp>
    <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

</body>
</html>

　　12.

ラベルは、ドキュメントの領域を定義します.章、ヘッダー、下部、またはドキュメントの他の領域などです.
IE 9+、Firefox、Opera、Chrome、Safari

タグ.
注記:IE 8以降のIEブラウザでは

タグはサポートされていません.

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

</body>
</html>

13(Word Break Opportunity)ラベルは、テキスト内の改行文字の追加に適した場所を指定します.
ヒント:単語が長すぎる場合や、ブラウザが間違った場所で改行するのではないかと心配している場合は、要素を使用してWord Break Opportunity(単語改行タイミング)を追加できます.
インターネットExplorerを除いて、すべての主流ブラウザはラベルをサポートしています.

<!DOCTYPE html>
<html>
<body>

<p>Try to shrink the browser window, to view how the word "XMLHttpRequest" in 
the paragraph below will break:</p>

<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>

<p><b>Note:</b> The &lt;wbr&gt; tag is not supported in IE.</p>

</body>
</html>

html 5携帯電話端末のダブルクリックページ拡大禁止を解決する

php配列追加と削除ユニットの共通関数インスタンス解析