HTML 順序付きリスト、順序なしリスト、カスタム リスト

目次

背景:

プロセス:

順序付きリスト:

 導入:

コード表示:

エフェクト表示:

順序なしリスト:

 導入:

コード表示:

エフェクト表示:

カスタムリスト: 

導入:

コード表示:

エフェクト表示:

要約:


背景:

     1. 順序付きリスト:
順序付きリストは最も初期のリスト タイプの 1 つで、HTML 2.0 で初めて導入されました。HTML 4.01 では、順序付きリストがさらに標準化され、数値と英数字の混合順序付きリストをサポートするための <ol> タグと type 属性が追加されました。
     2. 順序なしリスト:
順序なしリストは、もともと HTML 2.0 で導入されました。HTML 4.01 では、順序なしリストがさらに標準化され、カスタム シンボルの順序なしリストをサポートするために <ul> タグと type 属性が追加されました。
     3. カスタム リスト: カスタム リストは
HTML 4.01 で初めて導入され、開発者は CSS スタイル シートを使用してリストの記号、色、フォントなどの属性をカスタマイズできます。HTML 5 では、カスタム リストの構文がより簡潔になり、<li> 要素の class 属性を通じてカスタム シンボルを指定できます。

プロセス:

順序付きリスト:

 導入:

       名前が示すように、順序付きリストは項目を特定の順序でリストする方法です。各項目には固有の番号または文字が付けられています。使用可能な用途: 取扱説明書 (各ステップの操作方法)、Web ページ 人気ランキング(人気のレベルを明確に知る)、時間順 (すべてが起こる順序) など...記号: <ol> </ol>、<li></li>、 Type属性
     を介して渡すことができます。プロジェクト リストの番号付けタイプを変更するには、式: Type="" を使用します。以下では、リストのシリアル番号を表すためにアラビア数字 (デフォルトは数字かどうか)、文字、およびローマ字を使用します。

コード表示:

<html>
      <head>
	        <tiele>有序列表</title>
	  </head>
	  <body>
	        <ol type="1"><!--默认阿拉伯数字类型,可以不写-->
		       <li>唐僧</li>
			   <li>孙悟空</li>
			   <li>猪八戒</li>
			   <li>沙和尚</li>
		   </ol>
		   <hr/><!--分隔符,展示效果更佳-->
		   <ol type="A"><!--字母类型表示-->
		       <li>唐僧</li>
			   <li>孙悟空</li>
			   <li>猪八戒</li>
			   <li>沙和尚</li>
		   <hr/><!--分隔符,展示效果更好-->
		   <ol type="I"><!--罗马数字类型表示-->
		        <ul>
		       <li>唐僧</li>
			   <li>孙悟空</li>
			   <li>猪八戒</li>
			   <li>沙和尚</li>
		   </ol>
	  </body>
</html>

結果を示す:

順序なしリスト:

 導入:

     順序なしリストは、順序のない項目のリストです。一般的に使用されるリスト タイプです。通常、特定の順序で表示する必要のない情報が表示されます。次の用途で使用されます。 関数リスト (各関数の名前がわかっている)または操作)、請求書(ユーザーが検索および閲覧するのに便利)、プロジェクトリスト(ユーザーに各プロジェクトの名前と紹介を明確に知らせます)。
      シンボル: <ul> </ul>、<li></li>、Type属性を使用して項目リスト内のタイプを変更できます。式: Type=""、以下ではディスクを使用します (デフォルトのドット、省略可能) (書く)、四角(四角)、丸(丸)マーク

コード表示:

<html>
      <head>
	        <tiele>无序列表</title>
	  </head>
	  <body>
	        <ul type="disk"><!--默认圆点类型,可以不写-->
		       <li>唐僧</li>
			   <li>孙悟空</li>
			   <li>猪八戒</li>
			   <li>沙和尚</li>
		   </ul>
		   <hr/><!--分隔符,展示效果更好-->
		   <ul type="square"><!--方块类型表示-->
		       <li>唐僧</li>
			   <li>孙悟空</li>
			   <li>猪八戒</li>
			   <li>沙和尚</li>
		   <hr/><!--分隔符,展示效果更好-->
		   <ul type="I"><!--圆圈类型表示-->
		        <ul>
		       <li>唐僧</li>
			   <li>孙悟空</li>
			   <li>猪八戒</li>
			   <li>沙和尚</li>
		   </ul>
	  </body>
</html>

結果を示す:

カスタムリスト: 

導入:

    カスタム リスト (カスタム リスト) は、箇条書きやスタイルとして使用できるリスト タイプで、特定のスタイル要件を持つ情報を表示するために使用できます。適用対象: 記事の構造 (さまざまなシンボルとスタイルを設定)、ムービー フォーム (さまざまなスタイルを設定) など。
    シンボル: <dl> </dl>、<dt></dt>、<dd></dd> は使用できます。プロジェクト リストのタイプを変更するために渡されたType属性、式: Type=""、<dl> は記事のタイトルを理解でき、<dt> は記事のサブタイトルを理解でき、<dd> は記事の内容を理解できます。以下、西遊記の記事で説明させていただきます。

コード表示:

     <head>
	       <title>自定义列表</title>
	 </head>
	 <body>
	 <font size="6" face="全新硬笔行书简"><!--设置字体大小和字体样式-->
	 <h1><dl>西游记</h1>
	 <dt>简介:</dt>
	 <dd>《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。今见最早的《西游记》版本是明代万历二十年金陵世德堂《新刻出像官板大字西游记》,未署作者姓名。  鲁迅、董作宾等人根据《淮安府志》“吴承恩《西游记》”的记载予以最终论定“吴承恩原著”。 
          该小说主要讲述了孙悟空出世,跟随菩提祖师学艺及大闹天宫后,遇见了唐僧、猪八戒、沙僧和白龙马,西行取经,一路上历经艰险,降妖除魔,经历了九九八十一难,终于到达西天见到如来佛祖,最终五圣成真的故事。该小说以“玄奘取经”这一历史事件为蓝本,经作者的艺术加工,深刻地描绘出明代百姓的社会生活状况。
         《西游记》是中国神魔小说的经典之作,达到了古代长篇浪漫主义小说的巅峰,与《三国演义》《水浒传》《红楼梦》并称为中国古典四大名著。《西游记》自问世以来在民间广为流传,各式各样的版本层出不穷。明代刊本有六种,清代刊本、抄本也有七种,典籍所记已佚版本十三种。鸦片战争以后,大量中国古典文学作品被译为西文,《西游记》渐渐传入欧美,被译为英、法、德、意、西、手语、世(世界语)、斯(斯瓦希里语)、俄、捷、罗、波、日、朝、越等语言。</dd>
	 </dl>
	 <body>
</html>

結果を示す:

要約:

      HTML では、順序付きリスト、順序なしリスト、カスタム リストのいずれであっても、それらはすべて項目のリストに作用します。これらのリスト要素は、開発者が情報をより適切に整理して表示するのに役立ち、ページをより明確で読みやすくします。 。同時に、これらは HTML の最も基本的な要素の 1 つでもあります。

おすすめ

転載: blog.csdn.net/weixin_59272777/article/details/132787643