HTML5 に関する 22 の基本スキル (グラフィック チュートリアル)_html5 チュートリアル スキル

Web技術の発展は目まぐるしく、時代についていかないと淘汰されてしまいます。そこで、今後の HTML5 に対応するために、この記事では HTML5 の基本スキルを 22 個まとめましたので、HTML5 をさらによく学ぶのに役立てていただければ幸いです。
1. 新しい Doctype 宣言
XHTML の宣言は長すぎて、この Doctype 宣言を手動で記述できるフロントエンド開発者はほとんどいないと思います。

コードをコピー

コードは次のとおりです:

br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 Doctype 宣言は非常に短いので、この宣言を見ればすぐに覚えられると思います。長くて少し異常な XHTML Doctype 宣言を覚えるために脳細胞を無駄にする必要はありません。

HTML5 の短い DOCTYPE 宣言により、Firefox や Chrome などの最新のブラウザーや IE6/7/8 などのブラウザーが (準) 標準モードに入ることができるようになります。 / 7 は実際に HTML5 Doctype をサポートできます。実際、Doctype がこの形式に準拠している限り、IE は標準モードになります。
2.

タグ

次の簡単なコードを見てください:

コードをコピーします。 🎜>コードは次のとおりです:

火星の画像.< ;/h6>

残念ながら、ここでの h6 タグは img タグとは何の関係もないようで、セマンティクスが十分に明確ではありません。 HTML5 はこれを認識し、

タグを採用しました。

を

タグと組み合わせて使用​​すると、h6 タグと img タグを組み合わせることができ、コードはよりセマンティックになります。

コードをコピーしますコードは次のとおりです:

これは興味深いものの画像です。 >

3.

を再定義します。少し前までは ロゴに関連するサブタイトルを作成するためのタグ。ただし、HTML5 では、 のフォント サイズが小さくなるように再定義されています。このタグを著作権情報に使用することを検討してください。ウェブサイト。
4. Javascript タグと CSS タグの type 属性を削除します
通常は、
に type 属性を追加します。

コードをコピーします

コードは次のとおりです:

HTML5 では、type 属性は少し冗長に見えるため、不要になりました。これを削除するとコードがより簡潔になります。

コードをコピーします

コードは次のとおりです:

5 . ダブルクォートを使用するかどうか

これは少しややこしいですが、HTML5 は XTHML ではないため、タグ内のダブルクォーテーションは省略できます。私を含め、ほとんどの同志は二重引用符を追加することに慣れていると思います。二重引用符を追加すると、コードがより標準的に見えるからです。ただし、二重引用符を使用するかどうかは個人の好みによって異なります。

コードをコピーします

コードは次のとおりです:

リアクターを開始します。

6. Web コンテンツを編集可能にする

7. メール入力ボックス
HMTL5 に新しい入力が追加されましたボックスの email 属性は、入力されたコンテンツがメールの記述形式に準拠しているかどうかを検出できます。この機能は、HTML5 までは JS でのみ検出できました。組み込みのフォーム検証は間もなく現実になりますが、多くのブラウザーはまだこの属性をサポートしておらず、通常のテキスト入力ボックスとしてのみ扱われます。

コードをコピー

コードは次のとおりです:

email:

submit form

これまでのところ、最新のブラウザでもサポートされていません属性があるため、この属性は当面はまだ信頼できません。
8. プレースホルダー
テキスト ボックスのプレースホルダー (このブログの検索ボックスの効果を参照) は、以前は、For を占有するには JS に依存するしかありませんでした。プレースホルダーの効果として、プレースホルダー属性プレースホルダーが HTML5 に追加されます。

コードをコピー

コードは次のとおりです:

同様に、現在の主流の最新ブラウザはこの属性をあまりサポートしていません。現在、Chrome と Safari のみです。はこの属性をサポートしていますが、Firefox と Opera はこのプロパティをサポートしていません。

