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

003+limou+HTML——（3）HTML列表

news 文章来源：https://blog.csdn.net/m0_73168361/article/details/129406135 2025/4/21 4:02:03

000、前言

列表是网页常见的一种数据排列方式，在HTMl中列表一共有三种：有序列表、无序列表、定义列表（另外“目录列表dir”和“菜单列表menu”已经在HTML5中被废除了，现在都是使用无序列表ul来替代）

001、有序列表：ol、li

（1）一般使用

  • 有序列表有先后之分
  • 用ol、li标签配合使用就可以显示有序列表，而且ol标签内部子标签也只能是li，另外也不要直接把文本放在ol里面
  • ol即ordered list（有序列表），li即list（列表项）
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><h1>文本标题1</h1><ol><li>列表01</li><li>列表02</li><li>列表03</li></ol><h1>文本标题2</h1><h1>文本标题3</h1></body>
</html>

在这里插入图片描述

（2）利用type属性

  • 利用type属性可以改变列表项符号
    在这里插入图片描述
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><h1>文本标题1</h1><ol type="A"><li>列表01</li><li>列表02</li><li>列表03</li></ol><h1>文本标题2</h1><h1>文本标题3</h1></body>
</html>

在这里插入图片描述

002、无序列表：ul、li

（1）一般使用

  • 无序列表无先后之分
  • 用ul、li标签配合使用就可以显示无序列表，而且ul标签内部子标签也只能是li，另外也不要直接把文本放在ul里面
  • ul即unordered list（有序列表），li即list（列表项）
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><h1>文本标题1</h1><ol type="A"><li>列表01</li><li>列表02</li><li>列表03</li></ol><h1>文本标题2</h1><ul><li>列表01</li><li>列表02</li><li>列表03</li></ul><h1>文本标题3</h1></body>
</html>

在这里插入图片描述

（2）利用type属性

  • 利用type属性可以改变列表项符号
    在这里插入图片描述

（3）深入了解无序列表

实际上的开发工作中无序列表是用的最多的，只要涉及到数据表示，无序列表就几乎无处不在003、定义列表：dl、dt

  • 定义列表是一组带有特殊含义的列表，一个列表项中含有“条件”和“列表”两部分
  • dl，即definition（定义列表）
  • dt，即definition term（定义名词）
  • dd，即definition description（定义描述）
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>网页标题</title></head><body><h1>文本标题1</h1><ol type="A"><li>列表01</li><li>列表02</li><li>列表03</li></ol><h1>文本标题2</h1><ul><li>列表01</li><li>列表02</li><li>列表03</li></ul><h1>文本标题3</h1><dl><dt>HTML</dt><dd>制作网页的标准语言，控制网页的结构</dd><dt>CSS</dt><dd>层叠样式表，控制网页的样式</dd><dt>Javascript</dt><dd>脚本语言，控制网页的行为</dd></dl></body>
</html>

在这里插入图片描述

004、HTNL语义化

（1）误区

学习HTML的时候，认为一些标签可以被其他的标签轻易实现而认为这个标签没有用。这是一个很大的误区。HTML不同的标签从显示的角度来看确实可以达到互换的效果，比如使用下面的标签代码代替有序列表：

<div>1、HTML</div>
<div>2、CSS</div>
<div>3、Javascript</div>

（2）语义

但是这违背了HTML的初衷，在HTML中，标签都有自己的语义，一般都是优先使用有语义的标签。比如h1标签，表示的是header1，标记的是一个最高级标题，而div和span是无语义的标签。（span标签是一个行内标签，也叫内嵌标签）

（3）调试

①HTML的标签具有语义的标签，可以方便调试，快速找到有错误的代码，具有可读性
②另外语义还对搜索引擎优化（SEO）有极其重要的作用

相关文章：

003+limou+HTML——（3）HTML列表

000、前言 列表是网页常见的一种数据排列方式&#xff0c;在HTMl中列表一共有三种&#xff1a;有序列表、无序列表、定义列表&#xff08;另外“目录列表dir”和“菜单列表menu”已经在HTML5中被废除了&#xff0c;现在都是使用无序列表ul来替代&#xff09; 001、有序列表&a…...

