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

はじめに
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

タグ