HTML列表与表格详解_高效学习攻略

news/2024/5/18 12:23:15/文章来源:https://blog.csdn.net/Godyanqi/article/details/128246906

HTML列表与表格

  • HTML篇_第六章、HTML列表与表格
    • 一、列表
      • 1.1定义
      • 1.2列表的分类
      • 1.3列表的对比
    • 二、表格
      • 2.1表格的定义
      • 2.2表格的边框
      • 2.3表格的表头单元格
      • 2.4表格标题 <caption>
      • 2.5表格的高度和宽度
      • 2.6表格背景
      • 2.7表格空间
      • 2.8合并单元格
      • 2.9表格头部、主题和页脚
      • 2.10表格的嵌套

HTML篇_第六章、HTML列表与表格

一、列表

1.1定义

列表就是信息资源的一种展现形式，可以使信息结构化、条理化，并以列表的方式显现出来，以便快速获取相应的信息。

1.2列表的分类

HTML中列表分为三种类型，如下：

  • 无序列表

无序列表是一个项目列表，没有顺序，是由<ul>标签内嵌套<li>标签来书写组成，每个<li>标签独占一行。<ul>标签用于声明无序列表，<li>标签用于声明列表项。默认显示为标签项目前有一个粗体圆点，一般用于无顺序类型的列表，例如：导航、侧边栏或者有规律的图文组合模块等。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>无序列表</title></head><body><h1>今日新闻热搜</h1><ul><li>新闻1</li><li>新闻2</li><li>新闻3</li></ul></body>
</html>

运行结果：

在这里插入图片描述

  • 有序列表

有序列表，顾名思义是一种有一定顺序的列表，是由<ol>标签内嵌套<li>标签来书写组成的，每个<li>标签独占一行。<ol>标签用于声明有序列表，<li>标签用于声明列表项。默认显示为标签项目前有数字顺序标记，一般用于排序类型的列表，例如：试卷、问卷和选项等。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>有序列表</title></head><body><h1>问卷调查</h1><ol><li>姓名：</li><li>年龄：</li><li>自我评价：</li></ol></body>
</html>

运行结果：

在这里插入图片描述

  • 定义列表

定义列表与无序列表类似，没有顺序，是由<dl>标签嵌套<dt>标签和<dd>标签来书写组成的，每个
<dt>标签和<dd>标签独占一行。<dl>标签用于声明定义列表，<dt>标签用于声明列表项，而<dd>标签则用于定义列表项内容。定义列表默认显示没有标记，一般用于一个标题下包含一个或者多个列表项的情况。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定义列表</title></head><body><h1>定义列表</h1><dl><dt>手机品牌</dt><dd>华为</dd><dd>oppo</dd><dd>vivo</dd></dl><dl><dt>电脑品牌</dt><dd>联想</dd><dd>神舟</dd><dd>华硕</dd></dl></body>
</html>

运行结果：

在这里插入图片描述

1.3列表的对比

类型说明项目符号
无序列表· 以<ul>标签来实现
·以<li>标签表示列表项		无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表·以<ol>标签来实现
·以<li>标签表示列表项		有序列表ol-li一般用于显示带有顺序编号的特定场合
定义列表·以<dl>标签来实现
·以<dt>标签定义列表项
·以<dd>标签定义内容		定义列表一般适用于带有标题和标题解释性内容的场合

二、表格

2.1表格的定义

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格</title></head><body><table><tr><td>一行一列</td><td>一行二列</td><td>一行三列</td></tr><tr><td>二行一列</td><td>二行二列</td><td>二行三列</td></tr></table></body>
</html>

运行结果：

在这里插入图片描述

2.2表格的边框

在定义表格时，如果不定义边框属性则表格不显示边框，如上述代码示例。大多数情况下，我们需要显示边框，这时就需要用到边框属性border来实现，设置了该属性则会显示一个带有边框的表格。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格</title></head><body><table border="1"><tr><td>一行一列</td><td>一行二列</td><td>一行三列</td></tr><tr><td>二行一列</td><td>二行二列</td><td>二行三列</td></tr></table></body>
</html>

运行结果：

在这里插入图片描述

2.3表格的表头单元格