编程日记 2023/4/20 6:26:06

设计模式---工厂模式

目录 1. 简单工厂模式 2. 工厂方法模式 1. 简单工厂模式 简单工厂模式(Simple Factory Patterm)又称为静态工厂方法模式(Static Factory Model)&#xff0c;它属于类创建型模式。在简单工厂模式中&#xff0c;可以根据参数的不同返回不同类的实例。简单工厂模式专门定义了一…...

编程日记 2023/4/20 6:26:02

C++基础了解-13-C++ 数组

C 数组 一、C 数组 C 支持数组数据结构&#xff0c;它可以存储一个固定大小的相同类型元素的顺序集合。数组是用来存储一系列数据&#xff0c;但它往往被认为是一系列相同类型的变量。 数组的声明并不是声明一个个单独的变量&#xff0c;比如 number0、number1、…、number9…...

编程日记 2023/4/20 6:25:59

ICC2：限制LVT比例

1) 禁用VT 在优化过程用&#xff0c;如果要禁用某种VT可以直接对其使用dont use&#xff0c;如下示例: set_attribute -objects [get_lib_cells *_lvt*/*] -name dont_use -value true 在dont use lib cell的基础上还可以对某些模块放开lvt的使用。 set_app_options -name …...

编程日记 2023/4/20 6:25:53

Kettle工具通过JNDI连接Oracle集群

我们在用Kettle ETL工具的时候&#xff0c;可能会遇到数据库为Oracle集群的模式&#xff0c;或者有时候目标库为oracle&#xff0c;在持续的循环调度中&#xff0c;经常发现oracle的数据库连接中断的情况&#xff0c;此时&#xff0c;在Kettle中有一个JNDI的连接方式能很好的解…...

编程日记 2023/4/20 6:25:50

[ 常用工具篇 ] windows安装phpStudy_v8.1_X64

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

编程日记 2023/4/20 6:25:44

SpringBoot 如何将配置文件挂到 jar 包外面？

目录一、SpringBoot 指定配置文件路径&#xff1a;1&#xff09;使用命令行参数&#xff1a;2&#xff09;使用环境变量&#xff1a;3&#xff09;使用外部配置文件&#xff1a;二、SpringBoot 配置文件生效的优先级排序&#xff1a;一、SpringBoot 指定配置文件路径&#xff1…...

编程日记 2023/4/20 6:25:41

蓝桥杯C/C++b组第一题个人整理合集（5年真题+模拟题）

蓝桥杯C/Cb组填空第一题合集 前言 比赛标准的签到题&#xff0c;比赛时的第一题。不会考到什么算法&#xff0c;甚至都不需要你打代码。但有时候第一题都没做出来的确是非常挫灭信心 看了看历年题目。很多小陷阱也不少 今年的比赛也正好还有一个月&#xff0c;自己对填空题第…...

编程日记 2023/4/20 6:25:33

深入浅出PaddlePaddle函数——paddle.zeros

分类目录&#xff1a;《深入浅出PaddlePaddle函数》总目录 相关文章&#xff1a; 深入浅出PaddlePaddle函数——paddle.Tensor 深入浅出PaddlePaddle函数——paddle.ones 深入浅出PaddlePaddle函数——paddle.zeros 深入浅出PaddlePaddle函数——paddle.full 深入浅出Padd…...

编程日记 2023/4/20 6:25:29

[力扣sql]

题目 表: Person ---------------------- | 列名 | 类型 | ---------------------- | PersonId | int | | FirstName | varchar | | LastName | varchar | ---------------------- personId 是该表的主键列。 该表包含一些人的 ID 和他们的姓和名的信…...

编程日记 2023/4/20 6:25:20

Docker基本操作

目录 Docker基本操作 1、镜像操作 2、容器操作 3、数据卷&#xff08;容器数据管理&#xff09; 4、数据卷挂载 5、Dockerfile自定义镜像 Docker基本操作 1、镜像操作 镜像名称一般分两部分组成&#xff1a;[repository]:[tag]。 在没有指定tag时&#xff0c;默认是la…...

编程日记 2023/4/20 6:25:13

golang如何使用rocketmq 附加闭坑指南 建议收藏！！！

