廃棄されたラベル
以下のHTML 4.01の要素は、互換性のために、ブラウザでもこれらのタグをサポートしていますが、HTML5で削除されているが、それは新しい代替ラベルを使用することが推奨され、新しいラベルのための逆説古いブラウザのサポートは、プロジェクトによっては、うまくありませんでしたターゲットオーディエンスに応じました。
1、CSS要素の代わりに使用することができます
これらの要素はBASEFONT、大きな、中央、フォント、S、ストライキ、TT、Uが含まれています。これらの要素は、表示ページのために純粋に使用され、パフォーマンスの内容は、CSSによって完成されなければなりません。
図2に示すように、フレーム枠
これらの要素は、フレームセット、フレーム、NOFRAMESが含まれます。HTML5は、以上の3つのラベルを削除し、フレームのフレームワークはのみ行または作成するには、サーバ側のページの複数ページの形で、iframeのフレームワークをサポートしてサポートしていません。
3、唯一のいくつかのブラウザは要素をサポート
これらの要素は、アプレット、BGSOUND、点滅、マーキー他のラベルが含まれています。
図4に示すように、他の要素は、廃止されました
RBを廃止、ルビー代替頭字語を廃止略称代替を使用DIR使用UL代替を廃止代替の組合せが事前代替を使用してリスト廃止形態および入力を用いISINDEX実施形態を廃止コードを用いてXMPを廃止あるいは（「テキスト/ plian」を用いplainTeXでの廃止NEXTID使用GUIDを廃止フォーマットされていないテキスト）の代替のMIMEタイプ
第二に、新しいラベル
1、新しい構造タグ
HTML4.01でのdivレイアウトで広くさまざまな環境で使用されている次のように、そこのdivにセマンティックSEOのための明確な定義、HTML5はなく、新しく追加された構造タグ：
a）は、区間要素 そのような章、ヘッダ、フッタ、またはページとページ・コンテンツ・ブロックの他の一部を示します。H1、H2 ......と組み合わせて使用される他の要素は、文書構造を表すことができます。例：HTML5 <セクション> ...... </セクション> ; HTML4 の<div>で...... </ div> 。
b）は、物品の要素は、 コンテキストに関連付けられていないコンテンツの別個のページを表します。たとえば、記事。
C）、脇要素 、素子、物品元素含有量以外の補助情報の記事の内容に関連付けられていると述べました。
D）、ヘッダ要素は 、実際にコンテンツブロック内のページのタイトルまたはページを表します。
E）のhgroup要素は 、実際にページまたは組み合わせて、ヘッダブロックの内容を表します。
F）、フッター要素は、 コンテンツブロック内のページ全体または脚注を表します。一般的に、彼は、作成者の名前、作成日、および連絡先情報の作成者が含まれます。
g）は、ナビゲーション要素は、 ページナビゲーションリンクの一部を表しています。
h）は、図形要素は、 ストリーミングコンテンツ、文書本体別ユニットにおける一般指定ストリーミングコンテンツの別々の部分を表します。figcaption要素を使用して要素グループを把握するためにキャプションを追加します。例えば：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>HTML4は頻繁に書き込み
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>誰もがあなたが乱雑フルスタックエンジニアによるフロントエンドエンジニア、さらには道になるため大量のリソースを共有するために、簡単で効率的かつ無料の学習に役立つために。私たちは、フルスタックの学習Exchangeフロントエンド円をお勧めするためにここにいる：784783012は、交流と共通の進捗状況を学習し、×××議論に流入へようこそ。
学習の本当の始まりは、必然的に開始する場所がわからないだろう場合は、非効率につながる学習を継続する自信に影響を与えます。
しかし、最も重要なことは、私がキーテクノロジーを習得する必要があるかわからないで、頻繁に、ピット学習を強化多くの時間を無駄に終わる、それが効果的か、必要な資源です。
2、新たに追加し、他の要素
2.1メーター
特定範囲内の値が、量、割合を支払うために使用され、従って最大値maxを表すことができ、最小値は電流値を示し、最小値を表します。
<meter max="100" min="0" value="60" style="width: 300px;"></meter>JSそれは0から100まで制御することができます。
2.2時間
時間。時間値を表し、日時、時間属性総会は時間を強調：<時間> 2015年10月6日</時間>
ラベルは意味ラベルですので、ブラウザで見たときの特殊効果、ラベルが提供されていないと実質的に同じ効果を持っていません。
2.3、進捗状況
プログレスバーを示すために使用します
<h3>progress</h3>
<progress value="75" max="100"></progress>最大：終了時の最大値
値：現在の値
2.4、データリスト
タグは、データのオプションのリストを定義します。入力要素と組み合わせて使用するには、入力値のドロップダウンリストを作成することができます。入力と組み合わせると入力して選択したいずれかで行うことができます。
<input type="text" list="countries" />
<datalist id="countries">
<option value="中国"></option>
<option value="美国"></option>
<option value="日本"></option>
</datalist>2.5、要素をマーク
これは主に、視覚的にユーザに提示テキストをハイライト表示や強調表示にしたいために使用されます。検索結果の代表的なアプリケーションには、キーワード検索要素を強調しました。HTML5 <マーク> </マーク>; HTML4の<span> </ span>を。
2.6、ルビー要素
ルビ（中国語の音声や文字）の定義。一緒に使用すると、<ルビー>と<RT>タグ。何ruby要素は、1つまたは複数の文字で構成されている場合に表示されること（解説/発音が必要）と、情報要素を提供するRTは、またブラウザが「ルビー」の要素をサポートしていないときに定義されたオプションのrp要素を含んでいます。
2.7、RT要素
定義文字（中国語の音声や文字）の解釈や発音。
2.8、rp要素
ブラウザを定義するためにルビーの注釈に表示されるコンテンツのruby要素をサポートしていません。
2.9、WBR要素
それはソフトラップを表しています。BR識別要素：ラップBR必要があり、ここで示される元素; WBRは、幅及びラップここで低活性、（改行は不要である）ブラウザウィンドウまたは親要素アーチ幅を表すラップしません。
2.10、canvas要素
そのようなチャートや他の画像などのカスタムグラフィックス、。<キャンバス>要素のみグラフィックスコンテナ（キャンバス）、スクリプトは、グラフィックスを描画するために使用する必要があります。
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 80, 100);
</script>2.11、コマンド要素
このようなラジオボタン、チェックボックスやボタンなど、コマンドボタンを示します。コマンド要素は、表示されたメニュー要素内に位置する場合にのみ。それ以外の場合、この要素は表示されませんが、あなたはそれがキーボードショートカットを定義し使用することができます。
<menu>
<command onclick="alert('Hello World')"> Click Me!</command>
</menu>2.12、詳細ラベル
文書または文書のセクションの詳細を記述するために使用されます。要約タグと組み合わせて使用することができ、概要の詳細は、タイトルのように定義することができます。タイトルは、ユーザーがタイトルをクリックすると、詳細が表示されます表示されます。概要の詳細は、最初の子でなければなりません。
2.14、データリストタグ
オプションの定義されたリスト。可能な値の入力を定義するために、要素と組み合わせて使用される入力要素をしてください。データリストとそのオプションが表示されません、それは、値のリストのみ正当な入力です。データリストをバインドするリスト属性のinput要素を使用します。
2.15、出力ラベル
そのようなスクリプトの出力として出力の種類を定義します。
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>2.16、menu标签
カスタムメニューリスト。あなたがフォームコントロールの一覧を表示したいときにラベルを使用してください。フォームコントロール専用のナビゲーション、メニューの違いに注意してください。
3、マルチメディアのラベル
あなたは私たちが使用したオーディオとビデオの方法を再生する必要がある場合が多いページで使用されています。
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）は、Flash Playerを使用して
例えば、いくつかの三方プラグ、flowplayer602
これは、マルチメディアコンポーネントのHTML5動画（ビデオ）コンポーネントとオーディオ（音声）成分を意味します。HTML5のマルチメディアコンポーネントには、Flash Playerと他のサードパーティ製プラグイン、あなたのウェブページに直接埋め込まれたマルチメディアコンポーネントとして、例助けを借りずに行うことができます。ブラウザは、新しいビデオ機能をネイティブにサポートを提供する外部プラグインの有効性に依存することなく、より簡単にWeb開発を可能にする、彼らのウェブサイト上のビデオコンポーネントを追加します。Flashテクノロジーの限界にAppleはそれが特に重要であり、iPhoneやiPad上で、この段階では、マルチメディアコンポーネントのHTML5機能を使用していました。
3.1、ビデオvideoタグ
次のようにビデオ、ムービーを再生するために、ラベルの基本的な形式は次のとおりです。
<video width="800" height="600" controls="controls" poster="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&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="a.mp4">下载视频</a>
</video>ソースは失敗が次を選択するとき、あなたは様々な構造を有することができる、ビデオソースで、以下の3つがあります。
H.264ビデオコーディングおよびVP8ビデオコーディングとVorbisのファイルWebMの音声符号化とオーディオコーディングAAC = WebMの付いたファイルのOgg VorbisののOgg Theoraの=の映像符号化、音声コーディングMPEG4とMPEG 4つのファイル=
注意：
<video src="img/a.mp4" controls="controls" poster="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");
var btnB = document.getElementById("btnB");
btnA.onclick = function() {
alert("你点了一下");
}
btnA.onclick = function() {
alert("你又点了一下");
}
btnB.addEventListener("click",function(event){
alert("你点了一下");
},false);
btnB.addEventListener("click",function(event){
alert("你又点了一下");
},false);
</script>
</body>
</html>イベントはバインディングバインディングイベント名にあるフォームを使用した後に有効にするにバインド最後のイベントである、結合の前にイベントをカバーします。
使用のaddEventListener結合事象は、同じ要素に複数のイベントを結合することができる、カバーされていません。
プロパティとイベント例のビデオAPIの：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video 标签</title>
</head>
<body>
<video id="videoIce" width="800" height="600" controls="controls" poster="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&file=myvideo.swf" />
</object> 当前浏览器不支持 video直接播放，点击这里下载视频：
<a href="content/a.mp4">下载视频</a>
</video>
<h2>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
<span id="msg"></span>
</h2>
<script type="text/javascript">
var videoIce=document.getElementById("videoIce");
function play() {
videoIce.play();
}
function pause() {
videoIce.pause();
}
videoIce.ontimeupdate = function() {
document.getElementById("msg").innerHTML=videoIce.currentTime;
}
</script>
</body>
</html>3.2、オーディオ、オーディオタグ
オーディオは、再生中の音、音楽機能を実現することができます。
<audio src=http://baidu/demo/test.mp3 controls >您的浏览器不支持audio元素</autio>
<audio src="content/a.mp3" controls="controls" autoplay="autoplay"></audio>プロパティオーディオタグは、多くのプロパティは、同じビデオです。
自動再生：真|偽、それが本当であれば、準備ができた後、すぐにオーディオ再生。コントロール：真| false trueの場合、そのような再生ボタンとして、ユーザーコントロールに表示されます。終了：再生が停止しているオーディオストリームの数値定義さプレーヤー。デフォルトでは、音が最後まで再生されます。loopend：数値は、オーディオストリームの再生に定義されている位置ループ、end属性のデフォルト値を停止しました。ループスタート：定義された数値は、ループのオーディオストリーム内の位置を開始します。デフォルト値は、開始プロパティです。プレイカウント：数値定義されたオーディオクリップは、何回も果たしました。デフォルトは1です。SRC：オーディオ再生のURLをURL。開始：数値は、オーディオストリームプレーヤーで定義されている位置の再生を開始します。デフォルトでは、プレイの開始時に音。
ソースサブタブ
サブタブの例として、マルチメディア要素を使用して、ソース要素：
<audio>
<source src='test.mp3’ type='audio/mpeg'/>
<source src='test.ogg’ type='audio/ogg'/>
<source src='test.spx’ type='audio/ogg'/>
</audio>それが再生できるファイル形式を見つけるまでリストを見つけるためにソース要素、ブラウザを使用して、見つけた後、そのファイルを再生し、他の要素を無視します。
次のオーディオとビデオの本質的に同じAPIは、音量を調整するカスタムの例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio标签</title>
</head>
<body>
<h2>audio标签</h2>
<audio src="content/fcml.mp3" controls="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間のボリューム。
3.3、要素を埋め込みます
埋め込まれたコンテンツを（媒体を含みます）。フォーマットはミディ、WAV、AIFF、AU、MP3、その上のフラッシュとすることができます。
例：<EMBED SRC = "flash.swf" /> HTML4中代码示例<オブジェクトデータ= "flash.swf" タイプ= "アプリケーション/ X-衝撃波フラッシュ"> <オブジェクト>