HTML列表和表格标签

news2024/12/23 23:33:29

目录

1.列表标签

1.1无序列表

1.2有序列表

1.3定义列表 

2. 表格标签、

2.1表格标签的属性

2.2合并单元格


1.列表标签

1.1无序列表

<ul>: [type 属性: disc( 实心圆点 )( 默认 ) circle( 空心圆圈 ) square( 实心方块 )]   
<li>: 列表中的每一项

Emment语法:ul>li*3 


<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
对于属性的表现展示:
1. disc( 实心圆点 )( 默认 )
代码:
  显示效果: 

2. circle(空心圆圈)

代码:

  显示效果

3. square(实心方块)

代码:

   显示效果

1.2有序列表

Emment语法:ol>li*3 

<ol>
   <li></li>
   <li></li>
   <li></li>
</ol>

1.代码: 

   显示效果

如果你想要从特定的序号开始 

2.代码: 

  显示效果

无序和有序也可以嵌套

3.代码:

   显示效果

1.3定义列表 

实现问答和解释的效果,dd有默认缩进的效果

Emment语法:dl>dt+dd

   <dl>
    <dt></dt>
    <dd></dd>
   </dl>

 代码:

显示效果


2. 表格标签

table 标签 : 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格 . 会居中加粗
thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 )
tbody: 表格得到主体区域 .
caption:表格的标题

Emment语法:table>(tr>th*3)*4

   <table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
   </table>

 接下来我们逐一添加属性(因为我们只是看看添加属性后的效果,就不分表头和表身了)

2.1表格标签的属性

代码:

  显示效果

1.border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框

2.width / height: 设置尺寸 

3.cellspacing: 单元格之间的距离. 默认为 2 像素 ,cellpadding: 内容距离边框的距离, 默认 1 像素

2.2合并单元格

1.跨行合并 : rowspan="n"
2.跨列合并 : colspan="n"
步骤
1. 先确定跨行还是跨列
2. 找好目标单元格 ( 跨列合并 , 左侧是目标单元格 ; 跨行合并 , 上方是目标单元格 )
3. 删除的多余的单元

代码:

 <table align="center" border="10" cellpadding="20" cellspacing="0" width="500"height="500">
    <tr>
         <td>姓名</td>
         <td>性别</td>
         <td>年龄</td>
    </tr>
     <tr>
         <td>张三</td>
         <td colspan="2">男</td>
    </tr>
    <tr>
         <td>李四</td>
         <td>女</td>
         <td>11</td>
    </tr>
 </table>

  显示效果


以上为我个人的小分享,如有问题,欢迎讨论!!! 

都看到这了,不如关注一下,给个免费的赞 

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

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

相关文章

服务器无法远程桌面连接,解决服务器进行无法远程桌面连接方法有哪些

当服务器无法建立远程桌面连接时&#xff0c;通常涉及多个层面的排查和修复。下面将详细列举一些专业的解决方法&#xff0c;以应对服务器远程桌面连接问题。 一、基础排查与验证 1. 确认网络连通性&#xff1a; - 使用ping命令检查客户端与服务器之间的网络连通性。 - …

3389端口修改工具,修改3389端口的操作

3389端口作为远程桌面协议&#xff08;RDP&#xff09;的默认端口&#xff0c;常常成为黑客攻击的目标。为了提高系统的安全性&#xff0c;修改3389端口成为一项重要的安全措施。本文将详细介绍如何使用3389端口修改工具进行专业操作&#xff0c;以确保系统的安全稳定。 一、备…

跟《经济学人》学英文:2024年6月8日这期:Part 01

本文是对《经济学人》杂志2024.6.8这期的英文学习。 Narendra Modi looks likely to serve a third term as India’s prime minister, after his Bharatiya Janata Party and its allies won a slim majority. The ruling alliance won 293 seats, compared with the opposi…

ios描述文件.mobileprovision 如何查看包含的设备 udid|IPA查看是否包含设备 UDID|轻松签查看证书是否包含自己设备 UDID

前言 之前蒲公英支持上传证书查看证书有效期和包含设备 【干货】IOS苹果P12证书有效性检测 及查看证书是否包含自己的设备 【干货】IOS苹果P12证书有效性检测 及查看证书是否包含自己的设备 - 路灯IT技术博客 - 后厂村路灯 如今蒲公英下架了该功能&#xff0c;已经没有证书检…

环境监控与管理平台

随着全球气候变化的日益严峻&#xff0c;环境监控与管理成为了当代社会不可或缺的重要任务。HiWoo Cloud平台&#xff0c;作为一款环境监控与管理平台&#xff0c;正以其卓越的性能、强大的功能和灵活的部署方式&#xff0c;为各行各业的环保事业提供强有力的技术支撑。 一、H…

Python写UI自动化--playwright(元素定位)

本篇详细分享playwright如何进行打断点、元素定位、填写输入框、点击等操作 目录 一、PyCharm打断点进行调试 二、浏览器开发者模式检查元素 三、通过CSS或XPath进行定位 四、输入框输入文本操作 五、点击操作 总结 一、PyCharm打断点进行调试 如图所示&#xff0c;我们…

高考志愿填报秘籍:大学篇

