HTML---列表.表格.媒体元素

news/2024/7/7 18:44:19

文章目录

  • 前言
  • 一、pandas是什么?
  • 二、使用步骤
    • 1.引入库
    • 2.读入数据
  • 总结

一.列表

无序列表

HTML中的无序列表(Unordered List)用于显示一组项目,每个项目之前没有特定的顺序或编号。无序列表使用<ul>标签来定义,每个项目使用<li>标签来定义。

无序列表的特点包括:

  • 项目之间没有特定的顺序。
  • 项目默认使用小圆点作为项目标记,也可以通过CSS样式来修改项目标记。
  • 项目之间的间距默认较大,可以通过CSS样式来设置间距大小。

 以下是一个无序列表的示例代码:

<body>
	    <!--使用<ul>...</ul>来声明无序列表-->
		<ul>
			<!--使用<li>...</li>定义列表内容-->
			<li>迪丽热巴</li>
			<li>刘亦菲</li>
			<li>刘诗诗</li>
			<li>胡歌</li>
			<li>唐嫣</li>
		</ul>
</body>

 

有序列表 

 有序列表(Ordered list)是HTML提供的一种标记语言,用于按照特定的顺序显示一系列项目。有序列表使用<ol>元素来定义,每个项目使用<li>元素来定义。

有序列表的特点:

  1. 按照一定的顺序显示项目,默认的顺序是从1开始递增;
  2. 可以通过type属性来指定不同的计数器类型,如阿拉伯数字、小写字母、大写字母等;
  3. 可以通过start属性来设置起始计数的值;
  4. 可以使用嵌套的有序列表来显示多级项目。

 以下是一个简单的有序列表的示例代码:

    <body>
		<!--使用<ul>...</ol>来声明无序列表-->
		<ol>
			<!--使用<li>...</li>定义列表内容-->
			<li>迪丽热巴</li>
			<li>刘亦菲</li>
			<li>刘诗诗</li>
			<li>胡歌</li>
			<li>唐嫣</li>
		</ol>
	</body>

自定义列表

 <dl>元素用于创建自定义列表,列表项使用<dt>元素来定义术语,使用<dd>元素来定义术语的定义。

<body>
		<!--使用<dl>...</dl>来创建自定义列表-->
		<dl>
			<!--使用<dt>定义术语  <dd>给术语定义-->
			<dt>蔬菜</dt>
			<dd>黄瓜</dd>
			<dd>青菜</dd>
			<dt>水果</dt>
			<dt>苹果</dt>
			<dt>香蕉</dt>
		</dl>
	</body>

 

 二.表格

 HTML中的表格是一种用于展示和组织数据的结构化元素。表格由一个或多个行和列组成,每个单元格可以包含文本、图像或其他HTML元素。

表格在HTML中使用<table>标签来定义,每一行使用<tr>标签来定义,每个单元格使用<td>标签来定义。可以使用<th>标签来定义表头单元格,以提供更明确的标识。

	<body>
		<!--使用<table>..</table>标签声明表格-->
		<table border="1px"> <!--border="1px":给表给添加一像素粗细的线条-->
			<!--使用<tr>...</tr>创建行-->
			<tr>
				<!--使用<td>...</td>创建单元格-->
				<td>1-1</td>
				<td>1-2</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
			</tr>
		</table>
	</body>

 

表格的兼并 

<tr>
	<td>1-1</td>
	<td>1-2</td>
	<td rowspan="2">1-3</td><!--添加单元格属性 rowspan="2"使单元格跨两行-->
</tr>
<tr>
	<td colspan="2">2-1</td><!--添加单元格属性colspan="2"使单元格跨两列-->
	<!--被跨单元格<td>2-2</td>需要删除-->
	<!--被夸行<td>2-3</td>需要删除-->
</tr>

 


总结


http://lihuaxi.xjx100.cn/news/1887397.html

相关文章

Vue3-03-reactive() 响应式基本使用

reactive() 的简介 reactive() 是vue3 中进行响应式状态声明的另一种方式&#xff1b; 但是&#xff0c;它只能声明 【对象类型】的响应式变量&#xff0c;【不支持声明基本数据类型】。reactive() 与 ref() 一样&#xff0c;都是深度响应式的&#xff0c;即对象嵌套属性发生了…

EasyExcel解决文件读写问题,linux服务器没有安装字体支持而导致出现错误

场景&#xff1a; 在使用 easyexcel 进行导出数据时&#xff0c;在 windows和mac 环境中都能正常导出&#xff0c;但在测试环境 linux 服务器上导出报空指针异常&#xff0c;经排查可能是因为 linux 服务器没有安装字体支持而导致报错 java.lang.NullPointerException…

Spring事务的使用示例和传播行为以及失效场景

文章目录 前言一、Spring事务是什么二、简单示例三、Spring事务的传播行为1. 以下是几种常见的事务传播行为&#xff1a;2. 实现方式 四、Spring事务失效的场景以下是几个常见的导致Spring事务失效的场景&#xff1a; 总结 前言 我们都知道事务提供了一种机制&#xff0c;用于管…

【初阶C++】前言

C前言 1. 什么是C2. C发展史3. C的重要性4. 如何学习C 1. 什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c; …

Python学习笔记(四):函数的定义、函数的返回值、None类型、函数说明文档、函数的嵌套调用、局部变量、全局变量、global关键字

目录 一、函数介绍 1. 函数是&#xff1a; 2. 使用函数的好处是&#xff1a; 二、函数的定义&#xff1a; 三、函数的参数 1.传入参数的功能是&#xff1a; 2.函数的传入参数 - 传参定义 3.注意事项&#xff1a; 4.练习&#xff1a;测量体温 四、函数的返回值 1.函数…

一、Oracle学习笔记

1.1.1实例的概念实例是一组内存结构和后台进程的集合。oracle适用于大型的应用系统1.1.2实例的构成1.实例中的这部分内存结构叫做系统全局区&#xff08;SGA&#xff09;:存储数据库中的数据、存储数据字典的信息、重做日志、经过解析的SQL代码等一个实例只有一个SGA&#xff1…

多维时序 | Matlab实现GA-LSTM-Attention遗传算法优化长短期记忆神经网络融合注意力机制多变量时间序列预测

多维时序 | MATLAB实现BWO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现BWO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | Matlab实…

112. 路径总和(Java)

目录 解法&#xff1a; 官方解法&#xff1a; 方法一&#xff1a;广度优先搜索 思路及算法 复杂度分析 时间复杂度&#xff1a; 空间复杂度&#xff1a; 方法二&#xff1a;递归 思路及算法 复杂度分析 时间复杂度&#xff1a; 空间复杂度&#xff1a; 给你二叉树的…