HTML5 の新しいタグと廃止されたタグに関する簡単な説明

次の HTML 4.01 要素は HTML5 で削除されています。ブラウザーは互換性の理由からこれらのタグを引き続きサポートしていますが、逆説的に、古いブラウザーでは新しいタグが十分にサポートされていない場合があります。

これらの要素には、basefont、big、center、font、s、strike、tt、u が含まれます。これらの要素は純粋にページ表示用であり、表示されるコンテンツは CSS によって完成される必要があります。

これらの要素には、frameset、frame、noframes が含まれます。 HTML5ではframeフレームをサポートせず、iframeフレームのみをサポートするか、ページに合わせた複数のページで構成されるサーバー側フォーマットを使用し、上記3つのタグを削除してください。

これらの要素には、アプレット、bgsound、blink、marquee、その他のタグが含まれます。

rb を廃止し、頭字語を置き換えるには Ruby を使用します。 abbr を使用して廃止 dir を置き換えます。 ul を使用して isindex を置き換えます。 form と input の組み合わせを使用してリストを置き換えます。 pre を使用して xmp を置き換えます。 code を使用して廃止 nextid を置き換えます。 guid を使用して plaintex を置き換えます。 text/ を使用します。 plian (フォーマットされていないボディ) MIME タイプ置換

HTML4.01では、divは明確な定義が無いまま様々なレイアウト環境で広く使われており、HTML5ではSEOのためにdivを意味化しており、新たに追加された構造タグは以下の通りです。

a)、section 要素は、章、ヘッダー、フッター、またはページの他の部分など、ページ内のコンテンツ ブロックを表します。 h1、h2... などの要素と組み合わせて使用​​して、文書構造を表すことができます。例: HTML5 では <section>……</section>、HTML4 では <div>……</div>。

b).article 要素は、コンテキストに関係のない、ページ上の独立したコンテンツの一部を表します。たとえば、記事です。

c).side要素は、article要素の内容以外の、article要素の内容に関する補助的な情報を表す。

d). header 要素は、ページ内のコンテンツ ブロックまたはページ全体のタイトルを表します。

e). hgroup 要素は、ページ全体またはページ内のコンテンツ ブロックのタイトルの組み合わせを表します。

f) のフッター要素は、ページ全体またはページ内のコンテンツ ブロックの脚注を表します。通常、作成者の名前、作成日、作成者の連絡先情報が含まれます。

g). nav 要素は、ページのナビゲーション リンク部分を表します。

h).figure 要素はフロー コンテンツの独立した部分を表し、通常はドキュメントのメイン フロー コンテンツ内の独立した単位を表します。 figcaption 要素を使用して、Figure 要素のグループにキャプションを追加します。例えば：

 <figure> <figcaption>中華人民共和国</figcaption> <p>中華人民共和国は 1949 年に誕生しました</p></figure>

HTML4での一般的な書き方

 <dl> <h1>prc</h1> <p>中華人民共和国は 1949 年に誕生しました</p> </dl>

実行結果:

2.1メートル

賃金、数量、パーセンテージなどに使用できる特定の範囲内の値を表します。max は最大値を表し、min は最小値を表し、value は現在の値を表します。

 <meter max=100 min=0 value=60 style=width: 300px;></meter>

jsを使用して0から100まで制御できます。

時間。 datetime 属性は時刻を表します: <time>2015-10-6</time>。

 <時間>2015-10-6</時間>

私たちは毎朝 <time>8:30</time> に授業を始めます。 <time datetime=2017-02-14>バレンタインデー</time>にデートする予定です。

このタグはセマンティックタグであるため、ブラウザ上で表示しても特別な効果はありません。基本的にはタグが設定されていない場合と同じ効果です。

進行状況バーを表すために使用されます

 <h3>進捗</h3><進捗値=75 最大=100></progress>

max: 最大値、完了時の値

値: 現在の値

このタグは、オプションのデータのリストを定義します。 input 要素と組み合わせて使用​​すると、入力値のドロップダウン リストを作成できます。

入力と組み合わせると選択と入力の両方が完了します。

 <input type=text list=countries /><datalist id=countries> <option value=中国></option> <option value=米国></option> <option value=日本></option></datalist >

