html5の新しいタグとは何ですか？-フロントエンドQ&A-php.cn

HTML5 の新しいタグ: キャンバス、オーディオ、ビデオ、ソース、埋め込み、トラック、データリスト、keygen、出力、記事、脇、bdi、nav、マーク、rt、rp、ruby、time、wbr など。。 Canvas タグはグラフィックスを定義でき、audio タグはオーディオコンテンツを定義でき、ビデオはビデオを定義でき、ソースはマルチメディアリソースを定義でき、embed は埋め込みコンテンツを定義できます。

html5の新しいタグとは何ですか？

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 は、2014 年に W3C によってカスタマイズされた HTML の最新バージョンです。ブラウザネイティブ機能の強化により、ブラウザプラグイン（Flashなど）アプリケーションが削減され、ユーザーエクスペリエンスの満足度が向上し、開発がより便利になります。 HTML は 1.0 から 5.0 にかけて、単一のテキスト表示機能から、画像とテキストによるマルチメディア表示機能へと大きな変化を遂げ、長年の改良を経て、多くの機能が非常に重要なマークアップ言語に発展しました。

html5 の新しいタグ

HTML5 では、いくつかの新しい構造タグ、マルチメディアタグ、フォームタグが追加されています。以下に紹介させていただきます。

##タグ説明

タグは、グラフやその他の画像などのグラフィックを定義します。このタグは、JavaScript 描画 API

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

タグ#に基づいています。 <オーディオ>##<ビデオ>ビデオ (ビデオまたはムービー) を定義しますマルチメディアリソースを定義します<ビデオ><オーディオ> ##

プラグインなどの埋め込みコンテンツを定義します。

##説明
オーディオコンテンツの定義
	##<ソース>


	#新しいフォーム要素

##タグ説明

#オプションリストを定義します。この要素を input 要素と組み合わせて使用して、入力の可能な値を定義します。フォームに使用するキーペアジェネレーターフィールドを指定します。 <出力>スクリプト出力など、さまざまなタイプの出力を定義します。

新しい意味要素と構造要素

##タグ説明 <記事>ページの独立したコンテンツ領域を定義します。ページのサイドバーのコンテンツを定義します。親要素のテキスト方向設定とは独立してテキストを設定できます。ラジオボタン、チェックボックス、ボタンなどのコマンドボタンを定義します < 詳細>ドキュメントまたはドキュメントの特定の部分の詳細を説明するために使用します##<ダイアログ>

##< Figure> は、ストリーミングコンテンツ (画像、チャート、写真、コードなど) とは独立して指定されます。

要素のタイトルを定義しますセクションまたはドキュメントのフッターを定義します。ドキュメントのヘッダー領域を定義します##トークンを使用してテキストを定義します。度量衡を定義します。最大値と最小値がわかっている測定にのみ使用してください。ナビゲーションリンクを定義する部分。あらゆる種類のタスクの進捗状況を定義します。ルビコメント(中国語のふりがなまたは文字)を定義します。文字 (中国語の表音または文字) の解釈または発音を定義します。は、ruby 要素をサポートしていないブラウザによって表示されるコンテンツを定義するために、ruby コメントで使用されます。

ドキュメント内のセクション (セクション、セクション) を定義します。日付または時刻を定義します。テキスト内の改行を追加するのが適切な場所を指定します。

html5 タグの使用例

(1) ナビゲーションリンクの定義

これも意味のあるタグです。このタグをどこかに追加するとナビゲーションスタイルが作成されるというわけではありません。これらは意味があるだけです。メニュータグ

タグと一緒に

html コード:

<header>
    <p>这是一个header部分</p>
    <nav>    <!--导航链接标签-->
        <ul>    <!--配合ul使用-->
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>

ログイン後にコピー

css コード:

/*定义nav的高和颜色*/ 
nav{
    height:30px;
    background-color:#F33;
    margin-top:100px;}
/*正常设置li的样式*/
li{
    list-style:none;
    float:left;
    width:100px;
    height:30px;
}

ログイン後にコピー

このように、メニューレイアウトの前に p のみを使用できます。は

(2) 記事タグを定義します

記事ブロックを使用できますタグは記事を書くときに使用するので、セクションセクションに記事を書く場合はこのタグを使用します。

html コード:

<article><!--文章块p-->
　　<h2>文章标题</h2><!--标题-->
　　<p>文章内容文章内容文章内容文章内容文章内容文章内容
　　<br>
　　文章内容文章内容文章内容文章内容文章内容文章内容<br>
　　文章内容文章内容文章内容</p>
</article>

ログイン後にコピー

css と併用できます。スタイル:

article{
	background-color:#F33;
	width:500px;
	text-align:center;  /*水平居中*/  
	margin:0px auto;
}

ログイン後にコピー

この方法で記事を書くことができます

(3) メディアコンテンツのグループとそのタイトルを定義します<図>

#A.このタグは、対応するタグ

と組み合わせて使用できますが、タイトル

<figure>
    <figcaption>标题</figcaption><!--配套-->
    <p>标题内容</p>
</figure>

ログイン後にコピー

B は

。

と組み合わせて使用することもできます。

はタイトルの書き込みに使用され、

はコンテンツの書き込みに使用されます。表示効果は次のとおりです。 use

<figure>
    <dt>标题1</dt>
    <dd>标题内容</dd>
</figure>

ログイン後にコピー

(4) ダイアログボックスまたはウィンドウを定義する







ダイアログボックスを定義する、プロンプトボックスなど
タグには、詳細要素のタイトルが含まれます


	#

以上がhtml5の新しいタグとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。