HTML学习笔记12-HTML列表

偏执的太偏执、 2021-11-05 17:46 356阅读 0赞

一、HTML无序列表

1.HTML无序列表使用<ul>标签进行定义，列表项使用<li>标签进行定义。列表项内部可以使用段落、换行符、链接、其他列表。具体代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表练习</title>
    </head>
    <body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    </body>
    </html>

页面显示如下：

![20190809090114370.png][]

2.快速添加ul及li标签

需求场景：添加ul下包含十个li标签。在工具中输入ul>li\*10按tab健即可

二、HTML有序列表

HTML有序列表使用<ol>标签定义，列表项使用<li>标签定义。具体代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>有序列表练习</title>
    </head>
    <body>
    <ol>
        <li>列表A</li>
        <li>列表B</li>
    </ol>
    </body>
    </html>

页面显示如下：

![20190809090808119.png][]

三、HTML自定义列表

自定义列表列表使用<dl>标签定义，自定义列表项使用<dt>或<dd>标签定义。具体实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义列表项</title>
    </head>
    <body>
    <dl>
        <dd>dd标签列表项</dd>
        <dt>dt标签列表项</dt>
    </dl>
    </body>
    </html>

页面显示如下：

![20190809092538815.png][]

[20190809090114370.png]: /images/20211104/1a99d3d7e0e74b93bfd988fcaf912876.png
[20190809090808119.png]: /images/20211104/019962c4dc5940fc8572ff9f650fba65.png
[20190809092538815.png]: /images/20211104/0413e2485edc4c1bb8bf70e0cdd6a0f0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关 html学习（二）--列表

html学习（二）--列表实现效果!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/201911051849294

素颜马尾好姑娘i/ 2023年05月29日 09:28/ 0 赞/ 45 阅读

相关 HTML学习笔记

标签可分为自闭合与主动闭合自闭合标签 <meta charset="UTF-8"> 主动闭合标签 <h1 style="b

r囧r小猫/ 2023年01月06日 01:25/ 0 赞/ 223 阅读

相关 HTML学习笔记

HTML的概念 HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

Love The Way You Lie/ 2022年12月01日 14:17/ 0 赞/ 224 阅读

相关学习笔记（HTML）

2011-04-23 1、 <html> <body> <abbr title="etcetera">etc.</abbr> <br /> <acron

痛定思痛。/ 2022年08月06日 04:12/ 0 赞/ 231 阅读

相关 html学习笔记

html全称：Hypertext Makeup Language超文本标记语言，是web（万维网）编程的基础。目前更新至第五代，即[html5][]

迷南。/ 2022年08月01日 15:55/ 0 赞/ 252 阅读

相关 HTML学习笔记

目录 HTML基础知识... 2 1.1标记语言基本概念... 2 1.1.1什么是计算机语言... 2 1.1.2什么是标记语言... 2 1.2 HTML基本结

刺骨的言语ヽ痛彻心扉/ 2022年06月13日 12:17/ 0 赞/ 306 阅读

相关前端学习笔记(HTML)——列表

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表</ti

今天药忘吃喽~/ 2022年03月10日 07:18/ 0 赞/ 337 阅读

相关 HTML学习笔记12-HTML列表

一、HTML无序列表 1.HTML无序列表使用<ul>标签进行定义，列表项使用<li>标签进行定义。列表项内部可以使用段落、换行符、链接、其他列表。具体代码如下 <

偏执的太偏执、/ 2021年11月05日 17:46/ 0 赞/ 357 阅读

相关 HTML学习笔记

> 学习网站https://www.w3school.com.cn/h.asp > 持续学习，持续更新文章目录基础一.简介二

骑猪看日落/ 2021年09月07日 06:02/ 0 赞/ 714 阅读

相关 HTML学习笔记

web标准构成结构、表现、行为、 HTML、CSS、JavaScript、 <html> 表示整个html页面的开始 <head> 表示整个html

青旅半醒/ 2021年08月24日 16:40/ 0 赞/ 459 阅读