HTML5イノベーション：構造の美しさ

著者：Eve Cole 更新時間：2025-03-27 16:00:04

HTML 5は革命のようなものであり、WEB2.0以降の時代に本格的です。

HTML 5とは、ここで詳しく説明する必要はありません。私の理解によれば、HTML 5の革新は、セマンティックラベルシステム、簡素化された豊富なメディアサポート、魔法のローカルデータストレージテクノロジー、プラグインを必要としない豊富なアニメーション（キャンバス）、および強力なAPIサポートとして要約できます。要するに、HTML 5はコンピューターの相互作用と人間のネットワークのインタラクションをより快適にし、ユーザーに適合させます。豊富なメディアアプリケーションのサポートの以前の不足とこのストレージは、もはやブラウザにとって苦痛ではありません。 HTML 5革命の当初の意図は、コンテンツプラットフォームから標準化されたアプリケーションプラットフォームにWebを宣伝し、各プラットフォームキャンプの標準を統合することです。

この記事では、HTML 5：より明確で簡潔な構造の革新の1つについて説明します。

最初から始めます

標準のXHTMLヘッダーコードは次のようになります。

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

<head>

<メタhttp-equiv = content-type content = text/html; charset = gb2312 />

</head>

覚えていますか？暗記して暗記しますか？もちろん違います！メカニカルコピーと貼り付けのみが必要です。

標準のHTML 5ヘッダーがどのようになっているかを見てみましょう。

<！doctype html>

<メタcharset = gb2312>

どちらがより複雑で、どれが単純なものであるかを言う必要はありません。はい、HTML 5ヘッダーは非常にシンプルであるため、簡単に記憶できます！また、最後の角度ブラケットの前のケース、引用、バックスラッシュは無視できます。

なぜそんなにゆるいことができるのですか？実際、XHTMLがテキスト/HTMLとして送信された場合、ブラウザもそれをうまく解析することができ、ブラウザはコードの構文を気にしません。したがって、HTML 5は形而上学的であり、元の標準の一部を破る可能性がありますが、ブラウザではうまく機能する可能性があります。

もちろん、チームの支援とその後のメンテナンスの便利さのために、次のような執筆スタイルを統合する必要があります。

<！doctype html>

<html>

<head>

<メタcharset = gb2312 />

...

</head>

<body>

...

</body>

</html>

さらに、HTML 5は現在すべてのブラウザーではサポートされていませんが、100バイト以上を節約できるこのヘッダー（毎日のPVレベルまたは100万を超えるサイトの場合、多くのトラフィックを節約できます）。ブラウザ解像度モードで調査した場合、ページはDoctypeを定義せずに奇妙なモードをトリガーすることを知っておく必要があります。<！Doctype HTML>ブラウザが定義されている限り、特定のタイプのDTDを指定せずに標準モードでページを解析できます。

新しいセマンティックラベリングシステム

セマンティックコーディングは、資格のあるフロントエンド開発者に必要なスキルですが、Webページがますます豊富になるにつれて、元のXHTMLタグをDesemanateに使用するだけでもそうすることができないことは明らかです。神は言った：光があるに違いない！それから光があります。したがって、HTML 5は、最新のWebサイトの典型的なセマンティクスを反映するために、一連の新しいタグと対応する属性を提供します。真実を生み出すために練習します。例を書きましょう：

<h1>ウェブサイトのタイトル</h1>

<h1>サイトサブタイトル</h1>

</div>

<ul>

<li> javascript </li>

</ul>

</div>

<！ - //ヘッダーエンド - >

<p>これは、新しいHTML 5構造タグに関する記事です。 </p>

</div>

<p>これは、新しいHTML 5構造タグに関する記事でもあります。 </p>

</div>

<！ - //左端 - >

<h1>著者プロファイル</h1>

<p> Mr.Think、Webフロントエンドテクノロジーに焦点を当てている普通の人。 </p>

</div>

<！ - //サイドエンド - >

ページの下部

</div>

<！ - //フッターエンド - >

