コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 に関する 22 の基本スキル (グラフィック チュートリアル)_html5 チュートリアル スキル

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

WBOY
リリース： 2016-05-16 15:51:12
オリジナル
1524 人が閲覧しました

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

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

"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.

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

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



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




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



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

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


コードをコピーします
コードは次のとおりです:
リアクターを開始します。


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

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

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



<ボタンtype=" submit"> 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 つ目の方法はより簡潔です。


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



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



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








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


コードをコピー コードは次のとおりです:
< ;input type="text" name="someInput" placeholder="douglas quaid" required="required" autofocus="autofocus">


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

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


コードをコピーコードは次のとおりです:
<オーディオ コントロール=コントロール" autoplay ="autoplay">


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




音声ファイルにはなぜ 2 つの形式があるのですか? Firefox ブラウザと Webkit ブラウザではサポートされる形式に違いがあるため、Firefox は .ogg ファイルのみをサポートし、Webkit は .mp3 ファイルのみをサポートします。解決策は、Firefox と Webkit と互換性があるように 2 つのバージョンのオーディオ ファイルを作成することです。 . ブラウザでは、IE はこのタグをサポートしていないことに注意してください。
16. ビデオ再生のサポート
前の記事：HTML5 時計の実装コード_html5 チュートリアルのスキル 次の記事：html5 キャンバスのシンプルな描画ボードの実装コード_html5 チュートリアルのスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2052
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2209
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1864
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1750
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1772
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート