HTML基础--标签

目录

列表标签

有序列表

type属性

有序列表嵌套

 无序列表

type属性

无序列表嵌套

常见应用场景

表格标签

表格展示效果

表格属性

 表格单元格合并

单元格合并属性


列表标签

HTL作为构建网页内容的标记语言,提供了多种列表标签,用于在网页中展示不同类型的信息。在本篇博客中,我们将深入了解无序列表、有序列表和定义列表这三种主要的HTML列表标签,以及它们的用法和示例。

有序列表

有序列表是一列项目,列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

type属性

<ol>的属性type 拥有的选项

  1. 1 表示列表项目用数字标号(1,2,3...)
  2. a 表示列表项目用小写字母标号(a,b,c...)
  3. A 表示列表项目用大写字母标号(A,B,C...)
  4. i 表示列表项目用小写罗马数字标号(i,ii,iii...)
  5. I 表示列表项目用大写罗马数字标号(I,II,III...)

有序列表嵌套

列表是可以进行嵌套的

<ol>
  <li>csdn</li>
  <li>
    <ol>
      <li>博客主页</li>
      <li>编写文章</li>
    </ol>
  </li>
  <li>创作者</li>
</ol>

 无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记

无序列表始于 <ul> 标签。每个列表项始于<li> 标签。

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

type属性

<ul>的属性type 拥有的选项

  • disc 默认实心圆
  • circle 空心圆
  • square 小方块
  • none 不显示

无序列表嵌套

列表是可以进行嵌套的

<ul>
  <li>csdn</li>
  <li>
    <ul>
      <li>播客主页</li>
      <li>编写文章</li>
    </ul>
  </li>
  <li>创作者</li>
</ul>

常见应用场景

  1. 无序的列表效果
  2. 导航效果
<ul>
  <li>Xiaomi手机</li>
  <li>Redmi 红米</li>
  <li>电视</li>
  <li>笔记本</li>
</ul>

image-20211016124431658

快捷键

快速生成ul+li的布局:ul>li*3(数字根据自己的需要的li数量修改)

表格标签

表格展示效果

表格在数据展示方面非常简单,并且表现优秀

image-20211016145021813

表格组成与特点

行、列、单元格

单元格特点:同行等高、同列等宽。


表格标签

表格:<table>

行:<tr>

单元格(列):<td>

表格 (<table>): 表格标签定义了整个表格的开始和结束。

<table>
    <!-- 表格内容将在这里添加 -->
</table>

 表格行 (<tr>): 表格行标签定义了表格中的一行数据。

<table>
    <tr>
        <!-- 行中的单元格将在这里添加 -->
    </tr>
</table>

表格标题 (<caption>): 表格标题标签用于为整个表格添加标题,位于表格标签之后。

<table>
    <caption>这是表格标题</caption>
    <!-- 表格内容将在这里添加 -->
</table>

 表格头部 (<thead>)、表格主体 (<tbody>)、表格底部 (<tfoot>): 这些标签用于将表格内容分为不同的部分,其中<thead>用于表头,<tbody>用于表格主体,<tfoot>用于表格底部。

<table>
    <thead>
        <tr>
            <!-- 表头单元格内容 -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- 主体单元格内容 -->
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <!-- 底部单元格内容 -->
        </tr>
    </tfoot>
</table>

 表格单元格 (<td>) 和 表头单元格 (<th>): <td>标签用于定义表格中的普通单元格,而<th>标签用于定义表头单元格,通常加粗显示。

<table>
  <tr>
    <td>csdn</td>
    <td>博客主页</td>
  </tr>
  <tr>
    <td>阿里云</td>
    <td>腾讯云</td>
  </tr>
</table>

快捷键

快速生成表格结构:table>tr*2>td{单元格}

表格属性

  1. border:设置表格的边框
  2. width:设置表格的宽度
  3. height:设置表格的高度

 表格单元格合并

单元格合并属性

image-20211124133917914

  • 水平合并:colspan
  • 垂直合并:rowspan
<table border="1" width="500px" height="200px">
  <tr>
    <td colspan="3">单元格1单元格2单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
  <tr>
    <td rowspan="2">单元格6-11</td>
    <td>单元格7</td>
    <td rowspan="3">单元格81318</td>
    <td colspan="2" rowspan="2">单元格9101415</td>
  </tr>
  <tr>
    <td>单元格12</td>
  </tr>
  <tr>
    <td>单元格16</td>
    <td>单元格17</td>
    <td>单元格19</td>
    <td>单元格20</td>
  </tr>
</table>

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

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

相关文章

如何使用CSS实现一个3D旋转效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 3D效果实现⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域…

实战教学:农产品小程序商城的搭建与运营

随着移动设备的普及和互联网技术的发展&#xff0c;小程序商城已经成为农产品销售的一种新兴渠道。本文将以乔拓云网为平台&#xff0c;详细介绍如何搭建和运营农产品小程序商城。 步骤一&#xff1a;登录乔拓云网后台 首先&#xff0c;进入乔拓云网站后台&#xff0c;找到并点…

Vite打包性能优化及填坑

最近在使用 Vite4.0 构建一个中型前端项目的过程中&#xff0c;遇到了一些坑&#xff0c;也做了一些项目在构建生产环境时的优化&#xff0c;在这里做一个记录&#xff0c;以便后期查阅。(完整配置在后面) 上面是dist文件夹的截图&#xff0c;里面的内容已经有30mb了&#xff…

LNMP 平台搭建(四十)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 搭建LNMP 一、安装Nginx 二、安装Mysql 三、安装PHP 四、部署应用 前言 LNMP平台指的是将Linux、Nginx、MySQL和PHP&#xff08;或者其他的编程语言&#xff0c;如…

