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

HTML- 标签学习之- 列表、表格

news 2026/4/10 23:11:36

无序列表/有序列表：

标签组成( 无序ul    有序 ol )    -> li  父子级标签， ul只能包含li标签， li标签可以包含任意内容。

 

自定义列表

  • dl :自定义列表的整体，用于包裹dt/dd  标签
  • dt:自定义列表主题
  • dd:自定义列表的针对主题的每一项内容

特点：

  • dd前会默认显示缩进效果

注意点：

  • dl 标签中只允许包含 dt/dd 标签
  • dt/dd 标签可以包含任意内容
<body><h1> 无序列表</h1><hr><ul><li> 电子数码 </li><li> 生活家具 </li><li> 餐饮美食 </li><li> 母婴产品</li></ul><h1> 有序列表</h1><hr><ol><li> 电子数码  </li><li> 生活家具 </li><li> 餐饮美食 </li><li> 母婴产品</li></ol><h1> 自定义列表</h1><hr><dl><dt> 帮助中心</dt><dd> 账户管理</dd><dd> 账户介绍 </dd></dl>
</body>

表格     table -> tr -> td

table ： 表格整体；

     tr :    行， 用于包裹多个td；

    td :   单元格， 用于包裹内容；

border： 表格线的粗细

width： 每个格子的最小宽度

height： 每个格子高度：

capition : 表格大标题， 表示表格整体的大标题，默认在表格整体顶部居中位置；

th:  表头单元格，  表示一列小标题，通常用于表格第一行， 默认内部文字加粗并居中；

head、body、footer 用于提高代码渲染效率， 视觉上没变化 ：如图

Code：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1> 表格</h1><hr><table border="1"  width="600" height ='100' ><caption>用户信息表</caption><head><tr><th> 编号</th><th> 姓名</th><th> 性别</th><th> 编号</th><th> 爱好</th><th> 评语</th></tr></head><body><tr><td> 1</td><td> NN</td><td> 男</td><td> 007</td><td> 打篮球</td><td> 优秀的不要不要的</td></tr><tr><td> 2</td><td> XX</td><td> 女</td><td> 006</td><td> 睡觉</td><td> 完犊子了</td></tr><tr><td> 3</td><td> DD</td><td> 男</td><td> 008</td><td> 打篮球</td><td> 完美666</td></tr></body><footer> <tr><td> 4</td><td> 结束总结</td><td> -</td><td> -</td><td> 积极</td><td> 飞得更好</td></tr></footer></table></body>
</html>

单元格合并：

跨行合并 rowspan、 跨列合并 colspan

  •  明确合并那几个单元格
  • 左上原则， 左右合并保留左边，删除其他
  • 上下合并保留上边， 删除其他

注意点： 只有同一个结构标签中的单元格才能合并，不能夸结构合并

 Code:

 <h1> 表格</h1><hr><table border="1"  width="600" height ='100' ><caption>用户信息表</caption><head><tr><th> 编号</th><th> 姓名</th><th> 性别</th><th> 编号</th><th> 爱好</th><th> 评语</th></tr></head><body><tr><td> 1</td><td> NN</td><td rowspan="2"> 男</td><td> 007</td><td> 打篮球</td><td> 优秀的不要不要的</td></tr><tr><td> 3</td><td> DD</td><td> 008</td><td> 打篮球</td><td> 完美666</td></tr><tr><td> 2</td><td> XX</td><td> 女</td><td> 006</td><td> 睡觉</td><td> 完犊子了</td></tr></body><footer> <tr><td> 4</td><td> 结束总结</td><td colspan="3"> -</td><td> 飞得更好</td></tr></footer></table>

相关文章：

HTML- 标签学习之- 列表、表格

无序列表/有序列表&#xff1a; 标签组成( 无序ul 有序 ol ) -> li 父子级标签&#xff0c; ul只能包含li标签&#xff0c; li标签可以包含任意内容。 自定义列表 dl :自定义列表的整体&#xff0c;用于包裹dt/dd 标签dt:自定义列表主题dd:自定义列表的针对主题的…...

编程日记 2023/5/21 23:40:51

Canal搭建 idea设置及采集数据到kafka

Canal GitHub&#xff1a;https://github.com/alibaba/canal#readme 实时采集工具canal&#xff1a;利用mysql主从复制的原理&#xff0c;slave定期读取master的binarylog对binarylog进行解析。 canal工作原理 canal模拟MySQL slave的交互协议&#xff0c;伪装自己为MySQL slav…...

