HTML と CSS の使用におけるよくある誤解について詳しく説明します

巴扎黑
リリース: 2017-03-14 10:17:30
オリジナル
1131 人が閲覧しました

通説 1. ポリープ症候群

<p class="nav">
    <ul>
       <li><a href="/home/">Home</a></li>
       <li><a href="/about/">About</a></li>
       <li><a href="/concact/">Concact</a></li>
    </ul>
</p>
ログイン後にコピー

冗長な p タグを使用する上記の状況は、「ポリープ症候群」と呼ばれます。これは、次のように簡略化する必要があります

<ul class="nav">
      <li><a href="/home/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/concact/">Concact</a></li>
</ul>
ログイン後にコピー

通説 2. 複数のカテゴリ クラス症状 クラスはページ上の任意の数の要素に適用できることに注意してください。これは、コンテンツ タイプや他の同様のアイテムを識別するのに非常に適しています
ニュース (ニュース タイトル、ニュース詳細)

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
ログイン後にコピー

news-head を使用する上記のクラス名に関するお知らせ - テキストは「多重クラス症候群」と呼ばれています。要素のスタイルを区別するために多くのクラスを使用する必要はありません。セマンティクスを持たない代わりに、
p (pision) を使用して部分を表現する方が良いです。 (ほとんどの人は p にはセマンティクスがないことを誤解しています!!!)、実際、 p はドキュメントをいくつかの意味のある領域に分割できます
それにより、クラス名 news はニュース項目全体を識別します。次に、カスケード スタイルを使用してニュースのタイトルとテキストを識別できます。これは次のように変更する必要があります

<p class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p>
ログイン後にコピー

グループに拡張するか、インライン要素を識別します

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>
ログイン後にコピー

誤解3. IDの使用に関する誤解ページ要素 (サイト ナビゲーション

、ヘッダー、フッターなど) の特定の項目を識別するために使用され、永続的な構造要素 (メイン ナビゲーション、コンテンツ領域など) を識別するためにも使用できます。ページ上の特定の要素 (サイト ナビゲーション、ヘッダー、フッターなど) を識別するために使用され、一意である必要があります。また、永続的な構造要素 (メイン ナビゲーション、コンテンツ エリアなど) を識別するためにも使用できます
上記はこの記事の内容全体が皆さんの学習に役立つことを願っています。また、この作品が何らかの助けになることを願っています。また、スクリプト ハウスをサポートしたいと思っています。



HTML と CSS の使用におけるよくある誤解について詳しく説明します
-->

以上がHTML と CSS の使用におけるよくある誤解について詳しく説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート