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番目から始まるすべての要素を取得する

推薦する

WeChatアプレットはふるいを振る効果を実現

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

Webデザインにおけるフォームデザインテクニックのまとめ

「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...

Linux仮想マシンを作成し、仮想マシンネットワークを設定する方法に関するVMwareの詳細なチュートリアル

VMware で Linux 仮想マシンを作成し、VMware と仮想マシンのネットワークを設定する...

Nginx リバース プロキシを使用してクロスドメイン問題を解決する方法の詳細な説明

質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...

WeChatアプレットのオーディオコンポーネントがiOSで再生できない問題の解決策

解決策:クリック イベントをオーディオ コンポーネントにバインドし、再生メソッドと一時停止メソッドを...

高品質なJavaScriptコードの書き方

目次1. 読みやすいコード1. 統一コード形式2. マジックナンバーを削除する3. 単一機能原則2....

Web コンポーネントの内部イベント コールバックと問題点の分析

目次前面に書かれたWC とは何でしょうか?現在の欠陥1. コンポーネント内部イベントのコールバック2...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

Alibaba Cloud Server への Web プロジェクトのデプロイについて (5 つの手順)

1.まずAlibaba Cloudのウェブサイトにログインしてアカウントを登録し、サーバータイプを...

スパンの最小高さを定義するソリューションは効果がありません

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

VMware での Linux CentOS6.9 インストール グラフィック チュートリアル

技術初心者として、初めて Linux システムをインストールするプロセスを記録しています。まず、Wi...

jsを使用して中国語からピンインへの変換の完全な手順を実行します

jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...

Nginx における accept lock の仕組みと実装の詳細な説明

序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...