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

news2024/11/24 19:37:24

文章目录

  • 前言
  • 一、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://www.coloradmin.cn/o/1305908.html

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

相关文章

自定义日志打印功能--C++

一、介绍 日志是计算机程序中用于记录运行时事件和状态的重要工具。通过记录关键信息和错误情况&#xff0c;日志可以帮助程序开发人员和维护人员追踪程序的执行过程&#xff0c;排查问题和改进性能。 在软件开发中&#xff0c;日志通常记录如下类型的信息&#xff1a; 事件信…

二蛋赠书十一期:《TypeScript入门与区块链项目实战》

前言 大家好&#xff01;我是二蛋&#xff0c;一个热爱技术、乐于分享的工程师。在过去的几年里&#xff0c;我一直通过各种渠道与大家分享技术知识和经验。我深知&#xff0c;每一位技术人员都对自己的技能提升和职业发展有着热切的期待。因此&#xff0c;我非常感激大家一直…

【EI会议征稿】2024年人工智能与大模型国际学术会议(AIFM 2024)

2024年人工智能与大模型国际学术会议(AIFM 2024) 2024 International Conference on Artificial Intelligence and Foundation Model 2024年人工智能与大模型国际学术会议(AIFM 2024)将于2024年1月19-21日在南昌召开。本次会议围绕人工智能与大模型的发展应用&#xff0c;聚集…

静态路由原理与配置

文章目录 静态路由原理与配置一、路由器的工作原理1、路由概述2、路由器的工作原理 二、路由表的形成1、路由表2、路由表的形成 三、静态路由和默认路由1、静态路由的缺点2、默认路由&#xff08;是特殊的静态路由&#xff09;3、查看路由表 四、路由器转发数据包的封装过程五、…

【产品经理】产品的实现,需要做好战略规划

产品的实现需要做好产品规划&#xff0c;而产品的规划决定了产品的方向。本文从战略规划的重要性、产品定位、设计产品架构图三个方向&#xff0c;详细地为大家梳理了产品实现的前期准备。 我们知晓了如何去发掘问题&#xff0c;并找到解决方案。 可对于问题的处理&#xff0c…

2023全国职业院校技能大赛信息安全管理与评估赛项正式赛(模块二)

全国职业院校技能大赛高等职业教育组信息安全管理与评估 任务书 极安云科专注技能竞赛&#xff0c;包含网络建设与运维和信息安全管理与评估两大赛项&#xff0c;及各大CTF&#xff0c;基于两大赛项提供全面的系统性培训&#xff0c;拥有完整的培训体系。团队拥有国赛选手、大厂…

《PySpark大数据分析实战》-05.PySpark库介绍

&#x1f4cb; 博主简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是wux_labs。&#x1f61c; 热衷于各种主流技术&#xff0c;热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员&#xff08;PCTA&#xff09;、TiDB数据库专家&#xff08;PCTP…

亚马逊云科技:向量数据存储在生成式人工智能应用程序中的作用

生成式人工智能深受大众喜爱&#xff0c;并且由于具备回答问题、写故事、创作艺术品甚至生成代码的功能&#xff0c;推动了行业的转变&#xff0c;那么如何才能在自己的企业中充分地利用生成式人工智能等应运而生问题。许多客户已经积累了大量特定领域的数据&#xff08;财务记…

go-libp2p-example-chat学习

1.案例下载 https://github.com/libp2p/go-libp2p/tree/master/examples 2.chat案例 这段代码是一个简单的基于libp2p的P2P聊天应用程序的示例。它允许两个节点通过P2P连接进行聊天。前提是&#xff1a; 两者都有私有IP地址&#xff08;同一网络&#xff09;。至少其中一个…

【计算机视觉】Harris角点检测

角点指的是窗口延任意方向移动&#xff0c;都有很大变化量的点。 用数学公式表示为&#xff1a; 这个公式表示移动后的窗口&#xff0c;与移动前的窗口对应元素相减的平方&#xff0c;为每个像素点的权重 反映了如何移动窗口&#xff0c;以及移动窗口后的响应值 为了让 和 直…

海思越影系列3516DV500/3519DV500/3519AV200/SD3403平台的AI一体化工业相机设计思路

随着工业自动化的发展&#xff0c;生产线对机器视觉的数量要求越来越多&#xff0c;由于数量的增加&#xff0c;视觉系统占的空间也越来越大&#xff0c;给生产线的布局带来困扰。 另一方面随着视觉SOC的发展&#xff0c;越来越多的视觉SOC都逐渐带有一定的算力&#xff0c;一体…

头歌——HBase 开发:使用Java操作HBase

第1关&#xff1a;创建表 题目 任务描述 本关任务&#xff1a;使用Java代码在HBase中创建表。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.如何使用Java连接HBase数据库&#xff0c;2.如何使用Java代码在HBase中创建表。 如何使用Java连接HBase数据库…

玩转大数据15:常用的分类算法和聚类算法

前言 分类算法和聚类算法是数据挖掘和机器学习中的两种常见方法。它们的主要区别在于处理数据的方式和目标。 分类算法是在已知类别标签的数据集上训练的&#xff0c;用于预测新的数据点的类别。聚类算法则是在没有任何类别标签的情况下&#xff0c;通过分析数据点之间的相似性…

微信小程序改变checkbox大小

.weui-cell__hd {transform: scale(0.6,0.6);} <checkbox color"#447189" />

stm32 HAL库 发送接受 到了一定的字符串后就卡在.s文件中

问题介绍&#xff1a; 某个项目开发过程中&#xff0c;串口接收中断&#xff0c;开启了DMA数据传输&#xff0c;开启了DMA中断&#xff0c;开启DMA半满中断。然后程序运行的过程中&#xff0c;接收了一部分数据后就会卡在启动文件的DMA1_Ch4_7_DMA2_Ch3_5_IRQHandler 中断里。…

源码角度简单介绍LinkedList

LinkedList是一种常见的数据结构&#xff0c;但是大多数开发者并不了解其底层实现原理&#xff0c;以至于存在很多误解&#xff0c;在这篇文章中&#xff0c;将带大家一块深入剖析LinkedList的源码&#xff0c;并为你揭露它们背后的真相。首先想几个问题&#xff0c;例如&#…

抖音怎么设置自动点赞视频和评论呢?

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 你是否曾被抖音那令人眼花缭乱的短视频所吸引&#xff0c;却苦于无法自动点赞和评论而错过那些精彩的瞬间&#xff1f;现在&#xff0c;让我们一起揭开抖音自动点赞和评论的神秘面…

centos卸载mysql库全流程

&#xff08;1&#xff09;暂停服务 systemctl stop mysqld &#xff08;2&#xff09;查看所有的安装包&#xff0c;将其卸载 rpm -qa |grep mysql rpm -q ( or --query) options -a 查询所有安装的软件包 &#xff08;3&#xff09;使用yum卸载安装的mysql [rootbo /…

数据结构之优先级队列(堆)及top-k问题讲解

&#x1f495;"哪里会有人喜欢孤独&#xff0c;不过是不喜欢失望。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;数据结构之优先级队列(堆) 一.优先级队列 1.概念 我们已经学习过队列&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff…

Flask维护者:李辉

Flask维护者&#xff1a;李辉&#xff0c; 最近看b站的flask相关&#xff0c;发现了这个视频&#xff1a;[PyCon China 2023] 濒危 Flask 扩展拯救计划 - 李辉_哔哩哔哩_bilibili 李辉讲他在维护flask之余&#xff0c;开发了apiflask这个依托flask的框架。GitHub - apiflask/a…