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 の新しい構造タグに関する記事です。