文章目录前言一、rocketmq是什么&#xff1f;二、rocketmq核心概念三、rocketmq核心应用四、go如何使用rocketmq总结前言 当我们的业务达到一定规模&#xff0c;很多业务需要解耦&#xff0c;以及需要流量削峰的时候&#xff0c;我们需要使用MQ来让我们系统能够正常运转。 一…...

编程日记 2023/4/20 6:25:06

C++实现的二叉树创建和遍历，超入门邻家小女也懂了

目录 二叉树 特点 性质 二叉树的创建 声明 创建 -> 成员运算符 批量创建 二叉树的遍历 先序遍历 中序遍历 后序遍历 层序遍历 树的相关术语 特殊二叉树 满二叉树 完全二叉树 二叉树 树&#xff08;Tree&#xff09;是n(n≥0)个节点的有限集。在任意一棵…...

编程日记 2023/4/20 6:25:00

如何写出高质量的业务接口

清晰的需求 需求要有文档&#xff1b;方便后续追溯或交接等需求是基础&#xff0c;必须详细&#xff1b;多和需求沟通确认&#xff0c;不可模糊、模棱两可&#xff0c;否则后续可能越错越远 抽象建模 分析需求&#xff1b;梳理清楚关联关系&#xff0c;建立数据模型和关联画E-R…...

编程日记 2023/4/24 5:19:28

3.8多线程

案例一-线程安全的单例模式(面试)是一种设计模式,设计模式针对写代码时的一些常见场景给出一些经典解决方案单例模式的两种典型实现饿汉模式懒汉模式饿汉的单例模式:比较着急去进行创建实例懒汉的单例模式,是不太着急创建实例,,只是在用的时候,才真正创建这个是类对象,也就是.c…...

编程日记 2023/4/20 6:24:56

图文讲解MongoDB该怎么安装

一、安装前必读 我这里是Centos7 Linux 内核 注意&#xff1a;本文的命令使用的是 root 用户登录执行&#xff0c;不是 root 的话所有命令前面要加 sudo 二、环境配置 2.1 停止防火墙 systemctl status firewalld #查看firewall systemctl stop firewalld …...

编程日记 2023/4/20 6:24:51

「ML 实践篇」机器学习项目落地

文章目录1. 项目分析1. 框架问题2. 性能指标2. 获取数据1. 准备工作区2. 下载数据3. 查看数据4. 创建测试集3. 数据探索1. 地理位置可视化2. 寻找相关性3. 组合属性4. 数据准备1. 数据清理2. Scikit-Learn 的设计3. 处理文本、分类属性4. 自定义转换器5. 特征缩放6. 流水线5. 选…...

编程日记 2023/4/20 6:24:46

c++面试技巧-基础篇3

1.面试官&#xff1a;什么是函数的重载&#xff1f; 应聘者&#xff1a;函数的重载就是允许使用同一个函数名来定义多个函数&#xff0c;但是这些函数的参数个数和类型不同。 2.面试官&#xff1a;如何引用一个已经定义过的全局变量&#xff1f; 应聘者&#xff1a;可以用引…...

编程日记 2023/4/20 6:24:41

MySQL OCP888题解044-从服务器上导入mysql模式数据后的权限问题

文章目录1、原题1.1、英文原题1.2、中文翻译1.3、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3.1、知识点1&#xff1a;mysqldump的--flush-privileges选项3.2、知识点2&#xff1a;mysqldump的--all-databases选项3.3、知识点3&#xff1a;mysqldump默认不转储的内容…...

编程日记 2023/4/20 6:24:35

实战小项目之视频监控（1-2）

实战小项目之视频监控&#xff08;1-2&#xff09; Nginx 移植 前面也给大家提到了&#xff0c;我们可以使用 Nginx 来搭建 RTMP 流媒体服务器&#xff0c;譬如你可以在一台公网 IP 主 机上搭建流媒体服务器&#xff0c;当然&#xff0c;笔者并没有这个条件&#xff1b;这里我…...

编程日记 2023/4/20 6:24:30

人工智能基础--AI作业1-ML基础

