HTML列表

2018-12-09  本文已影响0人  于海鹏528

HTML中列表分为三种:有序列表,无序列表和定义列表

有序列表:

<ol>

    <li>列表项</li>

    <li>列表项</li>                                    ol就是ordered list(有序列表)

    <li>列表项</li>

</ol>

<!DOCTYPE html>

<html>

<head>                                                                                    在HTML中,我们可以使用type属性来改变列表符号。

<meta charset="utf-8"/>                                                           <ol type="a">   <ol type="A">  <ol type="I">  <ol type="i">

<title>有序列表</title>

</head>

<body>

        <ol>

          <li>HTML</li>

          <li>CSS</li>

          <li>JavaScript</li>

          <li>JQuery</li>

          <li>Vue.js</li>

        </ol>

 </body>

 </html>

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

无序列表使用 <ul> 标签

<ul>

<li>Coffee</li>                                                                        跟有序列表一样,无序列表也可以使用type属性来定义列表符号

<li>Milk</li>                                                                            <ul type="circle">空心圆             <ul type="disc">实心圆

</ul>                                                                                       <ul type="square">正方形                                                                    

浏览器显示如下:

Coffee

●Milk

HTML 自定义列表

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

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

浏览器显示如下:

Coffee

- black hot drink

Milk

- white cold drink


<ol>            定义有序列表

<ul>            定义无序列表

<li>             定义列表项

<dl>            定义列表

<dt>            自定义列表项目

<dd>           定义自定列表项的描述

上一篇 下一篇

猜你喜欢

热点阅读