前端学习从0到1:再见HTML(1)

阅读须知:

探索者安全团队技术文章仅供参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作,由于传播、利用本公众号所提供的技术和信息而造成的任何直接或者间接的后果及损失,均由使用者
本人负责,作者不为此承担任何责任,如有侵权烦请告知,我们会立即删除并致歉,创作不易转载请标明出处.感谢!


前端学习从0到1:再见HTML

大家好,我是早睡晚起师傅,在上一篇中我们介绍了HTML中的一些段落,文本标签以及图像标签,今天我们来介绍链接标签和表格标签,本篇的链接标签是重点哦~

链接标签
<a href="跳转目标(网页名称)" target="目标窗口的弹出方式">文本或图像</a>

target=_self 新打开的页面替换当前页面(未写则默认为此)

target=_blank 新打开的页面另作一个页面

链接分类:

1)外部

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页</title>
</head>
<body><a herf="http://www.baidu.com">百度</a>
</body>
</html>

2)内部,网站内部页面之间的相互连接,直接链接,不需要加http,只需要内部页面名称即可

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页链接</title></head><body><a href="index.html">首页</a></body></html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title>
</head>
<body>我是首页<br/>
</body>
</html>

3)空链接 ,生成链接,但无跳转页面,一般用在新页面还未做好时

<a href="#">文字或图片</a>

4)下载链接 如果herf后的地址是一个文件或压缩包,点击后将会下载这个文件或压缩包(.exe/.zip),要注意的是要下载的压缩包也需要与当前的html文件位于同一级。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页</title>
</head>
<body><a href="photo.zip">图片</a>
</body>
</html>

pF2O7CT.png

5)网页元素链接,在网页中的各种网页元素,如文本,图像,表格,音频,视频等都可以添加超链接

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页链接</title></head><body><a href="https://www.nssctf.cn/problem/2592" target="_blank"><img src="02.jpg " width="300" height="400"/></a></body></html>

pF2XuPf.png
pF2XmIP.png

6)锚点链接:点击时可快速定位到页面的某个指定位置

​ 在链接文本的href属性中,设置属性值为#名字的形式 e

​ 找到目标位置标签,里面添加一个id属性=刚才的名字

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页链接</title></head><body><h2>探险者安全团队简介</h2>1.成立时间<br />2.成员组成<br />3.取得成就<br />4.<a href="#together">加入方式</a><br /><h4>成立时间</h4><p>探险者安全团队于2024年创立,由一群热爱技术的伙伴共同维护。<br />本团队致力于安全和开发分享,其中包含ctf比赛wp,各大靶场训练wp,以及渗透测试,漏洞挖掘,开发等方向知识。<br />以安全为初心,以共享为理念,望与大家共同交流进步!<br /></p><h4>成员组成</h4>Breeze K1t0 波克比qwq 早睡晚起<h4>取得成就</h4>暂无<h4 id="together">加入方式</h4>微信扫一扫<br /><img src="03.jpg" width="700" height="300"></body></html>

pF2jiF0.png

表格标签
用于定义表格的标签 用于定义表格中的行,必须嵌套在
中 单元格中的文字用于定义表格中的单元格,嵌套在中 标签作为表头标签与相比,前一组中的文字会作为表头加粗且居中显示
表格属性(写入
中)
属性值作用
alignleft,center,right规定表格的对齐方式
border1或” “表示单元格是否拥有边框," "默认没有
cellpadding像素值内容与单元格边沿的距离,默认为1像素值
cellspacing像素值单元格之间的空白,默认为2像素
width像素值或百分比规定表格的宽度

合并单元格的方式:

跨行合并:rowspan=“合并单元格的个数”

跨列合并:colspan=“合并单元格的个数”

注意:合并后哪个单元格少了就要删除对应的内容标签

  • ``` 表格 (跨列合并后则只剩下3列) (需删除) (删除) (删除)
    学号姓名排名年龄
    0001Mike118
    0002Alice219
    ```

感谢早睡晚起大师傅的精彩投稿, 希望下次还写,赞赞给给…


同时感兴趣的小伙伴可以多多关注我们团队哦!!!

   <td>2</td>
          <td>19</td>(删除)</tr></table>