9. ローカル ストレージ
HTML5 のローカル ストレージ機能により、ブラウザが閉じられて更新された場合でも、入力内容を「記憶」できます。一部のブラウザではこの機能をサポートしていませんが、IE8、Safari 4、Firefox 3.5 ではこの機能をテストできます。

10. セマンティックヘッダーとフッターの詳細
次のコードは HTML5 には存在しません

コードをコピーします

コードは次のとおりです:

...

...

通常、ヘッダーとフッターの div を定義してから、別の ID を追加しますただし、

タグと

タグは HTML5 で直接使用できるため、上記のコードは次のように書き換えることができます。 🎜>

コードは次のとおりです:

...

.. .

これら 2 つのタグを Web サイトのヘッダーおよびフッターと混同しないように注意してください。これらは、それらを表す単なるコンテナーです。

11. IE の HTML5 サポート

IE ブラウザーの現在の HTML5 サポートは良好ではなく、これは HTML5 の急速な普及にとって大きな障害となっています。まだとても良いです。

IE は HTML5 のすべての新しいタグをインライン要素に解析しますが、実際にはそれらはブロックレベルの要素であるため、それらのスタイルを定義する必要があります:



コードをコピー


コードは次のとおりです:

header、footer、article、section、nav、menu、hgroup { display: block ; }

にもかかわらず、現時点では、IE はこれらの新しい HTML5 タグを解析できません:

コードをコピーします


コードは次のとおりです:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup") ;
document.createElement("nav");
document.createElement("menu");

この Javascript コードを使用して、IE の解析を改善することができます。 HTML5

コードをコピー

コードは次のとおりです:

12. タイトルグループ (hgroup)
これは 2 番目のヒントと同様です。 h1 タグと h2 タグを使用して Web サイトの名前とサブタイトルをそれぞれ表すと、本質的に密接に関連している 2 つのタイトルが無関係になります。このとき、

タグを使用してそれらを組み合わせると、コードがよりセマンティックになります。

コードをコピーします

コードは次のとおりです:

一生の思い出を残したい人のみ。 ;

13. 必須属性
フロントエンド担当者は、多くのフォーム検証プロジェクトを実行している必要があります。その 1 つは次のとおりです。非常に重要 入力が必要な入力ボックスがいくつかあるため、JavaScript を使用してチェックする必要があります。 HTML5 では、新しい「必須」属性 (必須) が追加されています。 required 属性を使用するには 2 つの方法があります。2 番目の方法はより構造的であり、1 つ目の方法はより簡潔です。

コードをコピーコードは次のとおりです:

この属性を使用すると、フォーム検証が簡単になります。以下の簡単な例を見てください:

コードをコピーしますコードは次のとおりです

あなたの名前:

Go

入力ボックスが空の場合、フォームは正常に送信されません。
14. フォーカスを自動的に取得する
同様に、HTML5 では、入力ボックスを選択するか入力フォーカスを取得する必要がある場合に、入力ボックスのフォーカスを自動的に取得する問題を解決するために Javascript が必要なくなりました。新しい属性オートフォーカス:

コードをコピー コードは次のとおりです:

< ;input type="text" name="someInput" placeholder="douglas quaid" required="required" autofocus="autofocus">

autofocus は、「autofocus=autofocus 」と書くこともできます。 、これはより標準的なようですが、これは個人的な好みによって異なります。

15. オーディオ再生のサポート
HTML5 は、オーディオ ファイルを再生するためにサードパーティのプラグインに依存しなければならなかった問題を解決する

コードをコピーコードは次のとおりです:

このファイルをダウンロードします。




音声ファイルにはなぜ 2 つの形式があるのですか? Firefox ブラウザと Webkit ブラウザではサポートされる形式に違いがあるため、Firefox は .ogg ファイルのみをサポートし、Webkit は .mp3 ファイルのみをサポートします。解決策は、Firefox と Webkit と互換性があるように 2 つのバージョンのオーディオ ファイルを作成することです。 . ブラウザでは、IE はこのタグをサポートしていないことに注意してください。
16. ビデオ再生のサポート