HTML入门篇03.布局标签与列表标签

最新推荐文章于 2024-04-08 19:31:30 发布

大白菜·

最新推荐文章于 2024-04-08 19:31:30 发布

阅读量351

点赞数 6

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_62404129/article/details/126214097

版权

上篇说了一些常用的标签，这篇说一下布局标签与列表标签

布局标签

header标签网页的头部

main标签网页的主体部分

footer标签网页的底部

nav标签网页的导航

aside标签和主体相关的内容，侧边栏

article标签文章之类的

section标签独立的区块，上面的标签都不合适，就用这个，一般用来代替div

列表标签

列表标签分为三种，分别为：有序列表、无序列表和定义列表

一、有序列表：

ol创建，li表示列表项

二、无序列表

ul创建，li表示列表项

disc 默认值，实心的原点

square 实心的方块

circle 空心的圆

三、定义列表

Dl创建，dt下定义，dd解释定义

有序列表、无序列表默认样式：左边有间距，有项目符号

type属性改变项目符号

列表可以相互嵌套

下面来举个栗子展示一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列表标签</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <!-- 定义列表 -->
    <dl>
        <dt>定义列表</dt>
        <li>定义列表</li>
        <li>定义列表</li>
        <li>定义列表</li>
        <dt>定义列表</dt>
        <li>定义列表</li>
        <li>定义列表</li>
        <li>定义列表</li>
    </dl>
</body>
</html>

运行效果：

大白菜·

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
7
评论
HTML入门篇03.布局标签与列表标签

一、有序列表：ol创建，li表示列表项二、无序列表ul创建，li表示列表项disc 默认值，实心的原点square 实心的方块circle 空心的圆三、定义列表Dl创建，dt下定义，dd解释定义有序列表、无序列表默认样式：左边有间距，有项目符号type属性改变项目符号列表可以相互嵌套。...
复制链接

扫一扫