Webページの構造ベースのHTML5フロントエンド開発ベースのチュートリアル

今、私たちは、のは、骨にいくつかの肉を追加し始めると、ページの一部の構造を提供するために聞かせて、分解ベースのテンプレートを持っています。

その後、この本の中で、我々はHTML5 CSS3の機能と他の利点を追加し、具体的に対処します。あなたが使用したい要素サイトの全体的なレイアウトを構築するときに今、我々が検討します。このセクションと次の関連章の意味では、我々は、コンテンツの多くをカバーします。私たちは言葉「意味」を使用すると特定のHTML要素は、意味の内容を記述する方法を指します。

あなたはHTML5ヘラルドスクリーンショットを振り返って(またはオンラインのウェブサイトを見た)場合は、次のようにそれが分かれでしょう:

ロゴとタイトルのヘッダ部

ナビゲーションバー

テキストは3つに分割されています

コラム記事と広告ブロック

フッターは、いくつかの著者と著作権情報が含まれています

要素が収まるかを決定するページのこれらのさまざまな部分に先立ち、私たちはいくつかのオプションを検討してみましょう。まず、ページのヘルプ分割するために使用することができますいくつかの新しいHTML5セマンティック要素を紹介し、文書の構造に多くの意味を追加します。

フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。

ヘッダ要素

当然のことながら、我々は最初の要素ヘッダーです見てみましょう。仕様が簡潔として説明する「エントリ又はナビゲーションエイズのセット。」

通常の仮定とは対照的に、あなたは、コンテンツの要素を紹介するセクションごとに新しいヘッダを含めることができます。これは、唯一のページタイトル(通常タグ使用<DIV ID =「ヘッダ」>)のために予約されていません。我々は「ノブ」は、本明細書で用語を使用した場合、我々は、実際の要素に限定されるものではないsectionTopの以下の部分で説明し、技術的には、我々は平均HTML5「は、セグメントコンテンツ」と呼ばれます コンテンツのどの部分が自身のタイトルを必要とするかもしれないこと。この手段は、たとえこの手段ページという、いくつかのそのようなブロックがあります。

ヘッダ要素は、ページ、ページ全体またはアプリケーション、またはその両方のいずれかの単一部位に導入またはナビゲーション支援特定するために使用することができます。

レポートの広告

ヘッダ要素は、しばしば、または部分的にではなく、その定義された位置にページの最上部に配置されているが。あなたのサイトのレイアウトの左側には、物品の記事やブログのタイトルがさえ右側の下、コンテンツに位置していることを要求することができます。どちらを使用する方法、あなたはまだ、コンテンツヘッダを記述するためにそれらを使用することができます。

section要素

あなたはHTML5要素の部分に精通している必要があり、次の要素。仕様は、次のセクションを定義します。

section要素は、ドキュメントやアプリケーションの一般的なセクションを表します。この場合、典型的にはタイトルと、コンテンツのグループ化の対象。

さらに説明、セクションは、一般的なスクリプトやスタイリングの目的のための容器として使用されるべきです。あなたが(例えば、必要なCSSレイアウトを達成するために)汎用コンテナとして使用されるセクションにできない場合、あなたは何を使うべきでしょうか?私たちの古くからの友人、div要素が意味的に無意味です。

戻る仕様は、関連するコンテンツをパッケージ化する一般的な方法で、「テーマ」、したがって、ないあるべき部分要素の内容を定義することは真実ではありません。

許容される目的のセクション要素備えるのいくつかの例:

タブ付きインターフェースの様々な部分

例えば、会社のページ「について」の一部は、同社の歴史、ミッションステートメントとチームについての情報を含むことができ、ページ「について」の様々な部分

ページ長い「サービス規約」のさまざまな部分。

オンラインニュースサイトの様々な部分は、例えば、物品は、スポーツ、世界情勢や他のいくつかの経済的なニュースに分けることができます

注:セクションの適切な使用

Webデザイナーが利用できるたびに新しいセマンティックマークアップは、これらの要素の適切な使用を構成するもので議論する意思やその他の問題の仕様となります。あなたは以前のHTML仕様書で論じ要素の適切な使用についてのDLを覚えていることがあります。驚くことではないが、HTML5は、セクション要素に来る場合は特に、この現象の影響を受けません。ブルース・ローソン(ブルース・ローソン)が過去に使用セクションを認めるとしても有名なHTML5の権限が正しくありません。明確にするために、彼の間違いを説明するために読書ブルースの記事の価値があります。

要するに:

より具体的な意味単位ではなく、使用して、適切な(例えば、脇物品、またはNAV)の場合セクションでは、従って、一般的なものであり、。

レポートの広告

セクションでは、セマンティックな意味を持ち、それが何らかの形で関連が含ま何を意味しています。ちょうど少数の単語を簡潔に説明したいすべてのコンテンツを置くことができないあなたセクション場合は、意味的に中立の容器を必要とするかもしれない:humbledivを。

つまり、同じ意味で、それはいくつかの例で説明することができます。あなたが他の要素とは対照的に、指定された要素を使用したい理由を説明できると思うなら、それは解決することです。誰かが要求された場合には、議論の終わりには、エンターテイメントの富をもたらすと関係者全員のために、とさえあなたにコミュニティの規範のより広範な理解に貢献するかもしれないことがあります。

、セクション要素は、前のセクションでは、ネストされた要素を可能にする適切な場合にも、心に留めておいてください。たとえば、オンラインニュースサイトのために、「世界のニュース」セクションには、さらにすべての主要なグローバル領域の一部に細分することができます。

記事の要素

記事の要素は、section要素に似ていますが、いくつかの重要な違いがあります。これは、定義の仕様に応じて次のとおりです。

記事の要素は、組成物の文書、ページ、アプリケーション、またはサイトの完全性や独立性を表しており、独立して関節組織では、たとえば、原則的に配布したり、再利用することができます。

キー用語は、別個の構成要素を定義している独立して割り当てることができます。そして、任意のコンテンツを含めることができますセクションでは、テーマごとにグループ化することができ、記事の内容は、単一の部品は、独自の上に立つことができなければなりません。コンテンツのピースが別のサイトに変更なしの場合には再リリースすることができた場合、またはRSSを介して行うことができます:疑いで、合同テストをしようとすると、この区別は、あなたの心はとてもクリアにすることは困難かもしれ更新がリリースされているような、やTwitterやFacebook上のソーシャルメディアサイトのような、それは特性の記事があります。

最後に、彼らはあなたの記事の構成を決めるが、ここではいくつかの仕様勧告と一致しています。

フォーラムの投稿

雑誌や新聞の記事

ブログエントリ

ブログエントリまたは物品上のユーザーコメント

最後に、セクションの要素を、物品の要素は、物品の他の要素にネストすることができます。また、ネストできセクションの記事の内部、およびその逆。それはすべてあなたがマークしたいかに依存します。

フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。

nav要素

nav要素は、実際にすべてのプロジェクトに表示されることを確認します。ナビゲーションリンクのセット:NAV正確にその意味を表現します。リンクのNAV順不同リストをパッケージの最も一般的な使用が、しかし、他のオプションがあります。たとえば、あなたの周りのメインナビゲーションリンクのページの段落の一部または一部を含むテキストページにパッケージ要素をNAVすることができます。

公開された110元の記事 ウォン称賛44 ビュー110 000 +

おすすめ

転載: blog.csdn.net/webxuexi168/article/details/104459011