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

文章目录

  • 前言
  • 一、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>

 


总结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/239764.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MTK Android P Sensor架构(一)

需求场景&#xff1a; 本来如果只是给传感器写个驱动并提供能读取温湿度数据的节点&#xff0c;是一件比较轻松的事情&#xff0c;但是最近上层应用的同事要求我们按照安卓标准的流程来&#xff0c;这样他们就能通过注册一个服务直接读取传感器事件数据了。这样做的好处就是第…

初始数据库 - 了解数据库

centos 7 版本当中安装 mysql 安装与卸载中&#xff0c;⽤⼾全部切换成为root&#xff0c;⼀旦 安装&#xff0c;普通⽤⼾是可以使用的。 卸载不需要的环境 首先&#xff0c;在安装之前&#xff0c;要先确定你当前系统当中是否已经有了mysql 的环境&#xff0c;如果你不想卸…

1838_emacs_evil中跳转到任意字符evil-avy-goto-char的功能分析

Grey 全部学习内容汇总&#xff1a;GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 1838_emacs_evil中跳转到任意字符evil-avy-goto-char的功能分析 avy是一个比较成熟的emacs的插件&#xff0c;可以实现快速跳转到指定的字符位置的功能…

数据在网络中是怎么传输的?

计算机通信场景大致如下所示&#xff1a; 1.同一个子网中两台计算机通信 2.不属于同一个子网&#xff0c;两台计算机进行通信 以下内容&#xff0c;将围绕这两种场景进行阐述&#xff0c;在阐述之前&#xff0c;先举个场景示例&#xff0c;帮助大家理解一些名词 场景一&…

机器学习---Boosting

1. Boosting算法 Boosting思想源于三个臭皮匠&#xff0c;胜过诸葛亮。找到许多粗略的经验法则比找到一个单一的、高度预 测的规则要容易得多&#xff0c;也更有效。 预测明天是晴是雨&#xff1f;传统观念&#xff1a;依赖于专家系统&#xff08;A perfect Expert) 以“人无…

Reinfocement Learning 学习笔记PartⅠ

文章目录 Reinfocement Learning一、基本概念二、贝尔曼公式&#xff08;bellman equation&#xff09;2.1 为什么return重要2.2 state value function的定义2.3 贝尔曼公式推导2.4 如何求解贝尔曼公式2.5 Action value的定义 三、贝尔曼最优公式&#xff08;bellman optimalit…

HarmonyOS—实现UserDataAbility

UserDataAbility接收其他应用发送的请求&#xff0c;提供外部程序访问的入口&#xff0c;从而实现应用间的数据访问。Data提供了文件存储和数据库存储两组接口供用户使用。 文件存储 开发者需要在Data中重写FileDescriptoropenFile(Uriuri,Stringmode)方法来操作文件&#xf…

在做题中学习(32):只出现一次的数字 III

260. 只出现一次的数字 III - 力扣&#xff08;LeetCode&#xff09; 根据题目可知&#xff1a;有两个元素只出现一次&#xff0c;其余出现两次。 而在只出现一次的数字 I 里&#xff0c;只有一个元素出现一次&#xff0c;可以用异或的方式直接得到最后的答案&#xff0c;而此…

PaddleOCR:超越人眼识别率的AI文字识别神器

在当今人工智能技术已经渗透到各个领域。其中&#xff0c;OCR&#xff08;Optical Character Recognition&#xff09;技术将图像中的文字转化为可编辑的文本&#xff0c;为众多行业带来了极大的便利。PaddleOCR是一款由百度研发的OCR开源工具&#xff0c;具有极高的准确率和易…

Linux嵌入式配置USB鼠标支持+触摸板

在linux嵌入式中加入鼠标支持&#xff0c;首先在内核里面将mice驱动加入编译&#xff0c;这里用到的是usb所以还要有usb的支持&#xff0c;下载到板子上启动 1、定位鼠标 要用鼠标&#xff0c;首先要知道生成的鼠标设备是哪个&#xff0c;直接直接ls input目录&#xff0c;当…

