検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 の革新性と Structure_html5 チュートリアル スキルの美しさ

HTML5 の革新性と Structure_html5 チュートリアル スキルの美しさ

WBOY
WBOYオリジナル
2016-05-16 15:51:041231ブラウズ
はじめに
HTML 5 は革命のようなもので、Web2.0 以降の時代に勢いよく進行しています。
HTML 5 とは何かについては、ここで詳しく説明する必要はありません。 HTML 5 の革新性については、私の理解によれば、明確なセマンティクスを備えたタグ システム、複雑さを簡素化するリッチ メディア サポート、魔法のようなローカル データ ストレージ テクノロジ、プラグインを必要としないリッチ アニメーション (キャンバス) として要約できます。 、強力な API サポート。つまり、HTML 5 は人間とコンピューターの対話をより快適でユーザーフレンドリーなものにします。以前はリッチ メディア アプリケーションとネイティブ ストレージがサポートされていなかったことも、ブラウザにとって問題ではなくなりました。 Web をコンテンツ プラットフォームから標準化されたアプリケーション プラットフォームに推し進め、さまざまなプラットフォーム陣営の標準を統一することが、HTML 5 革命の本来の目的です。 この記事では、いくつかのアイデアを紹介し、HTML 5 の革新の 1 つであるセマンティクスを備えたより明確で簡潔な構造について説明します。

「ヘッド」から始めます 標準の XHTML ヘッダー コードは次のようになります:


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






覚えていますか？丸暗記しますか？もちろん違います！機械的にコピー＆ペーストするだけです。
標準の HTML 5 ヘッダーがどのようなものかを見てください:


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



これは言うまでもなく複雑です。はい、HTML 5 ヘッダーは非常にシンプルで覚えやすいです。また、大文字小文字、引用符、最後の山かっこの前のバックスラッシュは無視できます。
なぜこんなに緩いのでしょうか？実際、XHTML を text/html として送信すると、ブラウザはそれを適切に解析でき、コードの構文は気にしません。したがって、HTML 5 は形而上学的なものであり、元の標準の一部に違反する可能性がありますが、ブラウザーでは依然として良好に動作します。
もちろん、チームの支援とその後のメンテナンスの便宜のために、次のような好みの書き方を統一する必要があります。


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

charset=" gb2312" />


;


さらに、HTML 5 は現在すべてのブラウザーでサポートされているわけではありませんが、これにより 100 バイト以上を節約できます (1 日の PV が 100 万を超えるサイトの場合、大量のトラフィックを節約できます)。 ) ヘッドは完全に互換性があります。ブラウザの解析モードを調べたことがある場合は、doctype が定義されていない場合、ページは奇妙なモードをトリガーすることを知っているはずですが、 が定義されている限り、ブラウザは標準モードでページを解析できます。特定の種類の DTD を指定する必要はありません。

新しいセマンティック タグ システム

セマンティック コーディングは、資格のあるフロントエンド開発者にとって必須のスキルです。しかし、Web ページがますますリッチになるにつれて、非セマンタイズには元の xhtml タグのみが使用されます。それは明らかに彼の能力を超えていた。神は「光あれ！」と言いました。すると光がありました。したがって、HTML 5 は、最新の Web サイトの典型的なセマンティクスを反映する一連の新しいタグと対応する属性を提供します。真実を実践してください。例を書いてみましょう:



コードをコピーします

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


    HTML 5CSS


--//header end-->

これは HTML に関する記事です5 の新しい構造タグ。




HTML 5 の新しい構造タグについての記事です。




著者について


Mr.Think、Webフロントエンド技術を中心に活動する一般人。







上記はヘッダー、記事表示領域で構成される単純なブログページの部分 HTML です。 , 右 サイドバーとボトムから構成されます。コーディングはきちんとしていて、XHTML のセマンティクスに準拠しており、HTML 5 でも適切に実行できます。しかし、ブラウザにとって、これは重みを区別しないコードの一部であり、マシンが対応するブロックを定義するためのセマンティクスを理解できるようにするタグではありません。たとえば、標準ブラウザ (Firefox、Chrome、さらには IE の新バージョンなど) には、顧客がページ ナビゲーションに直接ジャンプできるショートカット キーがありますが、問題は、すべてのブロックが DIV で定義されており、ID がDIV の値 これは開発者によって決定されるため、ブラウザにはどのブロックがナビゲーション リンクになるべきかわかりません。 HTML 5 の新しいタグの登場により、この欠点はまさに補われます。次に、上記のコードは HTML 5 で次のように記述できます。





コードをコピーします


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



Web サイトのサブタイトル
< ; /hgroup>
    HTML 5 JavaScript
    🎜 >

    これは HTML 5 の新しい構造タグに関する記事です。

    これは HTML 5 の新しい構造タグに関する記事です。

著者について

.Webフロントエンド技術を中心に活動する一般人、Think。





