ウェブページ HTML 順序付きリスト ol と順序なしリスト ul

ウェブページ HTML 順序付きリスト ol と順序なしリスト ul

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

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

テキスト ボックス: 図 4.17 リスト要素の構造

4.4.1 リスト構造

HTML リスト要素はリスト タグで囲まれた構造であり、含まれるリスト項目は <li></li> で構成されます。具体的な構造を図4.17に示します。

4.4.2 順序なしリストの作成

名前が示すように、順序なしリストは、リスト項目に順序がないリスト構造です。 Web アプリケーションのリストのほとんどでは順序なしリストが使用され、リスト タグには <ul></ul> が使用されます。記述方法は次のとおりです。

<ul>

<li>リスト項目 1</li>

<li>リスト項目 2</li>

<li>リスト項目 3</li>

<li>リスト項目 4</li>

<li>リスト項目 5</li>

</ul>

4.4.3 順序付きリストの作成

名前が示すように、順序付きリストは、リスト項目が特定の順序を持​​つリスト構造です。上から下に向かって、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 リスト設定

<<:  MySQLログに関する知識のまとめ

>>:  CSSオーバーフローメカニズムについての簡単な説明

推薦する

MySQL 最適化チュートリアル: 大規模なページングクエリ

目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

MySQL セレクトキャッシュメカニズムの使用に関する詳細な説明

MySQL クエリ キャッシュはデフォルトでオンになっています。ある程度、クエリの効果は向上しますが...

Ubuntu 18.04 Server バージョンのインストールと使用方法 (画像とテキスト)

1 システムのインストール手順OSバージョン:1804イメージのダウンロード: http://cd...

JavaScript 初心者のための二分探索木アルゴリズムのチュートリアル

目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...

Docker で ElasticSearch をデプロイする方法

1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...

Firefox または IE でスパン幅が決定されない場合の解決策

コードをコピーコードは次のとおりです。 <html xmlns="http://ww...

ローカルでビルドした Docker イメージを Dockerhub に公開する方法

今日は、ローカルの Docker プロジェクト イメージを dockerhub に公開する方法を紹介...

Dockerイメージとコンテナの一般的な操作の詳細な説明

画像アクセラレータ中国の Docker Hub からイメージをプルすることが難しい場合があります。こ...

HTML テキストエスケープのヒント

今日、CSDN で HTML テキスト エスケープのちょっとしたトリックを見ましたが、とても簡単です...

レスポンシブWebデザイン学習(3) - モバイルデバイスでのWebページのパフォーマンスを向上させる方法

序文モバイル デバイスでは、帯域幅とプロセッサ速度の制限により、Web ページのパフォーマンスに対す...

Linuxターミナルでファイルを作成する2つの一般的な方法を簡単に理解する

mkdir コマンドを使用して新しいディレクトリを作成できることは誰もが知っていますが、多くの場合、...

VMWare仮想マシンのcentosの時間が現地時間と矛盾する問題を解決する

VM Ware 仮想マシン CentOS の時刻は、次の図に示すように、現地時間と一致しません。おそ...

HTML と CSS の基礎 (必読)

(1) HTML: ハイパーテキストマークアップ言語。主に「ヘッダー」と「ボディ」の2つの部分で構...

WeChatアプレットがシンプルな計算機機能を実装

WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...