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 リスト設定 |
推薦する
WeChatミニプログラムでトークンの有効期限を処理する方法
目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...
よくある CSS のヒントと経験談 11 選
1. 画像の下にある数ピクセルの空白を削除するにはどうすればよいですか?コードをコピーコードは次のと...
VUE+SpringBootはページング機能を実装します
この記事では主に、Vue + SpringBoot でページ分割されたリストデータを実装する方法を紹...
Javascriptのクロージャとアプリケーションの詳細な説明
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
awk でのループの使用
同じコマンドを複数回実行するさまざまな種類のループについて学習しましょう。 awk スクリプトには、...
Linux で MySQL のルート パスワードを変更する方法
序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...
Vue組み込みコンポーネントのキープアライブの使用例
目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...
Alipay の新しいホームページのフロントエンドの実践的な概要
もちろん、ページ パフォーマンスの最適化に関する個人的な経験も含まれています。ここでいくつかの点につ...
JavaScript は setTimeout を使用してカウントダウン効果を実現します
JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...
vscodeでnpmを使用してbabelをインストールする方法
序文前回の記事ではNode.jsのインストールと設定を紹介しました。今回はVScodeでbableを...
Vue の新しいおもちゃ VueUse の具体的な使い方
目次序文VueUseとは使いやすいおなじみの手ぶれ補正やスロットル機能もありますグローバル状態を共有...
Dockerコンテナのデータを復元する方法
プロジェクトのテスト環境データベースのデータが失われてしまったので、記録しておきたいと思います。当時...
vue-video-player を使用してライブ放送を実現する方法
目次1. vue-video-playerをインストールする2. vue-video-playerを...
MySQLデータベースはsysbenchに基づくOLTPベンチマークテストを実装します
Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...
MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析
導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...