众所周知，所有的表格都有表头，因为表头的存在，表格的交互性会会更加友好。HTML的中的表格也可以设置表头，这需要使用<th>标签来定义表格的表头单元格。大多数浏览器会将表头显示为居中加粗的文本。表格的表头单元格可以设置一些属性，例如：align（规定表格相对于周围元素的对齐方式）、dir（规定元素内容的文本方向）、width（规定表格的宽度）和height（规定表格的高度）。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格</title></head><body><table border="1"><tr><th>表头一</th><th>表头二</th></tr><tr><td>一行一列</td><td>一行二列</td></tr></table></body>
</html>

运行结果：

在这里插入图片描述

2.4表格标题

在<table>标签内可以使用<caption>标签作为标题，并在表格的顶部显示。（该标签在较新版本的HTML中已经弃用，在这里仅作为了解内容出现）

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格</title></head><body><table border="1"><caption>这是表格的标题</caption><tr><th>表头一</th><th>表头二</th></tr><tr><td>一行一列</td><td>一行二列</td></tr></table></body>
</html>

运行结果：

在这里插入图片描述

2.5表格的高度和宽度

在定义表格时可以使用width（宽）和height（高）属性设置表格宽度和高度。设置时按像素或可用屏幕区域的百分比来指定表格宽度或高度。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格</title></head><body><table border="1" width = "200" height = "100"><caption>这是表格的标题</caption><tr><th>表头一</th><th>表头二</th></tr><tr><td>一行一列</td><td>一行二列</td></tr></table></body>
</html>

运行结果：

在这里插入图片描述

2.6表格背景

在HTML中，我们可以使用属性来为表格设置背景。这里有三个属性可用，分别为可以为整个表格或仅为一个单元格设置背景颜色的bgcolor属性、可以为整个表设置背景图像或仅为一个单元设置背景图像的background属性，可以设置边框颜色的bordercolor属性。但是HTML5中不推荐使用这些属性。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格背景</title></head><body><h1>HTML表格背景</h1><table border="1" bordercolor = "red" bgcolor = "yellow" background = ""><tr><th>表头1</th><th>表头2</th></tr><tr><td>一行一列</td><td>一行二列</td></tr></table></body>
</html>

运行结果：

在这里插入图片描述

注意：background属性需要提供图像的URL地址

2.7表格空间

使用cellspacing属性和cellpadding属性用于调整HTML表格中单元格的空间。其中cellspacing属性用来定义表格单元格之间的空间，cellpadding属性用于表示单元格边框与单元格内容之间的距离

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格与空间</title></head><body><table border="1" cellpadding = "5" cellspacing = "5"><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>一行一列</td><td>一行二列</td><td>一行三列</td></tr><tr><td>二行一列</td><td>二行二列</td><td>二行三列</td></tr></table></body>
</html>

运行结果：

在这里插入图片描述

2.8合并单元格

在使用过程中，若需要合并单元格，则需要用的两个属性来实现。将两个或多个列合并为一个列，将使用colspan属性，如果要合并两行或更多行，则将使用rowspan属性。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML合并单元格</title></head><body><table border="1"><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td rowspan="2">一行一列</td><td>一行二列</td><td>一行三列</td></tr><tr><td>二行二列</td><td>二行三列</td></tr><tr><td colspan = "3">三行一列</td></tr></table></body>
</html>

运行结果：

在这里插入图片描述

2.9表格头部、主题和页脚

在HTML中表格可以分为三个部分，头部、主体和页脚，如同word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。头部，主体和页脚的对应的三个标签分别是thead、tbody和tfoot。在表格中可以包含多个tbody元素以指示不同的页面，但是thead和tfoot用该出现在tbody之前。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格</title></head><body><table border = "1" width = "300" height = "150"><thead><tr><td colspan = "4">单独的表头</td></tr></thead><tfoot><tr><td colspan = "4">单独的表页脚</td></tr></tfoot><tbody><tr><td>一行一列</td><td>一行二列</td><td>一行三列</td><td>一行四列</td></tr></tbody>         </table></body>
</html>

运行结果：

在这里插入图片描述

2.10表格的嵌套

在HTML中可以在一个表中使用另外一个表。在实现表格嵌套时可以使用<table>内的几乎所有标签。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格嵌套</title></head><body><table border = "1" width = "100%"><tr><td><table border = "1"><tr><th>表格1表头1</th><th>表格1表头2</th></tr><tr><td>表格1一行一列</td><td>表格1一行二列</td></tr><tr><td>表格1二行一列</td><td>表格2二行二列</td></tr></table></td><td><table border = "1"><tr><th>表格2表头1</th><th>表格2表头2</th></tr><tr><td>表格2一行一列</td><td>表格2一行二列</td></tr><tr><td>表格2二行一列</td><td>表格2二行二列</td></tr></table></td></tr>       </table></body>
</html>

