上記の章では、HTML5の最初の7つのスキルについて説明し、新しいスキルを学びましょう。
8。プレースホルダー
以前は、JavaScriptを使用してテキストボックスのプレースホルダーを作成する必要がありました。最初に値属性を設定して適切かどうかを確認できますが、ユーザーがテキストを削除する限り、入力コンテンツが再び空になります。プレースホルダー属性は、これを効果的に補償します。
<入力名=電子メールタイプ=電子メール[email protected] />
9。ローカルストレージ
HTML5のローカルストレージのおかげで、高度なブラウザに入力したものを覚えておくことができます。ブラウザが後で閉じたり更新されていても、影響を受けません。すべてのブラウザがサポートするわけではありませんが、最も重要なインターネットエクスプローラー8、Safari 4、Firefox 3.5。
10。セマンティックヘッダーとフッター
<div id = header>
…
</div>
<div id = footer>
…
</div>
上記のコードはなくなりました。 IDが適用されていても、Divsには基本的にセマンティック構造はありません。 HTML5では、<header>および<footer>要素を使用でき、上記のコードを次のように置き換えることができます。
<ヘッダー>
…
</header>
<フッター>
…
</footer>
これらの2つの要素をウェブサイトの頭と足と混同しないように注意してください。それらを表す単なる容器です。
11。IEおよびHTML5
新しいHTML5要素を理解するには多くのお金がかかります。新しいHTML5要素をブロックレベルの要素として正しく表示できるようにするには、次のコードでスタイルを定義する必要があります。
ヘッダー、フッター、記事、セクション、NAV、メニュー、hgroup {
表示：ブロック;
}
それでも、IEはまだこれらの要素が何であるかを知らないため、これらの形式を無視し、次のコードを使用してこの問題を解決する必要があります。
document.createelement（記事）;
document.createelement（フッター）;
document.createelement（header）;
document.createelement（hgroup）;
document.createelement（nav）;
document.createelement（メニュー）;
12。グループタイトル（hgroup）
Webサイトに、それぞれ<h1>と<h2>タグが付いた名前と字幕タグがあるとします。 HTML4には、2つの間の関係を良好なセマンティック関係を説明する方法はありません。さらに、H2を使用してページに他のタイトルを表示する場合、階層に関してさらに問題があります。 Group Title hgroup要素を使用して、ドキュメントの概要全体に影響を与えることなく、これらのタイトルをまとめることができます。
<ヘッダー>
<hgroup>
<h1>ファンページをリコール</h1>
<h2>生涯の記憶を望んでいる人のみ。 </h2>
</hgroup>
</header>
13。必要な属性
フォームは、特定の入力が必要かどうかを指定する新しい必要なプロパティを許可します。この属性を、コードを作成するためのあなた自身の好みに従って、次の2つの異なる方法で宣言できます。
<入力型=テキスト名= someinput reby>
または、より厳格：
<入力型=テキスト名= someinput rebys =必須>
上記のコードの両方の行。このコード行を使用して、ブラウザが必要な属性をサポートした後、空白のフォームは送信されません。簡単な例を次に示します。また、プレースホルダー属性も追加しました。
<form method = post action =>
<ラベル= someinput>あなたの名前：</label>
<入力型=テキストID = someinput name = someinput placeholder = douglas quaid dought>
<ボタンタイプ=送信> go </button>
</form>
入力が空の場合、フォームは送信されず、テキストボックスを強調表示します。
14。オートフォーカス属性
同様に、HTML5では、AutoFocusの問題を解決するためにJavaScriptソリューションは必要ありません。入力を選択または焦点を合わせる必要がある場合は、HTMLのオートフォーカスプロパティを使用できるようになりました。
<入力タイプ=テキスト名= someinput placeholder = douglas quaid exice autofocus>
15。オーディオサポート
オーディオを提供するためにサードパーティのプラグインに頼る必要はもうありません。 HTML5はオーディオ要素<Oudio>を提供します。現在、最新のブラウザのみがHTML5オーディオをサポートしています。この時点で、後方の互換性を提供する方が良いです。
<audio autoplay = autoplay controls = controls>
<ソースsrc = file.ogg />
<source src = file.mp3″ />
<a href = file.mp3″>このファイルをダウンロード</a>
</audio>
オーディオ形式といえば、MozillaもWebKitもそれを完全にサポートしていません。 Firefoxは.oggファイルを表示したいと考えており、WebKitブラウザーは最も一般的な.mp3拡張機能のみをサポートしています。これは、少なくともこれまでのところ、2つのバージョンのオーディオを作成する必要があることを意味します。 Safariがページをロードすると、.ogg形式のファイルが認識されず、スキップされてMP3バージョンに移動します。 IEはそれをサポートしておらず、Opera 10以下のみが.wavファイルをサポートしていることに注意してください。