当前位置： 首页 > news >正文

【HTML】img标签和超链接标签

news 2026/1/15 11:55:18

文章目录

  • img 标签
    • src 属性
    • alt 属性
    • title 属性
    • width/height 属性
    • border 属性
  • 超链接标签：a
    • 表格标签
      • 合并单元格

img 标签

img 是一个单标签

src 属性

img 标签必须搭配 src 使用（指定图片的路径）

  • 相对路径：

    • ./xxx.png
    • ./img/xxx.png
    • ../xxx.png

  • 绝对路径：

    • 图片路径
    • 网络上的图片资源
<html><head>图片插入演示</head><body><p><strong>相对路径下插入图片：</strong>在本目录下：<img src="cloud.png"><br/>在本目录文件夹中：<img src="img/cloud.png"><br/><strong>绝对路径下插入图片：</strong><br/>输入图片路径：<img src="D://My Computer/cloud.png"><br/>网络上的图片资源：<img src="https://stricky-1319251483.cos.ap-chongqing.myqcloud.com/stricky/pic/202409111630616.png"></p></body>
</html>

alt 属性

  • 当文本不能正确显示的时候，就会显示一个赋给 alt 用来替换的文字
  • alt 后面的文案，是只有当图片加载出错的时候才会显示，如果图片加载成功，则不会显示
<html><head><title>这是 img 其他属性演示</title></head><body><p>白云图片：<img src="cloud.pnggg" alt="白云图片加载出现问题"></p></body>
</html>

image.png|373

title 属性

  • 提示文本，鼠标放到图片上，就会有提示
<html><head><title>这是 img 其他属性演示</title></head><body><p>白云图片：<img src="cloud.png" alt="白云图片加载出现问题" title="这是一张美丽的白云图片"></p></body>
</html>

image.png|402

width/height 属性

  • 控制宽度高度
  • 高度和宽度一般改一个就行，另外一个会等比例缩放，否则图片就会失衡
<html><head><title>这是 img 其他属性演示</title></head><body><p>白云图片：<img src="cloud.png" alt="白云图片加载出现问题" title="这是一张美丽的白云图片" wight="200px"></p></body>
</html>
  • px 代表像素，就是图片上许多的亮点。像素越大，图片就越大
    image.png|568

border 属性

加上边框，参数是宽度的像素，但是一般是使用 CSS 来设定

<html><head><title>这是 img 其他属性演示</title></head><body><p>白云图片：<img src="cloud.png" alt="白云图片加载出现问题" title="这是一张美丽的白云图片" wight="200px" border="10px"></p></body>
</html>
  • border 后面跟边框的大小
    image.png|528
  • 标签后面的属性顺序是没有要求的，顺序对显示结果没有影响
  • 每个属性之间用 空格 或者 回车 隔开都可以
  • value 都写在 “” 里面

超链接标签：a

  • href：必须具备，表示点击后会跳转到哪个页面
  • target：代表打开方式，默认是 _self，直接在原页面打开新页面；如果是 _blank，则用新的标签页打开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>href 演示</title>
</head>
<body><a href="https://www.baidu.com/">点击跳转百度</a><a href="https://www.baidu.com/"><img src="baidu.png" border="5px"></a><a href="#">跳转到当前页面</a>
</body>
</html>

image.png|449

  • # 是一个占位符，仍然是当前地址
  • 前两个都是直接跳转到百度，第三个仍然是留在当前网页

表格标签

  • table 标签：表示整个表格
  • tr：表示表格的一行
  • td：表示一个单元格
  • th：表示表头单元格，会居中加粗
  • thead：表格的头部区域（注意和 th 区分，范围是比 th 要大的）
  • tbody：表格得到主体区域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" width="800" height="400" cellspacing="0" cellpadding="50" align="center"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>男</td><td>19</td></tr><tr><td>王五</td><td>女</td><td>18</td></tr></table>
</body>
</html>
  • border：控制边框粗细
  • width、width：控制表格大小
  • cellspacing：控制单元格之间的距离，默认是 2 像素
  • cellpadding：控制内容距离边框的距离，默认是 1 像素
  • align：控制表格相对于周围元素的对齐方式

表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置。这些属性都要放到 table 标签中

  • align 是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对齐方式）
  • border 表示边框，1 表示有边框（数字越大，边框越粗）， "" 表示没边框.
  • cellpadding：内容距离边框的距离，默认 1 像素
  • cellspacing：单元格之间的距离，默认为 2 像素
  • width / height：设置尺寸
    注意： 这几个属性 vscode 都提示不出来
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" width="800" height="400" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>男</td><td>19</td></tr><tr><td>王五</td><td>女</td><td>18</td></tr></tbody></table>
</body>
</html>
  • 一般把表头的信息放在 thead 中，表格信息放在 tbody 中image.png|387

合并单元格