运行结果：

在这里插入图片描述

希望有所帮助！
关注我，持续更新。

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

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C++常用容器】STL基础语法学习queue容器

【C++常用容器】STL基础语法学习queue容器

目录 ●queue的基本概念 ●queue常用接口 ●构造函数 ●赋值操作 ●数据存取 ●大小操作 ●queue的基本概念 简要介绍&#xff1a;queue是一种先进先出的的数据结构&#xff0c;它有两个出口。队列容器允许从一端新增元素&#xff0c;从另一端移除元素。队列中只有队…
阅读更多...
【Java基础篇】基础知识易错集锦（一）

【Java基础篇】基础知识易错集锦（一）

在学习的路上&#xff0c;我们只记得学习新的知识&#xff0c;却忽略了一切新知识都是在旧知识的基础上&#xff1b;努力奔跑的过程中&#xff0c;也要记得常回头看看&#xff1b; 题目展示&#xff1a; 解析&#xff1a; abstract是抽象的意思&#xff0c;在java中&#xff0…
阅读更多...
[附源码]计算机毕业设计的高校车辆租赁管理系统Springboot程序

[附源码]计算机毕业设计的高校车辆租赁管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
SQL注入漏洞 | updatexml报错注入

SQL注入漏洞 | updatexml报错注入

文章目录前言MySQL updatexml报错注入前言 XML XML 被设计用来传输和存储数据&#xff0c;是各种应用程序之间进行数据传输的最常用的工具。 xpath XPath 是一门在 XML 文档中查找信息的语言。XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在…
阅读更多...
【GRU回归预测】基于门控循环单元GRU实现数据多维输入单输出回归预测附matlab代码

【GRU回归预测】基于门控循环单元GRU实现数据多维输入单输出回归预测附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
web期末大作业 使用HTML+CSS制作蓝色版爱宠之家带留言板(5页)

web期末大作业 使用HTML+CSS制作蓝色版爱宠之家带留言板(5页)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
Redis 特性。

Redis 特性。

Remote Dict Serve 分类 实时同步数据 要求缓存中的数据必须与db中的数据保持一致&#xff0c;如何保证&#xff0c;只要DB发生了变化&#xff0c;缓存中的数据立即消息 阶段性缓存为了缓存数据 添加了生存时长属性 Redis 的特性。 性能极高 读的速度 11w/s 写的速度 8w次/s…
阅读更多...
代码详细教程+文档+PPT+源码等]SSM框架美妆商城全套|电商购物计算机专业毕业论文java毕业设计网站

代码详细教程+文档+PPT+源码等]SSM框架美妆商城全套|电商购物计算机专业毕业论文java毕业设计网站

&#x1f496;&#x1f496;更多项目资源&#xff0c;最下方联系我们✨✨✨✨✨✨ 目录 Java项目介绍 资料获取 Java项目介绍 计算机毕业设计java毕设之SSM美妆商城项目源码_哔哩哔哩_bilibili项目资料网址: http://itzygogogo.com软件下载地址:http://itzygogogo.com/itsz…
阅读更多...
详解Pytorch中的torch.nn.MSELoss函数（包括每个参数的分析）

详解Pytorch中的torch.nn.MSELoss函数（包括每个参数的分析）

一、函数介绍 Pytorch中MSELoss函数的接口声明如下&#xff0c;具体网址可以点这里。 torch.nn.MSELoss(size_averageNone, reduceNone, reduction‘mean’) 该函数默认用于计算两个输入对应元素差值平方和的均值。具体地&#xff0c;在深度学习中&#xff0c;可以使用该函数用…
阅读更多...
《Linux运维实战：使用Percona Backup for MongoDB逻辑备份与恢复Mongodb数据》

《Linux运维实战：使用Percona Backup for MongoDB逻辑备份与恢复Mongodb数据》

一、备份与恢复方案 Percona Backup for MongoDB 是一个开源、分布式和低影响的解决方案&#xff0c;用于MongoDB分片集群和副本集的一致备份。从版本1.7.0开始&#xff0c;Percona Backup for MongoDB支持物理和逻辑备份和恢复&#xff0c;仅支持对逻辑备份进行时间点恢复。 …
阅读更多...
Android.mk 入门学习

