当前位置: 首页 > news >正文

前端成长之路:HTML(3)

在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类似)。

相关文章:

前端成长之路:HTML(3)

在HTML中&#xff0c;有列表标签。列表最大的特点是整齐、简洁、有序&#xff0c;用列表进行布局会更加自由方便。根据使用的情景不同&#xff0c;可以将列表分为三大类&#xff1a;无序列表、有序列表和自定义列表。 无序列表 在HTML中使用<ul>标签定义一个无序列表&a…...

无人机自动机库的功能与作用!

一、无人机自动机库的功能 智能停放与管理 无人机自动机库为无人机提供了一个安全、可靠的停放环境。通过先进的感知技术和安全防护措施&#xff0c;它能够实时监测周围环境&#xff0c;确保无人机免受恶劣天气或潜在风险的侵害。 无人机在机库内可以实现智能停放&#xff0…...

ubuntu 新建脚本shell并增加图标 双击应用实现python运行

1.使用nano创建shell脚本文件 需要在终端窗口中输入“nano”以打开文本编辑器。 nano 在创建脚本文件前&#xff0c;我们要了解脚本文件是如何运行的&#xff1a; 直接运行&#xff1a;直接在终端直接输入需要运行的脚本文件名称&#xff0c;系统或用缺省版本的shell运行脚…...

ANR 分析SOP

遇到ANR问题不要慌&#xff0c;大部分情况下可能是系统or测试手段问题&#xff0c;我们按照如下关键字排查定位 文章目录 1 是否是 heapdump 导致&#xff1f;1.1 dump开始1.2 dump结束 1 是否是 heapdump 导致&#xff1f; 使用 hprof: heap dump 关键词过滤&#xff0c;在d…...

COLA学习之环境搭建(三)

小伙伴们&#xff0c;你们好&#xff0c;我是老寇&#xff0c;上一节&#xff0c;我们学习了COLA代码规范&#xff0c;继续跟老寇学习COLA环境搭建 首先&#xff0c;打开GitHub&#xff0c;搜索 COLA 请给这个COLA项目点个Star&#xff0c;养成好习惯&#xff0c;然后Fork到自…...

CSS输入框动态伸缩动效

前言 下面我们将会做出如下图输入框样式&#xff0c;并且附上组件代码&#xff0c;有特殊需求的可以自行优化同理&#xff0c;下拉框的话只要把el-input标签修改掉即可 MyInput组件 <template><div class"my-input" click.stop"showInput !showInput…...

hbuilder 安卓app手机调试中基座如何设置

app端使用基座 手机在线预览功能 1.点击运行 2.点击运行到手机或者模拟器 3.制作自定义调试基座 4.先生成证书【可以看我上一篇文档写的有】&#xff0c;点击打包 5.打包出android自定义调试基座【android_debug.apk】,【就跟app打包一样需要等个几分钟】 6.点击运行到手…...

探索视觉与语言模型的可扩展性

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

sock_recvmsg函数

sock_recvmsg 是一个在 Linux 内核中用于处理接收网络数据的函数。它通常与套接字 (socket) 操作相关,特别是在网络协议栈中用于处理从网络中接收到的数据。这个函数是内核的一部分,提供了一种机制把接收到的数据从网络协议栈转移到用户空间,或者在内核内进一步处理。 以下是…...

HCIA笔记8--DHCP、Telnet协议

1. DHCP介绍 对于主机的网络进行手动配置&#xff0c;在小规模的网络中还是可以运作的&#xff0c;但大规模网络是无力应对的。因此就有了DHCP协议来自动管理主机网络的配置。 DHCP(Dynamic Host Configuration Protocol): 动态主机配置协议&#xff0c;主要需要配置的参数有…...

Scala的单例对象

在Scala中&#xff0c;单例对象是一种特殊的类&#xff0c;它只能有一个实例&#xff0c;并且这个实例在需要时会自动创建。单例对象在Scala中通过object关键字来定义&#xff0c;它类似于Java中的静态成员和方法&#xff0c;但更加灵活和强大。 定义单例对象 以下是定义一个…...

【笔记】分布式任务调度平台XXL-JOB

这篇笔记主要记录以下内容&#xff1a; &#xff08;1&#xff09;第一次启动xxl-job的过程 &#xff08;2&#xff09;模块、文件、数据库&#xff08;表和字段&#xff09;的作用 &#xff08;3&#xff09;极少的源码解读&#xff08;XxlJobConfig&#xff09; 有点像实…...

PDFMathTranslate,PDF多语言翻译,批量处理,学术论文,双语对照(WIN/MAC)

分享一个非常实用的PDF文档翻译项目——PDFMathTranslate。作为一个经常逛GitHub的开发者&#xff0c;我总喜欢翻看各种项目附带的论文&#xff0c;虽然大多时候是瞎研究&#xff0c;但却乐在其中。该项目能够完美保留公式、图表、目录和注释&#xff0c;对于需要阅读外文文献的…...

zerotier实现内网穿透(访问内网服务器)

moo 内网穿透工具 实用工具&#xff1a;zerotier 目录 内网穿透工具 Windows下zerotier安装 ubuntu系统下的zerotier安装 使用moon加速 Windows下zerotier安装 有了网络之后&#xff0c;会给你一个网络id&#xff0c;这个网络id是非常重要的&#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…...

IDEA报错:无效的源发行版、无效的目标发行版

1. 无效的源发行版 创建项目的时候&#xff0c;会遇见这个报错&#xff0c;原因就是编译的JDK版本与发布版本不一致。 解决方法&#xff1a; 1.1. 找到问题所在地 英文&#xff1a;File -> Project Structure ->Project Settings 中文&#xff1a;文件->项目结构 …...

