HTML- 标签学习之- 列表、表格

news2024/11/28 2:43:14

无序列表/有序列表:

标签组成( 无序ul    有序 ol )    -> li  父子级标签, ul只能包含li标签, li标签可以包含任意内容。

 

自定义列表

  • dl :自定义列表的整体,用于包裹dt/dd  标签
  • dt:自定义列表主题
  • dd:自定义列表的针对主题的每一项内容

特点:

  • dd前会默认显示缩进效果

注意点:

  • dl 标签中只允许包含 dt/dd 标签
  • dt/dd 标签可以包含任意内容
<body>
    <h1> 无序列表</h1>
    <hr>
    <ul>
        <li> 电子数码 </li>
        <li> 生活家具 </li>
        <li> 餐饮美食 </li>
        <li> 母婴产品</li>
    </ul>
        
    <h1> 有序列表</h1>
    <hr>
    <ol>
        <li> 电子数码  </li>
        <li> 生活家具 </li>
        <li> 餐饮美食 </li>
        <li> 母婴产品</li>
    </ol>

    <h1> 自定义列表</h1>
    <hr>
    <dl>
        <dt> 帮助中心</dt>
        <dd> 账户管理</dd>
        <dd> 账户介绍 </dd>
    </dl>
</body>

表格     table -> tr -> td

table : 表格整体;

     tr :    行, 用于包裹多个td;

    td :   单元格, 用于包裹内容;

border: 表格线的粗细

width: 每个格子的最小宽度

height: 每个格子高度:

capition : 表格大标题, 表示表格整体的大标题,默认在表格整体顶部居中位置;

th:  表头单元格,  表示一列小标题,通常用于表格第一行, 默认内部文字加粗并居中;

head、body、footer 用于提高代码渲染效率, 视觉上没变化 :如图

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
  
    <h1> 表格</h1>
    <hr>

    <table border="1"  width="600" height ='100' >
        <caption>用户信息表</caption>

        <head>
            <tr>
                <th> 编号</th>
                <th> 姓名</th>
                <th> 性别</th>
                <th> 编号</th>
                <th> 爱好</th>
                <th> 评语</th>
            </tr>
        </head>

        <body>
            <tr>
                <td> 1</td>
                <td> NN</td>
                <td> 男</td>
                <td> 007</td>
                <td> 打篮球</td>
                <td> 优秀的不要不要的</td>
            </tr>
            <tr>
                <td> 2</td>
                <td> XX</td>
                <td> 女</td>
                <td> 006</td>
                <td> 睡觉</td>
                <td> 完犊子了</td>
            </tr>
            <tr>
                <td> 3</td>
                <td> DD</td>
                <td> 男</td>
                <td> 008</td>
                <td> 打篮球</td>
                <td> 完美666</td>
            </tr>
        </body>

        <footer> 
            <tr>
                <td> 4</td>
                <td> 结束总结</td>
                <td> -</td>
                <td> -</td>
                <td> 积极</td>
                <td> 飞得更好</td>
            </tr>

        </footer>
    </table>


    
</body>
</html>

单元格合并:

跨行合并 rowspan、 跨列合并 colspan

  •  明确合并那几个单元格
  • 左上原则, 左右合并保留左边,删除其他
  • 上下合并保留上边, 删除其他

注意点: 只有同一个结构标签中的单元格才能合并,不能夸结构合并

 Code:

 <h1> 表格</h1>
    <hr>

    <table border="1"  width="600" height ='100' >
        <caption>用户信息表</caption>

        <head>
            <tr>
                <th> 编号</th>
                <th> 姓名</th>
                <th> 性别</th>
                <th> 编号</th>
                <th> 爱好</th>
                <th> 评语</th>
            </tr>
        </head>

        <body>
            <tr>
                <td> 1</td>
                <td> NN</td>
                <td rowspan="2"> 男</td>
                <td> 007</td>
                <td> 打篮球</td>
                <td> 优秀的不要不要的</td>
            </tr>
            <tr>
                <td> 3</td>
                <td> DD</td>
                <td> 008</td>
                <td> 打篮球</td>
                <td> 完美666</td>
            </tr>
            <tr>
                <td> 2</td>
                <td> XX</td>
                <td> 女</td>
                <td> 006</td>
                <td> 睡觉</td>
                <td> 完犊子了</td>
            </tr>
   
        </body>

        <footer> 
            <tr>
                <td> 4</td>
                <td> 结束总结</td>
                <td colspan="3"> -</td>
                <td> 飞得更好</td>
            </tr>

        </footer>
    </table>

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

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

