HTML5のスキルについて説明し続けます：
16。ビデオサポート
Audio Element <Audio>は非常に似ており、新しいブラウザでHTML5ビデオをサポートしています。実際、最近YouTubeは新しいHTML5ビデオを埋め込んだことを発表しました。残念ながら、HTML5ドキュメントはビデオの特定のエンコーダーを示していないため、主にブラウザに依存します。 SafariとIE9はH.264形式のビデオをサポートできますが、FirefoxとOperaはまだTheoraとVorbisの形式に固執しています。したがって、HTML5ビデオを表示する場合、2つの形式を提供する必要があります。
17。ビデオプリロード
最初に、ビデオをプリロードするためにブラウザが必要かどうかを決定する必要があります。必要はありますか？訪問者がビデオの表示に特化したページに入ると、待ち時間を節約するためにページをプリロードすることが非常に必要であると仮定します。 Preload = Preloadを設定することで、ビデオをプリロードするか、それらの間にプリロードを追加できます。
<ビデオプリロード>
…
</video>
18。コントロールを表示します
上記のコードでは、ビデオは制御可能なコンポーネントのない画像としてのみ表示されることに気付いたかもしれません。これらの再生コントロールを取得するには、ビデオ要素でこれらの制御プロパティを指定する必要があります。
<ビデオプリロードコントロール>
…
</video>
19。正規表現
新しいパターンのプロパティのおかげで、コードに正規表現を直接挿入できます。
<form method = post action =>
<ラベルの= username>ユーザー名を作成：</label>
<入力ID = username type = text name = username placeholder = 4 <> 10″必須=必須autofocus = autofocus pattern = [a-za-z] {4,10}>
<ボタンタイプ=送信> go </button>
</form>
正規表現に精通している場合は、この新しいパターンに気付くでしょう：[a-za-z] {4,10}は、上限と小文字の文字と小文字のみを受け入れます。この文字列には、最大10文字の少なくとも4文字が必要です。
20。属性のブラウザサポートを検出します
前述のように、すべてのブラウザがこれらのプロパティをサポートしているわけではないので、ブラウザがそれらを認識できるかどうかを判断する方法はありますか？この質問はとても良いです。ここにあなたを紹介する2つの方法があります。最初のオプションは、Modernizrを使用して検出することです。または、これらの要素を作成および分析して、ブラウザが持っているものを確認することもできます。たとえば、前の例では、ブラウザがパターンプロパティを実行できるかどうかを判断する場合、ページにJavaScriptを追加できます。
alert（ 'pattern' in Document.createElement（ 'input'））// boolean;
実際、これはブラウザの互換性を決定する非常に一般的な方法です。 JQuery Libraryはこのトリックを利用しています。上記のコードでは、新しい入力要素を作成し、パターン属性を認識できるかどうかを確認します。認識できる場合、ブラウザはこの機能をサポートします。そうしないと、サポートされません。
<スクリプト>
if（！ 'pattern' in Document.createElement（ 'input'））{
//クライアント/サーバー側の検証を行います
}
</script>
これは、JavaScriptに頼ることで達成する必要があることを忘れないでください！
21.マーク要素
<mark>要素の主な機能は、ユーザーにとっての重要性を視覚的に強調する必要があるページ上のテキストを強調表示することです。このタグにラップされた文字列は、ユーザーの現在の動作に関連している必要があります。たとえば、いくつかのブログで心を開いて検索すると、<mark>タグでJavaScriptを使用して各アクションをラップできます。
<h3>検索結果</h3>
<h6> Quatoが言った直後に、彼らは中断されました、<mark>あなたの心を開きます</mark>。 </h6>
22。<div>を使用する時期
まだ<div>タグを使用する必要がありますか？もちろんそれは必要です。たとえば、特にコンテンツポジショニングの場合、要素でコードを包みたい場合は、<div>が非常に理想的な選択です。ただし、上記の状況ではなく、ブログ投稿またはフッターリンクリストをラップする場合は、それぞれ<ports>と<nav>要素を使用することをお勧めします。