初识HTML（十）——列表

最新推荐文章于 2022-05-11 11:02:04 发布

秃头的毛睿

最新推荐文章于 2022-05-11 11:02:04 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/107206152

版权

<li></li>定义列表选项

1.无序列表——<ul></ul>标签定义无需列表

<html>
<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>

2.有序列表——<ol></ol>定义有序列表，标签<ol></ol>的start属性定义有序列表开始排列的第一个序号

<html>
<body>

<h4>数字列表：</h4>
<ol start="520">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

</body>
</html>

3.嵌套列表

<html>

<body>

<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

4.自定义列表

<html>

<body>

<h2>一个定义列表：</h2>

<dl>
   <dt>爱好</dt>
   <dd>打球</dd>
   <dd>力量突破</dd>
   <dd>漂亮姑娘</dd>
   <dt>训练</dt>
   <dd>深蹲</dd>
   <dd>卧推</dd>
   <dd>硬拉</dd>
   <dd>高翻</dd>
   <dd>实力举</dd>
   <dd>控球</dd>
   <dd>弹跳</dd>
   <dd>投篮</dd>
</dl>

</body>
</html>