```

感谢早睡晚起大师傅的精彩投稿, 希望下次还写,赞赞给给…


同时感兴趣的小伙伴可以多多关注我们团队哦!!!

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

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

相关文章

AI系统性学习05—向量数据库

文章目录 1、Chroma向量数据库1.1 安装Chroma1.2 初始化Chroma客户端1.3 创建一个合集1.4 添加数据1.5 查询数据1.6 持久化数据1.7 集合操作1.7.1 创建集合1.7.2 获取集合1.7.3 删除集合1.7.4 其他操作1.8 向集合添加数据1.9 查询集合数据1.10 更新集合数据1.11 删除集合数据1.…

JavaSE(上)-Day5

JavaSE&#xff08;上&#xff09;-Day5 流程控制语句顺序结构分支结构循环结构 流程控制语句练习逢7过题目平方根质数判断随机数猜测 流程控制语句 顺序结构 Java代码执行是自上而下的顺序结构 分支结构 if分支(已掌握) &#xff08;多应用范围&#xff09;switch分支(有限…

基于51单片机智能鱼缸控制系统

一、系统方案 1、本设计采用51单片机作为主控器。 2、液晶1602显示。 3、采集温度值&#xff0c;水质大小、水位值、DS1302显示年月日时分秒。 4、自动加热、定时喂食&#xff0c;自动换水、水泵加热。 5、按键设置。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设…

【教学类-44-08】20240319 “(幼儿用)数字练习簿1.0”(A4版)

背景需求&#xff1a; 我一直想把 “&#xff08;幼儿用&#xff09;数字练习簿”的内容复刻出来——这里面的字体始终找不到&#xff0c;是一种已经做成图片的手写数字字体 素材准备&#xff1a; 1、买了一本&#xff08;幼儿用&#xff09;数字练习簿&#xff0c;把每一页扫…

java 通过 microsoft graph 调用outlook(二)

这次提供一些基础调用方式API 一 POM文件 <!-- office 365 --><dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>32.1.3-jre</version></dependency><dependency>&…

网络编程:多点通信+域套接字

一、多点通信 1.网络属性 getsockopt和setsockopt int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); int setsockopt(int sockfd, int level, int optname, const void *optval, socklen_t optlen); 功能&#xff1a;获取或设置套接字…

微信小程序登录后根据code获取APP_ID和APP_SECRET与火狐信息

话不多说&#xff0c;直接上代码。 session_key是与用户微信客户端之间通信的密钥&#xff0c;获取用户信息时会用到。 调用&#xff1a;getSessionKeyAndOpenId方法传入code值&#xff0c;返回openid与session_key&#xff0c; 这里的&#xff1a; appid: 应用唯一标识&am…

SSH服务

目录 一. 熟悉SSH服务 1.1 何为SSH协议 1.2 SSH服务优点 1.3 常见的SSH协议 1.4 SSH服务的功能 1.5 为何使用SSH服务 1.6 SSH服务的工作原理 1.6.1 公钥传输原理 1.6.2 ssh加密通讯原理 1.7 SSH服务的最佳应用场景 1.8 SSH服务远程登录的方式 1.8.1 方法一&#…

自动驾驶决策 - 规划 - 控制 (持续更新!!!)

总目录 Frenet与Cartesian坐标系 Apollo基础 - Frenet坐标系 车辆模型 车辆运动学和动力学模型 控制算法 PID控制器轨迹跟随实现 Pure Pursuit控制器路径跟随 路径跟踪算法Stanley 实现 c 无人驾驶LQR控制算法 c 实现 MPC自动驾驶横向控制算法实现 c 双环PID控制详细讲解 …

【DL经典回顾】激活函数大汇总(二十六)(Identity附代码和详细公式)

激活函数大汇总&#xff08;二十六&#xff09;&#xff08;Identity附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可或缺的…

大模型面试题最全总结,没有一道是送分题。。。

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂同学、参加社招和校招面试的同学&#xff0c;针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 今天分享…

3月19日做题

[NPUCTF2020]验证&#x1f40e; if (first && second && first.length second.length && first!second && md5(firstkeys[0]) md5(secondkeys[0]))用数组绕过first1&second[1] 这里正则规律过滤位(Math.) (?:Math(?:\.\w)?) : 匹配 …

串口123

1.开启时钟 把需要使用的USART和GPIO的时钟打开 2.GPIO初始化 把TX配置成复用输出&#xff0c;RX配置成输入 3.配置USART 直接使用一个结构体即可将所有参数配置完成 4.开关控制 如果需要仅发送的功能&#xff0c;就直接开启USART&#xff0c;初始化到此结束 如果还需要接收…

优化器算法SGD、Adam、AdamW等

文章目录 SGDSGD with momentumSGD with Nesterov AccelerationAdaGradRMSpropAdaDeltaAdamAdamW参考资料 假设有&#xff1a; 待优化的目标函数为 f ( w ) f(w) f(w)&#xff0c;使用优化算法来最小化目标函数 f ( w ) : a r g m i n w f ( w ) f(w):argmin_wf(w) f(w):argmin…

获取指定路径下,所有指定后缀文件列表

要获取指定路径下所有指定后缀的文件列表&#xff0c;你可以使用Python的os和glob模块。下面是一个简单的示例&#xff0c;展示了如何获取指定路径下所有.txt后缀的文件列表&#xff1a; import os import globdef get_files_with_extension(directory, extension):"&quo…

vivado 布线、路线_设计

路由 Vivado路由器对放置的设计执行路由&#xff0c;并对路由设计&#xff0c;以解决保留时间冲突。Vivado路由器从放置的设计开始&#xff0c;并尝试路由所有网络。它可以从已放置的未布线、部分布线或完全布线的设计。对于部分路由的设计&#xff0c;Vivado路由器使用现有的…

Unittest框架及自动化测试实现流程

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Unittest框架介绍 Unittest框架是Python中一个标准的库中的一个模块&#xff0c;该模块包括许多…

红与黑(c++题解)

题目描述 有一间长方形的房子&#xff0c;地上铺了红色、黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上&#xff0c;只能向相邻的黑色瓷砖移动。请写一个程序&#xff0c;计算你总共能够到达多少块黑色的瓷砖。 输入格式 包括多个数据集合。每个数据集合的第一行是…

【Mysql】面试题汇总

1. 存储引擎 1-1. MySQL 支持哪些存储引擎&#xff1f;默认使用哪个&#xff1f; 答&#xff1a; MySQL 支持的存储引擎包括 InnoDB、MyISAM、Memory 等。 Mysql 5.5 之前默认的是MyISAM&#xff0c;Mysql 5.5 之后默认的是InnoDB。 可以通过 show engines 查看 Mysql 支持…

外包2月,技术退步惊现!大专生逆袭大厂,全靠这份神秘资料!

大家好&#xff0c;我是一名大专生&#xff0c;19年通过校招进入湖南某软件公司&#xff0c;从事功能测试工作已近4年。今年8月&#xff0c;我意识到长期舒适的环境让我变得不思进取&#xff0c;技术停滞不前&#xff0c;甚至因此失去了谈了2年的女朋友。我下定决心&#xff0c…