ウェブページ 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オーバーフローメカニズムについての簡単な説明

推薦する

Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する

1 ユーザーを作成し、ユーザーのルートパスとパスワードを指定します useradd -d /home...

HTML サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...

xshellリモート接続の自動切断の問題の解決方法の詳細な説明

xshell を使用したリモート接続システムの自動切断の問題の解決策: 1. サーバー構成サーバーは...

よくある Linux 英語エラーの中国語翻訳 (初心者必見)

1.コマンドが見つかりません コマンドが見つかりません2. そのようなファイルまたはディレクトリは...

一時ファイルを作成できないために MySQL が起動できない問題を解決する方法

問題の説明最近、仕事中に問題が発生しました。MySQL が起動に失敗しました。エラー ログは次のとお...

MySQL InnoDB MRR 最適化ガイド

序文MRR は Multi-Range Read の略で、ランダム ディスク アクセスを削減し、ラン...

VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)

このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...

Windows システムに mysql5.7.21 をインストールするための詳細なチュートリアル

MySQL インストーラーは、MySQL ソフトウェアのあらゆるニーズに対応する、使いやすいウィザー...

NodeJS は画像テキスト分割を実現します

この記事では、画像テキストセグメンテーションを実装するためのNodeJSの具体的なコードを参考までに...

JavaベースのMySQLバックアップテーブル操作

コアはmysqldumpとランタイムです操作は実際にはそれほど難しくありません。バックアップ操作を実...

MySQL SQL文を最適化するためのヒント

十分に最適化されていない、またはパフォーマンスが極端に低い SQL ステートメントに直面した場合、通...

Ubuntu 18.04にMySQL 5.7をインストールする

この記事は MySQL 公式サイトを参考にしてまとめたものであり、遭遇したいくつかの問題も記録されて...

分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...