HTML でサポートされているリストタグ: 順序なしリスト、順序付きリスト、定義リスト (はじめに)-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

青灯夜游

Sep 20, 2018 pm 05:32 PM

html

ある意味では、説明的なテキスト以外のものはすべてリストとみなすことができます。たとえば、国勢調査、太陽系、家系図、ツアーメニュー、さらにはすべての友人をリストまたはリスト内のリストとして表すことができます。では、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 サイトの他の関連記事を参照してください。

声明

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

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

See all articles