ホームページ ウェブフロントエンド htmlチュートリアル Web ページの HTML 順序付きリスト ol と順序なしリスト ul の詳細な説明

Web ページの HTML 順序付きリスト ol と順序なしリスト ul の詳細な説明

Mar 10, 2017 pm 01:23 PM

この記事では、Web ページの HTML の順序付きリスト ol と順序なしリスト ul について詳しく説明します

データを整理するために使用されるリスト Web ページの表示を制御する非常に多くの HTML タグを学習した後、読者は最初に純粋な記事ページを作成できるようになります。このセクションでは、HTML のリスト要素について説明します。リスト フォームは、Web サイトのデザインにおいて比較的大きな割合を占め、表示される情報は非常にわかりやすく、ユーザーにとって理解しやすいものです。次の CSS スタイルの学習では、リスト要素の高度な機能を多用します。

データを整理するためのリスト

Web ページの表示を制御する非常に多くの HTML タグを学習した後、読者は最初に純粋な記事ページを作成できるようになります。このセクションでは、HTML のリスト要素について説明します。リスト フォームは、Web サイトのデザインにおいて比較的大きな割合を占め、表示される情報は非常にわかりやすく、ユーザーにとって理解しやすいものです。次の CSS スタイルの学習では、リスト要素の高度な機能を多用します。

Web ページの HTML 順序付きリスト ol と順序なしリスト ul の詳細な説明

4.4.1 リストの構造構成

HTMLのlist要素はlistタグで囲まれた構造であり、含まれるリスト項目は

  • で構成されます。具体的な構造を図 4.17 に示します。

    4.4.2 順序なしリストの作成

    名前が示すように、順序なしリストは、リスト構造内のリスト項目が順番に並んでいないリスト形式です。 Web アプリケーションのほとんどのリストは順序なしリストを使用し、そのリスト タグは

      を使用します。記述方法は次のとおりです。

    • リスト アイテム 2
    • リスト アイテム 3
    • リスト アイテム 4
    • リスト アイテム 5 li>

      4.4.3 順序付きリストの作成Web ページの HTML 順序付きリスト ol と順序なしリスト ul の詳細な説明 名前が示すように、順序付きリストは、リスト構造内のリスト項目が入っているリスト形式です。 order には、上から下に 1、2、3、または a、b、c など、さまざまな異なるシーケンス番号が存在します。 D:web ディレクトリに Web ページ ファイルを作成し、ul_ol.htm という名前を付け、コード 4.17 に示すようにコードを記述します。 コード 4.17 リスト設定: ul_ol.htm

      リスト設定

      &lt ;font size="5"> JavaScript & lt;/li & gt;

      & lt;/li & gt; & gt;

      & lt ;li>ASP.net
    • PHP
    • CGI
    • Ruby
    • Python
    • 「http://localhost/ul_ol」と入力します。ブラウザのアドレス バーに htm を追加した場合のブラウジング効果を図 4.18 に示します。

      図4.18 リストの設定

      以上がWeb ページの HTML 順序付きリスト ol と順序なしリスト ul の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

      このウェブサイトの声明
      この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

      ホットな記事タグ

      メモ帳++7.3.1

      メモ帳++7.3.1

      使いやすく無料のコードエディター

      SublimeText3 中国語版

      SublimeText3 中国語版

      中国語版、とても使いやすい

      ゼンドスタジオ 13.0.1

      ゼンドスタジオ 13.0.1

      強力な PHP 統合開発環境

      ドリームウィーバー CS6

      ドリームウィーバー CS6

      ビジュアル Web 開発ツール

      SublimeText3 Mac版

      SublimeText3 Mac版

      神レベルのコード編集ソフト(SublimeText3)

      公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

      公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

      HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

      HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

      WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

      WebページのPNG画像にストローク効果を効率的に追加する方法は?

      < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

      < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

      IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? Mar 18, 2025 pm 02:51 PM

      IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?

      HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? Mar 12, 2025 pm 04:08 PM

      HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素?

      HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

      HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

      HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

      HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?

      See all articles