概要
HTML5の新機能は、いくつかの新しいタグ、新しいフォーム、新しいフォーム属性などを追加することで、主に以前の欠点に対処しています。
これらの新機能には互換性の問題があり、基本的に IE9以上のブラウザでしかサポートされていません。
番号tel検索、意味タグ
以前は、レイアウトは基本的にdivで行われていました。divは検索エンジンにとってセマンティクスがありません。
<div class=「ヘッダー”> </div>
<div class=ナビ”> </div>
<div class=内容”> </div>
<div class=「フッター”> </div>
HTML5の開発後、いくつかのセマンティックタグを追加し、この場合、より多くのブラウザの検索エンジンの検索に資するだけでなく、サイトのseoを容易にするために、次のいくつかのセマンティックタグの追加です。
- <header> ヘッダタグ
- <nav> ナビゲーション・ラベル
- <article> コンテンツタグ
文書の領域を定義 - <aside> サイドバーのタブ
- <footer> 末尾ラベル
マルチメディアタグ
マルチメディアタグは、audio audioと videoの 2つのタグに分かれています。これらを使えば、時代遅れのフラッシュや他のブラウザのプラグインを使う代わりに、簡単にオーディオやビデオをページに埋め込むことができます。
マルチメディア・タグには多くのプロパティ、メソッド、イベントがあるため、必要なときにどのように使うかを学ぶには、関連するドキュメントを調べる必要があります。
音声タグ - audio
基本的な使用法 要素は3つのビデオフォーマットをサポートしています。
構文を使ってください：
<video src="media/mi.mp4"></video>
互換性のあるライティング
各ブラウザのサポートが異なるため、文章の互換性があるため、この文章を理解することができます。
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
ブラウザがサポートしていない<video> タブプレイ
</ video >
上記の書き方では、ブラウザはvideoタグのソースを照合し、サポートしていればそれを再生し、サポートしていなければ、一致するフォーマットがなくなるまでそれを照合します。
- 自動再生
- 注: Google Chromeでは、自動再生はデフォルトで無効になっています。自動再生の効果を得たい場合は、ミュート属性を設定する必要があります。
- 幅
- height
- loop ループ
- src
- muted ミュート再生
サンプルコード
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
概要
基本的な使い方
現在のエレメントは3つのビデオフォーマットをサポートしています。
構文を使ってください：
<audio src="media/music.mp3"></audio>
互換性のあるライティング
各ブラウザのサポートが異なるため、文章の互換性があるため、この文章を理解することができます。
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
ブラウザがサポートしていない<audio>
</ audio>
上記の書き方では、ブラウザはaudioタグのソースをマッチさせ、サポートしていればそれを再生し、サポートしていなければ、マッチするフォーマットがなくなるまでそれをマッチさせます。
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
まとめ
- オーディオタグとビデオタグは、ほぼ同じ方法で使用されます。
- ブラウザのサポートは様々です
- Google Chrome、オーディオとビデオの自動再生を無効に
- video タグに muted 属性を追加すると、ビデオはミュートできますが、音声はミュートできません。
- ビデオタブは焦点であり、多くの場合、自動再生の設定、コントロールコントロールの不使用、ループ、サイズ属性の設定を行います。
、新しいフォーム要素
H5では、プログラマーの開発を容易にするフォームの多くのタイプの新しい追加を支援します。
<!-- バリデーションのためにフォームフィールドを追加する必要がある>
<form action="">
<ul>
<li> : <input type="email" /></li>
<li> : <input type="url" /></li>
<li>: <input type="date" /></li>
<li> : <input type="time" /></li>
<li> : <input type="number" /></li>
<li>携帯電話番号: <input type="tel" /></li>
<li> : <input type="search" /></li>
<li> : <input type="color" /></li>
<!-- フォームを検証するために送信ボタンがクリックされると>
<li> <input type="submit" value=" ></li>
</ul>
</form>
一般的な入力タイプ
text password radio checkbox button file hidden submit reset image