编程日记 2023/6/1 7:42:33

CentOS7搭建伪分布式Hadoop（全过程2023）

##具体操作目录## 1.配置静态ip2.关闭防火墙3.修改主机名为 *master* &#xff0c;并重启虚拟机vi /etc/hostname 4.修改主机名与ip映射5.设置SSH免密登录6.安装配置java环境----------------------正式Hadoop配置1.移动安装包到合适位置2.解压安装包并重命名3.配置环境变量4.修…...

编程日记 2023/5/21 23:30:47

Linux中文件描述符fd和文件指针filp的理解

简单归纳&#xff1a;fd只是一个整数&#xff0c;在open时产生。起到一个索引的作用&#xff0c;进程通过PCB中的文件描述符表找到该fd所指向的文件指针filp。 文件描述符的操作(如: open)返回的是一个文件描述符,内核会在每个进程空间中维护一个文件描述符表, 所有打开的文件…...

编程日记 2023/5/30 14:46:06

CSS color中常用英文色值

常用颜色英文 red green blue magenta yellow chocolate black aquamarine lime fuchsia brass azure brown bronze deeppink aliceblue gray copper coral feldspar orange orchid pink plum quartz purple aliceblue antiquewith blanchedalmond…...

编程日记 2023/5/21 23:20:44

Springboot idea 中 maven配置问题，找不到依赖：Could not find artifact xxxx

现象&#xff1a;当我们从代码仓拉取新项目时&#xff0c;从该项目的开发同事拿到其maven的settings文件&#xff0c;作为项目的maven配置&#xff0c;为了是能找到工程中所依赖的包&#xff0c;能从远程仓下载下来。 然后本地仓的包&#xff0c;也从同事那边拷贝一份过来&…...

编程日记 2023/5/31 6:11:25

编译原理笔记（一）引论

文章目录 1.什么是编译程序2.编译过程和编译程序的结构2.1.编译过程概述2.2.编译程序的结构2.3.编译阶段的组合 3.解释程序和一些软件工具3.1.解释程序3.2.处理源程序的软件工具 4.PL/0语言编译系统 学习总结&#xff1a;这一部分是编译原理的绪论部分内容&#xff0c;对编译程…...

编程日记 2023/5/21 23:10:42

C++ 类和对象下 [补充]

文章目录 友元内部类内部类是外部类的天生友元 匿名对象匿名对象的特性 拷贝对象时的一些编译器优化函数返回值临时空间的存储位置返回值临时空间具有常性 标题相同和不同类型 需要 临时空间 友元 友元函数 重载operator<< 输出自定义类型 比如日期类的这个重载&#xff…...

编程日记 2023/5/31 23:28:07

[CTF/网络安全] 攻防世界 PHP2 解题详析

[CTF/网络安全] 攻防世界 PHP2 解题详析 index.php.phps扩展名姿势 翻译&#xff1a;你能给这个网站进行身份验证吗&#xff1f; index.php index.php是一个常见的文件名&#xff0c;通常用于Web服务器中的网站根目录下。它是默认的主页文件名&#xff0c;在访问一个网站时&am…...

编程日记 2023/5/21 23:00:40

图神经网络：(节点分类)在Cora数据集上动手实现图神经网络

文章说明&#xff1a; 1)参考资料&#xff1a;PYG官方文档。超链。 2)博主水平不高&#xff0c;如有错误还望批评指正。 3)我在百度网盘上传了这篇文章的jupyter notebook。超链。提取码8888。 文章目录 代码实操1&#xff1a;GCN的复杂实现代码实操2&#xff1a;GCN的简单实现…...

编程日记 2023/5/30 14:47:34

RabbitMQ应用问题——消息补偿机制以及代码示例

RabbitMQ应用问题——消息补偿机制以及代码示例 RabbitMQ应用问题 消息可靠性的保障 消息补偿机制 详细说明 这里使用了简单的代码进行演示&#xff0c;订单的消费者没有写&#xff0c;在订单的消费同时&#xff0c;发送一条增加积分消息到积分队列。 详细流程途中都有注明…...

编程日记 2023/5/31 6:59:12

量化特征贡献度函数:feature_importances_函数/LGBMClassifier/XGBClassifier

feature_importances_是scikit-learn机器学习库中许多模型对象的属性&#xff0c;在训练模型之后调用该属性可以输出各个特征在模型中的重要性。 示例代码&#xff1a; from sklearn.ensemble import RandomForestRegressor from sklearn.datasets import make_regression# 生…...