2023.12.6-12.11 黑马知行教育项目实战,访问咨询意向线索主题

目录 简单介绍: 一.项目背景介绍 二.项目架构介绍 三.项目内容 3.1访问和咨询分析主题: 3.1.1 表与表之间的关联 3.1.2访问咨询主题需求汇总:最终需在ADS层制作六张表 3.1.3 访问咨询DWS大宽表建表与导入数据 3.2意向线索主题需求分析 3.2.1意向线索主题需求汇总:最终需在…

【数据结构(六)】希尔排序、快速排序、归并排序、基数排序的代码实现(3)

文章目录 1. 希尔排序1.1. 简单插入排序存在的问题1.2. 相关概念1.3. 应用实例1.3.1. 交换法1.3.1.1. 逐步推导实现方式1.3.1.2. 通用实现方式1.3.1.3. 计算时间复杂度 1.3.2. 移动法 2. 快速排序2.1. 相关概念2.2. 实例应用2.2.1. 思路分析2.2.2. 代码实现 2.3. 计算快速排序的…

华清远见作业第二十五天

使用三个程序来完成输出ABCABCABCABCABC #include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/wait.h> #include <sys/sem.h>#define NUM_SEMS 3 // 信号量集中的信号量数量union semun {int val;struct semid_ds *…

隔离电源与非隔离式电源

开关电源 文章目录 开关电源前言一、它们之间的区别是什么&#xff1f;二、如何区分它们呢&#xff1f;三、隔离电源与非隔离电源的优缺点四、隔离电源与非隔离电源的选择总结 前言 在产品设计时&#xff0c;倘若没有考虑应用环境对电源隔离的要求&#xff0c;产品到了应用时就…

Linux服务器安装vim命令

1、查看是否安装vim命令 vim /etc/hosts2、检查系统中是否存在安装包 rpm -qa|grep vim2、 安装vim yum -y install vim*4、测试是否安装成功 vim /etc/hosts

深度学习——第3章 Python程序设计语言(3.7 matplotlib库)

3.7 matplotlib库 目录 1 matplotlib库简介 2 pyplot的plot函数 3 matplotlib基础绘图函数示例 数据可视化有助于深度理解数据。 本节介绍绘制图形的基本方法。 1. matplotlib库简介 matplotlib官网 1.1 matplotlib库概述 matplotlib是Python优秀的数据可视化第三方库&a…

Python 神奇解码器:pyWhat 库全面指南

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在当今数字化的世界中&#xff0c;理解和处理文本数据是许多应用程序的关键任务。而PyWhat库作为一个用于处理文本的Python库&#xff0c;提供了强大的功能&#xff0c;帮助开发者在文本中识别和提取有意义的信息…

【Qt开发流程】之2D绘图1:概述及基本绘制与填充和渐变填充

概述 Qt的绘图系统可以使用相同的API在屏幕和打印设备上进行绘图&#xff0c;并且主要基于QPainter, QPaintDevice和QPaintEngine类。 QPainter用于执行绘图操作&#xff0c;QPaintDevice是一个二维空间的抽象&#xff0c;可以使用QPainter在其上绘制&#xff0c;QPaintEngine…

Mybatis核心配置文件加载流程详解

Mybatis核心配置文件加载流程详解 本文将介绍MyBatis在配置文件加载的过程中&#xff0c;如何加载核心配置文件、如何解析映射文件中的SQL语句以及每条SQL语句如何与映射接口的方法进行关联。 映射配置文件 在介绍核心配置文件加载流程前&#xff0c;先给出一个简单的MyBati…

从概念到现实,2024中国式元宇宙如何落地?

前几个月&#xff0c;马斯克和扎克伯格隔空约架愈演愈烈&#xff0c;网友拱火也其乐无穷。两位顶级富豪贴身肉搏&#xff1f; 想想就刺激&#xff01; 随之&#xff0c;老马的X&#xff08;原Twitter&#xff09;和小扎的Threads&#xff08;X竞品&#xff09;也获得了颇多关注…