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

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>

 


总结

相关文章:

  • 低多边形建筑3D模型纹理贴图
  • 淡化了技术指标 还能做现货黄金交易?
  • Maven的settings.xml笔记231208
  • 【嵌入式开发 Linux 常用命令系列 4.2 -- .repo 各个目录介绍】
  • 使用cmake构建Qt6.6的qt quick项目,添加应用程序图标的方法
  • 软件兼容性测试:保障多样化用户体验的重要功能
  • 数据分析基础之《matplotlib(5)—直方图》
  • 分布式环境认证和授权-基于springboot+JWT+拦截器实现-实操+源码下载
  • 什么是 AWS IAM?如何使用 IAM 数据库身份验证连接到 Amazon RDS(上)
  • 【python中类的介绍】
  • jquery实现省市区三级联动
  • 线性回归与逻辑回归:深入解析机器学习的基石模型
  • 计算机网络:应用层(一)
  • web如何实现录制音频,满满干货(上篇)
  • 大文件分割,合并------C++ ------fstream
  • 2017 前端面试准备 - 收藏集 - 掘金
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • Java超时控制的实现
  • JS变量作用域
  • Less 日常用法
  • node 版本过低
  • node-glob通配符
  • Nodejs和JavaWeb协助开发
  • Otto开发初探——微服务依赖管理新利器
  • PyCharm搭建GO开发环境(GO语言学习第1课)
  • python学习笔记 - ThreadLocal
  • Redux 中间件分析
  • Spring Boot MyBatis配置多种数据库
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • 关于Android中设置闹钟的相对比较完善的解决方案
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 每天10道Java面试题,跟我走,offer有!
  • 使用 5W1H 写出高可读的 Git Commit Message
  • 手机端车牌号码键盘的vue组件
  • 通信类
  • 在electron中实现跨域请求,无需更改服务器端设置
  • 湖北分布式智能数据采集方法有哪些?
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • #Spring-boot高级
  • (js)循环条件满足时终止循环
  • (ZT)一个美国文科博士的YardLife
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (附源码)ssm学生管理系统 毕业设计 141543
  • (三)模仿学习-Action数据的模仿
  • (十) 初识 Docker file
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (转载)Linux网络编程入门
  • (轉貼) 資訊相關科系畢業的學生,未來會是什麼樣子?(Misc)
  • .CSS-hover 的解释
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .Net 中Partitioner static与dynamic的性能对比
  • .NET 中使用 Mutex 进行跨越进程边界的同步
  • .net/c# memcached 获取所有缓存键(keys)
  • .netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项
  • .NetCore部署微服务(二)