HTML中的table标签与a标签

news2024/11/16 17:36:47

这里写自定义目录标题

  • 一、table标签
    • 1、什么是table标签
    • 2、table标签中长见到的标签
    • 3、例子代码及其结果
  • 二、a标签
    • 1、什么是a标签
    • 2、a标签中常见的属性
    • 3、例子代码及其结果

一、table标签

1、什么是table标签

table标签表示整体的一个表格

2、table标签中长见到的标签

<tr>表示表格的一行
<td>表示表格的一个单元格
<thead>语义化标签,能让人直接看懂这是表头
<tbody>语义化标签,表身的意思
<td colspan="4">表示将4列合成1列
<td rewspan="2">表示将2行合成1行

3、例子代码及其结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>表格标签</title>
</head>

<body>
    <h1>用户信息</h1>
    <table border="1" withd="800" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <td>用户名称</td>
                <td>用户性别</td>
                <td>用户年龄</td>
                <td>用户邮箱</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>张三</td>
                <td></td>
                <td rowspan="2">18</td>
                <td>123456789@qq.com</td>
            </tr>

            <tr>
                <td>张三</td>
                <td></td>
                <!-- <td>18</td> -->
                <td>123456789@qq.com</td>
            </tr>

            <tr>
                <td colspan="4">总结:2人</td> 

            </tr>
        </tbody>
    </table>
</body>

</html>

在这里插入图片描述

二、a标签

1、什么是a标签

a标签又叫超链接标签,实现页面间的跳转和数据传输。

2、a标签中常见的属性

href属性:跳转的路径(URL)
target属性:默认值是"_self"
在a链接中没有href属性相当于span

<a href=" ">中href什么都不写,默认值是本页面的地址。或者写#号,页面是不跳转的。

3、例子代码及其结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
    <h1>超链接标签</h1>
    <a href="http://www.baidu.com" title="标签">百度</a>
    <a href="https://www.sina.com.cn" target="_blank">新浪</a>
    <!-- 也可以是本地页面 -->
    <a href="D:\Microsoft VS CodeCode\图片标签.html">图片</a>
    <a href=""></a>
</body>
</html>

在这里插入图片描述

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

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

相关文章

基于Spring Boot和Spring Cloud实现微服务架构

首先&#xff0c;最想说的是&#xff0c;当你要学习一套最新的技术时&#xff0c;官网的英文文档是学习的最佳渠道。因为网上流传的多数资料是官网翻译而来&#xff0c;很多描述的重点也都偏向于作者自身碰到的问题&#xff0c;这样就很容易让你理解和操作出现偏差&#xff0c;…

采用特殊硬件指令对密码学算法加速

1. 引言 Armando Faz-Hermandez等人2018年论文《SoK: A Performance Evaluation of Cryptographic Instruction Sets on Modern Architectures》&#xff0c;开源代码见&#xff1a; https://github.com/armfazh/flo-shani-aesni&#xff08;C语言&#xff09; slide见&…

Java高手速成 | 多态性实战

多态性&#xff08;polymorphism&#xff09;是OOP最强大、最有用的特性。截至目前&#xff0c;多态性用到了所讲的所有其他OOP概念和特性。在通向精通Java语言编程的征程上&#xff0c;多态性是最高级别概念站点。 一个对象具有跟另一不同类的对象一样的行为&#xff0c;或者具…

QT5.14.2使用回顾

前面已有博客介绍了QT的安装和配置VS2019配置Qt5.14.2以及在线配置Qt5.15.2&#xff0c;这里再接着该版本说明下QT的使用&#xff0c;主要是汇总下之前博客中的内容&#xff1a;Ubuntu下的基本知识点&#xff08;二&#xff09;QT4.8.6工程到QT5.12.1的迁移注意前面安装时候&am…

小程序开发超好用的UI组件——Vant Weapp

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库&#xff0c;助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议&#xff0c;对商业使用比较友好,官网地址&#xff1a;https://vant-contrib.gitee.io/vant-weapp/#/home 安装 Vant 组件库 在小程序项目中&a…

设计模式学习(十):lterator迭代器模式

一、什么是Iterator模式使用Java语言显示数组arr中的元素时&#xff0c;我们可以使用下面这样的for循环语句遍历数组。for (int i 0; i < arr.length; i){system.out.println(arr[i]); }请注意这段代码中的循环变量i。该变量的初始值是o&#xff0c;然后会递增为1,2&#x…

halo 1.4.17 使用Mysql 安装与配置

1 下载代码 https://github.com/halo-dev/halo/archive/refs/tags/v1.4.17.zip 2 查看1.4版本文档 https://docs.halo.run/1.4/ 1.3 使用idea打开并设置jdk 11 1.4 将h2配置成为mysql 修改前 修改后 1.5 打包成jar halo使用的是Gradle&#xff0c;打包时&#xff0c…

微软官宣裁员 10000 人。分享一些我的建议给大家

