4.4.3 順序付きリストの作成
ウェブページ HTML 順序付きリスト ol と順序なしリスト ul
|
データを整理するためのリスト Web ページの表示を制御する多数の HTML タグを学習した後、読者は純粋な記事ページを作成し始めることができます。このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにおいて比較的大きな割合を占めています。リストは情報を非常にわかりやすく直感的に表示し、ユーザーが理解しやすいようにしています。以降の CSS スタイルの学習では、リスト要素の高度な機能が広範囲に使用されます。
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> 名前が示すように、順序付きリストは、リスト項目が特定の順序を持つリスト構造です。上から下に向かって、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 リスト設定 |
推薦する
HTMLページでチェックボックスを操作する方法
チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラッ...
HTML初心者や初級者向けの提案。専門家は無視してかまいません。
感想:私はバックエンド開発者です。静的 (HTML) ページを取得すると、ページ構造と命名規則が極端...
JavaScript コードを省略する一般的な方法の概要
目次序文矢印関数一般的な配列操作をマスターするスプレッド演算子オブジェクトの省略形構造化割り当てデー...
Truncate Table の使用法の説明
テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...
ReactのuseEffectクロージャの落とし穴についての簡単な説明
問題コードuseEffectによって発生したクロージャの問題コードを見てみましょう 定数 btn =...
MySQLグループクエリ最適化方法
MySQL はほとんどの場合、GROUP BY クエリと DISTINCT クエリを同様に処理します...
MySQLの基本操作学習ノートテーブル
テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...
MySQLのスペースをクリーンアップするいくつかの具体的な方法
目次序文1. ファイルのディスク使用量を確認する1.1 ディスク容量の使用状況を確認する1.2 ディ...
SSL を実装するために nginx を設定する方法の例
環境説明サーバーシステム: Ubuntu 18.04 64ビットnginx: 1.14この記事では主...
仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)
VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...
Linux システムでのルート ディレクトリ拡張の概要
1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...
MySQL スケジュールタスク (EVENT イベント) を詳細に設定する方法
目次1. イベントとは何ですか? 2. 「イベント」機能を有効にする1. 機能が有効になっているかど...
JSオブジェクトの走査順序の詳細な説明
JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...
Webデザインの経験: Webコードを効率的に書く
本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...
Docker で MySQL を起動したときに SQL 文を自動的に実行する方法
Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...