将需要合并的单元格数量直接加在 td 后面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1px" width="800" height="400" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td rowspan="2">男</td><td>18</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>19</td></tr><tr><td colspan="2">王五/女</td><!-- <td>女</td> --><td>18</td></tr></tbody></table>
</body>
</html>
  • 合并列就用 rowspan；合并行就用 colspan
  • 后面的数字就是要和并的单元格数量
  • 合并后，被合并的单元格附近的单元格会被挤开，要将其给注释掉image.png

相关文章：

【HTML】img标签和超链接标签

文章目录 img 标签src 属性alt 属性title 属性width/height 属性border 属性 超链接标签&#xff1a;a表格标签合并单元格 img 标签 img 是一个单标签 src 属性 img 标签必须搭配 src 使用&#xff08;指定图片的路径&#xff09; 相对路径&#xff1a; ./xxx.png./img/xxx.…...

编程日记 2024/9/27 12:23:15

智能PPT行业赋能用户画像

智能PPT市场在巨大的需求前景下&#xff0c;已吸引一批不同类型的玩家投入参与竞争。从参与玩家类型来看&#xff0c;不乏各类与PPT创作有关的上下游企业逐步向智能PPT赛道转型进入&#xff0c;也包括顺应生成式AI技术热潮所推出的创业企业玩家。当前&#xff0c;智能PPT赛道发…...

编程日记 2024/9/27 12:22:14

学习C++的第七天！

1.虚函数是在基类中用 virtual 关键字声明的函数&#xff0c;可以在派生类中被重写。纯虚函数是在虚函数的基础上&#xff0c;在基类中被初始化为 0 的函数&#xff0c;含有纯虚函数的类是抽象类&#xff0c;不能被实例化。 2.如果基类的析构函数不是虚函数&#xff0c;当通过…...

编程日记 2024/9/27 12:19:12

Java编程必备：五大高效工具与框架

作为一位Java程序员&#xff0c;在编写Java代码时&#xff0c;通常会使用多种工具和框架来提高开发效率、保证代码质量并简化开发流程。以下是五个常用的Java程序员工具和框架及其简要说明&#xff1a; 1. IntelliJ IDEA 主要功能&#xff1a;IntelliJ IDEA是一个强大的Java集…...

编程日记 2024/9/27 12:18:11

现代桌面UI框架科普及WPF入门1

现代桌面UI框架科普及WPF入门 文章目录 现代桌面UI框架科普及WPF入门桌面应用程序框架介绍过时的UI框架MFC (Microsoft Foundation Class)缺点 经典的UI框架**WinForms****QT****WPF** 未来的UI框架**MAUI****AvaloniaUI** WPF相对于Winform&#xff0c;QT&#xff0c;MFC的独立…...

编程日记 2024/9/27 12:17:10

in和like性能对比

场景: 有个问题表,有个渠道表,问题和渠道的关系是一对多 需要根据渠道查询问题,暂时两种思路 1:问题表荣誉渠道id,多个id拼接 2:设计问题和渠道关联关系表 首先,这两种是常用的设计思路,那么查询谁的速度快 问题表:造10w数据,渠道表造100条数据 结论 实测10次后,发现like耗…...

编程日记 2024/9/27 12:15:09

Redis｜基础学习

跟着狂神学习的Redis笔记&#xff0c;详细课程可以移步【狂神说Java】Redis最新超详细版教程通俗易懂 文章目录 NoSQLNoSQL 数据库的主要类型NoSQL 的特点NoSQL 的应用场景 Redis什么是 RedisRedis 能干嘛Windows 以及 Linux 下安装 RedisRedis 基本知识RedisKey的基本命令Redi…...

编程日记 2024/9/27 12:13:07

手把手教你在Linux上构建Electron

开发electron最大的特点就是可以使用web技术来开发跨平台应用&#xff0c;大部分开发都是在windows/mac上开发的electron应用&#xff0c;我使用的是electorn-builder来构建应用&#xff0c;官网提供支持在windows上使用docker来实现Linux版本的构建。可以直接在Linux服务器上完…...

编程日记 2024/9/27 12:12:06

力扣【448-消失的数字】【数组-C语言】

题目&#xff1a;力扣-448 给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 把数组中存在[1…n]的元素放其元素值-1的位置上&#xff0c;第一个fo…...

编程日记 2024/9/27 12:11:04

面试题：排序算法的稳定性？（文末有福利）

回归面试题&#xff01; 回答重点 稳定的排序算法&#xff1a;冒泡排序、插入排序、归并排序、计数排序。 不稳定的排序算法&#xff1a;选择排序、快速排序、堆排序、希尔排序。 扩展知识 1&#xff09;冒泡排序&#xff08;Bubble Sort&#xff09; 原理&#xff1a; 冒…...

编程日记 2024/9/27 12:10:03

在Jdk1.8中Collectors和Comparator使用场景