相关文章

【VMware】VM安装虚拟机

文章目录 VMware教程创建新的虚拟机自定义安装选择稍后安装操作系统这里选择Linux操作系统&#xff0c;版本为Centos7 64位选择名称和安装位置选择处理器、内核数量&#xff08;可根据电脑硬件以及需求进行调整&#xff09;选择2G内存&#xff08;可根据电脑硬件以及需求进行调…

计算机视觉 day94 DDH - YOLOv5:基于双IoU感知解耦头改进的YOLOv5,用于对象检测

DDH - YOLOv5:基于双IoU感知解耦头改进的YOLOv5&#xff0c;用于对象检测 I. IntroductionII. Related workPrediction head 预测头 III. Methodology3.1 Decoupled Head3.2 Double IoU‑aware3.3 Training3.4 Inference IV. Experiments4.1 与YOLOv5等检测头对PASCAL VOC2007测…

Netty实战(五)

ByteBuf—Netty的数据容器 一、什么是ByteBuf二、 ByteBuf 的 API三、ByteBuf 类——Netty 的数据容器3.1 ByteBuf如何工作&#xff1f;3.2 ByteBuf 的使用模式3.2.1 堆缓冲区3.2.2 直接缓冲区3.2.3 复合缓冲区 四、字节级操作4.1 随机访问索引4.2 顺序访问索引4.3 可丢弃字节4…

使用Docker部署Jenkins

Jenkins是一款开源的持续集成&#xff08;DI&#xff09;工具&#xff0c;广泛用于项目开发&#xff0c;能提供自动构建&#xff0c;测试&#xff0c;部署等功能。 文章目录 1、安装2、配置镜像加速3、登录初始化Jenkins4、配置Jenkins 1、安装 接下来使用Docker部署Jenkins&a…

【腾讯云 Finops Crane集训营】关于Crane的认识和体验总结

一、Crane 是什么 Crane 是一个基于 FinOps 的云资源分析与成本优化平台。它的愿景是在保证客户应用运行质量的前提下实现极致的降本。Crane 是 FinOps 基金会认证的云优化方案。 Crane基于Docker和Kubernetes技术&#xff0c;支持常见的容器化应用场景&#xff0c;如部署多个…

分布式项目 09.服务器之间的通信和三个工具类

项目的结构&#xff1a;1.通过Nginx首先把访问首页的请求发送到前端web服务器&#xff0c;2.web服务器会根据请求的url中的一些细节&#xff0c;来把相关的请求发送到相关的服务器中&#xff0c;3.相关的服务器会处理业务&#xff0c;并且返回结果到web服务器中&#xff0c;最后…

Godot引擎 4.0 文档 - 循序渐进教程 - 节点和场景

本文为Google Translate英译中结果&#xff0c;DrGraph在此基础上加了一些校正。英文原版页面&#xff1a; Nodes and Scenes — Godot Engine (stable) documentation in English 节点和场景 在Godot 关键概念概述中&#xff0c;我们看到 Godot 游戏是一棵场景树&#xff0…

算法训练-二分查找

