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

WEB前端标签的使用

news 2026/2/9 21:09:18

图片标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- img标签就是用来将图片显示在页面上的标签 --><img src="图片路径"><!-- 可用路径：网络路径：一般由http或者https开头的存在于网络上的图片地址绝对路径：从根目录开始一层一层向下递进，直到找到目标文件所在位置相对路径：即从当前文件所在路径出发，去寻找资源文件。gif,jpg,png,bmpgif：是动图，他一般只支持256色,所以占据空间小，表现效果差。jpg：有损压缩的格式图像，所以占据空间小，它支持256*256*256色，但是表现效果略微有一丢丢差，并且它不支持透明通道。png：无损压缩的格式，占据空间中低，他因为有透明通道的关系所以他最可以是32位真彩色bmp：无损格式，文件中保存的是关于图像的像素信息，支持透明， 占据空间大--><!-- src是source即资源路径的缩写，开发者需要将图像的路径填在src中才能让图片正常显示 --><!-- width可用来控制标签的宽度， 可以填具体的像素值也可以写百分比--><!-- height 可用来控制标签高度，可以填写具体的像素值也可以填写百分比--><!-- 当填写宽高的时候如果使用百分比，务必要确认他的父容器有一个确定值 --><!-- alt属性中的内容，当图像无法正常显示时，会出现在屏幕上--><!-- title属性主要任务是，当鼠标选停在图像上时，可以显示出图像的标题，当alt不存在时，可以代替alt --><div style="height: 600px;border: 1px solid red;"><img src="img/1.jpeg" alt="" title="鸡哥美了" width="100%" ></div></body>
</html>

音视频标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 音频标签 audio --><!-- controls是布尔型的属性，用于显示当前标签的控制界面，当你写出它的那一刻就表示启用，如果你不想用它，删掉即可 --><!-- autoplay自动播放--><!-- loop 循环 --><!-- muted 静音 --><!-- <audio src="./sound/music.mp3" controls autoplay loop muted></audio><audio> --><!-- 兼容模式的写法，浏览器支持那种就播放那种。 --><!-- <source src="./sound/music.mp3"><source src="./sound/music.wma"></audio> --><!-- 视频标签 videao  --><!-- 视频标签不允许再有音量的情况自动播放，如果需要自动播放那么请加上muted属性 --><video src="video/video.mp4" controls autoplay muted></video></body>
</html>

表格标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>tr{text-align: center;}</style></head><body><!-- 表格标签 --><!-- 表格标签table 所有关于这个表格的标签都要写在table中 --><!-- thead，tbody，tfoot是语义化标签 他们规定表格的首、体、尾分别是什么内容 --><!-- tr 是table row的缩写 表示表格行--><!-- td 是单元格 存在于tr之中，表格子标签是没有列标签的用单元格自然形成列即可 --><!-- <table>	<tbody><tr><td>表格主体1-1</td><td>表格主体1-2</td></tr></tbody><tfoot><tr><td>表尾1</td><td>表尾2</td></tr></tfoot><thead><tr><td>首行1</td><td>首行2</td></tr></thead></table> --><!-- td tr会自动根据表格宽高来设置自己的宽高 --><!-- cellspacing表示间距，cellpadding表示边距--><!-- bgcolor可以用来设置单元个颜色--><table border="1" width="300" height="300"><tr ><!-- td可以修改宽高，改宽会影响列,改高会影响行--><td >123</td><td >123</td><td >123</td><td><table  border="1"><tr ><!-- td可以修改宽高，改宽会影响列,改高会影响行--><td>123</td><td>123</td><td>123</td></tr><tr  ><td>123</td><td>123</td><td>123</td></tr><tr ><td>123</td><td>123</td><td>123</td></tr></table></td></tr><tr ><td>123</td><td>123</td><td>123</td></tr><tr ><td>123</td><td>123</td><td>123</td></tr></table><!-- rowspan行合并 由上到下进行合并 --><!-- colspan列合并 由左到右进行合并--><!--table的 align属性可以用来修改表格在页面中的位置关系 --><!--tr的 align属性可以用来修改单元格内容的位置关系 --><!--td的 align属性可以用来修改本单元格内容的位置关系 --><table border="1" width ="300" align="center"><tr align="center"><td alirowspan="2">123</td><td>123</td><td>123</td></tr><tr><td colspan="2">123</td></tr><tr><td>123</td><td>123</td><td>123</td></tr></table></body>
</html>