Android.mk 入门学习

我们还是采用RK3399的开发板来学习Android.mk NOTED: 在编译之前&#xff0c;我们需要source & lunch source build/envsetup.sh lunch rk3399_roc_pc_plus-userdebug 或者lunch后选择41 一、Android.mk介绍 Android.mk是Android提供的一种makefile文件&#xff0c;用来指…
阅读更多...
物理数据库服务器扫描hba卡识别共享磁盘命令

物理数据库服务器扫描hba卡识别共享磁盘命令

1、问题背景 默认情况&#xff0c;在扩容完1套物理rac共享存储后&#xff0c;rac主机是不能识别共享存储的。那么该怎么办呢&#xff1f; 2、解决办法 例如&#xff0c;在扩容完1套物理rac共享存储后&#xff0c;如果rac主机不能识别共享存储的话(一般需要执行命令后&#x…
阅读更多...
HashMap1.8也会发生死循环—记录

HashMap1.8也会发生死循环—记录

目录 代码 jstack 分析 什么是哈希表 在讨论哈希表之前&#xff0c;我们先大概了解下其他数据结构在新增&#xff0c;查找等基础操作执行性能 数组&#xff1a;采用一段连续的存储单元来存储数据。对于指定下标的查找&#xff0c;时间复杂度为O(1)&#xff1b;通过给定值进…
阅读更多...
代码随想录训练营day59, 下一个更大元素II, 接雨水

代码随想录训练营day59, 下一个更大元素II, 接雨水

下一个更大元素II 给定一个循环数组, 输出每个元素的下一个更大元素, 没有则-1 所以在遍历的过程中, 模拟走了两遍nums class Solution {public int[] nextGreaterElements(int[] nums) {int len nums.length;//先进行边界判断if(nums null || len < 1){return new int…
阅读更多...
Xinlei cheng报告学习

Xinlei cheng报告学习

上面是 下面是momuten encoder 关键词 variance 方差 asymmetric不对称 momentum encoder 动量 dimension维度 convergence收敛 symmetrizationsy均衡 contrastive learning 对比学习 autoregressive自回归 distillation蒸馏 没有 fc layer +bn 裁剪后variance方差变大 cum…
阅读更多...
[附源码]计算机毕业设计的黄河文化科普网站Springboot程序

[附源码]计算机毕业设计的黄河文化科普网站Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
JavaScript 中如何实现并发控制？

JavaScript 中如何实现并发控制？

一、并发控制简介 在日常开发过程中&#xff0c;你可能会遇到并发控制的场景&#xff0c;比如控制请求并发数。那么在 JavaScript 中如何实现并发控制呢&#xff1f;在回答这个问题之前&#xff0c;我们来简单介绍一下并发控制。 假设有 6 个待办任务要执行&#xff0c;而我们…
阅读更多...
软件测试题库怎么样 这个刷题小程序很适合临时抱佛脚

软件测试题库怎么样 这个刷题小程序很适合临时抱佛脚

考试刷题&#xff0c;面试找工作也要刷题&#xff1f;说到这&#xff0c;可能很多都觉得不可思议&#xff0c;这找工作&#xff0c;还得提前刷题做准备&#xff1f;其实这个现象一个都有的&#xff0c;尤其是对于技术岗来说&#xff0c;由于面试官会着重询问技术相关问题&#…
阅读更多...
COM通信栈

COM通信栈

基于 AUTOSAR 架构的软件层概述 根据分层AUTOSAR 架构&#xff0c;软件开发是按照以下模块&#xff08;层&#xff09;&#xff08;自下而上&#xff09;实现的&#xff1a; 基本软件 (BSW) 层——这包括以下内容&#xff1a; 微控制器抽象层 (MCAL)电子控制单元 (ECU) 抽象层…
阅读更多...
【知识图谱】(task2)知识图谱表示

【知识图谱】(task2)知识图谱表示

note 知识图谱的符号表示方法&#xff1a; 属性图是工业界最常见的图谱建模方法&#xff0c;属性图数据库充分利用图结构特点做了性能优化&#xff0c;实用度高&#xff0c;但不支持符号推理。RDF是W3C推动的语义数据交换标准与规范&#xff0c;有更严格的语义逻辑基础&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业