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

5ba626b379994d53f7acf72a64f9b697 新しい要素

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

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

タグ#に基づいています。 6b840612af934797a60eef76e9585481##30a4923308bc76a82b1670c2b321c3a9ビデオ (ビデオまたはムービー) を定義しますマルチメディア リソースを定義します30a4923308bc76a82b1670c2b321c3a96b840612af934797a60eef76e9585481 ##d8e2720730be5ddc9c2a3782839e8eb6プラグインなどの埋め込みコンテンツを定義します。 9bf7cbf2c39baa37076a22499de2f6ed39000f942b2545a5315c57fa3276f220 や b97864c2e0ef2353a16c4d64c7734e92 要素などのメディアの外部テキスト トラックを指定します。

##説明
オーディオ コンテンツの定義
	##3fbc583a38ef76e3f0c2119fd9e42c25
	#新しいフォーム要素

##タグ説明

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

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

##タグ説明 c7704a836a71ae258c7617ebd3e0487eページのサイドバーのコンテンツを定義します。 af4e6c3c591431c4583becd75d1c3582親要素のテキスト方向設定とは独立してテキストを設定できます。 e2b9f03cad787b9644e1f51fd23b7dacラジオ ボタン、チェック ボックス、ボタンなどのコマンド ボタンを定義します e6dcdc9f5fc7739dfecfe01e47dc7995ドキュメントまたはドキュメントの特定の部分の詳細を説明するために使用します##4bdda78a5c505f990d7140f96794c117631fb227578dfffda61e1fa4d04b7d25##b3167e28b55d85b9697f4dfea18a49b2 は、ストリーミング コンテンツ (画像、チャート、写真、コードなど) とは独立して指定されます。 614eb9dc63b3fb809437a716aa228d2424203f2f45e6606542ba09fd2181843a 要素のタイトルを定義しますc37f8231a37e88427e62669260f0074dセクションまたはドキュメントのフッターを定義します。 ドキュメントのヘッダー領域を定義します##f920514e6447cf1d171079d1371f007fトークンを使用してテキストを定義します。 49c6123c49c6be380cb91db06cd3bfa9度量衡を定義します。最大値と最小値がわかっている測定にのみ使用してください。 c787b9a589a3ece771e842a6176cf8e9ナビゲーション リンクを定義する部分。 6ecb87e5318a36c03c59e25d55f43372あらゆる種類のタスクの進捗状況を定義します。 ec41f2147470148e85ad0337a362103eルビコメント(中国語のふりがなまたは文字)を定義します。 7240f116d85a7ee375466871bc33670a 文字 (中国語の表音または文字) の解釈または発音を定義します。 515718f19dfe6612658be14be18aa0ec は、ruby 要素をサポートしていないブラウザによって表示されるコンテンツを定義するために、ruby コメントで使用されます。 2f8332c8dcfd5c7dec030a070bf652c3ドキュメント内のセクション (セクション、セクション) を定義します。 46dd80ba616c57a652514755c74c4211日付または時刻を定義します。 37fcc81822f151c26d66e5caf9953670テキスト内の改行を追加するのが適切な場所を指定します。

html5 タグの使用例

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

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

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) 記事タグを定義します 23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1

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

html コード:

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

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

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

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

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

#A.このタグは、対応するタグ 614eb9dc63b3fb809437a716aa228d24 と組み合わせて使用​​できますが、タイトル

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

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

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

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

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

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

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

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

一般的に使用するタイトル684271ed9684bde649abda8831d4d355のいくつかの組み合わせを記述することができます

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

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

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

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

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

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

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

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

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

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

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

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

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) 進捗状況のラベルbar6ecb87e5318a36c03c59e25d55f43372

##

<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だけで書くより断然いいですよブラウザごとに表現が違います

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

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

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