1.监督学习和无监督学习都是机器学习中常用的方法。监督学习是一种机器学习方法&#xff0c;其中机器学习算法根据给定的输入数据和其对应的输出标签进行训练&#xff0c;以学习如何预测新的输入数据的输出标签。简单来说&#xff0c;监督学习就是通过已知的数据进行学习&#…...

编程日记 2023/4/20 6:24:25

关于JS中this对象指向问题总结

一、前言 关于JS中this对象指向问题&#xff0c;相信做过项目的小伙伴多多少少都会遇到过&#xff0c;明明感觉代码写的没问题&#xff0c;可是运行的时候&#xff0c;就会报错&#xff0c;比如报错 xxx is not a function。 我最近也遇到了&#xff0c;百度学习了不少前辈对于…...

编程日记 2023/4/20 6:24:21

Codeforces Round 855 (Div. 3) A-E2

比赛链接&#xff1a;Dashboard - Codeforces Round 855 (Div. 3) - Codeforces A&#xff1a;模拟 题意&#xff1a;给定一个字符串&#xff0c;问这个字符串是不是猫叫。定义是猫叫得字符串&#xff1a; 1&#xff1a;必须由大写或小写得M&#xff08;m&#xff09;,E&…...

编程日记 2023/4/20 6:24:15

Spark Yarn 运行环境搭建

文章目录Spark Yarn 运行环境搭建1、解压缩文件2、修改配置环境文件3、配置历史服务器Spark Yarn 运行环境搭建 1、解压缩文件 将spark3.2.3的压缩包上传到 linux /opt/software 目录下 输入命令&#xff1a; tar -zxvf spark-3.2.3-bin-hadoop3.2-scala2.13.tgz -C /opt/ 解…...

编程日记 2023/4/20 6:24:09

SpringMVC 页面跳转指南：转发和重定向的实现与比较

SpringMVC 是一款非常流行的 Java Web 框架&#xff0c;它提供了丰富的特性和功能&#xff0c;使得开发者可以轻松地开发 Web 应用程序。其中&#xff0c;转发和重定向是 SpringMVC 中非常常见的两个操作&#xff0c;它们可以用于控制请求的流转和页面的跳转。本文将深入探讨 S…...

编程日记 2023/4/20 6:24:05

ModStartCMS v5.9.0 后台浅色模式，系统样式升级

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议&#xff0c;免费且不限制商业使用。 功能特性 丰富的模块市…...

编程日记 2023/4/20 6:24:00

2020蓝桥杯真题反倍数 C语言/C++

题目描述 给定三个整数 a,b,c&#xff0c;如果一个整数既不是 a 的整数倍也不是 b 的整数倍还不是 c 的整数倍&#xff0c;则这个数称为反倍数。 请问在 1 至 n 中有多少个反倍数。 输入描述 输入的第一行包含一个整数 n。 第二行包含三个整数a,b,c&#xff0c;相邻两个数之…...

编程日记 2023/4/20 6:23:56

PTA：L1-025 正整数A+B、L1-026 I Love GPLT、L1-027 出租（C++）

目录 L1-025 正整数AB 问题描述&#xff1a; 实现代码&#xff1a; L1-026 I Love GPLT 问题描述&#xff1a; 实现代码&#xff1a; L1-027 出租 问题描述&#xff1a; 实现代码&#xff1a; 原理思路&#xff1a; 出租那道题有点意思哈 L1-025 正整数AB 问题描述…...

编程日记 2023/4/20 6:23:47

状态机的Go语言实现版本

一、状态机 1. 定义 有限状态机&#xff08;Finite-state machine, FSM&#xff09;&#xff0c;简称状态机&#xff0c;是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。 2. 组成要素 现态&#xff08;src state&#xff09;&#xff1a;事务当前所处的状…...

编程日记 2023/4/20 6:23:42

第2章 线程安全与共享资源竞争

第2章　线程安全与共享资源竞争 2.1　synchronized同步介绍 synchronized要解决的是共享资源冲突的问题。当共享资源被任务使用时&#xff0c;要对资源提前加锁。所有任务都采用抢占模式&#xff0c;即某个任务会抢先对共享资源加上第一把锁。如果这是一个排他锁&#xff0c;…...

编程日记 2023/4/20 6:23:37