在Jdk1.8中Collectors和Comparator使用场景 ​Collectors​ 和 Comparator​ 是 Java 8 引入的两个非常重要的类&#xff0c;它们在处理集合和流&#xff08;Streams&#xff09;时起着重要的作用。以下是这两个类的使用场景以及它们的典型用法。 1. Collectors ​Collector…...

编程日记 2024/9/27 12:05:59

linux-性能优化命令

top 我们先来说说top命令用法&#xff0c;这个命令对于我们监控linux性能是至关重要的&#xff0c;我们先来看看展示结果。 top - 15:20:23 up 10 min, 2 users, load average: 0.39, 0.53, 0.35 Tasks: 217 total, 1 running, 216 sleeping, 0 stopped, 0 zombie %C…...

编程日记 2024/9/27 12:04:58

基于MT79815G CPE 板子上挂usb3.0的5G 模块，WIFI能跑多少速度呢

关于MT79815G CPE 板子上挂usb3.0的5G 模块&#xff0c;WIFI能跑多少速度的问题&#xff0c;我们以启明智显 ZX7981P智能无线接入型路由器&#xff08;CPE&#xff09;挂广合通5G模组为例说明&#xff1a; 一般来说&#xff0c;用 ZX7981P&#xff0c;通过软加速&#xff0c;U…...

编程日记 2024/9/27 12:03:57

R包compareGroups详细用法

compareGroups compareGroups 是一个功能强大的 R 包&#xff0c;专为数据质量控制、数据探索和生成用于出版的单变量或双变量表格而设计。它能够创建各种格式的报表&#xff0c;如纯文本、HTML、LaTeX、PDF、Word 或 Excel 格式&#xff0c;并显示统计数据&#xff08;均值、…...

编程日记 2024/9/27 12:02:56

如何选择高品质SD卡

如何选择高品质SD卡 SD卡&#xff08;Secure Digital Memory Card&#xff09;是一种广泛使用的存储器件&#xff0c;因其快速的数据传输速度、可热插拔的特性以及较大的存储容量&#xff0c;广泛应用于各种场景&#xff0c;例如在便携式设备如智能手机、平板电脑、运动相机等…...

编程日记 2024/9/27 12:01:55

C++学习：模拟priority_queue

一&#xff1a;仿函数 开始模拟前咱先了解一下仿函数。有了它&#xff0c;我们就可以自己传个代码让优先级队列升序还是降序&#xff0c;自己模拟时也不用在需要升序降序时改代码。这是个很有用的东西。 不写模版也可以&#xff0c;但模版能用在更多地方嘛 template <class …...

编程日记 2024/9/27 11:55:47

同程旅行对标拼多多：“形似神不似”

文&#xff1a;互联网江湖 作者&#xff1a;刘致呈 业绩好&#xff0c;并不意味着同程旅行就能高枕无忧了。 最近&#xff0c;媒体曝出&#xff1a;有用户在同程旅行APP上预订酒店&#xff0c;在预订成功并付款后&#xff0c;结果第二天却被酒店告知&#xff0c;没有查到相关…...

编程日记 2024/9/27 11:54:46

HOJ网站开启https访问 申请免费SSL证书 部署证书详细操作指南

https://console.cloud.tencent.com/ 腾讯云用户 登录控制台 右上角搜SSL 点击 SSL证书 进入链接 点申请 免费证书 有效期3个月 &#xff08;以后每三个月申请一次证书 上传&#xff09; 如果是腾讯云申请的域名 选 自动DNS验证 自动添加验证记录 如果是其他平台申请域…...

编程日记 2024/9/27 11:50:40

程序设计基础I-实验4 循环结构之for语句

7-1 sdut-C语言实验-AB for Input-Output Practice (Ⅳ) Your task is to Calculate a b. 输入格式: Your task is to Calculate a b. 输出格式: For each pair of input integers a and b you should output the sum of a and b in one line, and with one line of out…...

编程日记 2024/9/27 11:48:38

深入工作流调度的内核

在大数据时代&#xff0c;工作流任务调度系统成为了数据处理和业务流程管理的核心组件&#xff0c;在大数据平台的构建和开发过程中尤为重要。随着数据量的激增和业务需求的多样化&#xff0c;合理的任务调度不仅能够提高资源利用率&#xff0c;还能保证业务流程的稳定和高效运…...

编程日记 2024/9/27 11:47:36

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/1/15 4:24:02

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/15 5:00:03

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/1/14 18:46:30

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/15 6:18:32

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/9/14 20:44:53

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

编程新知 2025/10/14 5:08:48

初探用uniapp写微信小程序遇到的问题及解决(vue3+ts)

零、关于开发思路 （一）拿到工作任务，先理清楚需求 1.逻辑部分 不放过原型里说的每一句话，有疑惑的部分该问产品/测试/之前的开发就问 2.页面部分（含国际化） 整体看过需要开发页面的原型后，分类一下哪些组件/样式可以复用，直接提取出来使用 (时间充分的前提下，不…...

编程新知 2026/1/15 6:08:47

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

编程新知 2025/9/11 18:09:26