ホームページ > 記事 > ウェブフロントエンド > HTML でサポートされているリストタグ: 順序なしリスト、順序付きリスト、定義リスト (はじめに)

HTML でサポートされているリストタグ: 順序なしリスト、順序付きリスト、定義リスト (はじめに)

青灯夜游オリジナル: 2018-09-20 17:32:3922059ブラウズ

ある意味では、説明的なテキスト以外のものはすべてリストとみなすことができます。たとえば、国勢調査、太陽系、家系図、ツアーメニュー、さらにはすべての友人をリストまたはリスト内のリストとして表すことができます。では、HTML リストのスタイルとは何でしょうか?この章では、html でサポートされているリストタグ、つまり順序なしリスト、順序付きリスト、およびカスタムリスト (概要) について説明します。困っている友人は参考にしていただければ幸いです。

1. html 順序なしリスト

順序なしリストは、各列の前に●□◇ を使用します。 . ◆などの記号は区別するために使用します。

html順序なしリストは

で始まり、順序なしリストの type 属性には 3 つのオプション値があります。これらの 3 つのオプションは、円盤状の庭、円形の小さな正方形です。デフォルトの属性はディスクソリッドガーデンです。
基本構文:
```
<ul>
    <li type="value"> 项目1</li>
    <li type="value"> 项目2</li>
    <li type="value"> 项目3</li>
</ul>
```
値は箇条書きタイプ (型タイプ) です。順序なしリストの型タイプは次のとおりです。

html 順序なしリストのコード例:
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html---无序列表</title>
	</head>
	<body>
		<ul>
			<li>默认的无序列表</li>
			<li>默认的无序列表</li>
			<li>默认的无序列表</li>
		</ul>
		<ul>
			<li type="circle">添加circle属性</li>
			<li type="circle">添加circle属性</li>
			<li type="circle">添加circle属性</li>
		</ul>
		<ul>
			<li type="square">添加square属性</li>
			<li type="square">添加square属性</li>
			<li type="square">添加square属性</li>
		</ul>
	</body>
</html>
```
レンダリング:

css list-style-type 属性を使用して、上の図の HTML の順序なしリストスタイルを定義します。

2. html 順序付きリスト

順序付きリストは、アルファベット順または数値順に並べられた項目のリストです。結果は連番になります。リスト項目が挿入または削除されると、番号は自動的に調整されます。

html順序付きリストは
1. タグで始まります。
  基本構文:
```
<ol type="value1" start="value2">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>
```
  value1 は順序付きリスト内の箇条書きのタイプ (タイプタイプ) を表し、value2 は項目の先頭の値を表します。 start は項目の先頭の番号です。番号 (start=2 など)、次に番号 2 から開始、1 から開始する場合は省略するか、
2. タグに value="n" を設定してリスト行項目の特定の番号を変更できます。、
3. など。 type=番号付けに使用される数字、文字などの種類。たとえば、type=a の場合、英語の文字が番号付けに使用されます。これらの属性を使用するには、
  1. の最初のタグに配置します。
    順序付きリストのタイプは次のとおりです:
    
    html 順序付きリストのコード例:
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html---有序列表</title>
	</head>
	<body>
		<ol>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
    </ol>
    <ol  type="a" start="2">
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
        <li value="20">第4项</li>
    </ol>
    <ol  type="I" start="2">
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
    </ol>
	</body>
</html>
```
    レンダリング:
    
    css list-style-type 属性を使用して、上の図の HTML 順序付きリストスタイルを定義することもできます。
    
    3. HTML カスタムリスト
    
    カスタムリストは、単なる項目のリストではなく、項目とそのコメントの組み合わせです。
    
    htmlカスタムリストは
    タグで始まります。各カスタムリスト項目は
    で始まります。各カスタムリスト項目の定義は
    で始まります。用語や名詞を説明するために使用されます。カスタムリストのリスト項目の前には黒丸がありません。
    基本構文:
    <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> </dl>
    html カスタムリストコード例:
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html---有序列表</title> </head> <body> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html>
    レンダリング:
    
    4. CSS list-style-type 属性の簡単な説明
    ##list-style-type 属性は、リスト項目タグのタイプを設定します。
    可能な値は次のとおりです:

以上がHTML でサポートされているリストタグ: 順序なしリスト、順序付きリスト、定義リスト (はじめに)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html ul li

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ページのソースコードを表示する 4 つの方法を共有する次の記事：ページのソースコードを表示する 4 つの方法を共有する

続きを見る