HTML学习笔记12-HTML列表

偏执的太偏执、 2021-11-05 17:46 321阅读 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 条评论，321人围观）

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

相关阅读

相关 HTML学习笔记

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

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

相关 HTML学习笔记

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

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

相关 jquery更新html列表,HTML 列表

HTML 列表 HTML 支持有序、无序和定义列表: HTML 列表有序列表第一个列表项第二个列表项第三个列表项无序列表列表项列表项列表项

水深无声/ 2022年10月06日 13:49/ 0 赞/ 193 阅读

相关学习笔记（HTML）

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

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

相关 html学习笔记

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

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

相关 HTML学习笔记

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

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

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

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

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

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

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

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

相关 HTML学习笔记

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

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

相关 HTML学习笔记

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

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