html5で追加される新しい要素タグとは

html5 の新しい要素タグには、「23c3de37f2f9ebcb477c4a90aac6fffd」、「15221ee8cba27fc1d7a26c47a001eb9b」、「b97864c2e0ef2353a16c4d64c7734e92」、「af4e6c3c591431c4583becd75d1c3582」、「5ba626b379994d53f7acf72a64f9b697」、「 fdadfc60a933f693e67f1662e54b02f6」、「f920514e6447cf1d171079d1371f007f」、「49c6123c49c6be380cb91db06cd3bfa9」、「c787b9a589a3ece771e842a6176cf8e9」、「46dd80ba616c57a652514755c74c4211」、「7240f116d85a7ee375466871bc33670a」など

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

#html5 新しい要素タグ

## タグ23c3de37f2f9ebcb477c4a90aac6fffd##15221ee8cba27fc1d7a26c47a001eb9bページの側面を定義します列の内容b97864c2e0ef2353a16c4d64c7734e92オーディオ コンテンツの定義許可する親要素のテキスト方向設定から切り離されるように、テキストの一部を配置します。 #5ba626b379994d53f7acf72a64f9b697グラフやその他の画像などのグラフィックを定義します。ラベルは単なるグラフィック コンテナです。グラフィックを描画するにはスクリプトを使用する必要がありますe2b9f03cad787b9644e1f51fd23b7dacラジオ ボタン、チェック ボックス、ボタンなどのコマンド ボタンを定義しますfc86e7b705049fc9d4fccc89a2e80ee3オプションリストを定義します。この要素を input 要素と組み合わせて使用​​して、入力の可能な値を定義します。 9b9049ef7a1a196379a5449b7c38cbbeドキュメントまたはドキュメントの特定の部分の詳細を説明するために使用されます09f04bbee876d5484ba285fe74fa74c8プロンプト ボックスなどのダイアログ ボックスを定義しますd8e2720730be5ddc9c2a3782839e8eb6プラグインなどの埋め込みコンテンツを定義します。 614eb9dc63b3fb809437a716aa228d2424203f2f45e6606542ba09fd2181843a要素のタイトルを定義します24203f2f45e6606542ba09fd2181843a独立したストリーム コンテンツ (画像、チャート、写真、コードなど) を指定します。 c37f8231a37e88427e62669260f0074dセクションまたはドキュメントのフッターを定義します。 ##aa983b9eb8086376f1f6481364a02e5aフォームで使用するキー ペア ジェネレーター フィールドを指定します。 f920514e6447cf1d171079d1371f007fマークを含むテキストを定義します。テキストを強調表示する必要がある場合は、907fae80ddef53131f3292ee4f81644b タグを使用してください。 49c6123c49c6be380cb91db06cd3bfa9度量衡を定義します。最大値と最小値がわかっている測定にのみ使用してください。 #c787b9a589a3ece771e842a6176cf8e9be6d67dae90cc1ad6469079e163d09396ecb87e5318a36c03c59e25d55f43372515718f19dfe6612658be14be18aa0ec7240f116d85a7ee375466871bc33670aec41f2147470148e85ad0337a362103e2f8332c8dcfd5c7dec030a070bf652c3e02da388656c3265154666b7c71a8ddc631fb227578dfffda61e1fa4d04b7d2546dd80ba616c57a652514755c74c4211d477f9ce7bf77f53fbcf36bec1b69b7a9bf7cbf2c39baa37076a22499de2f6ed39000f942b2545a5315c57fa3276f22037fcc81822f151c26d66e5caf9953670

(1) ナビゲーション リンクを定義します c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f

これは意味のあるラベルでもあり、単にこのラベルをどこかに追加するという意味ではありません。ナビゲーション スタイルでは、これはすべて意味があります。メニュー タグ c787b9a589a3ece771e842a6176cf8e9 をヘッダーに追加します。nav タグは ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6 タグと一緒に使用できます

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

記事ブロックタグを使って記事を書くことができるので、このタグを使ってセクション部分に記事を書きます。 8d31735f490957706e714f0b7c894552よく使う

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 は 614eb9dc63b3fb809437a716aa228d24acbb2ee42ec8f9c5e354368060d2502b

この中で 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>

Inこのようにして、プログレス バーを完成させることができますね。js だけで記述するよりもはるかに優れています。ブラウザごとに表現が異なります。

関連する推奨事項: "

htmlビデオチュートリアル

"

説明
記事エリアを定義します
	##af4e6c3c591431c4583becd75d1c3582
#1aa9e5d373740b65a0cc8f0a02150c53	ドキュメントのヘッダー領域を定義します
ナビゲーション リンクの部分を定義します
Definition スクリプト出力などのさまざまなタイプの出力。
実行中の進行状況 (プロセス) を定義します。
515718f19dfe6612658be14be18aa0ec タグは、ruby 要素をサポートしていないブラウザで表示される内容を定義するために、ruby コメントで使用されます。 。
7240f116d85a7ee375466871bc33670a タグは、文字 (中国語の表音または文字) の解釈または発音を定義します。
ec41f2147470148e85ad0337a362103e タグはルビコメント(ふりがなまたは文字)を定義します。
2f8332c8dcfd5c7dec030a070bf652c3 タグは、ドキュメント内のセクション (セクション、セクション) を定義します。章、ヘッダー、フッター、文書のその他の部分など。
e02da388656c3265154666b7c71a8ddc タグは、39000f942b2545a5315c57fa3276f220 や b97864c2e0ef2353a16c4d64c7734e92 などのメディア要素のメディア リソースを定義します。
631fb227578dfffda61e1fa4d04b7d25 タグには詳細要素のタイトルが含まれており、「details」要素は、詳細情報を記述するために使用されます。文書または文書の断片。
日付または時刻、あるいはその両方を定義します。
日付または時刻、あるいはその両方を定義します。
9bf7cbf2c39baa37076a22499de2f6ed タグは、ビデオ要素などのメディアの外部テキスト トラックを指定します。
39000f942b2545a5315c57fa3276f220 タグは、ムービー クリップやその他のビデオ ストリームなどのビデオを定義します。
テキスト内の改行を追加するのが適切な場所を指定します。

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