上記は、ヘッダー、記事ディスプレイ領域、右側の列、および下部で構成されるシンプルなブログページパートHTMLです。エンコーディングはきちんとしており、XHTMLのセマンティクスに適合します。これはHTML 5でも適切に実行できます。しかし、ブラウザでは、これは、対応するブロックを定義するセマンティックを理解できるタグではなく、重みを区別しないコードです。たとえば、標準のブラウザ（Firefox、Chrome、さらにはIEの新しいバージョンなど）には、顧客がページナビゲーションに直接ジャンプするように導くショートカットキーがありますが、問題はすべてのブロックがDIVによって定義され、DivのID値が開発者によって決定されるため、ブラウザはどのブロックがナビゲーションリンクが配置されるかを知らないことです。新しいHTML 5タグの出現は、この欠点を補っています。次に、上記のコードがHTML 5に置き換えられている場合、次のように書くことができます。

<ヘッダー>

<h1>ウェブサイトのタイトル</h1>

<h1>サイトサブタイトル</h1>

</hgroup>

<nav>

<ul>

<li> javascript </li>

</ul>

</nav>

</header>

<記事>

<p>これは、新しいHTML 5構造タグに関する記事です。 </p>

</article>

<記事>

<p>これは、新しいHTML 5構造タグに関する記事でもあります。 </p>

</article>

</div>

<asas>

<h1>著者プロファイル</h1>

<p> Mr.Think、Webフロントエンドテクノロジーに焦点を当てている普通の人。 </p>

</脇>

<フッター>

ページの下部

</footer>

HTMLページ構造は非常に美しいため、コメントなしで一目で見ることができます。ブラウザの場合、対応するブロックを見つけたときに途方に暮れなくなります。

HTMLで要素を構成する方法5新しいタグ：

上記の例を通して、構造用の新しいHTML 5タグの革新を理解していますが、実際の使用に切り替えると、どのように適切に使用できますか？これは、多くのHTML 5学習者が尋ねたい質問でもあると思います。 XHTMLセマンティクスと同様に、HTML 5セマンティックタグの使用にも従う必要があります。各タグには特定の意味があり、セマンティクスとは、適切なタグを適切なタグを使用して、人やマシンをより良くすることを意味します（マシンは検索エンジンとしてブラウザーとして理解できます）。たとえば、ヘッダータグは通常、ページの最初のブロック要素です（ページのトピック情報を含むヘッダータグは、記事ブロックのタイトルなど、タイプのヘッダー要素でも使用できます）。 NAVタグは通常、ナビゲーション情報をラップするために使用されます。フッターは通常、ページの下部情報をラップするために使用されます。等々。

以下は、HTML 5マニュアルにリストされている構造クラスの一般的な新しいタグのセマンティックな説明と使用ガイドラインです。

<header>タグ

手動定義：セクションまたはドキュメントのヘッダーを定義します。

使用ガイドライン：通常、ページヘッダーを含めるために使用され、記事ヘッダーなどの他のエリアヘッダーにも使用できます。

<ヘッダー>

<h1>ウェブサイトのタイトル</h1>

<h1>サイトサブタイトル</h1>

</hgroup>

</header>

<hgroup>タグ

手動定義：Webページまたはセクションのタイトルを組み合わせるために使用されます。

使用のためのガイドライン：記事のタイトルや字幕など、タイトルクラスの組み合わせに使用されます。

<h1>これは、HTML 5構造タグを導入する記事です</h1>

<H2> HTML 5イノベーション</h2>

</hgroup>

<NAV>タグ

手動定義：ナビゲーションリンクを定義する部分を定義します。

使用のためのガイドライン：ページを定義するためのナビゲーションセクション：

<nav>

<ul>

<li> javascript </li>

</ul>

</nav>

<astafer>タグ

記事以外のコンテンツを定義します。脇にあるコンテンツは、記事の内容に関連する必要があります。

