HTML基础--标签

目录

列表标签

有序列表

type属性

有序列表嵌套

 无序列表

type属性

无序列表嵌套

常见应用场景

表格标签

表格展示效果

表格属性

 表格单元格合并

单元格合并属性

---

列表标签

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

有序列表

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于

 标签。每个列表项始于 
1. 标签。

   
       
   第一项
       
   第二项
       
   第三项
   
   

   type属性

   的属性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...）

   有序列表嵌套

   列表是可以进行嵌套的

   
     
   csdn
     
   
       
   
         
   博客主页
         
   编写文章
       
     
     
   创作者
   
   

    无序列表

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

   无序列表始于 

    标签。每个列表项始于
   •  标签。

     
         
     第一项
         
     第二项
         
     第三项
     
     

     type属性

     的属性type 拥有的选项
     • disc 默认实心圆
     • circle 空心圆
     • square 小方块
     • none 不显示

     无序列表嵌套

     列表是可以进行嵌套的

     
       
     csdn
       
     
         
     
           
     播客主页
           
     编写文章
         
       
       
     创作者
     
     

     常见应用场景

     1. 无序的列表效果
     2. 导航效果

     
       
     Xiaomi手机
       
     Redmi 红米
       
     电视
       
     笔记本
     
     

     

     快捷键

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

     表格标签

     表格展示效果

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

     

     表格组成与特点

     行、列、单元格

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

     ---

     表格标签

     表格：

     行：

     单元格(列)：

     )： 表格行标签定义了表格中的一行数据。

     表格 ( )： 表格标签定义了整个表格的开始和结束。  表格行 (

     表格标题 ()： 表格标题标签用于为整个表格添加标题，位于表格标签之后。

     
         
     这是表格标题
         
     
     

      表格头部 ()、表格主体 ()、表格底部 ()： 这些标签用于将表格内容分为不同的部分，其中用于表头，用于表格主体，用于表格底部。

      表格单元格 () 和 表头单元格 ()： 标签用于定义表格中的普通单元格，而标签用于定义表头单元格，通常加粗显示。

     
       
     
         
     csdn
         
     博客主页
       
       
     
         
     阿里云
         
     腾讯云
       
     
     

     快捷键

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

     表格属性

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

      表格单元格合并

     单元格合并属性

     

     • 水平合并：colspan
     • 垂直合并：rowspan

     
       
     
         
     单元格1单元格2单元格3
         
     单元格4
         
     单元格5
       
       
     
         
     单元格6-11
         
     单元格7
         
     单元格81318
         
     单元格9101415
       
       
     
         
     单元格12
       
       
     
         
     单元格16
         
     单元格17
         
     单元格19
         
     单元格20