超连接标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 1.网页跳转 --><!-- href的作用跳转到hrel填写的网页链接 --><!-- 超链接提供了非常便利的网页跳转功能，如果没有这各功能，互联网现在估计还停留在上世纪60年代的水准 --><!-- 111111111<a href="./文字超连接2.html">跳转到2</a> --><!-- 2.锚链接 --><!-- 用于跳转href中填写的标签位置 --><!-- <a id="a1" href="#a2">去底部</a><div style="border: 1px solid red;width: 100px;height: 2000px;"></div><div style="border: 1px solid green;width: 100px;height: 2000px;"></div><div style="border: 1px solid blue;width: 100px;height: 2000px;"></div><a id="a2" href="#a1">回到顶部</a> --><!-- 3.图片超连接 --><!-- <a href="./文字超连接2.html"><img src="./img/1.jpeg" alt="" width="200"></a> --><!-- 4.热区超连接 --><img src="./img/1.jpeg" alt="" usemap="#map"><map name="map"><area shape="rect" coords="0,0,100,100" href="#" alt=""><area shape="circle" coords="150,50,50" href="#" alt=""><area shape="poly" coords="200,50,250,0,300,50" href="#" alt=""></map></body>
</html>

列表标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 有序列表 --><!-- type决定有序列表的序号类型可以是罗马数字可以使英文字母默认是阿拉伯数字 --><!-- start控制序号的起始位置 --><!-- reversed 可以使有序列表倒序输出 --><ol type="a" start="26" reversed><li>哈哈</li><li>哈哈</li><li>哈哈</li><li>哈哈</li><li>哈哈</li></ol><!-- 无序列表 --><ul type="circle"><li>1</li><li>2</li><li>3</li><li>4</li></ul><!-- 数据列表 --><dl><!-- dt表示标题 --><dt>标题</dt><!-- dd表示标题下的内容 --><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd><dt>标题</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd><dt>标题</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd></dl></body>
</html>

相关文章：

WEB前端标签的使用

图片标签 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><!-- img标签就是用来将图片显示在页面上的标签 --><img src"图片路径"><!-- 可用路径&#…...

编程日记 2024/1/26 8:12:28

739. 每日温度

提示给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 示例 1: 输入: tempe…...

编程日记 2024/1/26 8:11:27

stm32F103C8T6简介及标准库和HAL库的区别

什么是单片机 单片机是一种集成电路芯片&#xff0c;把具有数据处理能力的中央处理器CPU、随机存储器RAM、只读存储器ROM、多种I/O和中断系统、定时器/计数器等功能&#xff08;可能还包括显示驱动电路、脉宽调制电路、模拟多路转换电路、A\D转换器等电路&#xff09;集成到一…...

编程日记 2024/1/26 8:10:26

操作系统（3）---操作系统引导

在安装操作系统后&#xff0c;磁盘的分布如下&#xff1a; C盘是这个磁盘的活动分区&#xff08;又称主分区&#xff09;&#xff0c;安装了操作系统 开机过程如下&#xff1a; 1.计算机的主存由RAM和ROM组成&#xff0c;RAM关机数据消失&#xff0c;而ROM&#xff08;Basic In…...

编程日记 2024/1/26 8:06:22

Vue3+Ts：实现paypal按钮

Vue3Ts&#xff1a;实现paypal按钮 一、前端页面按钮实现第一步&#xff1a;下载paypal.js依赖第二步&#xff1a;引入要使用的vue页面&#xff0c;并调用。 二、实现逻辑研究第一点&#xff1a;了解下Buttons自带的style属性第二点&#xff1a;了解下Buttons自带的处理方法第三…...

编程日记 2024/1/26 8:01:17

.[Decipher@mailfence.com].faust 勒索病毒数据怎么处理|数据解密恢复

尊敬的读者&#xff1a; 随着网络技术的发展&#xff0c;勒索病毒已经成为数字时代中一种极具破坏性的威胁。[support2022cock.li].faust [tsai.shenmailfence.com].faust [Encrypteddmailfence.com].faust[Deciphermailfence.com].faust 勒索病毒是其中的一种&#xff0c;它以…...

编程日记 2024/1/26 7:59:13

【UE Niagara】制作星光飘落效果

效果 步骤 1. 新建一个Niagara系统 选择模板“Fountain” 这里命名为“NS_Flare” 打开“NS_Flare”&#xff0c;选中Sprite渲染器&#xff0c;设置材质为上一篇文章中&#xff08;【UE 材质】闪烁的星星材质&#xff09;制作的材质“M_Flare” 2. 由于要在Niagara中调整粒子的…...

编程日记 2024/1/26 7:58:12

SLAM初学

昨天组长布置了任务&#xff0c;要求看香港大学的一篇论文&#xff0c;一打开&#xff0c;好家伙&#xff0c;纯英文&#xff0c;直接翻译着看 几个读不懂的概念&#xff1a; 体素&#xff1a;体素是三维空间中的体积像素的简称。它类似于二维图像中的像素&#xff0c;但在三…...

编程日记 2024/1/26 7:56:10

腾讯云轻量应用服务器Docker如何一键搭建属于自己的幻兽帕鲁服务器？

幻兽帕鲁/Palworld是一款2024年Pocketpair开发的开放世界生存制作游戏&#xff0c;在帕鲁的世界&#xff0c;玩家可以选择与神奇的生物“帕鲁”一同享受悠闲的生活&#xff0c;也可以投身于与偷猎者进行生死搏斗的冒险。而帕鲁可以进行战斗、繁殖、协助玩家做农活&#xff0c;也…...

