专栏首页初见Linux3.列表-HTML基础

3.列表-HTML基础

一、列表介绍

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

1.列表分类

在 HTML 中,列表共分为 3 种:有序列表、无序列表、定义列表。 可能你在自学过程中会遇到 目录列表dir、菜单列表menu,其实这两种列表在HTML5标准中已经被废除了,现在都是用无序列表 ul 来替代。

(1)有序列表

列表项之间有先后顺序之分。

(2)无序列表(重点)

列表项之间没有先后顺序之分。

(3)定义列表

是一组带有特殊含义的列表,一个列表项中包含 条件、列表两部分

二、有序列表-ol

在有序列表中,各个列表项都是有顺序的。 有序列表从 <ol>开始,到</ol>结束。 有序列表一般采用数字或字母作为顺序默认采用数字顺序

1.语法

<ol>
 <li>列表项</li>
 <li>列表项</li>
 <li>列表项</li>
 ...
</ol>

(1)语义

  • ol,即 ordered list,有序列表
  • li,即 list ,列表项
  • 理解标签语义更有利于记忆。
① ol

<ol></ol> 标志着有序列表的开始和结束

② li

<li></li> 标签表示这是一个列表项一个有序列表可以包含多个列表项

③ 注意

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

(2)示例

① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
    </head>
    <body>
        <ol>                        <!--有序列表的开始-->
            <li>贤思齊</li>            <!--列表项-->
            <li>君初见</li>
            <li>王小淘</li>
            <li>越努力,越幸运</li>
        </ol>                       <!--有序列表的结束-->
    </body>
</html>

有序列表示例.png

2.type属性

我们知道,有序列表默认采用数字顺序,那么可不可以换成别的表现形式呢? 当然可以啦!!!!! 在 HTML 中,我们可以使用 type属性来改变列表项符号。

(1)语法

<ol type=" 属性值 ">
 <li>列表项</li>
 <li>列表项</li>
 <li>列表项</li>
 ...
</ol>
① type可选属性值

属性值

列表项符号

1

阿拉伯数字:1、2、3、...

a

小写英文字母:a、b、c、...

A

大写英文字母:A、B、C、...

i

小写罗马数字:

l (这是大写的 i 呦!!!)

大写罗马数字:Ⅰ、Ⅱ、Ⅲ、...

② 示例
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
   </head>
   <body>
     <ol type="I">               <!--有序列表的开始,列表项符号为大写罗马字母-->
       <li>贤思齊</li>      <!--列表项-->
       <li>君初见</li>
       <li>王小淘</li>
       <li>越努力,越幸运</li>
     </ol>                       <!--有序列表的结束-->
   </body>
</html>

有序列表type属性.png

对于有序列表的列表项符号,在之后的 CSS 学习中,我们会舍弃type属性,而是用list-style-type属性来替代。

三、无序列表-ul(重点)

无序列表的列表项是没有顺序的。 默认情况下,无序列表的列表项符号为◉,可以通过 type 属性来改变。

1.语法

<ul>
 <li>列表项</li>
 <li>列表项</li>
 <li>列表项</li>
 ...
</ul>

(1)语义(重点)

理解标签的语义有利于记忆。

  • ul,即 unordered list,无序列表
  • li,即 list ,列表项
① ul

<ul></ul> 标志着无序列表的开始和结束

② li

<li></li> 标签表示这是一个列表项一个有序列表可以包含多个列表项

③ 注意

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

(2)示例

① 例1
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
   </head>
   <body>
     <ul>                  <!--无序列表的开始-->
       <li>贤思齊</li>      <!--列表项-->
       <li>君初见</li>
       <li>王小淘</li>
       <li>越努力,越幸运</li>
     </ul>                  <!--无序列表的结束-->
 </body>
</html>

无序列表示例.png

2.type属性

(1)语法

<ul type=" 属性值 ">
 <li>列表项</li>
 <li>列表项</li>
 <li>列表项</li>
 ...
</ul>
① type可选属性值

属性值

列表项符号

disc

实心圆(默认值)

circle

空心圆

square

正方形

学习CSS后会被 line-style-type 取代。

② 示例
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
   </head>
   <body>
     <ul type="square">      <!--无序列表的开始,列表项符号为正方形-->
       <li>贤思齊</li>       <!--列表项-->
       <li>君初见</li>
       <li>王小淘</li>
       <li>越努力,越幸运</li>
     </ul>                  <!--无序列表的结束-->
   </body>
</html>

无序列表type属性.png

3.深入无序列表

真正的前端开发中,无序列表比有序列表更为实用。 几乎我们使用的都是无序列表,而有序列表基本用不到。

