05.列表标签

一、列表简介

列表是网页中最常用的一种数据排列方式。

  • 有序列表:有先后顺序之分
  • 无序列表:无先后顺序之分
  • 定义列表:带有特殊含义的列表

二、有序列表

1、语法格式

有序列表中的各个列表项是有顺序的…

<ol>
    <li>列表项li>
    <li>列表项li>
ol>

注意:

  • ol和li是配合一起使用的,不可以单独使用;
  • ol的子标签只能是li标签,不能是其他标签。

2、基本特征

  • 有序列表是由有顺序的列表项组成的
  • 有序列表一般采用数字或字母作为顺序,默认采用数字顺序
  • 是块元素独占一行

3、type属性

有序列表中可以用type属性改变列表项符号,基本语法格式如下:

<ol type=”1|a|A|i|I” >
    <li>HTMLli>
    <li>cssli>......
ol>

注意:

  • 除了type属性之外,还可为ol定义start属性,为li定义value属性;
  • 不赞成使用type、start和value属性,可通过CSS样式替代。

三、无序列表

1、语法格式

无序列表中的各个列表项是没有顺序的…

<ul>
    <li>列表项li>
    <li>列表项li>
ul>

注意:

  • ul和li是配合一起使用的,不可以单独使用;
  • ul的子标签只能是li标签,不能是其他标签。

2、基本特征

  • 无序列表是由无顺序的列表项组成的
  • 无序列表一般采用无顺序的符号作为顺序,默认采用实心圆点
  • 是块元素独占一行

3、type属性

无序列表中可以用type属性改变列表项符号,基本语法格式如下:

<ol type=”disc|circle|square” >
    <li>HTMLli>
    <li>cssli>......
ol>

注意:

  • 不赞成使用type属性,可通过CSS样式替代;
  • 无序列表的使用比有序列表更广泛,一般不用有序列表。

实验:无序列表有没有start属性?

四、定义列表

1、语法格式

定义列表中的列表项是由标题和注释组成的…

<dl>
    <dt>列表项标题dt>
    <dd>列表项注释dd>...
dl>

注意:

  • dl和dt/dd是配合一起使用的,不可以单独使用;
  • dl的子标签只能是dt/dd标签,不能是其他标签。

2、基本特征

  • 定义列表列表项是由标题和注释两部分组成的
  • 一个列表项标题可以对应多个列表项注释
  • 定义列表列表项前没有项目符号,但注释会缩进
  • 是块元素独占一行
  • 定义列表一般用于图文混排

五、HTML语义化

1、什么是语义化

HTML中每个标签都有特定的用途和使用场景。
合理正确的使用特定的标签来展示特定的内容,比如使用ul无序列表来展示列表内容,使用p来展示段落…
比如,我们可以使用div来模拟实现和有序列表一模一样的效果,但是这种做法不推荐使用,因为没有语义化:

<div>1.HTMLdiv>
<div>2.CSSdiv>
<div>3.JavaScriptdiv>
<div>4.jQuerydiv>
<div>5.Vue.jsdiv>

所以想要以语义化的方式来表示一个列表,推荐使用专有的标签ul/ol/dl:

<ol type=“1”>
    <li>HTMLli>
    <li>CSSli>
    <li>JavaScriptli>
    <li>jQueryli>
    <li>Vue.jsli>
<ol>

2、语义化的好处

  • 有利于开发和维护,语义化更具可读性,代码更好维护;
  • 语义化对于搜索引擎优化来说,也是极其重要的。
    总之:学习HTML不在于学了多少标签,而在于是否能把正确的标签用到正确的地方。

你可能感兴趣的:(#,html,css)