成都智慧企业发展研究院总经理郑小华:践行双轮驱动,为能源电力数智化注入新活力丨数据猿专访...

大数据产业创新服务媒体 ——聚焦数据 改变商业 随着全球经济走向数字化&#xff0c;中国正处于这一浪潮的前沿&#xff0c;进行前所未有的技术与产业深度融合。政府在2023年2月印发的《数字中国建设整体布局规划》等政策下&#xff0c;明确展示了对数字经济的支持与鼓励&…

基于“R语言+遥感“水环境综合评价方法教程

详情点击链接&#xff1a;基于"R语言遥感"水环境综合评价方法教程 一&#xff1a;R语言 1.1 R语言特点&#xff08;R语言&#xff09; 1.2 安装R&#xff08;R语言&#xff09; 1.3 安装RStudio&#xff08;R语言&#xff09; &#xff08;1&#xff09;下载地址…

Android studio实现圆形进度条

参考博客 效果图 MainActivity import androidx.appcompat.app.AppCompatActivity; import android.graphics.Color; import android.os.Bundle; import android.widget.TextView;import java.util.Timer; import java.util.TimerTask;public class MainActivity extends App…

rknn_toolkit以及rknpu环境搭建-rv1126

rknn_toolkit安装------------------------------------------------------------------------------- 环境要求&#xff1a;ubutu18.04 建议使用docker镜像 安装docker 参考https://zhuanlan.zhihu.com/p/143156163 镜像地址 百度企业网盘-企业云盘-企业云存储解决方案-同…

Vue3.0 新特性以及使用变更总结

Vue3.0 在2020年9月正式发布了&#xff0c;也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发&#xff0c;这篇文章就是在使用后的一个总结&#xff0c; 包含Vue3新特性的使用以及一些用法上的变更。 图片.png 为什么要升级Vue3 使用Vue2.x的小伙伴都熟悉…

【python爬虫】4.爬虫实操(菜品爬取)

文章目录 前言项目&#xff1a;解密吴氏私厨分析过程代码实现&#xff08;一&#xff09;获取与解析提取最小父级标签一组菜名、URL、食材写循环&#xff0c;存列表 代码实现&#xff08;二&#xff09;复习总结 前言 上一关&#xff0c;我们学习了用BeautifulSoup库解析数据和…

【Linux】基础IO

目录 一、回顾C语言文件操作二、文件系统调用接口1. open2.write3.read 三、文件描述符四、重定向1.输出重定向2.输入重定向 五、dup2 一、回顾C语言文件操作 1 #include<stdio.h>2 #include<stdlib.h>3 4 #define LOG "log.txt"5 6 int main()7 {8 //…

nacos闪退等环境问题解决

nacos闪退&#xff1a;通常是jdk环境变量配置有问题&#xff0c;nacos获取不到环境变量所以闪退。因为nacos的启动文件会获取JAVA_HOME&#xff0c;如果配置的不对&#xff0c;会直接闪退。如图所示&#xff0c;nacos启动文件最开始就是获取环境变量&#xff0c;获取不到就提示…

7.Redis-list

list list常用命令lpushlrangelpushxrpushrpushxlpop / rpoplindexlinsertllenlremltrimlset 阻塞版本命令blpop/brpop 总结内部编码应用场景使用redis作为消息队列 redis中的 list 是一个双端队列, list 相当于是数组或者顺序表。list 并非是一个简单的数组&#xff0c;而是更…

宠物赛道,用AI定制宠物头像搞钱项目教程

今天给大家介绍一个非常有趣&#xff0c;而粉丝价值又极高&#xff0c;用AI去定制宠物头像或合照的AI项目。 接触过宠物行业应该知道&#xff0c;获取1位铲屎官到私域&#xff0c;这类用户的价值是极高的&#xff0c;一个宠物粉&#xff0c;是连铲个屎都要花钱的&#xff0c;每…

context.WithCancel()的使用

“ WithCancel可以将一个Context包装为cancelCtx,并提供一个取消函数,调用这个取消函数,可以Cancel对应的Context Go语言context包-cancelCtx[1] 疑问 context.WithCancel()取消机制的理解[2] 父母5s钟后出门&#xff0c;倒计时&#xff0c;父母在时要学习&#xff0c;父母一走…

计算机视觉的应用12-卷积神经网络中图像特征提取的可视化研究,让大家理解特征提取的全过程

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用12-卷积神经网络中图像特征提取的可视化研究&#xff0c;让大家理解特征提取的全过程。 要理解卷积神经网络中图像特征提取的全过程&#xff0c;我们可以将其比喻为人脑对视觉信息的处理过程。就像…

qt day

#include "widget.h" #include "ui_widget.h" void Widget::my_slot() {} Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);this->setWindowIcon(QIcon(":/wodepeizhenshi.png"));//設置窗口的…

数据结构(Java实现)-二叉树(上)

树型结构 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#xff0c;称为根结点&…

docker高级(DockerFile解析)

1、构建三步骤 编写Dockerfile文件 docker build命令构建镜像 docker run依镜像运行容器实例 2、DockerFile构建过程解析 Dockerfile内容基础知识 1&#xff1a;每条保留字指令都必须为大写字母且后面要跟随至少一个参数 2&#xff1a;指令按照从上到下&#xff0c;顺序执行…

编程题四大算法思想(二)——回溯法:N皇后问题、子集和问题、地图填色问题、迷宫问题

文章目录 回溯法迷宫游戏 N皇后问题基本概念解空间4后问题的解空间 可行解和最优解回溯法回溯法术语回溯法的关键问题回溯法的基本思想4后问题的约束条件n后问题生成问题状态的基本方法 子集和问题一个朴素的求解方法回溯回溯法的剪枝技术 地图填色问题 回溯法 迷宫游戏 深度优…