(1)无序列表的两个注意点

  • ul 元素的子元素只能是 li,不能是其它元素。
  • ul 元素内部的文本,只能在 li 元素内部添加,不能在 li 元素外部添加。
① 示例
Ⅰ.ul的子元素只能是li,不能是其它
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
   </head>
   <body>
     <ul>
       <div>华夏</div>
       <li>人生若只如初见</li>
       <li>当时只道是寻常</li>
       <li>一蓑烟雨任平生</li> 
     </ul>
   </body>
</html>
# 上述代码是错误的,因为ul的子元素只能是li,不能是其它,但在这里却有div。
​
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
   </head>
   <body>
     <div>华夏</div>
     <ul>
       <li>人生若只如初见</li>
       <li>当时只道是寻常</li>
       <li>一蓑烟雨任平生</li> 
     </ul>
   </body>
</html>
# 这样写才是正确的。
Ⅱ.文本不能直接放在ul元素内
<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">  <!--必须放在title标签及其它meta标签前-->
   </head>
   <body>
     <ul>
       华夏
       <li>人生若只如初见</li>
       <li>当时只道是寻常</li>
       <li>一蓑烟雨任平生</li> 
     </ul>
   </body>
</html>
# 这样写是错误的,文本不能直接放在ul元素内。

四、定义列表

HTML 中,定义列表由 名词、描述 两部分组成。

1.语法

<dl>
 <dt>名词</dt>
 <dd>描述</dd>
 ……
</dl>

(1)语义

  • dl,即 definition list,定义列表。
  • dt,即 definition term,定义名词。
  • dd,即 definition description,定义描述。
① dl

<dl></dl> 标志着定义列表的开始和结束

② dt

dt标签用于添加要解释的名词。

③ dd

dd标签用于添加该名词的具体解释。

(2)示例

① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
    </head>
    <body>
        <dl>                                        <!--定义列表的开始-->
            <dt>人生若只如初见</dt>                    <!--名词-->
            <dd>一切还是停留在初次见面的时候为好。</dd>    <!--名词的解释-->
            <dt>当时只道是寻常</dt>
            <dd>昔日平常往事,已不能如愿以偿。</dd>
            <dt>一蓑烟雨任平生</dt>
            <dd>一身蓑衣任凭风吹雨打,照样过我的一生。</dd>
        </dl>                                       <!--定义列表的结束-->
    </body>
</html>

定义列表示例.png

(3)实际开发

在实际开发中,定义列表虽然用的少,但是在某些高级效果(如:自定义表单)中也会用到。

五、HTML语义化(重点)

到现在为止,我们学习了很多标签,但是由于不熟悉标签的语义化,有时我们可能会用别的标签代替另一个标签,从而实现相同的效果,但这是一种错误的思想。

很多人觉得HTML简单,是的,HTML确实简单,学完一遍就觉得自己都会了,但其实他们连 HTML的精髓都没有搞懂,这是HTML学习中的一个误区。

1.HTML精髓

你可以用div来代替p,也可以用p来代替h1~h6,但这却违背了 HTML 语言的初衷。 HTML 的精髓就在于标签的语义。 在 HTML 中,大部分标签都有它自身的语义。比如说:

  • p标签:表示 paragraph,标记的是一个段落。
  • h1标签:表示header1,标记的是一个最高级的标题。

div 和 span 是无语义的标签,应优先使用其它有语义的标签。

2.语义化

(1)可读性

在日后工作,代码往往成千上万行,如果全部用 div 和 span 来实现,将来在代码维护上会非常麻烦。

(2)搜索引擎优化

良好的语义,在搜索中的权重会较大,网络蜘蛛(如:百度、谷歌)会优先检索到。 语义化会在稍后的文章里详细介绍。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 6.列表样式-CSS基础

    见贤思齊
  • 6.超链接-HTML基础

    见贤思齊
  • 5.CSS层次选择器-CSS进阶

    这些都是CSS中最基本的选择器。 层次选择器,就是通过元素之间的层次关系来选择元素。 层次选择器在实际开发中也是相当重要的,常见的层次关系包括:父子、后代...

    见贤思齊
  • 如何将文章列表用<li>分两列显示

      我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们?   其实相对比较简单,用几行css样...

    ytkah
  • pyhon 列表的增删改查

    py3study
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study
  • li、img等元素设置inline-block后的空白间距问题

    关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

    德顺
  • Pug迭代

    听着music睡
  • js 为 li 循环添加 class

    前段时间有个小伙伴想在新闻列表页面的 ul 里面为每个 class 循环添加带 1  2  3  4的 class,正巧昨天做一个站也用到了类似 for 循环,...

    Savalone
  • JS示例15-模运算应用(隔行变色)

    专注APP开发

扫码关注云+社区

领取腾讯云代金券