使用ガイドライン：セクションコンテンツに使用される新しいセクションがドキュメントストリームで開始されます。これは、通常、記事のコンテンツに関連するサイドバーで使用されます。

<asas>

<h1>著者プロファイル</h1>

<p> Mr.Think、Webフロントエンドテクノロジーに焦点を当てている普通の人。 </p>

</脇>

<section>タグ

手動定義：ドキュメントのセクションを定義します。たとえば、ドキュメントの章、ヘッダー、フッター、またはその他の部分。

使用ガイドライン：セクションに使用されるコンテンツは、ドキュメントストリームで新しいセクションを開始します。

<h1>セクションとは何ですか？ </h1>

<記事>

<h2>セクション</h1>について

<p>セクションはじめに</p>

...

</article>

</section>

<footer>タグ

手動定義：セクションまたはドキュメントのフッターを定義します。通常、作成者の名前、ドキュメントの作成日、および/または連絡先情報が含まれます。

使用ガイドライン：通常、ページ全体を一般的な底で包むために使用され、記事の下部など、他の領域の下部でも使用できます。

<フッター>

[email protected]

</footer>

<porth>タグ

手動定義：外部コンテンツを定義します。たとえば、ブログまたはフォーラムのいずれかの外部ニュースプロバイダーからの新しい記事。または、他の外部ソースに由来します。

使用のためのガイドライン：名前が示すように、それは一般的に記事ブロックで使用されます：

<記事>

<ヘッダー>

<h1>これは、HTML 5構造タグを導入する記事です</h1>

<H2> HTML 5イノベーション</h2>

</hgroup>

</header>

<p>記事の内容の詳細</p>

</article>

<図>タグ

手動定義：要素を組み合わせるために使用されます。

使用ガイドライン：写真と写真の説明を組み合わせるために主に使用されています：

<図>

<figcaption>これは、画像の説明情報です</figcaption>

</図>

<menu>タグ

手動定義：メニューリストを定義します。フォームコントロールをリストするときは、このタグを使用します。

使用ガイド：メニュークラスブロックで使用され、メニューリストまたはメニューオプションを定義するために使用されます。

<メニュー>

<li> javascript </li>

</メニュー>

HTML 5の他の新しいタグは1つずつ説明されません。自分でマニュアルを確認してください。

実際、これらのことは、XHTMLのDiv、H1、INPU、その他のタグのようなものです。日常生活でもっと練習する限り、自由に使用するのは簡単です。

互換性について

あなたがフロントエンドに勉強して注意を払うのが好きな人なら、新しいHTML 5タグがTaobaoのページ構造で使用されていることを知っておく必要があります。ですから、私が言いたいのは、あなたが試してみる限り、互換性は問題ではないということです。オンラインで多くの互換性の方法があります（この記事は構造に関するものです、ha〜）。

後の話

新しいテクノロジーには、適応プロセスが必要です。優れたWebフロントエンド開発者になる準備ができている場合は、最新のフロントエンドテクノロジーを試して受け入れ続ける必要があります。

Sun Wenはかつて、あなたが文明の幸福を作りたいなら、あなたは文明の苦痛をしなければならないと言いました。これは人類の革命にも当てはまり、HTML 5の革命もそうです。IEの漸進的な衰退により、主要なブラウザメーカーが戦う州の期間に入り、互いに競争することができました。開発者に関しては、大手ブラウザのメーカーが、競争後にプレーヤーを分割するのではなく、可能な限り同じ基準をたどる必要があることを願っています。なぜなら、あらゆる種類のユーザーに同じアプリケーションを効率的かつ完全にプレゼンテーションすることが私たちの究極の目標だからです。

このようにして、この記事はページのDoctypeから始まり、新しいHTML 5タグを使用して、よりセマンティック化されたページ構造を構築し、ページ構造に関連する新しいタグを説明します。誰もがHTML 5の構造的な新しいタグを新しい理解していると思います。興味がある場合は、IDEを開き、HTML 5の新しいタグによって構築されたコードを書き、CSSを使用してグランドブループリントを説明してください。