HTML基础教程之HTML列表

HTML项目符号(无序列表)

网页中的列表随处可见,比如新闻页面随处可见这样的列表

5.png

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

下面,我们来实现这样的效果

语法:

<ul >

    <li>内容1</li>

    <li>内容2</li>

    <li>内容3</li>

</ul>

<ul>或<li>的常用属性

  • type:项目符号的类型,取值:disc(小黑点)、circle(空心圆)、square(实心方块)

实例:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
   <ul type="square">

    <li>三星在大陆召回19万台Note7手机 可全额退款</li>

    <li>国土部等5部委:进城落户人口人均用地不超1百平米</li>

    <li>13位科学家实名呼吁对韩春雨启动调查:为学界名声</li>

</ul>
    </body>
</html>

注:在HTML标记中,内容应该放在最底层标记中。

HTML编号列表(有序列表)

网站之中还有这样的列表

6.png

这类信息展示就可以使用<ol>标签来制作有序列表来展示。

语法:

<ol>

    <li>……</li>

    <li>……</li>

    <li>……</li>

</ol>

<ol>或<li>的常用属性

  •  type:编号类型,取值:1、a、A、i、I

  • start:从第几个开始编号(数字)。

改造上面一个例子:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
   <ol type="1" start="1">

    <li>三星在大陆召回19万台Note7手机 可全额退款</li>

    <li>国土部等5部委:进城落户人口人均用地不超1百平米</li>

    <li>13位科学家实名呼吁对韩春雨启动调查:为学界名声</li>

</ol>
    </body>
</html>

注:大家可以尝试改变属性的值,看看输出有什么变化

继续学习
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <ul type="square"> <li>三星在大陆召回19万台Note7手机 可全额退款</li> <li>国土部等5部委:进城落户人口人均用地不超1百平米</li> <li>13位科学家实名呼吁对韩春雨启动调查:为学界名声</li> </ul> </body> </html>
提交重置代码