前端成长之路:HTML(3)

news2024/12/12 11:50:10

在HTML中,有列表标签。列表最大的特点是整齐、简洁、有序,用列表进行布局会更加自由方便。根据使用的情景不同,可以将列表分为三大类:无序列表、有序列表和自定义列表。

无序列表

在HTML中使用<ul>标签定义一个无序列表,在无序列表中使用<li>标签定义列表项,基本语法如下:

 

无序列表的定义需要遵循以下规则:

1.无序列表的各个列表项之间没有顺序级别之分,是并列的;顾名思义,无序列表,肯定是没有顺序的。

2.直接在<ul>标签中使用其他标签或者直接输入文字是不允许的,ul标签中只能使用<li>标签。

3.<li>标签相当于一个容器,可以容纳所有的元素(其他所有标签,或者文字等)。

li中可以容纳所有元素:

 

4.和很多标签一样,无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。

总结一下,最重要的是在ul无序列表中(有序列表也一样),不能直接使用其他标签或输入文字,需要在ul标签中使用li(就相当于是列表中一个大的容器)标签,然后在li标签中进行操作。

有序列表

有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。有序列表和无序列表的差别就在于有序列表中的列表项是有顺序的。在HTML中,使用<ol>标签定义有序列表,列表排序是通过数字显示的;和无序列表一样,有序列表中也是通过li标签来定义列表项的。

可以看见,有序列表中的列表项的前面是通过数字来表示列表项顺序的。 有序列表的定义和无序列表定义类似,也需要遵循以下规则:

1.有序列表的各个列表项之间通过数字来表示顺序;顾名思义,有序列表,肯定具有顺序的。

2.直接在<ol>标签中使用其他标签或者直接输入文字是不允许的,ol标签中只能使用<li>标签。

3.<li>标签相当于一个容器,可以容纳所有的元素(其他所有标签,或者文字等)。

自定义列表

在HTML中我们可以创建自定义列表,自定义列表通常用于对术语或名词进行解释或者描述,自定义列表中的列表项没有任何项目符号。在HTML标签中,通过<dl>标签定义一个自定义列表(描述列表),dl标签需要配合<dt>(定义项目/名字)、<dd>(描述每一个项目/名字)一起使用。

 这个代码中,通过dl标签创建了一个自定义列表,并且使用dt标签定义了一个“项目”(帮助中心),然后通过dd标签为这个“项目”(帮助中心)进行了描述。

注意:<dl>中只能包含<dt>和<dd>,这和ul或ol中只能包含li是一样的道理;<dl>中的dt和dd个数没有限制,可以是任意个,但是一般情况下是一个dt对应多个dd,因为相当于是一个“项目”对应多个“描述”,并且dt或dd中可以放任何标签(这点也和li类似)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2258218.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C语言】fscanf 和 fprintf函数

【C语言】fscanf 和 fprintf函数 文章目录 [TOC](文章目录) 前言一、定义二、代码例程三、实验结果四、参考文献总结 前言 使用工具&#xff1a; 1.编译器&#xff1a;DEVC 2.C Primer Plus 第六版-1 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一…

【Vivado】xdc约束文件编写

随手记录一下项目中学到的约束文件编写技巧。 时序约束 创建生成时钟 参考链接&#xff1a; Vivado Design Suite Tcl Command Reference Guide (UG835) Vivado Design Suite User Guide: Using Constraints (UG903) 通过Clocking Wizard IP创建的时钟&#xff08;MMCM或…

从小学题到技术选型哲学:以智能客服系统为例,解读相关AI技术栈20241211

&#x1f9e0;&#x1f4a1;从小学题到技术选型哲学&#xff1a;以智能客服系统为例&#xff0c;解读相关AI技术栈 引言&#xff1a;从小学数学题到技术智慧 &#x1f4da;✨ 在小学数学题中&#xff0c;有这样一道问题&#xff1a; “一个长方形变成平行四边形后&#xff0c…

遥感图像处理二(ENVI5.6 Classic)

1 实验目的和内容 1.1 实验目的 本次上机旨在继续深入了解ENVI软件的基本使用&#xff0c;并对提供的实验数据进行基本的图像分割和地物分类等操作并分析结果。 1.2 实验内容 1.2.1 图像分割 对教材示例数据“C7图像分割”中的风景图、兰花图和娃娃图分别进行图像分割操作…

Xilinx LVDS 接口中的时钟对齐模块的RTL编写

本人写的一个时钟对齐的模块&#xff0c;仅供参考 主要原因&#xff1a; 由于 FPGA 内部布局布线所带来的延时&#xff0c;到达 ISERDESE2 相应管脚的帧时钟、位时 钟与数据信号可能不再保持初始的相位关系&#xff0c;从而导致无法得到正确的串并转换数据&#xff0c;所以需 …

皮带,传送带异物检测识别数据集,2345张图像,yolo,coco,voc标记三种格式的数据集整理

皮带&#xff0c;传送带异物检测识别数据集,2345张图像&#xff0c;yolo&#xff0c;coco&#xff0c;voc标记三种格式的数据集整理 数据集分割 训练组79&#xff05; 1860图片 有效集14% 318图片 测试集7% 167图片 预处理 自动定向&#xff1a; 已应用 调…

sdk环境变量配置后不生效

