HTML_9——列表

2021/8/23 6:29:14

本文主要是介绍HTML_9——列表,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1. 无序列表

1.1 定义

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

无序列表始于

    标签。每个列表项始于

ul元素创建无序列表用li包裹起来

1.2 实例




<h4>一个无序列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>




image-20210818164514019

2. 有序列表

2.1定义

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于<li>标签。

2.2 实例




<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 



image-20210818164647259

3. 拓展

3.1 css的部分功能

list-style-type设置无序列表的圆点标志为其他形状比如方的圆的

list-style-image设置自定义图形标志

3.2 嵌套列表




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




image-20210818165149344

3.3 定义列表

html




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

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>




image-20210818165218033

4. 参考

HTML表格



这篇关于HTML_9——列表的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程