html5——列表、表格

news2024/11/14 13:27:55

目录

列表 

无序列表

有序列表

自定义列表

表格 

基本结构 

示例 

表格的跨列 

表格的跨行 


列表 

无序列表

<ul>【声明无序列表】

      <li>河间驴肉火烧</li>【声明列表项】

      <li>唐山棋子烧饼</li>

      <li>邯郸豆沫</li>

      <li>石家庄金毛狮子鱼</li>

 </ul>

 

无序列表的特性:

  1. 没有顺序,每个<li>标签独占一行(块元素) 
  2. 默认<li>标签项前面有个实心小圆点
  3. 一般用于无序类型的列表,如导航、侧边栏新闻、有规律    的图文组合模块等

有序列表

<ol>【声明有序列表】

  <li>驴肉火烧</li>【声明列表项】

  <li>京东煨肘子</li>

  <li>牛肉罩饼</li>

  <li>缸炉烧饼</li>

</ol>

有序列表的特性:

  1. 有顺序,每个<li>标签独占一行(块元素) 
  2. 默认<li>标签项前面有顺序标记
  3. 一般用于排序类型的列表,如试卷、问卷选项等

自定义列表

<dl>【声明定义列表】

    <dt>水果</dt>【声明列表项】

    <dd>苹果</dd>【定义列表项内容】

    <dd>桃子</dd>

    <dd>李子</dd>

</dl>

 定义列表的特性:

  1. 没有顺序,每个<dt>标签、<dd>标签独占一行(块元素)
  2. 默认没有标记
  3. 一般用于一个标题下有一个或多个列表项的情况

表格 

基本结构 

  • 单元格 
  •  

示例 

<table>【表格标签】

    <tr>【行标签】

         <th>11列的标题</th>【单元格标题标签】

         <th>12列的标题</th>

    </tr>

    <tr>

         <td>11列的单元格</td>【单元格标签】

         <td>12列的单元格</td>

    </tr>

</table>

表格的跨列 

<table>

  <tr>

    <td colspan="2">学生成绩</td>【所跨的列数】

  </tr>

  <tr>

    <td>语文</td>

  <td>98</td>

  </tr>

  <tr>

<td>数学</td>

<td>95</td>

</tr>

</table>

 

表格的跨行 

<table >

  <tr>

    <td rowspan="n">&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

  </tr>

</table>

 

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

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

相关文章

pyinstaller教程(二)-快速使用(打包python程序为exe)

1.介绍 PyInstaller 是一个强大的 Python 打包工具&#xff0c;可以将 Python 程序打包成独立的可执行文件。以下会基于如何在win系统上将python程序打包为exe可执行程序为例&#xff0c;介绍安装方式、快速使用、注意事项以及特别用法。 2.安装方式 通过 pip 安装 PyInstal…

随笔-不是来养老的吗

来了有一个多月了&#xff0c;日子过得飞快。都以为我来养老的&#xff0c;一开始我也这么认为&#xff0c;结果6月份的日均工时&#xff0c;排在了部门第一。一个月做的需求比之前的三个月都多。 来之前&#xff0c;老徐让我多承担点&#xff0c;想着能有多少活嘛&#xff0c…

QT TCP多线程网络通信

学习目标&#xff1a; TCP网络通信编程 学习前置环境 运行环境:qt creator 4.12 QT TCP网络通信编程-CSDN博客 Qt 线程 QThread类详解-CSDN博客 学习内容 使用多线程技术实现服务端计数器 核心代码 客户端 客户端&#xff1a;负责连接服务端&#xff0c;每次连接次数1。…

sklearn之神经网络学习算法

文章目录 什么是神经网络人工神经网络的结构输入层输出层隐含层神经元的链接 近几年深度学习还是比较火的&#xff0c;尤其是在大语言模型之后&#xff0c;在本质上深度学习网络就是层数比较多的神经网络。sklearn并不支持深度学习&#xff0c;但是支持多层感知机&#xff08;浅…

安全测试理论

安全测试理论 什么是安全测试&#xff1f; 安全测试&#xff1a;发现系统安全隐患的过程安全测试与传统测试区别 传统测试&#xff1a;发现bug为目的 安全测试&#xff1a;发现系统安全隐患什么是渗透测试 渗透测试&#xff1a;已成功入侵系统为目标的的攻击过程渗透测试与安全…

自动驾驶事故频发,安全痛点在哪里?

大数据产业创新服务媒体 ——聚焦数据 改变商业 近日&#xff0c;武汉城市留言板上出现了多条关于萝卜快跑的投诉&#xff0c;多名市民反映萝卜快跑出现无故停在马路中间、高架上占最左道低速行驶、转弯卡着不动等情况&#xff0c;导致早晚高峰时段出现拥堵。萝卜快跑是百度 A…

配置与管理Samba服务器(详细教程)

目录 一、基础理论 二、samba工作流程 三、项目实训 3.1目的 3.2准备工作 3.2.1服务器安装samba服务软件包 3.2.2客户端安装软件包 3.3配置Samba服务 3.3.1开启Samba服务&#xff0c;并设置开启自启动 3.3.2创建共享文件夹 3.3.3创建群组 3.3.4修改文件用户权限 3.3.5修改…