sdk环境变量配置后 使用adb命令任显示 adb不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 解决方法&#xff1a;在环境变量的Path中添加platform-tools的地址

JavaEE 【知识改变命运】05 多线程(4)

文章目录 单例模式什么是单例模式饿汉模式懒汉模式多线程- 懒汉模式分析多线程问题第一种添加sychronized的方式第二种添加sychronized的方式改进第二种添加sychronized的方式&#xff08;DCL检查锁&#xff09; 阻塞队列什么是阻塞队列什么是消费生产者模型标准库中的阻塞队列…

RPC设计--从reactor设计 (IOthread)

主从reactor架构 一般的一个网络IO库都是主从reactor模式&#xff0c;即主线程中有一个MainReactor&#xff0c;其负责监听ListenFd&#xff0c;当接受到新的用户连接时&#xff0c;返回的clientfd并不会加入的MainReacotr&#xff0c;而是在子线程&#xff08;这里称为IO线程&…

STM32 出租车计价器系统设计(一) 江科大源码改写

STM32 出租车计价器系统设计 功能目标 驱动步进电机模拟车轮旋转&#xff0c;并实现调速功能。 设置车轮周长和单价&#xff0c;检测车轮转速和运转时间。 计算并显示行驶里程和价格。 硬件材料 28BYJ48 五线四相步进电机和 ULN2003 驱动板模块 测速传感器模块 嵌入式小系统…

威胁驱动的网络安全方法论

摘要 目前的网络安全风险管理实践很大程度上是由合规性要求驱动的&#xff0c;这使得公司/组织不得不在安全控制和漏洞上投入人力/物力。&#xff08;风险管理涉及多个方面&#xff0c;包括资产、威胁、漏洞和控制&#xff0c;并根据事故发生的可能性及造成的影响进行评估。威胁…

AUTOSAR:SOME/IP 概念

文章目录 1. 用例与需求1.1 典型用例1.2 对中间件的要求 2. 协议栈示例3. SOME/IP 概念3.1 中间件整体功能与架构3.2 服务组成元素详细解释 4. 服务发现机制深入剖析5. 总结 1. 用例与需求 1.1 典型用例 信息娱乐系统&#xff1a; 后座娱乐系统连接&#xff1a;允许后排乘客连…

如何将自己的PHP类库发布到composer仓库

将自己的 PHP 类库发布到 Composer 仓库&#xff0c;需要经过一系列的准备和操作步骤&#xff0c;以下是详细说明&#xff1a; 准备工作 创建类库项目&#xff1a;确保你的 PHP 类库项目具有清晰的目录结构&#xff0c;遵循 PSR-4 等 PHP 编码规范。通常&#xff0c;类文件应…

Formality:set_svf命令

相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 svf文件的全称是Setup Verification for Formality&#xff0c;即Design Compiler提供给Formality的设置验证文件&#xff0c;它的作用是为Formality的指导模式(Gui…

线性dp—acwing

题目&#xff1a;数字三角形 898. 数字三角形 - AcWing题库 看某个点&#xff0c;是从那些路径过来的去分析 分析1&#xff1a; 代码1&#xff1a;&#xff08;顺序正推&#xff0c;二维dp数组&#xff09; #include<bits/stdc.h> using namespace std;const int N 5…

Selenium WebDriver:自动化网页交互的利器

Selenium WebDriver&#xff1a;自动化网页交互的利器 在当今快速发展的Web开发领域&#xff0c;自动化测试已经成为确保应用程序质量和用户体验的重要手段。Selenium WebDriver&#xff0c;作为Selenium工具包中的核心组件&#xff0c;正是这一领域的佼佼者。本文将详细介绍S…

对于相同问题大模型的生成为什么会不同?

AI因你而升温&#xff0c;记得加个星标哦&#xff01; 大模型的输出是一个token一个token的进行逐步输出&#xff0c;在输出策略上可分为两大类&#xff1a; 贪心解码&#xff1a;直接选择概率最高的单词。这种方法简单高效&#xff0c;但是可能会导致生成的文本过于单调和重复…

12.11作业

1.脑图 定义一个数组&#xff0c;用来存放从终端输入的5个学生的信息【学生的信息包含学生的姓名、年纪、性别、成绩】 1>封装函数 录入5个学生信息 2>封装函数 显示学生信息 3>封装函数 删除第几个学生信息&#xff0c;删除后调用显示学生信息函数 显示 4> 封…

C++11 常用-新特性

一、原始字面量——原文链接 原始字面量 R可以直接得到其原始意义的字符串&#xff08;用于简化&#xff1a;win路径转换、字符串换行需要加连接符&#xff09; 定义方式 //R “xxx(原始字符串)xxx”//这种情况原本在 win下是需要使用\\的 string str2 R"(D:\hello\worl…

独家首发 | 基于 2D-SwinTransformer + BiGRU-GlobalAttention的并行故障诊断模型

往期精彩内容&#xff1a; Python-凯斯西储大学&#xff08;CWRU&#xff09;轴承数据解读与分类处理 基于FFT CNN - BiGRU-Attention 时域、频域特征注意力融合的轴承故障识别模型-CSDN博客 基于FFT CNN - Transformer 时域、频域特征融合的轴承故障识别模型-CSDN博客 P…