コメント：HTML5には多くの新機能があります。新しいコード。とても良い。今すぐ要約しましょう。参照のみ
1。新しいDoctypeブラウザがこの文を理解していなくても、標準モードに応じてレンダリングされます。
2。図要素
<図>と<figcaption>を使用して、タイトルを持つ写真を意味的に表現する
<図>
<img src = path/to/image alt = about image/>
<figcaption>
<p>これは何か面白いもののイメージです。 </p>
</figcaption>
</図>
3。redefined <small>
<small>は再定義されており、ウェブサイトの下部にある著作権通知など、小さなタイプセッティングを表すために現在使用されています
4。リンクとスクリプトタグの型属性を削除します
5。ブラケットを追加/なし
HTML5は、属性を引用して閉じているかどうかを必要としませんが、引用符と閉じたタグを追加することをお勧めします。
6.コンテンツを編集可能にしてください、コンテンツヘラブルなプロパティを追加するだけです
7。電子メール入力
入力のタイプを電子メールに設定すると、ブラウザは入力が電子メールタイプかどうかを確認します。もちろん、フロントエンドの検証だけに頼ることはできず、バックエンドにも対応する検証が必要です。
8。プレースホルダー
この入力属性の意味は、JavaScriptを使用してプレースホルダーの効果を作成する必要がないことです
9。ローカルストレージ
ローカルストレージを使用して、クライアントに大きなデータフラグメントを永久に保存します（アクティブに削除されない限り）。現在、ほとんどのブラウザはすでにそれらをサポートしています。 window.localStorageが存在するかどうかを確認できます。
10。セマンティックヘッダーとフッター
11.その他のHTML5フォーム機能
12。IEおよびHTML5
デフォルトでは、新しいHTML5要素がインラインにレンダリングされますが、次の方法を使用して作成できます
ブロックモードでレンダリングされます
ヘッダー、フッター、記事、セクション、NAV、メニュー、hgroup {
表示：ブロック;
}
残念ながら、IEはこれらのスタイルを無視し、次のように修正できます。
document.createelement（記事）;
document.createelement（フッター）;
document.createelement（header）;
document.createelement（hgroup）;
document.createelement（nav）;
document.createelement（メニュー）;
13。HGROUP
通常、ヘッダーのタイトルのセットを組み合わせるために使用されます。
<ヘッダー>
<hgroup>
<h1>ファンページをリコール</h1>
<h2>生涯の記憶を望んでいる人のみ。 </h2>
</hgroup>
</header>
14。必要な属性
必要なプロパティは、入力が必要かどうかを定義します。以下のように宣言できます
<入力型=テキスト名= someinput reby>
または
<入力型=テキスト名= someinput rebys =必須>
15。オートフォーカスプロパティ
その意味と同じように、それは入力ボックスに焦点を合わせることです
<入力タイプ=テキスト名= someinput placeholder = douglas quaid exice autofocus>
16。オーディオサポート
HTML5は<audio>タグを提供します。サードパーティのプラグインに従ってオーディオをレンダリングする必要はありません。ほとんどの最新のブラウザはHTML5オーディオのサポートを提供していますが、それでも互換性の処理を提供する必要があります。
<audio autoplay = autoplay controls = controls>
<source src = file.ogg /> <！ - ff–>
<source src = file.mp3″ /> <！ - webkit –>
<a href = file.mp3″>このファイルをダウンロード</a>
</audio>
17。ビデオサポート
オーディオと同じように、<video>タグはビデオのサポートを提供します。 HTML5ドキュメントはビデオの特定のエンコードを指定していないため、ブラウザはサポートするエンコーディングを決定し、多くの矛盾につながります。 SafariとIEは、H.264エンコードフォーマット、Firefox、OperaはTheoraおよびVorbisエンコード形式をサポートしています。 HTML5ビデオを使用する場合、両方とも提供する必要があります。
<ビデオコントロールプリロード>
<source src = cohagenphonecall.ogv type = video/ogg; codecs = 'vorbis、theora' />
<source src = cohagenphonecall.mp4″ type = video/mp4; 'codecs =' avc1.42e01e、mp4a.40.2 ' />
<p>ブラウザは古いです。 <a href = cohagenphonecall.mp4″>代わりにこのビデオをダウンロードしてください。</a> </p>
</video>
18.プリロードビデオ
プリロードプロパティは文字通りと同じくらい簡単であり、ページが読み込まれているときにビデオをプリロードする必要があるかどうかを決定する必要があります
<ビデオプリロード>
19。ビデオコントロールを表示します
<ビデオプリロードコントロール>
20。正規表現
パターン属性のため、マークアップで正規表現を直接使用できます
<form action = method = post>
<ラベルの= username>ユーザー名を作成：</label>
<入力型=テキスト名= username id = username placeholder = 4 <> 10″パターン= [a-za-z] {4,10} autofocus>
<ボタンタイプ=送信> go </button>
</form>
21.検出属性サポート
Modernizrに加えて、JavaScriptを使用して、次のような一部のプロパティがサポートされているかどうかを単純に検出することもできます。
<スクリプト>
if（！ 'pattern' in Document.createElement（ 'input'））{
//クライアント/サーバー側の検証を行います
}
</script>
22。マーク要素
<mark>要素を強調表示と考えてください。テキストの段落を選択する場合、JavaScriptのHTMLに対するマークアップ効果は次のとおりです。
<h3>検索結果</h3>
<p> Quatoが言った直後に彼らは中断されました、<mark>あなたの心を開きます</mark>。 </p>
23。<div>を使用するとき
HTML5は非常に多くの要素を導入しているので、Divを使用する必要がありますか？より良い要素がない場合は、Divを使用できます。
24.今すぐHTML5を使用したいですか？
2022年を待ってはいけません。今すぐ使用する準備ができています。
25。HTML5ではないもの
1）SVG
2）CSS3
3）ジオロケーション
4）クライアントストレージ
5）Webソケット
26。データプロパティ
<div id = mydiv data-custom-attr = my value> bla bla </div>
CSSで使用：
<style>
H1：ホバー：{後
コンテンツ：attr（data-hover-response）;
色：黒;
位置：絶対;
左：0;
}
</style>
<h1 data-hover-response =私は私に触れないで言った！>私に触れないでください</h1>
27。出力要素
<出力>要素は、計算結果を表示するために使用され、ラベルのような属性もあります。
28.範囲入力を使用して、スライダーを作成します
HTML5が参照する範囲タイプは、最小、最大、ステップ、値のプロパティを受け入れるスライダーを作成できます
css 'を使用することができます：前と：後にminとmaxの値を表示します
<入力型=範囲名=範囲min = 0″ max = 10″ステップ= 1″値=>
input [type = range]：{content：attr（min）;パディング右：5px;
}
input [type = range]：after {content：attr（max）;パディング左：5px;}