这里写目录标题 34. 在排序数组中查找元素的第一个和最后一个位置162. 寻找峰值153. 寻找旋转排序数组中的最小值33. 搜索旋转排序数组 34. 在排序数组中查找元素的第一个和最后一个位置 题目链接 vector<int> searchRange(vector<int>& nums, int target) {i…

集合 集合

目录 ArraryList 引用基本类型 案例1&#xff1a;定义一个集合添加学生姓名年龄 案例2&#xff1a;查看是否存在这个id 案例3&#xff1a;手机 案例4&#xff1a;学生管理系统&#xff08;不完整&#xff09; Collection collection遍历方式 迭代遍历&#xff08;不依赖…

深度学习用于医学预后-第二课第四周13-15节-使用生存数的非线性风险评估模型

使用生存数的非线性风险评估模型 在这堂课中&#xff0c;你将学习关于生存树的知识。你将学习如何将患者的变量纳入考虑&#xff0c;比较不同患者的风险。 你将看到生存树与二叉决策树相似&#xff0c;可以让你构建模型来捕捉患者数据中的非线性关系。 在这堂课中&#xff0…

分布式运用之rsync远程同步

1.rsync的相关知识 1.1 rsync简介 rsync&#xff08;Remote Sync&#xff0c;远程同步&#xff09;是一个开源的快速备份工具&#xff0c;可以在不同主机之间镜像同步整个目录树&#xff0c;支持增量备份&#xff0c;并保持链接和权限&#xff0c;且采用优化的同步算法&#…

怎么使用树莓派总要了解一点它的软硬件吧。什么模块有什么用,需要什么准备才能安全的看到树莓派的开机界面

Raspberry Pi(中文名为“树莓派”,简写为 RPi&#xff0c;(或者 RasPi / RPI)只有信用卡大小的微型电脑&#xff0c;其系统基于 Linux。随着 Windows 10 IoT 的发布&#xff0c;我们也将可以用上运行 Windows IoT 的树莓派。别看其外表“娇小”&#xff0c;内“心”却很强大&am…

Doxygen 源码分析: SymbolMap类

2023-05-21 10:59:35 ChrisZZ imzhuofoxmailcom Hompage https://github.com/zchrissirhcz 文章目录 1. Doxygen 版本2. SymbolMap 类概要3. 添加符号: SymbolMap<T>::add()4. 删除符号: SymbolMap<T>::remove()5. 符号查找: SymbolMap<T>::find()6. 哪里用了…

1.golang的介绍、环境安装和编译器安装

一、Go的介绍 Go语言其实是Golanguage的简称&#xff0c;Go&#xff08;又称 Golang&#xff09;是 Google 的 Robert Griesemer&#xff0c;Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译并发型语言。Go 语言语法与 C 相近&#xff0c;但功能上有&#xff1a;内存安全…

Doxygen 源码分析: Definition类

2023-05-21 13:05:28 ChrisZZ imzhuofoxmailcom Hompage https://github.com/zchrissirhcz Blog https://blog.csdn.net/baiyu33 文章目录 1. Doxygen 版本2. Definition 类和它的8个子类3. Definition 类的 Private 成员4. Definition 类的 Public 成员4.1 特殊成员函数4.2 获…

(学习日记)AD学习 #1

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

Linux基本操作指令2

目录 指令1&#xff1a;rmdir指令&#xff1a; 指令2&#xff1a;rm命令&#xff1a; 指令3&#xff1a;man指令&#xff1a; 指令4&#xff1a;cp指令&#xff1a; 指令5&#xff1a;mv指令&#xff1a;类似于Windows的剪贴 指令6&#xff1a;cat指令 指令7&#xff1a;…

QT5.15.0使用gcc-arm-8.2-2018.08-x86_64-arm-linux-gnueabihf交叉编译的问题总结

目录 一、交叉编译 二、操作中踩过的坑 1、环境变量未生效 2、交叉编译QT代码操作 3、烧录时报错缺少xcb问题 4、小白的细小错误 三、--platform命令 3、1 -platform linuxfb 详细文档请点击此处 我的文档在原文档的基础上添加了非常详细的提醒&#xff0c;可以少走弯路…

软件性能测试过程详解与案例剖析

软件性能测试是软件开发过程中至关重要的一环&#xff0c;它能够帮助我们确保软件在不同负载和使用情况下的表现。在软件性能测试中&#xff0c;我们通常会关注软件的响应时间、吞吐量、并发用户数等指标&#xff0c;以评估软件性能。 软件性能测试过程主要分为以下几个步骤&am…

leetcode:322. 零钱兑换(暴力dfs,记忆化dfs,动态规划(朴素+优化),bfs+贪心)

记录常规的完全背包问题模型 1.暴力dfs2.优化dfs&#xff0c;记忆化dfs3.动态规划4.bfs 1.由于每件物品可以无限取&#xff0c;那么可以发现这是一个完全背包问题模型。 1.暴力dfs 最后要求的是&#xff1a;n种硬币&#xff0c;凑成总金额为amount。每种硬币无限取&#xff0…