编程日记 2024/1/26 7:50:05

win10+elasticsearch8.12 安装教程

Elasticsearch是一种搜索引擎&#xff0c;本地安装完成之后&#xff0c;可使用其他编程语言&#xff08;例如python&#xff09;与elasticsearch建立连接&#xff0c;然后使用python脚本搜索elasticsearch中的数据 1下载 elasticsearch elasticsearch最新版官网下载链接 点击…...

编程日记 2024/1/26 7:49:04

经典面试题-死锁

目录 1.什么是死锁&#xff1f; 2.形成死锁的四个必要条件 3.死锁的三种情况 第一种情况&#xff1a; 举例&#xff1a; 举例&#xff1a; 第二种情况&#xff1a;两个线程 两把锁 举例&#xff1a; 第三种情况&#xff1a;N个线程 M把锁 哲学家进餐问题 1.什么是死锁&…...

编程日记 2024/1/26 7:46:02

mysql面试题合集-基础

前言 工作很忙&#xff0c;本质还是自己比较懒惰&#xff0c;很久没更新博客了。近期打算面试&#xff0c;换个工作环境&#xff0c;那就先从面试题开始吧&#xff0c;后续也会逐渐更新自己在工作中的一些经验感悟。接下来切入主题&#xff0c;由于长期做前台开发工作&#xf…...

编程日记 2024/1/26 7:43:59

点灯大师(STM32)

这段代码是用于STM32F10x系列微控制器的C语言程序&#xff0c;目的是初始化GPIOC的Pin 13为输出&#xff0c;并设置其输出高电平。以下是对代码的逐行解释&#xff1a; #include "stm32f10x.h" 这一行引入了STM32F10x设备的头文件&#xff0c;包含了用于STM32F10x系…...

编程日记 2024/1/26 7:41:57

@EnableEurekaServer

定义&#xff1a;EnableEurekaServer注解是Spring Cloud中的一个注解&#xff0c;用于将Spring Boot应用程序指定为Eureka服务器。 Eureka服务器是一个服务注册中心&#xff0c;也被称为发现服务器&#xff0c;管理和协调微服务。保存有关所有客户端服务应用程序的信息。 每个…...

编程日记 2024/1/26 7:38:55

Java中的接口

六. 接口 特性1 - 解决单继承 语法如下 interface A {public default void a() {} }interface B {public default void b() {} }// C 从 A, B 两个接口重用方法 a() 和 b() class C implements A, B {}解决之前的问题 public class TestInterface1 {public static void mai…...

编程日记 2024/1/26 7:37:54

Linux笔记之bash脚本中的-e、和

Linux笔记之bash脚本中的-e、&和&& code review! 文章目录 Linux笔记之bash脚本中的-e、&和&&1.&和&&2.-e 1.&和&& 在Linux bash脚本中&#xff0c;&符号有几个不同的用途&#xff0c;这里列举了一些常见的情况&#xf…...

编程日记 2024/1/26 7:36:52

mapstruct自定义转换，怎样将String转化为List

源码&#xff1a;https://gitee.com/cao_wen_bin/test 最近在公司遇到了这样一个为题&#xff0c;前端传过来的是一个List<Manager>,往数据库中保存到时候是String&#xff0c;这个String使用谷歌的json转化器。 当查询的时候在将这个数据库中String的数据以List<Mana…...

编程日记 2024/1/26 7:31:48

torch.matmul和torch.bmm区别

torch.matmul可用于4维数组的相乘&#xff0c;而torch.bmm只能用户3维数组的相乘&#xff0c;以/home/tiger/.local/lib/python3.9/site-packages/transformers/models/vit/modeling_vit.py中的ViTSelfAttention实现为例&#xff0c;在transpose_for_scores之前的shape是(batch…...

编程日记 2024/1/26 7:30:47

k8s学习（RKE+k8s+rancher2.x）成长系列之概念介绍（一）

一、前言 本文使用国内大多数中小型企业使用的RKE搭建K8s并拉起高可用Rancher2.x的搭建方式&#xff0c;以相关技术概念为起点&#xff0c;实际环境搭建&#xff0c;程序部署为终点&#xff0c;从0到1的实操演示的学习方式&#xff0c;一步一步&#xff0c;保姆级的方式学习k8…...

编程日记 2024/1/26 7:27:45

PHP - Yii2 异步队列

1. 前言使用场景 在 PHP Yii2 中&#xff0c;队列是一种特殊的数据结构&#xff0c;用于处理和管理后台任务。队列允许我们将耗时的任务&#xff08;如发送电子邮件、push通知等&#xff09;放入队列中&#xff0c;然后在后台异步执行。这样可以避免在处理大量请求时阻塞主应用…...

编程日记 2024/1/26 7:26:44

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/2/9 6:48:28

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2026/1/27 13:20:11

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2026/1/23 10:51:19

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38