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

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

このチュートリアルの動作環境: 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) ダイアログ ボックスまたはウィンドウを定義する

この中で dd タグと dt タグを使用することもできます。タグ、ダイアログ ボックスのタイトルと内容、ダイアログ ボックスの最初の属性は open であり、このタグの互換性はあまり良くありません

<dialog open>
          <dt>1问题</dt>
          <dd>1答案</dd>
          <dt>2问题</dt>
          <dd>2答案</dd>
</dialog>

(5) コマンドのリストまたはメニューを定義します

A。このタグは li

<menu>
         <li>定义列表</li>
         <li>定义列表</li>
         <li>定义列表</li>
</menu>

B と一緒に使用できます。

<menu type="context" id="cai">
            <!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码--> 
            <menuitem label="菜单一" onclick="alert(&#39;这是菜单一&#39;)" icon="右键单击显示的图片"></menuitem>
                   
</menu>

<span contextmenu="cai">单击我试试</span>

を使用して、右クリック (Firefox とのみ互換)

Union (ユーザーがポップアップ メニューから呼び出せるコマンド/メニュー項目を定義) タグに独自のコンテンツを追加できます。

右クリックすると、目的のメニュー項目が表示されます

#メニュー項目をクリックすると、コンテンツがポップアップ表示されます

##(6) タイトルグループ

一般的に使用するタイトル

のいくつかの組み合わせを記述することができます

<hgroup><!--标题组-->
        <h3>标题</h3>
        <h3>标题1</h3>
        <h3>标题2</h3>
        <h3>标题3</h3>
</hgroup>

#(7) 小さなテキストを定義する

このタグは実際には他の太字のタグと似ています

<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>

( 8) 要素の詳細を定義します

内部のコンテンツはタイトルタグとコンテンツタグで使用できます

<details>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
</details>　　

詳細をクリックしてタイトルとコンテンツを表示します

(9) ルビコメントの定義

知らない単語が出てきたらこの Annotate Pinyin を使用できますが、一部の互換性はあまり良くありません。その時点で変更できます

<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->

#(10) 事前定義された範囲内の測定値を定義します

min="" max="" value="" low="" high="" という複数の属性値があります。low と high は範囲です。値の範囲を超えると、異なる効果が表示されます。

<meter min="0" max="10" value="4" low="2" high="7">

値の値が範囲を超えた後

<meter min="0" max="10" value="8" low="2" high="7">

(11) 進捗状況のラベルbar

##

<progress id="jindu" max="100" value="0"></progress>进度条

最大値は進行状況バーの長さで、value は表示される進行状況です。これを使用して動的な進行状況バーを作成します

<progress id="jindu" max="100" value="0"></progress>进度条
<script>
    var pro = document.getElementById("jindu");
    setInterval(function(){ pro.value+=1;},1000);    //间隔1秒它的值加1
</script>

プログレスバーはこうやって完成させることができますよね?jsだけで書くより断然いいですよブラウザごとに表現が違います

プログラミング関連の知識について詳しくは、プログラミング学習をご覧ください。 ！

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

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