你看我像不像学HTML的人(七)——列表标签

2024-03-31 20:08

本文主要是介绍你看我像不像学HTML的人(七)——列表标签,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一. 列表标签

        表格是用来显示数据的,那么列表就是用来布局的

        列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。

        根据使用场景不同,列表可以分为三大类:无序列表、有序列表自定义列表

P40 ==02:00 图片

 

        1. 无序列表

            <ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。

            无序列表的基本语法格式如下:

 

40 补充代码和语法格式

          (1)无序列表的各个列表项之间没有顺序级别之分,是并列的。

          (2)<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字是不被允许的。

          (3)<li>与</li>之间相当于一个容器,可以容纳所有元素。

          (4)无序列表会带有自己的属性,但在实际使用时,我们会使用CSS来设置。

        2. 有序列表

            有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。

            在HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项。

            有序列表基本语法格式如下:

 

          (1)<ol></oll>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字是不被允许的。

          (2)<li>与</li>之间相当于一个容器,可以容纳所有元素。

          (3)有序列表会带有自己的属性,但在实际使用时,我们会使用CSS来设置。

        3. 自定义列表

            自定义列表的使用场景:

            自定义列表常用于对术语或名词进行解释和描述,自定义列表的列表项前没有任何项目符号。

            在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。

            其基本语法如下:

 

            注意事项:

          (1)<dl></dl>里面只能包含<dt>和<dd>。

          (2)<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>。

        4. 列表总结

标签名定义说明
<ul></ul>无序标签里面只能包含<li>  没有顺序,使用较多。li里面可以包含任何标签。
<ol></oll>有序标签里面只能包含<li>  有顺序,使用相对较少。li里面可以包含任何标签。
<dl></dl>自定义列表里面只能包含<dt>和<dd>。<dt>和<dd>里面可以放任何标签。

 

这篇关于你看我像不像学HTML的人(七)——列表标签的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/865224

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Python进阶之列表推导式的10个核心技巧

《Python进阶之列表推导式的10个核心技巧》在Python编程中,列表推导式(ListComprehension)是提升代码效率的瑞士军刀,本文将通过真实场景案例,揭示列表推导式的进阶用法,希望对... 目录一、基础语法重构:理解推导式的底层逻辑二、嵌套循环:破解多维数据处理难题三、条件表达式:实现分支

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

把Python列表中的元素移动到开头的三种方法

《把Python列表中的元素移动到开头的三种方法》在Python编程中,我们经常需要对列表(list)进行操作,有时,我们希望将列表中的某个元素移动到最前面,使其成为第一项,本文给大家介绍了把Pyth... 目录一、查找删除插入法1. 找到元素的索引2. 移除元素3. 插入到列表开头二、使用列表切片(Lis

python中列表应用和扩展性实用详解

《python中列表应用和扩展性实用详解》文章介绍了Python列表的核心特性:有序数据集合,用[]定义,元素类型可不同,支持迭代、循环、切片,可执行增删改查、排序、推导式及嵌套操作,是常用的数据处理... 目录1、列表定义2、格式3、列表是可迭代对象4、列表的常见操作总结1、列表定义是处理一组有序项目的

C++11范围for初始化列表auto decltype详解

《C++11范围for初始化列表autodecltype详解》C++11引入auto类型推导、decltype类型推断、统一列表初始化、范围for循环及智能指针,提升代码简洁性、类型安全与资源管理效... 目录C++11新特性1. 自动类型推导auto1.1 基本语法2. decltype3. 列表初始化3

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二