html5——列表、表格

目录

列表 

无序列表

有序列表

自定义列表

表格 

基本结构 

示例 

表格的跨列 

表格的跨行 


列表 

无序列表

<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.mfbz.cn/a/797987.html

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

相关文章

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

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

升级到LVGL9的一些变化(后续发现再补充)

目录 一、主要内容 二、新增内容 三、常规API变化 四、Display API(显示API) 五、其他 最近在将LVGL8的demo代码升级到LVGL9,带来不小的变化 ,收集网上的一些内容,整理如下: 一、主要内容 二、新增内容 三、常规API变化 四、Display API(显示API)

3.4、matlab实现SGM/BM/SAD立体匹配算法计算视差图

1、matlab实现SGM/BM/SAD立体匹配算法计算视差图简介 SGM&#xff08;Semi-Global Matching&#xff09;、BM&#xff08;Block Matching&#xff09;和SAD&#xff08;Sum of Absolute Differences&#xff09;都是用于计算立体匹配&#xff08;Stereo Matching&#xff09;的…

python基础语法 005 函数1-2 函数作用域

1 函数续 1.7 函数作用域 1.7.1 全局变量 定义在函数外部的变量全局变量在函数内部和函数外部都可以访问使用 a 100 def run():print("a {}".format(a))print(a) print(run())1.7.2 局部变量 函数是一个黑盒子&#xff0c;外面看不到盒子里面的东西&#xff0…

vue-router history 模式下将所有资源文件js/css/img都存放在oss 利用 cdn 访问整体思路汇总

背景 我们有一个域名https://example.com&#xff0c;但是ssl证书很贵&#xff0c;搞子域名来承接新站点有点费钱&#xff0c;所以我们想用一个目录https://example.com/admin/ 来作为管理后台的站点&#xff0c;这个站点是单页面应用&#xff0c;我又想让其用history router的…

AI为ToB企业节省大量隐性成本

前些天&#xff0c;在向朋友介绍“客户在哪儿AI”时&#xff0c;我着重说了它效果最为显著的两个功能&#xff0c;即&#xff0c;为ToB企业指明在哪儿能准确的找到客户和该场景下的最佳营销策略&#xff0c;以及深入洞察竞争对手并找到最佳竞争策略。 当我说完这两个核心功能的…

各向异性含水层中地下水三维流基本微分方程的推导(二)

各向异性含水层中地下水三维流基本微分方程的推导 参考文献&#xff1a; [1] 刘欣怡,付小莉.论连续性方程的推导及几种形式转换的方法[J].力学与实践,2023,45(02):469-474. 书接上回&#xff1a; 我们能得到三个方向的流入流出平衡方程&#xff1a; ∂ ρ u x ∂ x d x d y d…

YOWOv2(yowov2)动作识别+Fastreid身份识别 详细安装与实现

首先yowov2是一款简单且实时的时空动作检测方案&#xff0c;fastreid是行人重识别&#xff08;身份识别&#xff09; yowov2介绍链接直达fastreid链接直达为时空动作检测任务设计实时框架仍然是一个挑战。YOWOv2 提出了一种新颖的实时动作检测框架&#xff0c;利用三维骨干和二…

[web]-sql注入-白云搜索引擎

ctrlu查看源代码&#xff0c;发现前端有js过滤 <script>function myFunction(){var xdocument.getElementById("number").value;var adocument.getElementById("word").value;var ba.replace(/[\ |\~|\|\!|\|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\|\…

如何写论文的讨论和结论部分,提升审稿通过率300%?(附例句模版)

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 关于论文讨论Discussion部分的撰写&#xff0c;娜姐之前写过几篇文章&#xff1a; 1 Discussion讨论部分被3个审稿人说没深度没逻辑&#xff0c;用这个AI工具三步拯救了我&am…

【ingress-nginx】安装配置及Helm工具安装

【ingress-nginx】安装配置及Helm工具安装 安装时候需要用到一个工具——Helm【相当于linux中的yum工具】。 一&#xff0c;Helm安装 官网&#xff1a;https://helm.sh/docs/intro/install # 下载 wget https://get.helm.sh/helm-v3.2.3-linux-amd64.tar.gz# 解压 tar -zxv…

78. UE5 RPG 创建技能数据并初始化技能ui

在上一篇文章里&#xff0c;我们创建了技能的UI&#xff0c;接下来&#xff0c;我们要考虑如何实现对技能UI的填充&#xff0c;肯定不能直接写死&#xff0c;需要有一些方法去实现技能的更新。我们期望能够创建一个技能数据&#xff0c;然后根据数据通过回调的方式实现数据的更…

免费的ssh工具

1.Quickstart - kitty 2 Download Termius for Windows 3. MobaXterm Xserver with SSH, telnet, RDP, VNC and X11 - Download

Qt MV架构-视图类

一、基本概念 在MV架构中&#xff0c;视图包含了模型中的数据项&#xff0c;并将它们呈现给用户。数据项的表示方法&#xff0c;可能和数据项在存储时用的数据结构完全不同。 这种内容与表现分离之所以能够实现&#xff0c;是因为使用了 QAbstractItemModel提供的一个标准模…

EasyExcel批量读取Excel文件数据导入到MySQL表中

1、EasyExcel简介 官网&#xff1a;EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 官网 2、代码实战 首先引入jar包 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.3.2</v…

基于FPGA的千兆以太网设计(1)----大白话解释什么是以太网

1、什么是以太网? 还记得初学以太网的时候,我就被一大堆专业名词给整懵了:什么以太网,互联网,MAC,IP,局域网,万维网,网络分层模型等等等等。慢着!我学的不是以太网吗?怎么出来这么一大堆东西? 啊!以太网究竟是什么?别急,我接下来就尽量用通俗的大白话来给你解释…

Phpstudy 2018 之xhcms搭建

1、由于直接访问根目录无法进入网站 2、所以采用搭建网站&#xff0c;第一使用系统服务模式、选择php-5.4.45Apache模式 3、网站域名为本地ip地址或者127.0.0.1、端口8085 4、浏览器输入127.0.0.1:8085直接转到系统安装 5、返回输入127.0.0.1:8085&#xff0c;成功进入网站

前端JS特效第36波:jQ多种相册切换效果

jQ多种相册切换效果&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"h…

Mac安装stable diffusion 工具

文章目录 1.安装 Homebrew2.安装 stable diffusion webui 的依赖3.下载 stable diffusion webui 代码4.启动 stable diffusion webui 本体5.下载模型6.这里可能会遇到一个clip-vit-large-patch14报错 参考&#xff1a;https://brew.idayer.com/install/stable-diffusion-webui/…

[ruby on rails]部署时候产生ActiveRecord::PreparedStatementCacheExpired错误的原因及解决方法

一、问题&#xff1a; 有时在 Postgres 上部署 Rails 应用程序时&#xff0c;可能会看到 ActiveRecord::PreparedStatementCacheExpired 错误。仅当在部署中运行迁移时才会发生这种情况。发生这种情况是因为 Rails 利用 Postgres 的缓存准备语句(PreparedStatementCache)功能来…