#渗透测试#红蓝对抗#SRC漏洞挖掘# Yakit插件使用及编写01

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…...

Scala中求斐波那契数列的第n项

求斐波那契数列的第n项 问题&#xff1a;求 斐波那契数列的第n项 记&#xff1a; 0 1 1 2 3 5 8 13 21 34 55 ... 从第3项开始 f(n) f(n-1) f(n-2) 1.基本情况&#xff08;直接能求的&#xff09;&#xff1a;f(0) 0,f(1) 1 2.递归情况&#xff08;大事化小&#xff0c;自己…...

ORACLE修改序列值为表内某字段(主键)最大值

ORACLE修改序列值为表内某字段&#xff08;主键&#xff09;最大值 想修改序列值&#xff0c;网上基本的都是自己看要加到多少&#xff0c;然后要么调步长&#xff0c;要么删了重建。 想直接用declare使用标量然后调&#xff0c;但是逻辑里面不能有DDL语句。 不过最后解决了 直…...

前端html,vue使用第三方地图详细教程,以百度地图为例,实现地图标注,导航,定位,路线规划,坐标转换

目录 示例&#xff1a; 准备&#xff1a; ?编辑 开始&#xff1a; 1、新建页面&#xff0c;在script标签中引入百度地图的api数据&#xff0c;把自己在控制台创建的应用的ak替换上去 2、创建一个dom对象&#xff0c;设置宽高 3、在js中初始化地图 进阶&#xff1a; 1…...

TranslucentTB:轻量任务栏视觉增强工具,让Windows桌面颜值提升300%

TranslucentTB&#xff1a;轻量任务栏视觉增强工具&#xff0c;让Windows桌面颜值提升300% 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB …...

ComfyUI-Easy-Use:让AI绘画工作流像搭积木一样简单

ComfyUI-Easy-Use&#xff1a;让AI绘画工作流像搭积木一样简单 【免费下载链接】ComfyUI-Easy-Use In order to make it easier to use the ComfyUI, I have made some optimizations and integrations to some commonly used nodes. 项目地址: https://gitcode.com/gh_mirro…...

从零部署JetLinks社区版:一站式物联网平台本地化搭建实战

1. JetLinks社区版&#xff1a;物联网开发的瑞士军刀 第一次接触JetLinks社区版是在三年前的一个智能家居项目上。当时客户要求两周内搭建一个能管理5000设备的物联网平台&#xff0c;还要支持自定义协议开发。在对比了多个开源方案后&#xff0c;JetLinks的模块化设计让我眼前…...

在曹妃甸哪里可以吃到当天现捕上来的野生海鲜?

在曹妃甸&#xff0c;想要吃到当天现捕上来的野生海鲜&#xff0c;高尚堡老刘海鲜绝对是个绝佳的选择。2006 年&#xff0c;一群世代靠海吃海的渔民&#xff0c;在渤海湾码头开起了这家“老刘海鲜饭店”。起初他们只是想把自家渔船捕捞的野生海鲜&#xff0c;用最朴素的做法端给…...

基于ATP的10kV并联电容暂态过程仿真

基于ATP的10kV并联电容暂态过程仿真在电力系统中&#xff0c;10kV并联电容装置起着至关重要的作用&#xff0c;比如提高功率因数、改善电压质量等。然而&#xff0c;其暂态过程却较为复杂&#xff0c;需要深入研究。ATP&#xff08;Alternative Transients Program&#xff09;…...

【开题答辩全过程】以 基于大数据的智能推送系统设计与实现为例,包含答辩的问题和答案

个人简介一名14年经验的资深毕设内行人&#xff0c;语言擅长Java、php、微信小程序、Python、Golang、安卓Android等开发项目包括大数据、深度学习、网站、小程序、安卓、算法。平常会做一些项目定制化开发、代码讲解、答辩教学、文档编写、也懂一些降重方面的技巧。感谢大家的…...

高防服务器怎么选?360CDN 高防性价比分析

作为运维中小站点3年的老站长&#xff0c;前阵子被DDoS攻击搞得焦头烂额&#xff0c;网站频繁卡顿、宕机&#xff0c;损失不少流量。试过普通服务器加防护插件&#xff0c;基本形同虚设&#xff0c;后来陆续测试了360CDN高防以及其他几款主流高防产品&#xff0c;全程实测不吹不…...

高效USB设备管理工具:一键安全弹出的专业解决方案

高效USB设备管理工具&#xff1a;一键安全弹出的专业解决方案 【免费下载链接】USB-Disk-Ejector A program that allows you to quickly remove drives in Windows. It can eject USB disks, Firewire disks and memory cards. It is a quick, flexible, portable alternative…...

UE5项目GPU瓶颈卡顿?手把手教你用GPU Visualizer揪出渲染性能元凶

UE5项目GPU瓶颈卡顿&#xff1f;手把手教你用GPU Visualizer揪出渲染性能元凶 当你的UE5项目在真机测试时突然掉帧到30fps以下&#xff0c;而编辑器里明明运行流畅——这种"开发环境正常&#xff0c;实机表现崩盘"的困境&#xff0c;相信每个UE开发者都经历过。上周我…...

纯化水系统HMI与PLC协同控制:从界面设计到逻辑实现

1. 纯化水系统控制的核心技术组合 在制药行业的纯化水系统中&#xff0c;HMI&#xff08;人机界面&#xff09;与PLC&#xff08;可编程逻辑控制器&#xff09;的协同工作堪称自动化控制的黄金搭档。这套系统就像是一个精密的"大脑神经中枢"组合——PLC负责底层设备的…...