从零开始学前端：列表标签 --- 今天你学习了吗？（Day06）

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day06）

复习：从零开始学前端：表单制作 — 今天你学习了吗？（Day05）

文章目录

• • 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day06）
  • • 前言
    • 第六节课：主要讲述了列表标签
    • • 一、列表标签
      • 二、无序列表
      • 三、有序列表
      • 四、自定义列表
      • 五、列表标签总结
      • 六、emment语法

前言

这应该最后一节基础标签的课程了，之后开始讲解CSS的知识。大家可以归纳整理一下目前学习道德标签，不得不说毕业设计太难了，每周都安排得满满的，还一头雾水，哭辽哭辽~

第六节课：主要讲述了列表标签

一、列表标签

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：

• 无序列表
• 有序列表
• 自定义列表

二、无序列表

标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用
• 标签定义。

  无序列表使用基本语法：

  <ul><li>列表1</li><li>列表2</li><li>列表3</li>...</ul>

  注意：

  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  2. 中只能嵌套

  4. ,直接在

     标签中输入其他标签或则文字的做法是不被允许的。

  6. 与

  之间相当于一个容器，可以容纳所有元素

  7. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

  • ul是unorered lists的缩写 （无序列表）
  • li是list item的缩写（列表项目）

  无序列表样式
  无序列表中除了前面默认的圆点点样式之外也可以使用其他的样式去更改，属性type就是来更改前面圆点点的样式的。

  属性值	效果
  type=“disc”	默认样式，圆点点
  type=“circle”	空心圆样式
  type=“square”	实心正方形

          <ul type="disc"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li>    </ul>    <ul type="circle"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li>    </ul>    <ul type="square"> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li>    </ul>

  效果图：
  

  三、有序列表

  有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
  在HTML标签中，

  标签用于定义有序列表，列表排序以数字来显示，并且使用
  1. 标签来定义列表项。

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

     • ol是ordered lists的缩写（有序列表）
     • li是list item的缩写（列表项目）

     注意：

     1. 中只能嵌套

     ，直接在

     标签中输入其他标签或则文字的做法是不被允许的。

     4. 与

     之间相当于一个容器，可以容纳所有元素。

     5. 有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

     属性值	效果
     type=“A”	以大写英文字母样式去数
     type=“a”	以小写英文字母样式去数
     type=“I”	大写的罗马数字
     type=“i”	小写的罗马数字

     注意：当type="1"时，使用默认的数字计数

             <ol type="1"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li>    </ol>    <ol type="A"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li>    </ol>    <ol type="a"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li>    </ol>    <ol type="I"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li>    </ol>    <ol type="i"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li>    </ol>

     效果图：
     

     四、自定义列表

     自定义列表与前两者有所区别，它不仅仅是一个列表项，还包含着一系列术语及说明的组合，在HTML中，定义列表用

     元素表示，列表项用

     表示，列表项说明用

     表示，基本语法如下：

     <dl>   <dt>定义列表项1</dt>   <dd>这是一个定义列表（说明1）</dd>   <dt>定义列表项2</dt>   <dd>这是一个定义列表（说明2）</dd>  ...</dl>

     dl是definition lists的英文缩写(自定义列表)
     dt是definition term的缩写(自定义列表组)
     dd是definition description的缩写（自定义列表描述）

     自定义列表注意点：

     1. 里面只能包含

        和

        。
     2. 和

        个数没有限制，经常是一个

        对应多个

        。
     3. dl里面只能放dt 和dd不允许放其他标签了。

     五、列表标签总结

     标签名	定义	说明
     	无序列表	里面只包含li没有顺序，使用较多，li里面可以包含任何标签
     	有序列表	里面只能包含li有顺序，使用相对较少，li里面可以包含任何标签
     	自定义列表	里面只能包含dt和dd有顺序，dt和dd里面可以放任何标签

     六、emment语法

     Emmet语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度，HBuildX，Vscode内部已经集成该语法。

     1. 快速生成HTML结构语法
     2. 快速生成CSS样式语法
     3. 快速格式化代码（Shift+alt+F）

     快速生成HTML结构语法：

     1. 生成标签直接输入标签名按tab键即可，比如div然后tab键，就可以生成

        标签。

     2. 如果想要生成多个相同的标签加上*就可以了，比如div*3就可以快速生成3个div。
     3. 如果有父子关系的标签，可以使用ul>li就可以了。
     4. 如果有兄弟关系的标签，用+就可以了比如div+p。
     5. 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了。
     6. 如果生成的div类名是有顺序的，可以用自增符号$。
     7. 如果想要在生成的标签内部写内容可以用{}表示（div{新年好~}）

     快速生成css样式语法：

     1. 比如w200按tab可以生成width：200px;
     2. 比如lh26按tab键可以生成line-height: 26px;
     3. 比如tac按tab键可以生成text-align：center；

     预习：从零开始学前端：CSS引入 — 今天你学习了吗？（Day07）

     ------少而不学，老而不识。

     郁金香导航