列表的基本用法

m0_55844406

已于 2023-03-13 23:03:14 修改

阅读量49

点赞数

文章标签： css Powered by 金山文档

于 2023-03-13 22:55:25 首次发布

本文链接：https://blog.csdn.net/m0_55844406/article/details/129508542

版权

本文展示了HTML中不同类型的列表，包括无序列表、有序列表、自定义列表及其嵌套使用。此外，还涵盖了有序列表的不同编号样式（数字、大写字母、小写字母、罗马数字）以及无序列表的符号样式（圆点、圆圈、正方形）。

摘要由CSDN通过智能技术生成

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

嵌套列表

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

不同类型的有序列表

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

不同类型无序列表

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

My列表

<h1>
    My 列表
  </h1>
  <table border="2" cellpadding="30">
    <tr>
      <td>
    <ul>
      <li>Food</li>
      <ol>
          <li>薯片</li>
          <li>棒棒糖</li>
          <li>果冻</li>
          <li>巧克力</li>
          <li>辣条</li>
      </ol>
      <li>Fruits</li>
      <ol type="A">
        <li>西瓜</li>
        <li>桔子</li>
        <li>哈蜜瓜</li>
        <li>草莓</li>
        <li>葡萄</li>
        <li>香蕉</li>
        <li>苹果</li>
      </ol>
      <li>Meat</li>
      <ol type="I">
        <li>羊肉</li>
        <li>牛肉</li>
        <li>猪肉</li>
        <li>鸡肉</li>
        <li>涮羊肉</li>
        <li>生鱼片</li>
      </ol>
  </ul>
      </td>
    </tr>
  </table>