大家好&#xff01;我是韩老师。昨天&#xff0c;西雅图双雄经历着不眠之夜。早些时间&#xff0c;就有传言说 1 月 18 日&#xff0c;亚马逊会裁员 18000 人。微软要裁员的各种消息也是满天飞。北京时间昨天晚上&#xff0c;微软官方博客发了一篇标题为 Focusing on our short…

10. 元组tuple类型详解

python3 tuple类型的使用 1. 基本知识 a. 元组&#xff08;tuple&#xff09;与列表类似, 不同之处在于元组的元素(项)不能修改。 b. 元组写在小括号 () 里&#xff0c;元素之间用逗号隔开。 c. 元组中的元素类型也可以不相同。 d. 构造包含0个或1个元素的元组比较特殊, 所以…

自增主键为什么不是连续的?

在前面文章中,我们提到过自增主键,由于自增主键可以让主键索引尽量地保持递增顺序插入,避免了页分裂,因此索引更紧凑。 之前我见过有的业务设计依赖于自增主键的连续性,也就是说,这个设计假设自增主键是连续的。但实际上,这样的假设是错的,因为自增主键不能保证连续递…

【深度学习数学基础之线性代数】研究使用链式法则进行反向传播的求导算法

链式法则 简单的说链式法则就是原本y对x求偏导&#xff0c;但是由于过程较为复杂&#xff0c;我们需要将函数进行拆分&#xff0c;通过链式进行分别求导&#xff0c;这样会使整个计算更为简单。 假设f k ( a b c ) f k(a bc)fk(abc) 通俗来说&#xff0c;链式法则表明&a…

宝贝代码部署笔记

记录前后端分离项目部署到云服务器 文章目录1. 启动数据库2. 创建数据库3. 阿里云开放后端项目端口4. 运行SQL文件5. 打包前端文件6. 服务端创建文件夹7. 打包后端jar包8. 安装配置Nginx服务器9. 启动Tomcat10. 项目文件上传部署1. 启动数据库 使用命令cd /opt/mysql/support-…

Generative Adversarial Network (GANs) 对抗神经网络 基础 第一部分

Generative Adversarial Network (GANs) 对抗神经网络 基础 第一部分 定义 Definition Discriminative model&#xff1a; Classifier 判别器Generative model: (random set of value , class) as input -> Create new features X 生成器 对抗神经网络模型主要就是通过判…

android的system域解耦

google很早在为此做准备&#xff0c;要求所有设备能够刷GSI&#xff08;通用系统镜像&#xff09;&#xff0c;并跑过XTS测试。动态分区解耦方案如上图。一、分区描述单一系统映像 (SSI)。包含system和system_ext图像的新概念图像。当这些分区对于一组目标设备是通用的时&#…

二叉树(一)

先简单了解一下树的概念&#xff0c;从而进一步了解二叉树&#xff0c;最后进行代码测试。树概念及结构(了解)在认识而二叉树之前我们首先了解一下树的概念。树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。…

图扑喜获第十一届中国创新创业大赛全国赛优秀奖!

在近期结束的第十一届中国创新创业大赛全国赛&#xff08;新一代信息技术&#xff09;比赛中&#xff0c;图扑软件喜获成长组优秀奖。这是继“创客中国”创新创业大赛优胜奖荣誉后&#xff0c;再一次对图扑软件在新一代信息技术领域专业的认可&#xff01;大赛围绕新一代信息技…

电机行业EDI案例分析

项目背景 J公司需要与国内某知名电机品牌Z公司建立EDI对接&#xff0c;J公司选择通过知行EDI系统与Z公司建立AS2连接&#xff0c;通过AS2接收Z公司发送过来的ORDERS&#xff08;采购订单&#xff09;和ORDCHG&#xff08;采购订单变更&#xff09;&#xff0c;并根据发接收到的…

Linux常见命令 15 - 权限管理命令 chmod

1. chmod 语法 chmod为修改文件/文件夹权限&#xff0c;有以下两种操作&#xff0c;其中-R表示递归修改 chmod {ugoa} {-} {rwx} [文件或目录] -Rchmod [mode421] [文件或目录] -R 2. chmod {ugoa} {-} {rwx} [文件或目录] -R u&#xff1a;文件或目录的所有者&#xff0c;g…

C++设计模式(5)——观察者模式

观察者模式 亦称&#xff1a; 事件订阅者、监听者、Event-Subscriber、Listener、Observer 意图 观察者模式是一种行为设计模式&#xff0c; 允许你定义一种订阅机制&#xff0c; 可在对象事件发生时通知多个 “观察” 该对象的其他对象。 问题 假如你有两种类型的对象&a…

概论第6章_正态总体的抽样分布_卡方分布_F分布_t分布

一 卡方分布 定义 设X1,X2,...,XnX_1, X_2,..., X_nX1​,X2​,...,Xn​ 独立同分布于标准正态分布N(0, 1), 则χ2X12...Xn2\chi^2X_1^2 ... X_n^2χ2X12​...Xn2​的分布称为 自由度为 n 的χ2\chi^2χ2分布&#xff0c; 记为χ2\chi^2χ2 ~ χ2(n)\chi^2(n)χ2(n) χ2\chi…