前端就业课第一阶段HTML5 零基础到实战列表

Posted 2022-02-18 1_bit

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端就业课第一阶段HTML5 零基础到实战列表相关的知识，希望对你有一定的参考价值。

注意：手机（APP）打开，内容显示更佳，不会的私聊博主即可
想要拿代码或加入学习计划（** 博主会监督你并且教你写文章 **）的拉到最下面（PC端Web打开）加博主即可，目录也在最下面。

参加1_bit博主前端学习计划发文时在头部记得加上本专栏链接，示例如下：

我已加入 1_bit 博主的免费前端站起来学习计划，专栏链接：https://blog.csdn.net/a757291228/category_11609526.html

一、列表的使用

1.1 无序列表

🐶1_bit：还记得之前出现的列表吗？

👸小媛：就是一列一列的，有不同分享的 ul 元素？

🐶1_bit：对的，之前并没有详细说明这个 ul 元素，本节开始将会较为详细的对 li 元素进行说明。

👸小媛：好勒。

🐶1_bit：之前咱们已经学过了列表的基本使用，一个列表的基本形式如下。

<ul>
	<li>第1项</li>
	<li>第2项</li>
	<li>第3项</li>
</ul>

🐶1_bit：其中 ul 表示这个是一个无序列表，其中 li 是其中的每一个项，每一个项有一个 li 的开始标签与结束标签，并且由于这个列表是无序列表，所以在显示时并没有在每一项内容中添加对应项的序号，而是用原点代替。

👸小媛：这个明白，不过我想要问的是，这个原点可以去掉吗？感觉不是很好看。

1.2 列项符号

🐶1_bit：当然可以，咱们可以在 ul 中添加对应的 type 属性，type 属性可以控制 ul 标签中每一项的符号，你可以选择 disc（实心圆形）、circle（空心圆形）、square（实心正方形），例如如下代码将会给出对应的示例。

<ul type="disc">
    <li>disc 实心圆形第1项</li>
    <li>disc 实心圆形第2项</li>
    <li>disc 实心圆形第3项</li>
</ul>
<ul type="circle">
    <li>circle 空心圆形第1项</li>
    <li>circle 空心圆形第2项</li>
    <li>circle 空心圆形第3项</li>
</ul>
<ul type="square">
    <li>square 实心正方形第1项</li>
    <li>square 实心正方形第2项</li>
    <li>square 实心正方形第3项</li>
</ul>

🐶1_bit：对应的显示内容如下。

👸小媛：正方形挺好看的，不过我问的是是否可以去掉，你走神了。

🐶1_bit：你想去掉直接给予 type 属性为 none 就可以了，例如如下示例。

<ul type="none">
  <li>none 无项符号第1项</li>
  <li>none 无项符号第2项</li>
  <li>none 无项符号第3项</li>
</ul>

🐶1_bit：成功了，刚刚拿这个去尝试了问题不大。

🐶1_bit：当然你也可以为不同的 li 定义不同的项符号，例如如下代码。

<ul type="none">
	<li type="circle">circle 空心圆形第1项</li>
	<li>none 无项符号第2项</li>
	<li type="square">square 实心正方形</li>
</ul>

👸小媛：哇，原来可以这样，明白了。

1.3 有序列表

🐶1_bit：那接下来咱们学习一下有序列表吧。刚刚学习的是 ul 无须列表，咱们现在开始学习有序列表，有序列表使用 ol 标签，例如如下示例。

<ol>
    <li>有序列表第1项</li>
    <li>有序列表第2项</li>
    <li>有序列表第3项</li>
</ol>

🐶1_bit：此时在页面中将会使用默认需序号在每一列前进行显示。

👸小媛：哇，竟然还标序了。

🐶1_bit：对的，这个标序的符号咱们可以使用不同的方式进行标序，例如数字、大小写字母。

<ol type="i">
    <li>type 使用i开头 第1项</li>
    <li>type 使用i开头 第2项</li>
    <li>type 使用i开头 第3项</li>
    <li>type 使用i开头 第4项</li>
    <li>type 使用i开头 第5项</li>
</ol>
<ol type="I">
    <li>type 使用I开头 第1项</li>
    <li>type 使用I开头 第2项</li>
    <li>type 使用I开头 第3项</li>
    <li>type 使用I开头 第4项</li>
    <li>type 使用I开头 第5项</li>
</ol>
<ol type="a">
    <li>type 使用a开头 第1项</li>
    <li>type 使用a开头 第2项</li>
    <li>type 使用a开头 第3项</li>
</ol>
<ol type="A">
    <li>type 使用A开头 第1项</li>
    <li>type 使用A开头 第2项</li>
    <li>type 使用A开头 第3项</li>
</ol>
<ol type="1">
    <li>type 使用1开头 第1项</li>
    <li>type 使用1开头 第2项</li>
    <li>type 使用1开头 第3项</li>
</ol>

👸小媛：哇，竟然可以这样，明白了。

🐶1_bit：咱们还可以给予这个有序列表项的起始值，例如我想从4 开始只需要给一个值给 start 属性即可，例如如下所示。

<ol type="i" start="4">
	<li>4 开始 type 使用i开头 第1项</li>
	<li>4 开始 type 使用i开头 第2项</li>
	<li>4 开始 type 使用i开头 第3项</li>
	<li>4 开始 type 使用i开头 第4项</li>
	<li>4 开始 type 使用i开头 第5项</li>