HTMLのページ構造はこんな感じです コメントなしでも一目で美しさがわかります。ブラウザにとって、対応するブロックを見つけるのに迷うことはなくなります。
HTML 5 の新しいタグを使用して要素を構造化する方法
上記の例を通して、HTML 5 の新しいタグの構造上の革新性を理解しましたが、実際に使用する場合、それらを適切に使用するにはどうすればよいでしょうか?これは多くの HTML 5 学習者が尋ねたい質問でもあると思います。 XHTML セマンティクスと同様に、HTML 5 セマンティクス タグの使用も従う必要があります。各タグには特定の意味があり、セマンティクスにより、適切な場所で適切なタグを使用して、人間とマシンをよりよく理解できるようになります (マシンは、ブラウザや検索エンジンなど）一目で理解できます。たとえば、header タグは通常、ページの最初のブロック要素であり (header タグは、記事ブロックのタイトルなどのタイプ ヘッダー要素でも使用できます)、ページのトピック情報が含まれます。通常、ナビゲーション情報をラップするために使用されます。;フッターは、通常、ページの下部などに情報をラップするために使用されます。
以下は、HTML 5 マニュアルを参照してリストした構造クラスの一般的に使用される新しいタグの意味論的な説明と使用ガイドラインです。
タグ
マニュアルの説明: のヘッダーを定義します。セクションまたはドキュメント。
使用ガイドライン: 通常、ページヘッダーを含めるために使用されますが、記事ヘッダーなどの他の領域ヘッダーにも使用できます:





コードをコピー


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

<ヘッダー>

ウェブサイトのタイトル

h1>




タグ
: Web ページまたはセクションの組み合わせを変更するために使用されます。 。
使用ガイドライン: 記事のタイトルとサブタイトルなど、タイトルの種類の組み合わせに使用します:



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

これは HTML 5 の構造タグを紹介する記事です


5





ナビゲーションリンクの部分を定義します。
使用ガイドライン: ページのナビゲーション部分を定義するために使用されます:



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

  • HTML 5


  • JavaScript< /li>



タグは記事以外のコンテンツを定義します。余談の内容は記事の内容と関連している必要があります。
使用ガイド: セクション化されたコンテンツに使用され、ドキュメント フローで新しいセクションが開始されます。通常は記事のコンテンツに関連するサイドバーに使用されます:



コピーcodeコードは次のとおりです。



タグ
ドキュメント内のセクションを定義します。章、ヘッダー、フッター、文書のその他の部分など。
使用ガイドライン: セクション化されたコンテンツに使用され、ドキュメント フローで新しいセクションが開始されます:




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

セクションとは何ですか?

新しいセクション
<記事>

セクションについて

セクションの紹介
...

またはドキュメントのフッター。通常、これには作成者の名前、文書の作成日、および/または連絡先情報が含まれます。
使用ガイドライン: 通常、ページ全体の共通の下部をラップするために使用されますが、記事の下部など、他の領域の下部でも使用できます:




コードをコピーします


コードは次のとおりです:
COPYRIGHT@Mr.Think
タグ
手動定義: 外部コンテンツを定義します。たとえば、外部ニュースプロバイダーからの新しい記事、ブログからのテキスト、フォーラム
からのテキストなどです。または他の外部ソースからのコンテンツ。
使用ガイド: 名前が示すように、通常は記事ブロックで使用されます:




コードをコピー


コード

HTML 5 の構造タグを紹介する記事です

;

HTML 5 の革新


<図>
図ラベル
<図キャプション>

画像の説明です。
メニュー リストを定義します。フォーム コントロールをリストする場合は、このラベルを使用します。
使用ガイド: メニュー ブロックでメニュー リストまたはメニュー オプションを定義するために使用します:


コードをコピーコードは次のとおりです。次のように:

  • HTML 5

  • JavaScript< /li>



    • HTML 5 のその他の新しいタグについては、個別に説明しませんので、マニュアルを参照してください。
    実際、XHTML の div、h1、inpu、その他のタグなど、これらは練習すれば簡単に使用できます。
    互換性について
    フロントエンドに注目して勉強するのが好きな人なら、タオバオのページ構造には HTML 5 の新しいタグが多数使用されていることを知っているはずです。つまり、私が言いたいのは、勇気を持って試す限り、互換性は問題ではないということです（この記事は構造に関する記事です、は〜）。

    あとがき
    新しいテクノロジーには適応のプロセスが必要です。優れた Web フロントエンド開発者になる準備ができている場合は、常に最新のフロントエンド テクノロジを試して受け入れる必要があります。
    孫文はかつて、文明の幸福を経験したければ、文明の苦痛を経験しなければならないと言いました。これは人類の革命であり、HTML 5 の革命も同様です。 IEの緩やかな衰退により、大手ブラウザメーカーは初めて戦国時代に突入し、英雄たちは王位を争っています。開発者に関しては、主要なブラウザ メーカーが、ヒーローのグループが 1 つを競い合って崩壊するのではなく、可能な限り同じ標準に従うことだけを期待しています。同じアプリケーションをあらゆるタイプのユーザーに効率的かつ完璧に提示することが私たちの最終目標だからです。

    このように、この記事では、ページの doctype から始まり、HTML 5 の新しいタグを使用してよりセマンティックなページ構造を構築し、その後、ページ構造に関連するいくつかの新しいタグについて説明します。誰もが HTML 5 の構造的な新しいタグについて新たな理解を持っていると思います。興味がある場合は、IDE を開いて、HTML 5 の新しいタグで構築されたコードを作成し、CSS を使用して壮大なブループリントを表現してください。 (出典:

    Mr.Think)
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：HTML 5 のタグ、属性、イベント、ブラウザーの互換性に関するチートシート (パッケージ download_html5 チュートリアル スキル付き)次の記事：HTML 5 のタグ、属性、イベント、ブラウザーの互換性に関するチートシート (パッケージ download_html5 チュートリアル スキル付き)

    関連記事

    続きを見る