HTML网页设计:六、列表

列表


        列表分为两种类型,有序列表和无序列表。有序列表使用编号来记录项目的顺序,无序列表用项目符号来标记列表项。

        列表的主要标签如下表:

标签 描述
    有序列表
      无序列表
      自定义列表
      自定义列表中上层项目
      自定义列表中下层项目
    • 列表项目

      HTML系列文章目录

      1. HTML网页设计:一、HTML的基本结构
      2. HTML网页设计:二、网页的基本标签
      3. HTML网页设计:三、图像标签之<img>标签
      4. HTML网页设计:四、超链接
      5. HTML网页设计:五、行内元素和块元素
      6. HTML网页设计:六、列表
      7. HTML网页设计:七、表格
      8. HTML网页设计:八、媒体元素
      9. HTML网页设计:九、网页的简单布局
      10. HTML网页设计:十、iframe内联框架
      11. HTML网页设计:十一、表单

      文章目录

      • 列表
        • HTML系列文章目录
        • 1.有序列表
        • 2.无序列表
        • 3.自定义列表
        • 所有代码及其运行结果

      1.有序列表

              有序列表是一列项目,列表项目使用数字进行标记。有序列表始于

        标签。每个列表项始于
      1. 标签,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

        例如:

        	<ol>
        		有序列表
        		<li>第一项li>
        		<li>第二项li>
        		<li>第三项li>
        	ol>
        

        网页显示为:
        HTML网页设计:六、列表_第1张图片

        2.无序列表

                无序列表也是一列项目,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于

          标签。每个列表项始
        • 标签,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

          例如:

          	<ul>
          		无序列表
          		<li>第一项li>
          		<li>第二项li>
          		<li>第三项li>
          	ul>
          

          网页显示为:
          HTML网页设计:六、列表_第2张图片

          3.自定义列表

                  自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以

          标签开始。每个自定义列表项以
          开始。每个自定义列表项的定义以
          开始,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

          例如:

          	<dl>果蔬组合
          		<dt>水果dt>
          			<dd>橘子dd>
          			<dd>香蕉dd>
          			<dd>苹果dd>
          		<dt>蔬菜dt>
          			<dd>西红柿dd>
          			<dd>黄瓜dd>
          			<dd>青菜dd>
          	dl>
          

          网页显示为:
          HTML网页设计:六、列表_第3张图片

          所有代码及其运行结果

          
          <html>
          <head>
          <meta charset="utf-8">
          <title>列表的学习title>
          head>
          <body>
          	
          	<ol>
          		有序列表
          		<li>第一项li>
          		<li>第二项li>
          		<li>第三项li>
          	ol>
          	
          	<ul>
          		无序列表
          		<li>第一项li>
          		<li>第二项li>
          		<li>第三项li>
          	ul>
          	
          	<dl>果蔬组合
          		<dt>水果dt>
          			<dd>橘子dd>
          			<dd>香蕉dd>
          			<dd>苹果dd>
          		<dt>蔬菜dt>
          			<dd>西红柿dd>
          			<dd>黄瓜dd>
          			<dd>青菜dd>
          	dl>
          body>
          html>
          

          HTML网页设计:六、列表_第4张图片

      你可能感兴趣的:(HTML,html,网页设计,列表,web)