选择适合自己的大学和专业&#xff0c;对广大考生来说至关重要。从某种程度上来说&#xff0c;决定了考生未来所从事的行业和发展前景。为了帮助广大考生更加科学、合理地填报志愿&#xff0c;选择适合自己的大学和专业&#xff0c;本公众号将推出如何用AI填报高考志愿专栏文章…

vue-element-admin后台集成方案

官网&#xff1a;介绍 | vue-element-adminA magical vue adminhttps://panjiachen.github.io/vue-element-admin-site/zh/guide 1.git环境安装配置及简单操作 1.1git环境安装配置 git软件官网&#xff1a;Git - Downloads (git-scm.com)https://git-scm.com/downloads 下载…

python脚本实现arcgis离散型切片png格式十六进制名称转十进制名称

背景 Arcgis中离散型切片为png格式时,它的名称是十六进制格式的,而Arcgis不支持转为十进制格式的,所有需要自己写一个脚本来转换 效果 脚本 import osdef hex_to_dec(name):return str(int(name, 16))def

以bert为例,了解Lora是如何添加到模型中的

以bert为例,了解Lora是如何添加到模型中的 一.效果图1.torch.fx可视化A.添加前B.添加后 2.onnx可视化A.添加前B.添加后 3.tensorboard可视化A.添加前B.添加后 二.复现步骤1.生成配置文件(num_hidden_layers1)2.运行测试脚本 本文以bert为例,对比了添加Lora模块前后的网络结构图…

【Spine学习06】之IK约束绑定,制作人物待机动画,图表塞贝尔曲线优化动作

引入IK约束的概念&#xff1a; 约束目标父级 被约束骨骼子集 这样理解更好&#xff0c;约束目标可以控制被约束的两个骨骼运作 IK约束绑定过程中呢&#xff0c;如果直接绑定最下面的脚掌骨骼会发生偏移&#xff0c;所以在开始处理IK之前&#xff0c;需要先设置一个ROOT结点下的…

签到的二维码怎么制作?快速实现制作二维码签到的方法

现在很多活动会采用二维码的方式来做登记、报名、签到等&#xff0c;通过二维码可以快速获取用户信息&#xff0c;并且对于用户填写内容也提升了便利性&#xff0c;而且还能够节约成本&#xff0c;通过后台就可以查看用户登记的数据&#xff0c;方便后期的分析和信息管理。 想…

自监督分类网络:创新的端到端学习方法

现代人工智能的快速发展中&#xff0c;分类任务的高效解决方案一直备受关注。今天&#xff0c;我们向大家介绍一种名为Self-Classifier的全新自监督端到端分类学习方法。由Elad Amrani、Leonid Karlinsky和Alex Bronstein团队开发&#xff0c;Self-Classifier通过优化同一样本的…

【机器学习】QLoRA:基于PEFT亲手微调你的第一个AI大模型

目录 一、引言 二、量化与微调—原理剖析 2.1 为什么要量化微调? 2.2 量化&#xff08;Quantization&#xff09; 2.2.1 量化原理 2.2.2 量化代码 2.3 微调&#xff08;Fine-Tuning&#xff09; 2.3.1 LoRA 2.3.2 QLoRA 三、量化与微调—实战演练&#xff1a;以Qwen…

Photoshop 2024 mac/win版:探索图像处理的全新境界

Photoshop 2024是Adobe推出的最新图像处理与设计软件&#xff0c;它在继承了前作所有优秀特性的基础上&#xff0c;实现了多个方面的质的飞跃。这款软件凭借其卓越的图像处理性能、丰富的创意工具以及精确的选区编辑功能&#xff0c;成为了图像处理领域的佼佼者。 Photoshop 2…

Golang免杀-分离式加载器(传参)AES加密

目录 enc.go 生成: dec.go --执行dec.go...--上线 cs生成个c语言的shellcode. enc.go go run .\enc.go shellcode 生成: --key为公钥. --code为AES加密后的数据, ----此脚本每次运行key和code都会变化. package mainimport ("bytes""crypto/aes"&…

redis 08 慢查询日志

1.什么是慢查询日志 2.慢查询和两个参数有关 2.1 2.2 3.例子&#xff1a; 4 参数详细介绍&#xff1a;

共模信号与差模信号

差模信号又称串模信号&#xff0c;指的是两根线之间的信号差值&#xff1b;而共模信号又称对地信号&#xff0c;指的是两根线分别对地的信号。 差模信号&#xff1a;大小相等&#xff0c;方向相反的信号。共模信号&#xff1a;大小相等&#xff0c;方向相同的信号。 对于两输…

集合查询-并(UNION)集运算、交(INTERSECT)集运算、差(EXCEPT)集运算

一、概述 集合查询是对两个SELECT语句的查询结果进行再进行处理的查询 二、条件 1、两个SELECT语句的查询结果必须是属性列数目相同 2、两个SELECT语句的查询结果必须是对应位置上的属性列必须是相同的数据类型 三、并(UNION)运算 1、语法格式&#xff1a; SELECT 语句1…

4090显卡 安装cuda 11.3 版本

文章目录 cuda 安装安装过程中会要求选择安装的内容更改cuda地址到你安装的地方 cuda 安装 cuda官网寻找cuda11.3 版本 https://developer.nvidia.com/cuda-11.3.0-download-archive?target_osLinux&target_archx86_64&DistributionUbuntu&target_version20.04&…