Web ページの HTML コードの説明: 順序付きリストと順序なしリスト

Web ページの HTML コードの説明: 順序付きリストと順序なしリスト

このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにおいて比較的大きな割合を占めています。リストは情報を非常にわかりやすく直感的に表示し、ユーザーが理解しやすいようにしています。以降の CSS スタイルの学習では、リスト要素の高度な機能が広範囲に使用されます。
データを整理するために使用されるリスト<br />Web ページの表示を制御する多くの HTML タグを学習した後、読者は純粋な記事ページを作成し始めることができます。このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにおいて比較的大きな割合を占めています。リストは情報を非常にわかりやすく直感的に表示し、ユーザーが理解しやすいようにしています。以降の CSS スタイルの学習では、リスト要素の高度な機能が広範囲に使用されます。
テキスト ボックス:  図 4.17 リスト要素の構造
4.4.1 リスト構造
HTML リスト要素はリスト タグで囲まれた構造であり、含まれるリスト項目は <li></li> で構成されます。具体的な構造を図4.17に示します。
4.4.2 順序なしリストを作成する<br />名前が示すように、順序なしリストはリスト項目に順序がないリスト構造です。 Web アプリケーションのリストのほとんどでは順序なしリストが使用され、リスト タグには <ul></ul> が使用されます。記述方法は次のとおりです。
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
<li>リスト項目 4</li>
<li>リスト項目 5</li>
</ul>
4.4.3 順序付きリストを作成する<br />名前が示すように、順序付きリストは、リスト項目が特定の順序を持​​つリスト構造です。上から下に向かって、1、2、3、a、b、c など、さまざまなシリアル番号が付けられます。 D:\web\ ディレクトリに Web ページ ファイルを作成し、ul_ol.htm という名前を付け、コード 4.17 に示すようにコードを記述します。
リスト設定: ul_ol.htm
<html>
<ヘッド>
<title>リスト設定</title>
</head>
<本文>
<font size="5">
Webフロントエンド技術
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>フラッシュ</li>
</ul>
ウェブバックエンド学習
<オル>
<li>ASP</li>
<li>ASP.net</li>
<li>PHP</li>
<li>CGI</li>
ルビー
パイソン
</ol>
</font>
</本文>
</html>
ブラウザのアドレスバーに http://localhost/ul_ol.htm と入力すると、図 4.18 のようなブラウジング効果が表示されます。

図4.18 リスト設定

<<:  Vue は div の高さをドラッグ可能にします

>>:  css n番目から始まるすべての要素を取得する

推薦する

JavaScript フロー制御 (分岐)

目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...

React の 10 個のフックの紹介

目次ReactHook とは何ですか? Reactは現在フックを提供している1. 使用状態2.use...

CSSの記述形式、モバイルページの基本構造の詳細な説明

1. CSSの記述形式1. インラインスタイルCSSコードを開始タグに直接記述することができます&l...

Dockerカスタムネットワークコンテナ相互接続

目次序文-リンクカスタムネットワーク質問する序文前回は、 -Linkパラメータを使用してコンテナ間の...

例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます

1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...

MySQL データベースのバックアップをスケジュールするいくつかの方法 (包括的)

目次1. データをバックアップするためのmysqldumpコマンド2. 一般的なmysqldump操...

15行のCSSコードがAppleデバイスをクラッシュさせる可能性があり、最新のiOS 12も例外ではない

たった15行のCSSでiPhoneがクラッシュするWire のセキュリティ研究者 Sabri Had...

Docker 環境での Jmeter の分散操作に関する詳細なチュートリアル

1. jmeterの基本イメージを構築するDockerfile は次のとおりです。 # Java 8...

MySQLデータベースにパスワードを入力した後にフラッシュバックする問題の解決策

パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...

意外と知らないLinuxのSSHコマンドの使い方7選を徹底解説

システム管理者は複数のサーバーを同時に管理する場合があり、これらのサーバーは異なる場所に配置されてい...

ブラウザの自動更新を実装するReactサンプルコード

目次フロントエンドルーティングとは何ですか?フロントエンドルーティングを実装するにはどうすればいいで...

IE6かどうかを判定する最短JS(IEの書き方)

ブラウザが IE のどのバージョンであるかを検出するためによく使用される JavaScript コー...

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおり...

JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...