</ol>
<ol type="I" start="7">
	<li>7 开始 type 使用I开头 第1项</li>
	<li>7 开始 type 使用I开头 第2项</li>
	<li>7 开始 type 使用I开头 第3项</li>
	<li>7 开始 type 使用I开头 第4项</li>
	<li>7 开始 type 使用I开头 第5项</li>
</ol>
<ol type="a" start="3">
	<li>3 开始 type 使用a开头 第1项</li>
	<li>3 开始 type 使用a开头 第2项</li>
	<li>3 开始 type 使用a开头 第3项</li>
</ol>

👸小媛：哇，我第一次知道这些需要是长这样的，明白了。

二、定义列表

🐶1_bit：接下来咱们学一个定义列表，这个标签用于对某些名词进行定义，也就是对某些名称解说说明。

👸小媛：明白了。

🐶1_bit：咱们可以看看这个定义列表的使用方法。

<dl>
    <dt>这是一个名词1</dt>
    <dd>这是这个名词1的解释</dd>

    <dt>这是一个名词2</dt>
    <dd>这是这个名词2的解释</dd>
</dl>

🐶1_bit：在浏览器中演示如下。

👸小媛：唔，这个很简单，直接使用就好了，例如这样。

<dl>
	<dt>个人计算机</dt>
	<dd>个人计算机是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机。</dd>

	<dt>二进制</dt>
	<dd>二进制（binary），发现者莱布尼茨，是在数学和数字电路中以2为基数的记数系统，是以2为基数代表系统的二进位制</dd>
</dl>

对的，你也可以使用多个 dt，或者多个 dd 都可以，例如这样。

<dl>
   <dt>个人计算机</dt>
   <dt>计算机</dt>
   <dd>个人计算机是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机。</dd>
   <dd>就是计算机</dd>

   <dt>二进制</dt>
   <dt>2进制</dt>
   <dd>二进制（binary），发现者莱布尼茨，是在数学和数字电路中以2为基数的记数系统，是以2为基数代表系统的二进位制</dd>
</dl>

🐶1_bit：显示如下。

👸小媛：明白了。

三、菜单列表

🐶1_bit：在 html 中，菜单也是属于列表，并且这些列表都可以使用 css 转换为菜单的样子，当然 css 后面才会学到，在此并不需要了解，此处只是做个菜单列表介绍。

👸小媛：那菜单列表用什么标签呢？

🐶1_bit：当然是 menu 标签了，例如如下示例。

<menu>
   <li>菜单1</li>
   <li>菜单2</li>
   <li>菜单3</li>
</menu>

👸小媛：明白了。

四、列表嵌套使用

🐶1_bit：在 html 中，大多数标签是可以互相嵌套使用的，例如你想在列表中嵌入列表或者其他元素改变其显示，这都是可以的。

👸小媛：哇，列表也可以嵌入？

🐶1_bit：是这样的，咱们现在把之前的所学的内容都杂乱嵌入一下，你可以看看效果。

<menu>
     <li>菜单1</li>
     <li>菜单2</li>
     <li>菜单3</li>
 </menu>

 <dl>
     <dt>个人计算机</dt>
     <dt>
         <span style="color: blue;">计算机</span>
     </dt>
     <dd>个人计算机是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机。</dd>
     <dd>
         就是计算机
         <ol type="i" start="4">
             <li>4 开始 type 使用i开头 第1项</li>
             <li>4 开始 type 使用i开头 第2项</li>
             <li>4 开始 type 使用i开头 第3项</li>
             <li>4 开始 type 使用i开头 第4项</li>
             <li>4 开始 type 使用i开头 第5项</li>
         </ol>
     </dd>
     
     <dt>二进制</dt>
     <dt>2进制</dt>
     <dd>二进制（binary），发现者莱布尼茨，是在数学和数字电路中以2为基数的记数系统，是以2为基数代表系统的二进位制</dd>
 </dl>

 <ol type="I" start="7">
     <li>7 开始 type 使用I开头 第1项</li>
     <li>7 开始 type 使用I开头 第2项</li>
     <ol type="a" start="3">
         <li>3 开始 type 使用a开头 第1项</li>
         <li>3 开始 type 使用a开头 第2项</li>
         <li>3 开始 type 使用a开头 第3项</li>
     </ol>
     <li>7 开始 type 使用I开头 第3项</li>
     <li>7 开始 type 使用I开头 第4项</li>
     <li>7 开始 type 使用I开头 第5项</li>
 </ol>
 
 <ol type="A">
     <li>type 使用A开头 第1项</li>
     <li>
         type 使用A开头 第2项
         <ol type="1">
             <li>type 使用1开头 第1项</li>
             <li>type 使用1开头 第2项</li>
             <li>
                 type 使用1开头 第3项
                 <ul type="none">
                     <li type="circle">circle 空心圆形第1项</li>
                     <li>none 无项符号第2项</li>
                     <li type="square">
                         square 实心正方形
                         <ul type="circle">
                             <li>circle 空心圆形第1项</li>
                             <li>circle 空心圆形第2项</li>
                             <li>circle 空心圆形第3项</li>
                         </ul>
                     </li>
                 </ul>
             </li>
         </ol>
     </li>
     <li>type 使用A开头 第3项</li>
 </ol>
 
 
 <ul type="square">
     <li>square 实心正方形第1项</li>
     <li>square 实心正方形第2项</li>
     <li>square 实心正方形第3项</li>
 </ul>