LabVIEW人工模拟肺控制系统开发

开发了一种创新的主被动一体式人工模拟肺模型&#xff0c;通过LabVIEW开发的上位机软件&#xff0c;实现了步进电机驱动系统的精确控制和多种呼吸模式的模拟。该系统不仅能够在主动呼吸模式下精确模拟快速呼吸、平静呼吸和深度呼吸&#xff0c;还能在被动模式下通过PID控制实现…

训练CDN基础代码

文章目录 时间整体流程训练细节小结 时间 从开始在平台上搭建到现在可以在平台上训练已经4天了 有GPU平台一般是autoDL平台&#xff0c;白嫖200元平台是&#xff1a;https://cloud.lanyun.net/ 整体流程 1.注册平台&#xff0c;以蓝耘为例子 卡从好变坏依次是&#xff1a;…

C语言:指针详解(5)

目录 一、sizeof()函数和strlen()函数的对比 1.sizeof()函数 2.strlen()函数 3.sizeof()函数和strlen()函数的对比 二、数组和指针笔试试题解析 1.一维数组 2.字符数组 &#xff08;1&#xff09;代码1 &#xff08;2&#xff09;代码2 &#xff08;3&#xff09;代码…

【数组、特殊矩阵的压缩存储】

目录 一、数组1.1、一维数组1.1.1 、一维数组的定义方式1.1.2、一维数组的数组名 1.2、二维数组1.2.1、二维数组的定义方式1.2.2、二维数组的数组名 二、对称矩阵的压缩存储三、三角矩阵的压缩存储四、三对角矩阵的压缩存储五、稀疏矩阵的压缩存储 一、数组 概述&#xff1a;数…

香橙派AIpro:体验强劲算力,运行ROS系统

文章目录 前言一、香橙派AIpro开箱及功能介绍1.1香橙派AIpro开箱1.2香橙派AIpro功能介绍 二、香橙派AIpro资料下载及环境搭建2.1资料下载2.2环境搭建2.3使用串口启动进入开发板2.4使用HDMI线接入屏幕启动 三、部署ROS系统四、香橙派AIpro的使用和体验感受 前言 本篇文章将带体…

sip协议栈简介

SIP协议栈简介 SIP协议栈流程 数据链路层&#xff1a;当SIP消息从网络中传输到达TCP/IP协议栈时&#xff0c;首先被接收到的是数据链路层的数据帧。数据链路层会对数据帧进行解封装&#xff0c;得到网络层的IP数据报。 网络层&#xff1a;网络层会对IP数据报进行解析&#xf…

js实现 JSON数据格式化的两种方法

本次方法不使用JS库直接采用原生JS 完整HTML代码如下&#xff0c;您可以复制代码然后&#xff0c;新建一个.html的网页进行保存即可体验 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><b…

Xcode 16 beta3 真机调试找不到 Apple Watch 的尝试解决

很多小伙伴们想用 Xcode 在 Apple Watch 真机上调试运行 App 时却发现&#xff1a;在 Xcode 设备管理器中压根找不到对应的 Apple Watch 设备。 大家是否已将 Apple Watch 和 Mac 都重启一万多遍了&#xff0c;还是束手无策。 Apple Watch not showing in XCodeApple Watch wo…

android13 文件管理器无法安装apk 奔溃问题

总纲 android13 rom 开发总纲说明 目录 1.前言 2.我们简单写个apk测试下 3.排查客户apk 4.frameworks源码排查 5.编译验证 6.彩蛋 1.前言 客户提供的文件管理apk不能安装apk文件,一点击就奔溃。 2.我们简单写个apk测试下 private void installApk(File apkFile) {i…

从0开始学习informer

目录 informer特点informer原理attention计算KL散度 backbone网络部分encoder输入输出部分embadding这里就不讲了 和transfomer一样EncoderStack decoder部分接下来就是最关键的结构 关于如何将输入经过注意力得到结果 结束&#xff0c;代码会放到下一篇讲 这里是原理 informer…

[Vulnhub] Sedna BuilderEngine-CMS+Kernel权限提升

信息收集 IP AddressOpening Ports192.168.8.104TCP:22, 53, 80, 110, 111, 139, 143, 445, 993, 995, 8080, 55679 $ nmap -p- 192.168.8.104 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 6.6.1p1 Ubuntu 2ubuntu2 …

PTX入门教程与实战

PTX入门教程 官方文档的目录结构 1 PTX指令 官方文档链接 1.1 指令形式 指令的操作数个数从0-4不等&#xff0c;其中d代表的是目的操作数&#xff0c;a,b,c是源操作数 p opcode;p opcode a;p opcode d, a;p opcode d, a, b;p opcode d, a, b, c;2 编程模型 2.…

人工智能算法工程师(中级)课程9-PyTorch神经网络之全连接神经网络实战与代码详解

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程9-PyTorch神经网络之全连接神经网络实战与代码详解。本文将给大家展示全连接神经网络与代码详解&#xff0c;包括全连接模型的设计、数学原理介绍&#xff0c;并从手写数字识别到猫狗识…