Webテクノロジーは速すぎて発展しており、時代に対応しないと、排除されます。したがって、今後のHTML5に対処するために、この記事はHTML5の22の基本的なスキルを要約し、HTML5をさらに学習することが役立つことを願っています。
1。新しいDoctypeステートメントXHTMLステートメントは長すぎます。このDoctypeステートメントを手書きできるフロントエンド開発者はほとんどいないと思います。<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
HTML5のDoctypeステートメントは非常に短いです。この声明を見た直後に覚えていると思います。 XHTMLのわずかに倒錯したDoctypeステートメントを思い出すために脳細胞を無駄にする必要はありません。
<！doctype html>
HTML5の短いDoctypeステートメントは、FirefoxやChromeなどの最新のブラウザー、およびIE6/7/8などのブラウザが（Quasi-）標準モードに入ることを許可することです。 IE6/7はHTML5 Doctypeもサポートできると思うかもしれません。実際、Doctypeがこの形式に準拠している限り、IEは標準モードに入ります。
2。<図>タグ次の簡単なコードをご覧ください。
<img src = "path/to/image">
<h6>火星の画像。</h6>
残念ながら、ここのH6タグはIMGタグとは何の関係もないようであり、セマンティクスは十分に明確ではありません。 HTML5はこれを実現し、<フィギュア>タグを採用しました。 <図> <figcaption>タグと組み合わせると、H6タグとIMGタグを組み合わせると、コードがよりセマンティックになります。
<図>
<img src = "path/to/image">
<figcaption>
<h6>これは何か面白いもののイメージです。 </h6>
</figcaption>
</図>
3。<small>を再定義します少し前に、<small>タグを使用して、ロゴに関連する字幕を作成しました。ただし、<small>タグはHTML5で再定義されてセマンティックになり、<small>のフォントサイズが小さくなります。考えてみてください。ウェブサイトの下部にある著作権情報にこのタグを使用することをお勧めします。 4。JavaScriptとCSSタグの型属性を削除しました通常、タイプ属性を<link>および<script>に追加します：<link rel = "styleSheet" type = text/css href = "path/to/styleSheet.css">
<script type = "text/javascript" src = "path/to/script.js"> </script>
HTML5では、この型属性は不要になりました。これは少し冗長であるように思われ、コードが削除された後、コードをより簡潔にすることができるからです。
<link href = "path/to/styleSheet.css">
<スクリプトsrc = "path/to/script.js"> </script>
5。二重引用符を使用するかどうかこれは少し混乱しています。HTML5はXTHMLではなく、タグに二重引用符を保存できます。私を含むほとんどの同志は、コードがより標準に見えるようになるため、二重引用符の追加に慣れていると思います。ただし、これは、二重引用符を使用するかどうかの個人的な好みに基づいて決定できます。<h6 id = "someid">反応器を起動します。 </h6>
6. Webコンテンツを編集可能にします7。電子メール入力ボックス入力ボックスの新しい電子メール属性がHMTL5に追加されました。これにより、入力コンテンツが電子メールの書き込み形式を満たしているかどうかを検出できます。この機能はますます強力になっています。 HTML5の前に、JSのみに頼ることができます。組み込みのフォーム検証関数はまもなく現実になりますが、多くのブラウザーはこのプロパティをサポートせず、通常のテキスト入力ボックスとしてのみ扱われます。
<form method = get>
<ラベル= "email"> email：</label>
<入力id = "email" type = "email" name = "email">
<button type = "submit">フォーム</button>を送信します
</form>
これまでのところ、最新のブラウザを含むこの属性はサポートされていないため、この属性は当面はまだ信頼できません。
8。プレースホルダーテキストボックスのプレースホルダー（このブログの検索ボックス効果を参照）は、ユーザーエクスペリエンスを改善するのに役立ちます。以前は、プレースホルダーの効果を達成するためにJSにのみ頼ることができ、HTML5にプレースホルダー属性プレースホルダーを追加しました。
<入力型= "email" name = "email" placeholder = "[email protected]">
同様に、現在の主流の最新のブラウザは、このプロパティをあまりサポートしていません。当分の間、ChromeとSafariのみがこのプロパティをサポートし、FirefoxとOperaはこのプロパティをサポートしていません。
9。ローカルストレージHTML5のローカルストレージ関数により、最新のブラウザは私たちが入力したものを覚えておくことができます。また、ブラウザが閉じて更新されていても、影響を受けません。一部のブラウザはこの機能をサポートしていませんが、IE8、Safari 4、およびFirefox 3.5は依然としてこの関数をサポートしていますが、テストできます。
10。より多くのセマンティックヘッダーとフッター次のコードは、HTML5には存在しなくなります
<div id = header>
...
</div>
<div id = footer>
...
</div>
通常、ヘッダーとフッター用のDIVを定義してからIDを追加しますが、HTML5では<header>および<footer>タグを直接使用できるため、上記のコードは次のように書き換えることができます。
<ヘッダー>
...
</header>
<フッター>
...
</footer>
これら2つのタグをウェブサイトのヘッダーとフッターと混同しないように注意してください。それらはそれらを表す単なるコンテナです。
11。IEHTML5のサポートIEブラウザは現在、HTML5をサポートしていません。これは、HTML5のより速い普及をブロックする大きなつまずきです。ただし、HTML5に対するIE9のサポートはまだ非常に優れています。
IEは、HTML5の新しく追加されたすべてのタグをインライン要素に解析しますが、実際にはブロックレベルの要素であるため、スタイルを定義する必要があります。
ヘッダー、フッター、記事、セクション、NAV、メニュー、hgroup {
表示：ブロック;
}
それにもかかわらず、IEはまだこれらの新しく追加されたHTML5タグを解析することはできません。この時点で、JavaScriptを使用してこの問題を解決する必要があります。
document.createelement（ "article"）;
document.createelement（ "footer"）;
document.createelement（ "header"）;
document.createelement（ "hgroup"）;
document.createelement（ "nav"）;
document.createelement（ "menu"）;
このJavaScriptコードを使用して、IEのより良い解析HTML5を修正できます
<スクリプトMCE_SRC = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
12。タイトルグループ（hgroup）これは2番目のトリックに似ています。 H1およびH2タグがWebサイトの名前と字幕を表すために使用されている場合、元の意味で密接に関連する2つのタイトルに関連しません。この時点で、<hgroup>タグを使用してそれらを結合して、コードがよりセマンティックになるようにすることができます。<ヘッダー>
<hgroup>
<h1>ファンページをリコール</h1>
<h2>生涯の記憶を望んでいる人のみ。 </h2>
</hgroup>
</header>
13。必要な属性フロントエンドの担当者は、多くのフォーム検証プロジェクトを行っている必要があります。重要なポイントの1つは、いくつかの入力ボックスを入力する必要があるため、JavaScriptをここで確認する必要があることです。 HTML5では、記入する必要がある新しい属性が追加されます。必要な属性を使用するには2つの方法があります。 2番目の方法はより構造的に見えますが、最初の方法はより単純です。
<入力型= "text" name = "someinput"必須>
<input type = "text" name = "someinput"必須= "必須">
このプロパティを使用すると、フォームの提出検証が簡単になります。次の簡単な例をご覧ください。
<form method = post>
<ラベル= someinput>あなたの名前：</label>
<入力ID = someinputタイプ=テキスト名= someinput placeholder = "douglas quaid"必須= "必須">
<button type = "submit"> go </button>
</form>
入力ボックスが空の場合、フォームは正常に送信されません。
14.フォーカスを自動的に取得します同様に、HTML5は、入力ボックスの自動フォーカス取得を解決するためにJavaScriptを必要としなくなりました。入力ボックスを選択するか、入力フォーカスが取得された場合、HTML5は自動フォーカス取得プロパティオートフォーカスを追加しました。
<input type = "text" name = "someinput" placeholder = "douglas quaid"必須= "必須" autofocus = "autofocus">
オートフォーカスは、個人的な好みに応じて、オートフォーカス=オートフォーカスとして記述することもできます。
15。オーディオ再生サポートHTML5は<Oudio>タグを提供します。これは、過去にオーディオファイルを再生するためにサードパーティのプラグインに依存しなければならなかった問題を解決しました。これまでのところ、このタグをサポートしている最新のブラウザはごくわずかです。
<audio Controls = "Controls" autoplay = "autoplay">
<source src = "file.ogg" _fcksavedurl = "" file.ogg "" />
<source src = "file.mp3" />
<a href = "file.mp3">このファイルをダウンロード</a>
</audio>
オーディオファイルの2つの形式があるのはなぜですか？ FirefoxとWebKitブラウザでサポートされている形式に違いがあるため、Firefoxは.oggファイルのみをサポートできますが、WebKitは.mp3ファイルのみをサポートします。解決策は、2つのバージョンのオーディオファイルを作成して、FirefoxとWebKitブラウザーと互換性があるようにすることです。 IEはこのタグをサポートしていないことに注意する必要があります。
16。ビデオ再生サポート<audio>タグと同様に、HTML5は<video>タグでビデオファイルを再生するためのサポートも提供します。 YouTubeは、新しいHTML5ビデオEmbedも発表しました。ただし、HTML5仕様が特定のビデオデコーダーを指定していないのは、ブラウザがそれ自体を決定できることは少し残念です。これにより、ブラウザの互換性の問題が発生します。 SafariとIE9はどちらもH.264ビデオ（Flash Playerがプレイできます）をサポートしていますが、FirefoxとOperaはオープンソースのTheoraとVorbisの形式をサポートしています。したがって、HTML5ビデオを表示する場合は、2つの形式を準備する必要があります。<ビデオコントロールプリロード>
<source src = "cohagenphonecall.ogv" type = "video/ogg"; Codecs = 'Vorbis、Theora' " />
<source src = "cohagenphonecall.mp4" type = "video /mp4; 'codecs =' avc1.42e01e、mp4a.40.2 '" />
<div>ブラウザは古いです。 <a href = "cohagenphonecall.mp4">代わりにこのビデオをダウンロードしてください。</a> </div>
</video>
タイプ属性は省略できますが、追加すると、ブラウザはビデオファイルをより速く正確に解析できることに注意してください。すべてのブラウザがHTML5ビデオをサポートしているわけではないため、代わりにFlashバージョンを使用する必要があります。もちろん、決定はあなたにあります。
17.プリロードビデオプリロード属性：プリロード、まず、ビデオをプリロードする必要があるかどうかを判断する必要があります。訪問者が多くのビデオを備えたページにアクセスしている場合、ビデオをプリロードして、訪問者の待ち時間を節約してユーザーエクスペリエンスを向上させる必要があります。プリロードプロパティを<video>タグに追加して、プリロード関数を実装できます。
<Video Preload = Preload>
...
</video>
[/コード]
18。コントロールを表示しますディスプレイ制御プロパティは、ビデオに再生ポーズコントロールを追加できます。各ブラウザによって表示される効果は多少異なる場合があることに注意する必要があります。<Video Controls = "Controls" Preload = "Preload">
...
</video>
19。正規表現の使用HTML5では、正規表現を直接使用できます。
<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>
20。HTML5属性のブラウザサポートを検出します各ブラウザにはHTML5属性が異なるサポートがあるため、これにより互換性の問題が発生します。ただし、メソッドを使用して、ブラウザがこれらのプロパティをサポートするかどうかを検出できます。上記の例のコードが、パターン属性がブラウザによって認識されているかどうかを検出する場合、JavaScriptコードを使用してそれを検出するために使用できます。
alert（ 'pattern' in Document.createElement（ 'input'））// boolean;
実際、これはブラウザの互換性を決定するために一般的に使用される方法であり、jQueryライブラリはしばしばこの方法を使用します。入力タグは上記のコードで作成され、パターン属性がブラウザによってサポートされているかどうかを確認します。サポートできる場合、ブラウザはこの機能をサポートします。そうしないと、サポートされません。
<スクリプト>
if（！ 'pattern' in Document.createElement（ 'input'））{
//クライアント/サーバー側の検証を行います
}
</script>
21。マークタグ<mark>タグは、ユーザーにとっての重要性を視覚的に強調する必要があるテキストを強調表示するために使用されます。このタグにラップされた文字列は、ユーザーの現在の動作に関連している必要があります。たとえば、一部のブログで心を開いて検索すると、<mark>タグでJavaScriptを使用して各アクションをラップできます。<h3>検索結果</h3>
<h6> Quatoが言った直後に彼らは中断されました、<マーク>「あなたの心を開く」</mark>。 </h6>
22. Divタグを正しく使用する方法質問がある人もいるかもしれません。 <header>や<footer>などのタグを使用して、<div>タグはまだhtml5で機能しますか？答えはイエスです。たとえば、特別なコンテンツをラップできるコンテナを作成する場合は、無料で柔軟な<div>が間違いなく最初の選択です。記事またはナビゲーションメニューを作成する場合は、より多くのセマンティック<ports>および<Nav>タグを使用することをお勧めします。
多くの人々は、HTML5はまだ長い時間かもしれないと考えているので、直接それを無視しています。実際、多くのWebサイトがHTML5を現在使用し始めています。実際、HTML5のいくつかの新しい属性と関数は、コードをより簡潔にすることです。これは常に良いことであり、私たちの賞賛に値するはずです。最後に、HTML5に関するこのエントリーレベルの記事をお読みいただきありがとうございます。HTML5をさらに学習するための助けを提供したいと考えています。