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

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

news 2025/11/12 10:15:35

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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/10/27 5:01:21

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/10/25 19:33:15

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/1 0:38:44

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/11/7 21:03:46

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/9/29 21:28:27

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2025/11/8 5:25:15

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

Python 高级应用10：在python 大型项目中 FastAPI 和 Django 的相互配合

无论是python&#xff0c;或者java 的大型项目中&#xff0c;都会涉及到 自身平台微服务之间的相互调用&#xff0c;以及和第三发平台的 接口对接&#xff0c;那在python 中是怎么实现的呢&#xff1f; 在 Python Web 开发中&#xff0c;FastAPI 和 Django 是两个重要但定位不…...

编程新知 2025/10/26 4:25:02