【HTML】标签学习(下.2)

news2024/11/27 1:25:53

(大家好哇,今天我们将继续来学习HTML(下.2)的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

目录

二.列表标签

2.1 无序列表(重点) 

 2.2有序列表(理解) 

2.3 自定义列表(重点) 

2.4 列表总结 


二.列表标签

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

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

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

2.1 无序列表(重点

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

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

<ul> 
  <li>  列表项1  </li>
  <li>  列表项2  </li>
  <li>  列表项3  </li>

  ...
<ul> 

 特点:

  1. 无序列表的各个列表项之间没有顺序级别之分是并列的。
  2. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
  3. <li>与</li>之间相当于一个容器,可以容纳所有元素。
  4. 无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来没置。 

 2.2有序列表(理解) 

有序列表即为有排序顺序的列表,其各个列表项会按照一定的顺序排列定义。 
在HTML标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签
来定义列表项。 
有序列表的基本语法格式如下 :

<ol> 
  <li>  列表项1  </li> 
  <li>  列表项2  </li>
  <li>  列表项3  </li>

  ...
<ol> 

 特点:

  1.  <ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li>与</li>之间相当于一个容器,可以容纳所有元素。 
  3. 有序列表会带有自己样式属性,但在实际便用时,我们会使用CSS来设置。

2.3 自定义列表(重点

  • 自定义列表的使用场景: 自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目的符号。 
  • 在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述一个项目/名字)一起使用。

<dl>

  <dt> 名词1 </dt>

  <dt> 名词2 </dt>

  <dt> 名词3 </dt>

  ...

</dl>

 特点:

1、<dl></dl>里面只能包含<dt>和<dd>。 
2、<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>。 

2.4 列表总结 

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

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:若你决定灿烂,则山无遮海无拦。

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

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

相关文章

数据结构算法系列----广度优先搜索(bfs)

目录 一、什么是bfs 二、bfs和dfs的差异 搜索顺序&#xff1a; 数据结构&#xff1a; 搜索方式&#xff1a; 三、bfs解决的主要问题 四、例题 一、什么是bfs BFS&#xff08;广度优先搜索&#xff09;是一种图搜索算法&#xff0c;用于在图或树数据结构中进行遍历。BFS从…

管理科学笔记

1.线性规划 画出区域&#xff0c;代入点计算最大最小值 2.最小生成树 a.断线法&#xff0c;从大的开始断 b.选择法&#xff0c;从小的开始选 3.匈牙利法 维度数量直线覆盖所有的0 4.一直选最当前路线最短路径 5.线性规划 6.决策论

反射——获取Class对象的三种方法,构造器、成员变量、方法

作用 学习如何获取类的信息&#xff0c;操作它们 获取class对象的三种方法 package com.zz.reflection;import com.zz.Interface.studentMannger.ClassManager;//目标&#xff1a;获取class对象 public class Test1Class {public static void main(String args[]) throws Class…

【Qt】使用Qt实现Web服务器(九):EventSource+JSON实现工业界面数据刷新

1、效果 效果如下,实时刷新温度、湿度 2、源码 2.1 index.html <html><body> <!-- 页面布局,本人对HTML标签不熟悉,凑合看吧 --> <div><label for

微信怎么恢复好友?7个方法助你轻松寻回失联好友

在数字化社交日益盛行的今天&#xff0c;微信作为我们日常生活中不可或缺的沟通工具&#xff0c;承载着与亲朋好友、同事伙伴之间的深厚情谊。然而&#xff0c;有时由于误操作或其他原因&#xff0c;我们可能会不小心删除了某些重要的微信好友&#xff0c;这时&#xff0c;如何…

【二叉树】Leetcode 105. 从前序与中序遍历序列构造二叉树【中等】

从前序与中序遍历序列构造二叉树 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例1&#xff1a; 输入: preorder [3,9,20,15,7], inorder …

刷题之动态规划-子数组

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;开始刷动态规划的子数组类型相关的题目 动态规划5个步骤 状态表示 &#xff1a;dp数组中每一个下标对应值的含义是什么>dp[i]表示什么状态转移方程&#xff1a; dp[i] 等于什么1 和 2 是动态规划的核心步骤&#xff0c;…

深度学习理论基础(五)卷积神经网络CNN

目录 前述&#xff1a;卷积神经网络基础1.卷积网络流程2.卷积网络核心3.卷积下采样4.卷积上采样--转置卷积 一、卷积神经网络层1.卷积层&#xff08;1&#xff09;内部参数&#xff1a;卷积核权重&#xff08;2&#xff09;内部参数&#xff1a;偏置&#xff08;3&#xff09;外…

dm8 开启归档模式

dm8 开启归档模式 1 命令行 [dmdbatest1 dm8]$ disql sysdba/Dameng123localhost:5237服务器[localhost:5237]:处于普通打开状态 登录使用时间 : 3.198(ms) disql V8 SQL> select name,status$,arch_mode from v$database;行号 NAME STATUS$ ARCH_MODE ----------…

DETR【Transformer+目标检测】

End-to-End Object Detection with Transformers 2024 NVIDIA GTC&#xff0c;发布了地表最强的GPU B200&#xff0c;同时&#xff0c;黄仁勋对谈《Attention is All You Need》论文其中的7位作者&#xff0c;座谈的目的无非就是诉说&#xff0c;Transformer才是今天人工智能成…

【JavaWeb】百度地图API SDK导入

百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 登录注册&#xff0c;创建应用&#xff0c;获取AK 地理编码 | 百度地图API SDK (baidu.com) 需要的接口一&#xff1a;获取店铺/用户 所在地址的经纬度坐标 轻量级路线规划 | 百度地图API SDK (baidu.com) 需要的…

第117讲:深入MySQL性能优化:从多个角度提升数据库性能

文章目录 1.从哪些角度去考虑MySQL的优化2.数据库服务器的选型3.从操作系统层面去优化MySQL数据库3.1.关于CPU方面的优化3.2.关于内存方面的优化3.3.关于磁盘IO方面 4.应用端的优化5.数据库系统优化工具6.数据库系统参数优化6.1.最大连接数的优化&#xff08;max_connections&a…

【Entity Framework】EF日志-简单日志记录

【Entity Framework】EF日志-简单日志记录 文章目录 【Entity Framework】EF日志-简单日志记录一、概述二、EF日志分类三、简单的日志记录3.1 配置3.2 日志记录到控制台3.3 记录到凋试窗口3.4 记录到文件3.5 敏感数据处理3.6 详细查询异常3.6 日志级别3.7 消息内容和格式设置 一…

Paragon NTFS for Mac15直装版2024最新安装包下载

Paragon NTFS for Mac 是一款专为 Mac 用户设计的软件&#xff0c;它解决了 Mac 系统无法直接读写 NTFS 格式硬盘的问题。通过安装这款软件&#xff0c;Mac 用户可以像使用本机磁盘一样&#xff0c;轻松地在 NTFS 格式的硬盘、U 盘等存储设备上读写文件&#xff0c;无需进行任何…

Protobuf 二进制文件学习及解析

0. 简介 protobuf也叫protocol buffer是google 的一种数据交换的格式&#xff0c;它独立于语言&#xff0c;独立于平台。google 提供了多种语言的实现&#xff1a;java、c#、c、go 和 python&#xff0c;每一种实现都包含了相应语言的编译器以及库文件。 由于它是一种二进制的…

【吊打面试官系列】Redis篇 -Redis 最适合的场景?

大家好&#xff0c;我是锋哥。今天分享关于 【Redis 最适合的场景&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; Redis 最适合的场景&#xff1f; Redis 最适合的场景? Redis最适合的场景通常包括以下几点&#xff1a; 缓存系统&#xff1a;Redis提供了快速…

SpringBoot中操作Bean的生命周期的方法

引言 在 Spring Boot 应用中&#xff0c;管理和操作 Bean 的生命周期是一项关键的任务。这不仅涉及到如何创建和销毁 Bean&#xff0c;还包括如何在应用的生命周期中对 Bean 进行精细控制。Spring 框架提供了多种机制来管理 Bean 的生命周期&#xff0c;这些机制使得开发者可以…

应用方案D78040场扫描电路,偏转电流可达1.7Ap-p,可用于中小型显示器

D78040是一款场扫描电路&#xff0c;偏转电流可达1.7Ap-p&#xff0c;可用于中小型显示器。 二 特 点 1、有内置泵电源 2、垂直输出电路 3、热保护电路 4、偏转电流可达1.7Ap-p 三 基本参数 四 应用电路图 1、应用线路 2、PIN5脚输出波形如下&#xff1a;

多态的综合练习

题目要求 Animal类&#xff08;父类&#xff09; package www.jsu.com;public class Animal {private int age;private String color;public Animal() {}public Animal(int age, String color) {this.age age;this.color color;}public int getAge() {return age;}public voi…