学習ポイント:

1. アルゴリズムの概要

2. 構造解析

講師: Li Yanhui

この章では主にWeb ページを構築するための HTML5 と CSS3。 , 最初のプロジェクトは PC 側の固定レイアウトを使用して実装されます。

1つ。アウトライン アルゴリズム

HTML5 には HTML5 アウトライナーと呼ばれる非常に重要な概念があり、その目的はページの情報構造のディレクトリをユーザーに提供することです。たとえば、私たちがよく使用するマニュアルは非常に優れたアウトライン構造を持っています:

HTML5 要素タグを適切に使用すると、Google や Firefox などのさまざまなツールを使用して現在のページを表示できます。プラグインは現在の HTML5 アウトラインを表示できます。ここでは、サーバー側テスト ツールの使用をお勧めします: HTML 5 アウトライナー、URL は次のとおりです:

テスト ツール: https://gsnedders.html5.org/outliner/

このツールは、ローカル HTML ファイルをアップロードするか、または、複数行のテキスト ボックスに HTML5 コードを直接記述することで概要を理解できます。

前のレッスンのコードを書いた後、このページのアウトラインが非常に見苦しいことがわかりました。これは、ページ上のアウトラインのタイトルが欠落しており、標準化されていないことを意味します。ここでページがテストされ、概要が比較的明確であれば、HTML5 ページは比較的標準化されています。

//概要ディレクトリ構造

1.UntitledSection

1.UntitledSection

1.Laocheng Travel Agency

2.UntitledSection

II. Section と div

まず第一に、HTML5 ページのアウトラインを標準に準拠させる方法については議論しません。まずセクションとディビジョンの違いについて説明します。

div 要素は、HTML5 よりも前に非常に一般的に使用されていたタグであり、それ自体にはセマンティクスがなく、ページ レイアウト、CSS スタイル、および JS 呼び出しに使用されます。さて、div の目的は非常に明確になっています。

1. それがヘッダーやフッターなどの排他的な領域ではない場合、div を使用する必要があります。

2.コンテンツ CSS スタイル定義の一方の端では、div も使用する必要があります。JS でコンテンツを制御したい場合は、div も使用する必要があります。

HTML5 では、section は div を置き換えるのに使用されません。基礎講座で簡単に理解しましたが、意味論的な文書タグです。タイトルや段落など、文書内の章を表します。アウトライン仕様には少なくとも 1 つのタイトルが含まれている必要があります。

//section には少なくとも 1 つの h1~h6 が必要です

アピールを通じて、以下のセクションタグに h2 を追加することでアウトライン要件を達成できます。最終的に、アウトラインは次の構造になります。

//アウトラインのディレクトリ構造

1.UntitledSection

1.UntitledSection

1.Laocheng Travel Agency

2. Porter's Four Catch

すると、最後の UntitledSection であることがわかります。にはすでに title があり、すでに仕様に準拠しています。最初の 2 つについては、後で説明します。ここで、別の質問について説明します。 div はセマンティクスなしでレイアウトとスタイルの定義に使用されるため、次のコードで div を使用するかセクションを使用するかを議論する必要があります。

//ここではセクションまたは div を使用する必要がありますか?

構造的な観点から、セクションには少なくとも 1 つの h1 ～ h6 が含まれている必要がありますが、これはここでは一貫しています。ただし、ややこしいのは、section が特定の領域の章のタイトルであり、h1 が実際には Web サイト全体のタイトルであることです。厳密に言えば、ul 部分はナビゲーション ハイパーリンクであり、章の内容とはみなされません。最も重要なことは、このセクションはレイアウト スタイルの定義に使用されるため、個人的にはここでは div を使用する方が適切であると考えています。

注: Section 自体はあまり頻繁に使用されず、section は div を置き換える要素ではありません。

//より合理的なアプローチ

ここでの概要は次のように興味深い変更を受けています:

//変更された概要

1.UntitledSection

1.Laicheng Travel Agency

2. Wave Special 4

現在のアウトラインを通じて、完璧なアウトラインを達成するにはあと 1 つのタイトルしか残っていないことがわかります。この残りのタイトルはどの要素に属しますか?答えは「body要素」です。 body要素の下にh1を作成し、タイトル名を記述するだけです。

//本文のタイトルを追加してアウトラインの問題を解決します

虽然在body增加标题解决了大纲问题，但问题是我们本身页面设计根本不需要在body 创建一个h1啊。难道创建后，再隐藏这种多此一举的方法吗？这个问题，稍后再看，先再 探讨一下头部的结构问题。

三．结构分析

首先，探讨一下nav元素。这个元素本质上是用来存放一组作为导航的链接，比如ul。

我们第一节课，把整个头部全部存放进去，显得不是特别合理，所以，最好在ul的外围。 而LOGO+导航，我们可以理解为header头部，所以，最终改写成如下结构：

//头部元素换成了header，nav元素只包含ul

在去掉

...

的情况下，我们发现，这种结构的主标题大纲居 然是：瓢城旅行社。而