これは主に、強調表示または強調表示する必要があるテキストをユーザーに視覚的に提示するために使用されます。一般的なアプリケーションの検索結果では、検索キーワードが強調表示されます。 HTML5<マーク></マーク>;HTML4 <スパン></スパン>。

ルビコメント（中国語のピンインまたは文字）を定義します。 <ruby> タグおよび <rt> タグとともに使用されます。 Ruby 要素は、1 つ以上の文字 (説明/発音が必要) とその情報を提供する rt 要素、およびブラウザがルビをサポートしていない場合に表示するコンテンツを定義するオプションの rp 要素で構成されます。要素。

文字 (中国語の音声または文字) の解釈または発音を定義します。

Ruby要素をサポートしていないブラウザで表示される内容を定義するために、Rubyコメントで使用されます。

ソフト改行を表します。 br 要素との違い: br 要素は、ここで改行する必要があることを示します。wbr 要素は、ブラウザ ウィンドウまたは親要素が広い場合 (改行の必要がない場合)、改行されないことを示します。途切れていますが、幅が足りない場合は自動的にここで折り返されます。

グラフやその他の画像などのグラフィックを定義します。 <canvas> 要素は単なるグラフィック コンテナ (キャンバス) であり、グラフィックを描画するにはスクリプトを使用する必要があります。

 <canvas id=myCanvas></canvas><script type=text/javascript> var Canvas = document.getElementById('myCanvas') var ctx = Canvas.getContext('2d'); ; ctx.fillRect(0, 0, 80, 100);</script>

ラジオ ボタン、チェック ボックス、ボタンなどのコマンド ボタンを表します。コマンド要素は、メニュー要素内にある場合にのみ表示されます。それ以外の場合、この要素は表示されませんが、キーボード ショートカットを指定するために使用できます。

 <menu> <command onclick=alert('Hello World')> クリックしてください! </command> </menu>

文書または文書の一部の詳細を説明するために使用されます。 詳細のタイトルを定義できる概要タグと組み合わせて使用​​できます。タイトルが表示され、ユーザーがタイトルをクリックすると詳細が表示されます。 summary は、details の最初の子要素である必要があります。

オプションのリストを定義します。この要素を input 要素と組み合わせて使用​​して、入力の可能な値を定義します。データリストとそのオプションは表示されません。これは単なる有効な入力値のリストです。 input 要素の list 属性を使用してデータリストをバインドします。

スクリプト出力など、さまざまなタイプの出力を定義します。

 <form action=form_action.asp method=get name=sumform> <output name=sum></output> </form>

メニューリストを定義します。フォーム コントロールをリストする場合は、このラベルを使用します。ナビゲーションとの違いに注意してください。メニューは特にフォーム コントロールに使用されます。

ページ上でオーディオとビデオを再生する必要がある場合、よく使用される方法は次のとおりです。

a)、埋め込む

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf'allowFullScreen='true'quality='high'width='480' height='400' align=' middle'allowScriptAccess='always' type='application/x-shockwave-flash'></embed><embed src=img/iceage4.mp4></embed>

b) フラッシュプレーヤーを使用します

一部のサードパーティ製プラグイン、flowplayer602 など

HTML5 マルチメディア コンポーネントは、ビデオ (ビデオ) コンポーネントとオーディオ (オーディオ) コンポーネントを指します。 HTML5 マルチメディア コンポーネントは、Flash Player などのサードパーティのプラグインを使用せずに、Web ページにマルチメディア コンポーネントを直接埋め込むことができます。ビデオのネイティブ サポートを提供するブラウザーの新しい機能により、Web 開発者は外部プラグインの可用性に依存せずにビデオ コンポーネントを Web サイトに簡単に追加できるようになります。 Apple が現在 iPhone および iPad で使用している Flash テクノロジーには制限があるため、HTML5 マルチメディア コンポーネントの機能が特に重要です。

ビデオ、映画の再生に使用されます

ラベルの基本的な式は次のとおりです。

 <video width=800 height=600 Controls=controlsposter=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> 現在のブラウザはビデオの直接再生をサポートしていません。ビデオをダウンロードするには、ここをクリックしてください: <a href=a.mp4>ダウンロードビデオ</a></ビデオ>

Source はビデオ ソースであり、1 つが失敗すると次のタイプが選択されます。

