HTML チュートリアル: 順序付きリスト

HTML チュートリアル: 順序付きリスト
<br />原文: http://andymao.com/andy/post/103.html
前のセクション: 順序なしリスト 情報は無秩序にまとめられることもありますが、前の記事でも触れたように、明確な順序がある場合もあります。そこで、私たちの身の回りにある、順序があるものを単純に考えてみましょう。操作手順、ランキング、本のカタログなど... これまでは、順序を示す数字や順序のあるコンテンツに直面したとき、データの前に自分で数字を追加するか、プログラムにこの数字を追加させることがほとんどでした。順序付きリストを使えば、それほど面倒なことはしなくて済みます。自分で序数を記入する必要がありません。この機能は、単層リストを使用する場合はわかりにくいようですが、複数層リストを使用する場合は非常にわかりやすくなります。それでは、まず順序付きリストのコード形式を理解しましょう。
<オル>
<li>これがリストの内容です。これが最初の文です</li>
<li>これがリストの内容です。これが 2 番目の文です</li>
<li>これがリストの内容です。これが 3 番目の文です</li>
<li>これがリストの内容です。これが 4 番目の文です</li>
<li>これがリストの内容です。これが 5 番目の文です</li>
</ol>

ご覧のとおり、基本的な形式は順序なしリストと同じですが、外側のタグの名前が異なります。順序なしは UL になり、順序ありは OL になります。違いは、順序付きリストには順序なしリストよりも多くのタグ属性があることです。順序付けられているため、シーケンスのあらゆる側面が含まれます。
開始値を変更する<br />通常、ブラウザはアラビア数字の「1」から始まる番号を自動的に順番に付けます。ただし、順序付きリストを 2 つの部分に分割する必要がある場合、次の部分の番号を最初から付け始めるのは誤りです。すると、次の部分の番号付けは、当然、前の部分の最後の番号に 1 を加えた番号から始まります。つまり、リストの開始値を変更する必要があるということです。開始値を変更するプロパティは「start」です。正式な記述方法は次のとおりです。
<ol 開始="6">
<li>これがリストの内容です。これが最初の文です</li>
<li>これがリストの内容です。これが 2 番目の文です</li>
<li>これがリストの内容です。これが 3 番目の文です</li>
<li>これがリストの内容です。これが 4 番目の文です</li>
<li>これがリストの内容です。これが 5 番目の文です</li>
</ol>

お気づきかもしれませんが、上記のコードでは、リストの開始値は 6 から始まるとされています。では、この属性を順序付きリストに追加して、何かが変わるかどうか確認してみませんか?
番号付けの種類を変更する<br />デフォルトでは、ブラウザはリスト番号にアラビア数字を使用します。別の種類はありますか?はい、属性は「type」ですが、提供されているタイプは 5 つだけです。
タイプ値生成パターンシーケンス例A 大文字の A、B、C、D、E a 小文字の a、b、c、c、e I 大文字のローマ数字の I、II、III、IV、V i 小文字のローマ数字の i、ii、iii、iv、v 1 アラビア数字の 1、2、3、4、5
コードは次のように記述する必要があります。
<ol type="A">
<li>これがリストの内容です。これが最初の文です</li>
<li>これがリストの内容です。これが 2 番目の文です</li>
<li>これがリストの内容です。これが 3 番目の文です</li>
<li>これがリストの内容です。これが 4 番目の文です</li>
<li>これがリストの内容です。これが 5 番目の文です</li>
</ol>

このタイプは CSS を使用して設定することもできるため、このタイプの値はあまり使用しない方が良いと思います。私は常に、スタイルに関する問題はスタイル言語によって処理されるべきだと主張してきました。特別な理由がない限り、この属性を使用しない方がよいでしょう。もちろん、CSS1 も CSS2 も基本的に中国を考慮していません。CSS2 では日本語の数字文字は提供されていますが、中国語は提供されていません。この点に関しては CSS2 にはまだ欠陥があると思います。少なくとも、より優れた拡張形式は提供されていません。彼が提供してくれなかったとしても、私たちは自分たちのやり方で多様性を実現することができます。どうやってやるんですか?まずは考えてみてください。リスト形式への対応方法については後ほど説明します。

<<:  Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能

>>:  dockerログマウントの問題を解決する

推薦する

TypeScript デコレータ定義

目次1. コンセプト1.1 定義1.2 デコレータファクトリー1.3 デコレータの組み合わせ1.4 ...

Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明

目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...

Linux チェックアップ、Linux の状態 (ネットワーク IO、ディスク、CPU、メモリ) を把握

目次1. コアコマンド2. 共通コマンド3. コアコマンドの詳細な説明3.1、ps補助3.2 トップ...

Vue Router の 10 の高度なヒントのまとめ

序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...

デジタル時計効果を実現するJavaScript

この記事の例では、JavaScriptでデジタル時計効果を実装するための具体的なコードを参考までに共...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

SQL ファジー クエリ レポート: ORA-00909: パラメータの数が無効です。解決策

あいまいクエリにOracleデータベースを使用する場合、コンソール エラーは次の図に表示されます。理...

JavaScript の実行コンテキストとコールスタックの詳細な説明

目次1. 実行コンテキストとは何か2. 実行コンテキスト スタックとは何ですか? 3. 実行コンテキ...

要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する

3つの知識ポイント: 1. CSS子孫セレクターhttps://www.w3school.com.c...

Javascript 共通高階関数の詳細

目次1. 一般的な高階関数1.1、フィルター1.2、地図1.3、減らすHigher Order fu...

Docker ディスク領域クリーニングのソリューション

少し前に、docker ディスク容量が小さすぎてデータを書き込めないという問題が発生しました。理由は...

MySQL インポート csv エラーの 4 つの解決策

これは今日私が踏んだ4つの落とし穴を記念したものです...落とし穴1:地元のせいエラー:エラー 39...

Mysql WorkBench のインストールと設定のグラフィックチュートリアル

この記事では、Mysql WorkBenchのインストールと設定のグラフィックチュートリアルを参考ま...

Dayjs を使用して Vue で一般的な日付を計算する方法

vue を使用してプロジェクトを開発する場合、フロントエンドでは次のような日付と時刻を計算する必要が...

フラットスタイルを使用してウェブサイトをデザインする方法

フラットなウェブサイト構造の本質はシンプルさです。コンテンツの重要なポイントを強調し、ページの装飾効...