コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML でサポートされているリストタグ: 順序なしリスト、順序付きリスト、定義リスト (はじめに)

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

青灯夜游
リリース： 2018-09-20 17:32:39
オリジナル
22151 人が閲覧しました

ある意味では、説明的なテキスト以外のものはすべてリストとみなすことができます。たとえば、国勢調査、太陽系、家系図、ツアー メニュー、さらにはすべての友人をリストまたはリスト内のリストとして表すことができます。では、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 でサポートされているリストタグ: 順序なしリスト、順序付きリスト、定義リスト (はじめに)

    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>
    ログイン後にコピー

    レンダリング:

    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 でサポートされているリストタグ: 順序なしリスト、順序付きリスト、定義リスト (はじめに)

        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>
        ログイン後にコピー

        レンダリング:

        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>
        ログイン後にコピー

        レンダリング:

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

        4. CSS list-style-type 属性の簡単な説明

        ##list-style-type 属性は、リスト項目タグのタイプを設定します。

        可能な値は次のとおりです:

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

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

関連ラベル：
html
ソース：php.cn
前の記事：ページのソースコードを表示する 4 つの方法を共有する 次の記事：HTML でのテーブル操作と選択操作 (概要)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
SQL Count() にも 0 が必要です テーブルが 1 つだけあり、0 で始まるタグの各エントリをカウントしたいと考えています。今度はこれを試します: SELECT tag,COUNT(start)ASAnzahl,us...
から 2024-04-06 19:48:53
0
1
449
MySQL: 「<ここの変数またはサブクエリ> として...からテキストを選択します」 次のデータを含む次のテーブルがあります: id text language 1 german text german 2 english text english 私が望むのは、次...
から 2024-04-06 19:25:54
0
2
529
Reactjsで複数のチェックボックスを選択する方法 複数のチェックボックスを選択したいオプションのリストがありますが、選択することができません。このコードの何が問題なのでしょうか?サンドボックスの URL
から 2024-04-06 18:55:21
0
1
396
MySQL は複数のテーブルからデータを取得します 次の列を含む eg_design テーブル、および次の列を含む eg_domains テーブル、および次の列を含む eg_fonts テーブルがあります。 $domain_id に...
から 2024-04-06 18:42:44
0
2
479
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート