ホームページ > ウェブフロントエンド > フロントエンドQ&A > html5のリストに含まれるもの

html5のリストに含まれるもの

青灯夜游
リリース: 2022-03-15 15:12:46
オリジナル
4337 人が閲覧しました

HTML5 には 3 種類のリストがあります: 1. 「

    」タグと「
  • 」タグを使用して定義された順序なしリスト; 2. 「
      」を使用して定義された順序付きリスト定義する「
    1. 」タグ; 3. リストを定義し、「
      」、「
      」、および「
      」タグを使用して定義します。

html5のリストに含まれるもの

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

順序なしリスト

関数: 順序なしリストのセマンティクスをコンテンツの束 (順序のない全体) に追加します。リスト内の項目には順序はありません

形式:

li 英語はリスト項目であり、リスト項目として翻訳されます

<h4>选择居住城市(CN)</h4>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>广州</li>
  <li>铁岭</li>
</ul>
ログイン後にコピー

ul アプリケーションシナリオ:

  • ナビゲーション記事

  • 商品一覧等

  • ニュース一覧

注意事項:

  • ここでの無秩序とは、主題にコンテンツの順序がないことを意味します。たとえば、トピックは「居住都市 (CN) を選択してください」です。北京と上海はすべて中国の都市です。誰が 1 位であっても、それは中国の都市であることに変わりはありません。タイトルを「中国のスモッグランキング」に変更する場合は、厳密なランキングが必要になり、北京を最初に書かなければなりません

  • ブラウザは、順序なしリストに先頭の記号を自動的に追加しますが、ul の機能はテキストに小さなドットを追加することではなく、順序なしリストのセマンティクスを高めることであることに注意してください。 。

    • 実際には、ul には、先頭のシンボルのスタイルを変更できる type 属性もあります。値には、ディスク、正方形、円が含まれます。

    • ただしスタイルは今後CSSで完成するのでここでは紹介しません

  • ulはグループですタグは、次々に出現する必要があります。つまり、li タグは単独で存在できず、ul でラップする必要があります。

  • ul と li は全体であるため、そうではありません。他のタグを ul で囲むことをお勧めします。ul で最も重要なタグは常に覚えておいてください。li タグのみを記述するのが最善です

  • ul には li タグのみを記述することが推奨されますが、 li タグはコンテナ タグです。li タグには任意のタグを追加でき、さらに ul タグを追加することもできます

<ul>
  <li>
      好吃的
      <ul>
          <li>牛奶</li>
          <li>面包</li>
      </ul>
  </li>
  <li>
      日用的
      <ul>
          <li>毛巾</li>
          <li>牙膏</li>
      </ul>
  </li>
</ul>
ログイン後にコピー

順序付きリスト(順序付きリスト)

関数: 順序付きリストのセマンティクス (順序付けされた全体) を多数のコンテンツに追加すると、リスト内の項目が順序に従って配置されます。

  • #形式:

  • #
      <h4>中国房价排行</h4>
      <ol>
          <li>北京</li>
          <li>上海</li>
          <li>广州</li>
          <li>铁岭</li>
      </ol>
    ログイン後にコピー

ol 応用シナリオ:

  • xxx ランキング

  • 実は ol の応用シナリオはそれほど多くありません。 ol で実行できることはすべて、ul

注:

  • ol と ul ではセマンティクスが異なるため、使い方や注意点も同じです。

  • 実は、あと 2 つの ul があります。共通属性の start 属性と type 属性は、ファイルのスタイルとシリアル番号を変更できます。先頭記号

    ##ただしスタイルは今後CSSで完成するのでここでは紹介しません
  • #定義リスト
  • #関数: 一連のコンテンツにリスト セマンティクスを追加し、dt を使用してリスト内の項目をリストし、dd

Format:


## を使用して各項目に対応する説明を追加します。 ##dt 英語の定義タイトル、定義タイトルとして翻訳されます

dd 英語の定義の説明、定義説明情報として翻訳
    #
    <dl>
      <dt>北京</dt>
      <dd>国家的首都, 看升国旗的地方</dd>
      <dt>上海</dt>
      <dd>魔都, 遍地是黄金的地方</dd>
    </dl>
    ログイン後にコピー
  • dl アプリケーション シナリオ:

  • Web サイトの下部にある関連情報
  • 大量のコンテンツを見るたびに、それは何かを説明するために使用されます。コンテンツを作成するときは、次のことを行う必要があります。 dl
    • 注:
    • - dl は `グループ タグ` である必要があります。 しこりの出現は、 dt タグと dd タグは単独で存在できず、dl でラップする必要があります。

    dl、dt、dd は全体であるため、dl でラップすることはお勧めできません。その他のタグ

    dd と dt は li タグのようなコンテナ タグです。その中に任意のタグを追加できます。

      ##定義リストは非常に柔軟で、複数の dt タグを設定できます。dd , しかし、1 つの dd に複数の dt を対応させないのが最善です。dd のセマンティクスは、それに最も近い dt を記述することであるため、他の dt は記述がないことと同等であり、定義リストの意味は、各項目が次のとおりであるということです。リストされ、各エントリを説明できます
    • 定義リストは非常に柔軟で、複数の dt dd の組み合わせを複数の dl

    • 関連推奨事項: HTMLビデオチュートリアル

      >>

    以上がhtml5のリストに含まれるものの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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