HTML5仕上げ（）

以下のためにhtml5、私は特別なを整理したいので、多くのことで、まだ少し混乱ある程度の知識を持っているが、明確ではない覚えています

HTML5ブラウザのサポート

サファリ、Chromeの最新バージョンは、Firefox、OperaはいくつかのHTML5の機能をサポートし、IE9は、いくつかのHTML5機能をサポートします

また、インライン要素として扱われ、自動的に古い新しい、認識されない要素を含むすべてのブラウザ、。

静的リソースhtml5shivパッケージを使用してIE9ブラウザ互換性のあるHTML5のアプローチ、次のバージョンの

<!--[if lt IE 9]> 
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> 
<![endif]--> 

または直接スクリプトファイルのコードに示すまで

<!--[if lt IE9]>
<script>
    (function(){
        if(!*@cc_on!@*/0) return;
        var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,event,source,figure,footer,header,hgroup,mark,menu,nav,outputmprogress,section,time,video".split('.'),
            i = e.length;
        while(i--){
            document.createElement(e[i])
        }
    })
</script>
<![endif]-->

この部分が配置される必要がある間、このコードは、別html5.jsに配置することができるhead内部
ローディング新しいタグの初期化をCSS

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}

HTML5の新しい要素

<キャンバス>

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>

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

• <オーディオ>

• <動画>

• <ソース>

• <EMBED>

• <トラック>

<オーディオ>

audioカスタムオーディオコンテンツ
属性：
autoplayこの属性が存在する場合、オーディオが直後にプレーする準備ができている
controlプロパティがである場合、（例えば、再生/一時停止ボタンなど）、ユーザーの音声コントロールに表示される
loopプロパティは、オーディオ再生のたび終わりを表示される場合
mutedがある場合プロパティ、オーディオ出力がミュートされ
preloadた値がされているauto、metadata、none、ページがロードされたときに指定した、デフォルトのオーディオがロードされているかどうか、負荷がどのように
srcオーディオファイルのURLを指定しました

例

<audio control>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持audio元素
</audio>

<動画>

videoそのようなムービークリップまたは他のビデオなどのタグの定義ビデオは、ストリームを
MP4、WebMの、オッグ：サポートを3つのビデオフォーマット
プロパティ：
有することに加えてaudio、すべての属性を、だけでなく、増加したwidth、height二つの性質

例

<video control>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持video标签
</video>

<EMBED>

容器、または（プラグイン）インタラクティブ外部アプリケーションプログラムを埋め込むための定義
特性：
height、
src、
type指定されたMIMEタイプのコンテンツが埋め込まれています、
width

例

<embed src="helloworld.swf">

<トラック>

このような所定の外部テキストメディアトラックのような<映像>と<オーディオ>要素として

新しいフォーム要素

• <データリスト>

• <keygenの>

• <出力>

<データリスト>

オプションの定義されたリスト

IEとSafariブラウザのIE 9以前のバージョンでは、<データリスト>タグをサポートしていません。

例

<input list="browsers">

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<keygenの>

フォームフィールドは、鍵ペアジェネレータに指定されています。
フォームを送信すると、秘密鍵は、ローカル、公開キーに格納されているサーバーに送信されます。

IEは、要素をサポートしていません。

プロパティ：
autofocus市<keygen>、ページのロード時にフィールドにフォーカスが
challenge使用されている場合は、keygen提出時の問い合わせのための値セット
disabledを無効keygenフィールド
formの定義は<keygen>一つ以上のフォームフィールドが属する
keytype値を含むrsa、dsa、ec、セキュリティアルゴリズムは、キーを定義し
nameた定義の<keygen>要素をフォームが雑多に提出されたときにのみ、名前、name属性は、フィールドの値を収集するために使用されます

例

<form action="demo_keygen.asp" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

<出力>

（そのようなスクリプトの実行の出力として）計算結果出力ディスプレイとして

IEはサポートしていません。

特性：
`「で使用される計算エレメントの計算結果との関係について説明するための
form入力フォーム定義フィールドの一つ以上がに属している
name（フォーム送信を使用して）固有の名前定義オブジェクト

例

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

新しいセマンティックと構造要素

• <記事>

• <余談>

• <BDI>はテキストを設定することができますので、その親要素からのテキストの方向

• <コマンド>、ラジオボタン、チェックボックスやボタンなどのカスタムコマンドボタン、唯一のIE9のサポート

• <詳細>

• <ダイアログ>

• <概要>

• <フィギュア>

• <figcaption>

• <フッタ>

• <ヘッダ>

• <マーク>

• <メーター>定義されて計測。唯一の既知の最大値と最小値を測定するために使用されます

• <ナビゲーション>

• <進行>

• <ルビー>ルビの定義（中国語の音声や文字）

• <Rtの>定義文字（中国語の音声や文字）の解釈や発音

• <セクション>

• <時間>

• <WBR>テキスト適切な場合には改行文字で指定

例

<BDI>
現時点では、唯一のFirefoxとChromeのサポート<BDI>タグ。

<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>
将用户名从周围的文本方向设置中隔离出来

<まとめ>
<詳細>要素は、可視ヘッダとして定義されます。ユーザーがクリックすると、タイトルには詳細が表示されます。

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<進行>
定義された実行中のタスクの進捗状況（プログレスバー）

<progress value="22" max="100"></progress>

<WBR>
言葉が長すぎる、またはあなたは、あなたがWordのブレークチャンス（ワードラップのタイミング）を追加する<WBR>要素を使用することができ、間違った場所に折り返されますブラウザを心配している場合。

<p>学习 AJAX ,您必须熟悉 <wbr>Http<wbr>Request 对象。</p>

：この記事はで再現されたAPE2048➤ https://www.mk2048.com/blog/blog.php?id=hh2c0k2akhj