ホームページ

ウェブフロントエンド

H5 チュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:51 PM

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 サイトの典型的なセマンティクスを反映する一連の新しいタグと対応する属性を提供します。真実を実践してください。例を書いてみましょう:

コードをコピーします

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

--//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。

<ヘッダー>

ウェブサイトのタイトル

h1>

タグ

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

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

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

5

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

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

HTML 5
JavaScript< /li>

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

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

タグ
ドキュメント内のセクションを定義します。章、ヘッダー、フッター、文書のその他の部分など。

使用ガイドライン: セクション化されたコンテンツに使用され、ドキュメントフローで新しいセクションが開始されます:

コードをコピー

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

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

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

セクションについて
セクションの紹介
...

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

コードをコピーします

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

タグ

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

コードをコピー

コード

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 までご連絡ください。