编程日记 2023/5/21 22:45:35

总结JVM重要知识点

一.类加载和创建对象的过程 1.类加载 1.编译 : 将源码文件(.java)编译成JVM可以解释的.class文件 . 语法分析>语义分析>注解处理 , 生成class文件 2.加载 : 装载 : 字节码本来存储在硬盘上 , 需要运行时 , 有类加载系统负责将类的信息加载到内存中(方法区) , 使用的是类…...

编程日记 2023/5/29 15:58:10

奇技淫巧第8期

学无止境。 下面是对去年11月至今年5月的零散知识点总结。 春节期间好好放松了一两个月&#xff0c;来校后又懒散的度过了一两个月&#xff0c;直到论文评审意见下来&#xff0c;才开启冲刺模式狂干了一两个月。总的来说&#xff0c;这半年来摸的时间比较多。好&#xff0c;不废…...

编程日记 2023/5/21 22:35:31

这个 归并排序详解过程 我能吹一辈子！！！

文章目录 归并排序概念归并排序算法思路归并排序递归实现归并排序非递归实现 归并排序概念 1945年&#xff0c;约翰冯诺依曼&#xff08;John von Neumann&#xff09;发明了归并排序&#xff0c;这是典型的分治算法的应用。 归并排序&#xff08;Merge sort&#xff09;是建立…...

编程日记 2023/5/21 22:30:29

docker版jxTMS使用指南：自动生成代码

本文讲解4.0版jxTMS的自动生成代码功能&#xff0c; 整个系列的文章请查看&#xff1a;docker版jxTMS使用指南&#xff1a;4.0版升级内容 docker版本的使用&#xff0c;请参考&#xff1a;docker版jxTMS使用指南 任何一个管理系统都需要对管理对象进行管理&#xff0c;包括最…...

编程日记 2023/5/31 15:39:05

聚观早报 | 小冰启动GPT克隆人计划；ofo创始人在美创业改做咖啡

今日要闻&#xff1a;小冰启动“GPT克隆人计划”&#xff1b;ofo创始人在美创业改做咖啡&#xff1b;OpenAI正准备新的开源AI模型&#xff1b;青年失业率首破20&#xff05;创新高&#xff1b;微软收购动视暴雪获批 小冰启动“GPT克隆人计划” 5 月 16 日&#xff0c;小冰公司…...

编程日记 2023/5/30 19:36:30

面试造航母，入职拧螺丝，工资离了个大谱...

有粉丝跟我吐槽说&#xff1a;金三银四去面试软件测试岗&#xff0c;真的是面试造航母&#xff0c;入职拧螺丝&#xff0c;工资还低 这种现象很正常&#xff0c;因为找一个测试员&#xff0c;当然希望他能做的业务越多越好&#xff0c;最好像机器猫一样&#xff0c;啥事儿都能…...

编程日记 2023/6/1 7:20:33

Python+selenium自动化元素定位防踩坑

在自动化UI测试过程中常常会在元素定位阶段就踩坑&#xff0c;碰到困扰已久的问题。 以下是个人整理元素定位报错原因和解决方法。 踩坑一&#xff1a;StaleElementReferenceException selenium.common.exceptions.StaleElementReferenceException: Message: stale element re…...

编程日记 2023/5/31 23:29:56

【计算机组成原理】实验一

文章目录 实验一 数据传送实验1. 实验目的2. 实验仪器3. 原理概述4. 实验内容步骤4.1 手动实验环境的建立4.2 手控传送实验 5. 实验结论及问题讨论 实验一 数据传送实验 1. 实验目的 2. 实验仪器 3. 原理概述 4. 实验内容步骤 4.1 手动实验环境的建立 1)初始待令状态 上电或…...

编程日记 2023/5/21 22:05:21

通达信DLL插件实战：5分钟搞定热点板块成份股自动筛选（附股池模板）

通达信DLL插件高阶应用&#xff1a;热点板块成份股智能筛选全攻略 在瞬息万变的证券市场中&#xff0c;能否快速捕捉热点板块的轮动机会&#xff0c;往往决定了投资者的收益水平。传统手动筛选方式不仅效率低下&#xff0c;还容易错过最佳买卖时机。本文将深入解析如何利用通达…...

编程新知 2026/4/10 23:03:35

Qwen3-ASR-1.7B效果实测：1.7B参数量带来的上下文联想能力提升验证