Ogg = Theora ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した Ogg ファイル MPEG4 = H.264 ビデオ エンコーディングと AAC オーディオ エンコーディングを使用した MPEG 4 ファイル WebM = VP8 ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した WebM ファイル

知らせ：

 <video src=img/a.mp4controls=controlsposter=img/1.jpg>お使いのブラウザは古すぎます。アップグレードしてください。ビデオをダウンロードしてください。<a href=#>アドレス</a></video>

ほとんどの HTML5 タグの innerHTML コンテンツは、ブラウザがそのタグをサポートしていない場合に表示されるコンテンツです。

イベント バインディングとリスニングの違いは次のとおりです。

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>イベント バインディングとモニタリングの違い</title> </head> <body> <button id=btnA>ボタン A </button> <button id=btnB>ボタン B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); btnB = document.getElementById(btnB); btnA.onclick = function() { アラート (クリックしました) } btnA.onclick = function() { アラート (もう一度クリックしました) } btnB.addEventListener(クリック, function(event); { アラート (クリックしました) },false); btnB.addEventListener(click,function(event){アラート (もう一度クリックしました) },false); </script> </body> </html>

on イベント名を使用してイベントをバインドすると、そのバインドは以前にバインドされたイベントを上書きします。つまり、最後にバインドされたイベントが有効になります。

addEventListener を使用してイベントをバインドしても上書きされず、複数の同一のイベントを 1 つの要素に同時にバインドできます。

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>ビデオタグ</title> </head> <body> <video id=videoIce width=800 height=600 Controls=コントロールポスター=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> 現在のブラウザはビデオの直接再生をサポートしていません。ビデオをダウンロードするにはここをクリックしてください: <a href=content/a.mp4>ビデオをダウンロード</a> </video> <h2> <button onclick=play()>再生</button> <button onclick=pause()>一時停止</button> <span id=msg></span> </h2> <スクリプトの種類=text/javascript> var videoIce=document.getElementById(videoIce); function play() { videoIce.play() } 関数 stop() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime } </script> </body> </html>

オーディオは音や音楽を再生する機能を実現できます。

 <audio src=http://baidu/demo/test.mp3 Controls >お使いのブラウザは audio 要素をサポートしていません</autio><audio src=content/a.mp3 Controls=controls autoplay=autoplay></audio>

audio タグの属性の多くは、video の属性と同じです。

autoplay: true|false。true の場合、オーディオは準備が整うとすぐに再生されます。コントロール: true|false true の場合、再生ボタンなどのコントロールがユーザーに表示されます。 end: 数値は、オーディオ ストリーム内のどこでプレーヤーが再生を停止するかを定義します。デフォルトでは、サウンドは最後まで再生されます。 loopend: オーディオ ストリーム内のループ再生が停止する位置を定義する数値。デフォルトは end 属性の値です。 loopstart: 数値は、オーディオ ストリーム内のループ再生の開始位置を定義します。デフォルトは start 属性の値です。 playcount: オーディオ クリップが再生される回数を定義する数値。デフォルトは 1 です。 src: url 再生中のオーディオの URL。 start : 数値は、プレーヤーが再生を開始するオーディオ ストリーム内の位置を定義します。デフォルトでは、サウンドは最初に再生されます。

ソース要素をマルチメディア要素のサブタグとして使用する例:

 <audio> <source src='test.mp3 ' type='audio/mpeg'/> <source src='test.ogg ' type='audio/ogg'/> <source src='test.spx ' type='audio/ogg'/></audio>

ブラウザは、source 要素を使用してリスト内を順番に検索し、再生できるファイル形式が見つかると、そのファイルを再生し、後続の他の要素を無視します。

オーディオの API は基本的にビデオの API と同じです。音量をカスタマイズする例を次に示します。

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>オーディオ タグ</title> </head> <body> <h2>オーディオ タグ</h2> <audio src=content/ fcml.mp3controls=controls autoplay=autoplay id=mp3> <marquee><h2>古すぎるのでブラウザを変更してください</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01; } < /script> </body></html>

音量は 0 ～ 1 の間だけです。

コンテンツ (さまざまなメディアを含む) を埋め込むために使用されます。形式は、Midi、Wav、AIFF、AU、MP3、フラッシュなどです。

例: <embed src=flash.swf /> HTML4 のコード例 <object data=flash.swf type=application/x-shockwave-flash><object>

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。