前端学习从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.…

基于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;把每一页扫…

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

一、多点通信 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;获取或设置套接字…

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)?) : 匹配 …

优化器算法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…

【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…

金蝶云星空——插件dll重新发布报错:鏃犳硶鏄剧ず椤甸潰锛屽洜涓哄彂鐢熷唴閮ㄦ湇鍔″櫒閿欒銆�

项目场景&#xff1a; 金蝶插件开发 问题描述 今天更新了插件dll然后重启IIS金蝶就报如下错误&#xff1a; 解决方案&#xff1a; 折腾了一天结果发现是给自己挖坑了&#xff0c;这次更新我担心插件代码有问题就把原dll重命名了然后把最新dll更新到金蝶bin文件中&#xff0c…

【DBC专题】-11-使用Cantools将CAN/CANFD DBC自动生成C语言代码

目录 1 安装Python和Cantools 1.1 查看Python已安装的Package包 1.2 在Python中安装Cantools插件包 1.3 获取更多Cantools工具的更新动态 2 经典CAN/CANFD DBC自动生成C语言代码 2.1 批处理文件CAN_DBC_To_C.bat内容说明 2.2 经典CAN/CANFD DBC文件要求 2.3 如何使用生…

网站引用图片但它域名被墙了或者它有防盗链,我们想引用但又不能显示,本文附详细的解决方案非常简单!

最好的办法就是直接读取图片文件&#xff0c;用到php中一个常用的函数file_get_contents(图片地址)&#xff0c;意思是读取远程的一张图片&#xff0c;在输出就完事。非常简单&#xff5e;话不多说&#xff0c;直接上代码 <?php header("Content-type: image/jpeg&quo…

clipboard好用的复制剪切库

clipboard是现代复制到剪贴板的工具&#xff0c;其 gzip 压缩后只有 3kb&#xff0c;能够减少选择文本的重复操作&#xff0c;点击按钮就可以复制指定内容&#xff0c;支持原生HTMLjs&#xff0c;vue3和vue2。使用方法参照官方文档&#xff0c;so easy&#xff01;&#xff01;…

装X神器,装X图片生成器,高富帅模拟器

先展示两张效果 基金装X图 短信存款图 神器功能展示 总共有12大类可供用户选择 还有一些美感的&#xff1a; 总结 总之种类非常多&#xff0c;有了这个神器你懂的&#xff5e; 关注下方公众号&#xff0c;回复【zzsq】即可获取。

2、鸿蒙学习-申请调试证书和调试Profile文件

申请发布证书 发布证书由AGC颁发的、为HarmonyOS应用配置签名信息的数字证书&#xff0c;可保障软件代码完整性和发布者身份真实性。证书格式为.cer&#xff0c;包含公钥、证书指纹等信息。 说明 请确保您的开发者帐号已实名认证。每个帐号最多申请1个发布证书。 1、登录AppGa…

Linux软件管理(1)

软件管理 下载 wget Linux wget是一个下载文件的工具&#xff0c;它用在命令行下。 wget工具体积小但功能完善&#xff0c;它支持断点下载功能&#xff0c;同时支持FTP和HTTP下载方式&#xff0c;支持代理服务器和设置起来方便简单。 1.语法 wget [选项]……[URL]…… 2、…

阅读基础知识1

一 网络 1. 三次握手四次挥手 三次握手&#xff1a;为了建立长链接进行交互即建立一个会话&#xff0c;使用 http/https 协议 ① 客户端产生初始化序列号 Seqx &#xff0c;向服务端发送建立连接的请求报文&#xff0c;将 SYN1 同步序列号&#xff1b; ② 服务端接收建立连接…