前端学习-day3-列表的使用

最新推荐文章于 2025-01-15 16:22:00 发布

学前端来搬砖

最新推荐文章于 2025-01-15 16:22:00 发布

阅读量246

点赞数 8

分类专栏： html5+css3 文章标签：学习

本文链接：https://blog.youkuaiyun.com/xqdlbz/article/details/142989280

版权

html5+css3 专栏收录该内容

7 篇文章

订阅专栏

我们常看到新闻网页会像下面这样排，这样的效果是怎么实现的呢？

其实在html中用到了列表，今天我们要学习的就是列表的使用。

列表分3类：

有序列表

无序列表

自定义列表（常用于图文混排）

1.有序列表：<ol>

规则规定，<ol>里只可以放<li>，但<li>里面可以放其他标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ol>
</body>
</html>

前面的1.、2.、3.是自动生成的

<ol>有三个属性：

type属性(更改type可以改变自动生成数字的样式，有1、a、A、i、I这5个属性)
start属性（start取值只可以是数字，例如start=“3”，type=“a”，则排序从c开始；如果start值大于总字母数范围，则从新开始新的一轮，例如：start=“27”，type=“a”，则排序从aa开始）
ol里面值可以包含li，但是li里面可以继续嵌套别的标签。

明日学习内容：无序列表和自定义列表