Qwen3-ASR-1.7B效果实测&#xff1a;1.7B参数量带来的上下文联想能力提升验证 1. 语音识别新标杆&#xff1a;Qwen3-ASR-1.7B深度解析 语音识别技术正在经历一场静默的革命。当我们还在为0.6B参数模型的准确率感到惊喜时&#xff0c;Qwen3-ASR-1.7B已经以近乎三倍的参数量重新…...

编程新知 2026/4/10 21:05:44

基于STM32的四轴飞行器控制系统设计

一、系统概述 四轴飞行器&#xff08;Quadcopter&#xff09;是一种垂直起降&#xff08;VTOL&#xff09;多旋翼无人机&#xff0c;通过四个无刷电机的转速差实现姿态控制与稳定飞行。本系统以STM32高性能微控制器为核心&#xff0c;融合传感器融合、姿态解算、PID控制、电机驱…...

编程新知 2026/4/10 20:51:12

如何解决地理数据可视化难题：geojson2svg的坐标映射与样式控制方案

如何解决地理数据可视化难题&#xff1a;geojson2svg的坐标映射与样式控制方案 【免费下载链接】geojson2svg Converts GeoJSON to SVG string given SVG view port size and maps extent. 项目地址: https://gitcode.com/gh_mirrors/ge/geojson2svg 在Web地图开发中&am…...

编程新知 2026/4/10 20:51:12

保姆级教程：手把手教你查看FortiGate防火墙的‘固件和通用更新’服务状态

FortiGate防火墙固件更新状态检查全攻略&#xff1a;从Web界面到CLI的完整指南 在网络安全运维的日常工作中&#xff0c;FortiGate防火墙的固件管理是保障系统安全稳定的关键环节。特别是从FortiOS 7.4版本开始&#xff0c;固件更新规则的变化让许多管理员在操作过程中遇到了意…...

编程新知 2026/4/10 19:10:50

前后端分离架构的实践指南：如何高效实现与优化

1. 前后端分离架构的核心价值 十年前我刚入行时&#xff0c;主流还是用JSP、PHP这类服务端渲染技术。记得有次修改登录页面的按钮颜色&#xff0c;我需要同时改动Java代码里的样式表和JSP模板文件&#xff0c;还要协调后端同事一起联调。这种开发体验让我深刻体会到前后端耦合的…...

编程新知 2026/4/10 19:00:35

如何快速上手cxmooc-tools：5分钟搞定三大网课平台自动刷课

如何快速上手cxmooc-tools&#xff1a;5分钟搞定三大网课平台自动刷课 【免费下载链接】cxmooc-tools 一个 超星(学习通)/智慧树(知到)/中国大学mooc 学习工具,火狐,谷歌,油猴支持.全自动任务,视频倍速秒过,作业考试题库,验证码自动打码(੧ᐛ੭挂科模式,启动) 项目地址: http…...

编程新知 2026/4/10 16:08:21

Fluent计算总发散？别急着重画网格，先检查这5个隐藏设置（附诊断命令）

Fluent计算总发散&#xff1f;别急着重画网格&#xff0c;先检查这5个隐藏设置&#xff08;附诊断命令&#xff09; 凌晨三点&#xff0c;屏幕上的残差曲线突然像过山车一样飙升&#xff0c;你盯着"floating point exception"的报错提示&#xff0c;咖啡杯悬在半空—…...

编程新知 2026/4/10 15:27:28

Three.js郭隆邦系统教程｜高清视频+源码+实战项目+WebGL底层精讲

温馨提示&#xff1a;文末有联系方式课程全面升级&#xff1a;高清教学视频与配套源代码同步 本课程提供全高清录制的教学视频&#xff0c;画面清晰、讲解细致&#xff0c;配合每节课完整可运行的源代码包&#xff0c;支持一键导入、即学即练&#xff0c;大幅提升学习效率与实操…...

编程新知 2026/4/10 15:21:12

像素史诗·智识终端Web应用开发全栈指南：从后端API到前端交互

像素史诗智识终端Web应用开发全栈指南&#xff1a;从后端API到前端交互 1. 项目概述与核心价值 在当今AI技术快速落地的背景下&#xff0c;如何将强大的AI能力整合到Web应用中成为开发者关注的重点。本文将完整演示如何以像素史诗智识终端为AI引擎&#xff0c;开发一个具备聊…...

编程新知 2026/4/10 15:12:50