“我穿越过无数的风雨，跨越过无数的山川，经历过无数的磨难，战胜过无数的挑战，却唯独败给了你的冷漠。” 在我的生命中，曾出现了很多对于我来说很重要的人，我将我的真心赋予给她，我相信她会把它保护好，但是，往往现实总是给我重重的一击，如果能再来一次的话，我会悄悄收好它，保护它。
昨天我们讲了关于HTML的表格标签，那么今天我们来讲讲超链接（今天的内容较少但是可能会上一个难度）。
目录
什么是超链接
关于超链接，大家可能会注意到链接两个字，其实超链接就是我们平常点击的链接，在 HTML 中，我们使用 <a> 标签来表示超链接。. 超链接是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。
基本用法
<a href="跳转目标" target="目标窗口的弹出方式" title="超链接的介绍信息">文本或图像</a>是超链接的基本格式，下面我会给出关于上述代码的官方含义，请看下表：
| href | href是Hypertext Reference的缩写。意思是指定超链接目标的URL。href 属性的值可以是任何有效文档的相对或绝对URL |
| target | 指定网页的链接方式 |
| title | 刚鼠标光标移到设置了 title 属性的超链接上，会显示 title 属性值的内容 |
链接的分类
1.外部链接：
外部链接是该网站跳转到另外一个网站的网页的链接外部链接，但一定是 http:// 开头的，就比如说下面的例子：
可以看到在图中的链接中，鼠标点击CSDN的链接，直接跳转到CSDN中，这就是外部链接。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接讲解</title>
</head>
<body>
<h1>超链接</h1>
<a href="https://www.csdn.net/">内部链接</a>
</body>
</html>2.内部链接
网站内部页面之间的相互跳转。内部连接直接连接内部页面名称。且通常使用相对路径（下面会讲相对路径和绝对路径的区别）。
代码如下：
内部链接代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接讲解</title>
</head>
<body>
<h1>超链接</h1>
<a href="爱妃榜.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>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background-color: #f4f4f4;
}
.thumbnails {
display: flex;
justify-content: center;
margin: 20px;
}
.thumbnail {
width: 80px;
height: 80px;
margin: 5px;
object-fit: cover;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.2s;
}
.thumbnail:hover {
transform: scale(1.1);
}
.thumbnail.active {
border-color: #007bff;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
justify-content: center;
align-items: center;
flex-direction: column;
}
.modal.open {
display: flex;
}
.image-container {
max-width: 90%;
max-height: 70%;
overflow: hidden;
position: relative;
}
.display-image {
max-width: 100%;
max-height: 100%;
transition: transform 0.3s;
}
.controls {
margin-top: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.icon-button {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */
color: white;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.icon-button:hover {
background-color: rgba(0, 0, 0, 0.8); /* 悬停时更深的黑色 */
transform: scale(1.1);
}
.icon-button:active {
transform: scale(0.9);
}
.icon-button:disabled {
background-color: rgba(0, 0, 0, 0.2); /* 禁用时更浅 */
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>爱妃榜</h1>
<!-- 缩略图 -->
<div class="thumbnails" id="thumbnailContainer">
<img src="图片可自行更改.jpg" class="thumbnail" alt="Thumbnail 1">
<img src="图片可自行更改.jpeg" class="thumbnail" alt="Thumbnail 2">
<img src="图片可自行更改.jpg" class="thumbnail" alt="Thumbnail 3">
</div>
<!-- 弹窗 -->
<div class="modal" id="imageModal">
<div class="image-container">
<img src="" alt="Current Image" id="currentImage" class="display-image">
</div>
<div class="controls">
<div class="icon-button" id="zoomInBtn" title="放大"><svg t="1732241294803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7668" width="16" height="16"><path d="M867.7 423.8H599.8V155.9c0-49.3-40-89.3-89.3-89.3s-89.3 40-89.3 89.3v267.9H153.3c-49.3 0-89.3 40-89.3 89.3s40 89.3 89.3 89.3h267.9v267.9c0 49.3 40 89.3 89.3 89.3s89.3-40 89.3-89.3V602.4h267.9c49.3 0 89.3-40 89.3-89.3s-40-89.3-89.3-89.3z" fill="#ffffff" p-id="7669"></path></svg></div>
<div class="icon-button" id="zoomOutBtn" title="缩小"><svg t="1732241472622" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9692" width="16" height="16"><path d="M1.024 448.512h1024v128h-1024z" fill="#ffffff" p-id="9693"></path></svg></div>
<div class="icon-button" id="resetBtn" title="1:1 缩放"><svg t="1732241553547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13299" width="16" height="16"><path d="M288 149.333333v725.333334h-85.333333V250.368L136.405333 283.52 98.24 207.146667 213.930667 149.333333H288zM896 149.333333h-74.069333l-115.669334 57.834667 38.144 76.330667L810.666667 250.368V874.666667h85.333333V149.333333z m-320 170.666667h-106.666667v106.666667h106.666667v-106.666667z m0 277.333333h-106.666667v106.666667h106.666667v-106.666667z" p-id="13300" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="flipBtn" title="翻转"><svg t="1732241626557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15368" width="16" height="16"><path d="M962.074 490.554L647.271 355.638l125.831-89.881c-65.56-69.108-157.968-112.493-260.747-112.493-174.244 0-319.503 123.884-352.634 288.369l-83.949-34.777C123.56 209.825 300.628 63.32 512.355 63.32c132.973 0 252.063 58.09 334.393 149.833l115.326-82.375v359.776z m-710.47 269.773c65.556 69.108 157.973 112.488 260.752 112.488 174.918 0 320.546-124.873 352.931-290.307l83.868 35.874c-47.481 197.458-224.77 344.377-436.799 344.377-132.973 0-252.068-58.086-334.398-149.828l-115.322 82.37V535.525L377.44 670.441l-125.836 89.886z" p-id="15369" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="prevBtn" title="上一张"><svg t="1732241691822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17732" width="16" height="16"><path d="M658.29178 1003.504117l223.006914 0L398.119373 520.342595 881.298746 0 658.291782 0 175.112507 520.342595 658.29178 1003.504117z" p-id="17733" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="autoPlayBtn" title="自动播放"><svg t="1732241717970" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18888" width="16" height="16"><path d="M891.161 512l-749.992 450v-900l749.992 450z" p-id="18889" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="nextBtn" title="下一张"><svg t="1732241665540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17426" width="16" height="16"><path d="M881.298746 520.342595 398.119373 0 175.112486 0 658.29178 520.342595 175.112507 1003.504117l223.006914 0L881.298746 520.342595z" p-id="17427" fill="#ffffff"></path></svg></div>
<div class="icon-button" id="rotateClockwiseBtn" title="顺时针旋转"><svg t="1732241858925" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21128" width="16" height="16"><path d="M0 511.999147c0 282.794195 232.618279 511.999147 519.508467 511.999146a521.812464 521.812464 0 0 0 319.743468-108.543819l-89.343852-93.86651a391.679347 391.679347 0 0 1-230.399616 74.410543c-215.295641 0-389.631351-171.861047-389.63135-383.99936 0-212.05298 174.421043-383.99936 389.63135-383.99936 210.772982 0 382.292696 165.119725 389.119352 371.199381H727.294788l233.72761 255.999573 233.727611-255.999573h-156.15974C1031.678281 222.463629 801.96133 0 519.593801 0 232.703612 0 0 229.204951 0 511.999147z" fill="#ffffff" p-id="21129"></path></svg></div>
<div class="icon-button" id="rotateCounterClockwiseBtn" title="逆时针旋转"><svg t="1732241885059" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22261" width="16" height="16"><path d="M1194.664676 511.999147c0 282.794195-232.618279 511.999147-519.508468 511.999146a521.812464 521.812464 0 0 1-319.743467-108.543819l89.343851-93.86651a391.679347 391.679347 0 0 0 230.399616 74.410543c215.295641 0 389.631351-171.861047 389.631351-383.99936 0-212.05298-174.421043-383.99936-389.631351-383.99936-210.772982 0-382.292696 165.119725-389.119351 371.199381h181.418364l-233.727611 255.999573L0 499.199168h156.15974C162.986395 222.463629 392.703345 0 675.070875 0 961.961063 0 1194.664676 229.204951 1194.664676 511.999147z" fill="#ffffff" p-id="22262"></path></svg></div>
<div class="icon-button" id="closeBtn" title="关闭"><svg t="1732241912849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23389" width="16" height="16"><path d="M0 0h1024v1024H0z" fill="#ffffff" fill-opacity="0" p-id="23390"></path><path d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z" fill="#ffffff" p-id="23391"></path></svg></div>
</div>
</div>
<script>
const thumbnails = document.querySelectorAll('.thumbnail');
const modal = document.getElementById('imageModal');
const currentImage = document.getElementById('currentImage');
const zoomInBtn = document.getElementById('zoomInBtn');
const zoomOutBtn = document.getElementById('zoomOutBtn');
const resetBtn = document.getElementById('resetBtn');
const rotateClockwiseBtn = document.getElementById('rotateClockwiseBtn');
const rotateCounterClockwiseBtn = document.getElementById('rotateCounterClockwiseBtn');
const flipBtn = document.getElementById('flipBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const autoPlayBtn = document.getElementById('autoPlayBtn');
const closeBtn = document.getElementById('closeBtn');
let currentIndex = 0;
let zoom = 1;
let rotation = 0;
let flip = 1;
let autoPlayInterval;
const images = Array.from(thumbnails).map(thumbnail => thumbnail.src);
function openModal(index) {
currentIndex = index;
updateImage();
modal.classList.add('open');
}
function closeModal() {
modal.classList.remove('open');
clearInterval(autoPlayInterval);
}
function updateImage() {
currentImage.src = images[currentIndex];
currentImage.style.transform = `
scale(${zoom * flip}, ${zoom})
rotate(${rotation}deg)
`;
thumbnails.forEach((thumbnail, index) => {
thumbnail.classList.toggle('active', index === currentIndex);
});
}
function zoomIn() {
zoom += 0.1;
updateImage();
}
function zoomOut() {
zoom = Math.max(0.1, zoom - 0.1);
updateImage();
}
function resetImage() {
zoom = 1;
rotation = 0;
flip = 1;
updateImage();
}
function rotateClockwise() {
rotation += 90;
updateImage();
}
function rotateCounterClockwise() {
rotation -= 90;
updateImage();
}
function flipImage() {
flip *= -1;
updateImage();
}
function showPrevious() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateImage();
}
function showNext() {
currentIndex = (currentIndex + 1) % images.length;
updateImage();
}
function toggleAutoPlay() {
if (autoPlayInterval) {
clearInterval(autoPlayInterval);
autoPlayInterval = null;
autoPlayBtn.textContent = '▶';
} else {
autoPlayInterval = setInterval(showNext, 3000);
autoPlayBtn.textContent = '∥';
}
}
thumbnails.forEach((thumbnail, index) => {
thumbnail.addEventListener('click', () => openModal(index));
});
zoomInBtn.addEventListener('click', zoomIn);
zoomOutBtn.addEventListener('click', zoomOut);
resetBtn.addEventListener('click', resetImage);
rotateClockwiseBtn.addEventListener('click', rotateClockwise);
rotateCounterClockwiseBtn.addEventListener('click', rotateCounterClockwise);
flipBtn.addEventListener('click', flipImage);
prevBtn.addEventListener('click', showPrevious);
nextBtn.addEventListener('click', showNext);
autoPlayBtn.addEventListener('click', toggleAutoPlay);
closeBtn.addEventListener('click', closeModal);
</script>
</body>
</html>3.空链接:
所谓的空链接就是在你不知道要链接什么内容的时候，先创建一个空链接作为缓冲。
<a href="#">空链接</a>例子如下:
也就是点了之后没有任何的反应，这就是空链接。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接讲解</title>
</head>
<body>
<h1>超链接</h1>
<a href="#">空链接</a>
</body>
</html>4.下载链接
1.当在同一目录时，通过点击超链接可以直接下载文件，压缩包等等，href属性值赋予地址即可。
<a href="文件地址">点击超链接下载文件或压缩包</a>例子如下:
2.浏览器可以直接打开图片或.txt文档，如果我们希望浏览器不打开直接下载，则可以通过download属性来实现这一功能。
<a href="下载地址" download="名字"></a>5.各种网页元素链接
网页中的各种元素也可添加链接，如文本，图片，表格，音频，视频等可添加超链接。
例如：链接到一张微信的图片
<a href="520.png"><img src="520.png"></a>6.锚点链接
锚链接可以链接到本页面的特定位置，也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。
1.当跳转到当前页面的特定位置时，直接将锚标记设为href属性的值。如：
<a href="#top">跳转</a><br/>
<h3 id="top">标记处</h3>例子如下:
这里就是对鲁迅做了一个锚点链接 。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接讲解</title>
</head>
<body>
<h1>超链接</h1>
狂人日记
<h5 id="top">鲁迅</h5><br>
某君昆仲，今隐其名，皆余昔日在中学时良友；分隔多年，消息渐阙。日前偶闻其一大病；适归故乡，迂道往访，则仅晤一人，言病者其弟也。劳君远道来视，然已早愈，赴某地候矣。因大笑，出示日记二册，谓可见当日病状，不妨献诸旧友。持归阅一过，知所患盖“迫害狂”之类。语颇错杂无伦次，又多荒唐之言；亦不著月日，惟墨色字体不一，知非一时所书。间亦有略具联络者，今撮录一篇，以供医家研究。记中语误，一字不易；惟人名虽皆村人，不为世间所知，无关大体，然亦悉易去。至于书名，则本人愈后所题，不复改也。<br>
七年四月二日识。<br>
一<br>
今天晚上，很好的月光。
我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？
我怕得有理。<br>
二<br>
今天全没月光，我知道不妙。早上小心出门，赵贵翁的眼色便怪：似乎怕我，似乎想害我。还有七八个人，交头接耳的议论我，张着嘴，对我笑了一笑；我便从头直冷到脚根，晓得他们布置，都已妥当了。
我可不怕，仍旧走我的路。前面一伙小孩子，也在那里议论我；眼色也同赵贵翁一样，脸色也铁青。我想我同小孩子有什么仇，他也这样。忍不住大声说，“你告诉我！”他们可就跑了。
我想：我同赵贵翁有什么仇，同路上的人又有什么仇；只有廿年以前，把古久先生的陈年流水簿子，踹了一脚，古久先生很不高兴。赵贵翁虽然不认识他，一定也听到风声，代抱不平；约定路上的人，同我作冤对。但是小孩子呢？那时候，他们还没有出世，何以今天也睁着怪眼睛，似乎怕我，似乎想害我。这真教我怕，教我纳罕而且伤心。
我明白了。这是他们娘老子教的！<br>
三<br>
晚上总是睡不着。凡事须得研究，才会明白。
他们——也有给知县打枷过的，也有给绅士掌过嘴的，也有衙役占了他妻子的，也有老子娘被债主逼死的；他们那时候的脸色，全没有昨天这么怕，也没有这么凶。
最奇怪的是昨天街上的那个女人，打他儿子，嘴里说道，“老子呀！我要咬你几口才出气！”他眼睛却看着我。我出了一惊，遮掩不住；那青面獠牙的一伙人，便都哄笑起来。陈老五赶上前，硬把我拖回家中了。
拖我回家，家里的人都装作不认识我；他们的脸色，也全同别人一样。进了书房，便反扣上门，宛然是关了一只鸡鸭。这一件事，越教我猜不出底细。
前几天，狼子村的佃户来告荒，对我大哥说，他们村里的一个大恶人，给大家打死了；几个人便挖出他的心肝来，用油煎炒了吃，可以壮壮胆子。我插了一句嘴，佃户和大哥便都看我几眼。今天才晓得他们的眼光，全同外面的那伙人一模一样。
想起来，我从顶上直冷到脚跟。
他们会吃人，就未必不会吃我。
你看那女人“咬你几口”的话，和一伙青面獠牙人的笑，和前天佃户的话，明明是暗号。我看出他话中全是毒，笑中全是刀。他们的牙齿，全是白厉厉的排着，这就是吃人的家伙。
照我自己想，虽然不是恶人，自从踹了古家的簿子，可就难说了。他们似乎别有心思，我全猜不出。况且他们一翻脸，便说人是恶人。我还记得大哥教我做论，无论怎样好人，翻他几句，他便打上几个圈；原谅坏人几句，他便说“翻天妙手，与众不同”。我那里猜得到他们的心思，究竟怎样；况且是要吃的时候。
凡事总须研究，才会明白。古来时常吃人，我也还记得，可是不甚清楚。我翻开历史一查，这历史没有年代，歪歪斜斜的每叶上都写着“仁义道德”几个字。我横竖睡不着，仔细看了半夜，才从字缝里看出字来，满本都写着两个字是"吃人"！
书上写着这许多字，佃户说了这许多话，却都笑吟吟的睁着怪眼看我。
我也是人，他们想要吃我了！
<a href="#top">跳转</a>
</body>
</html>2.当跳转到另一个网页的特定位置时，将锚标记添加到链接地址的末尾。
<a href="https://www.baidu.com/#标记名">跳转到百度</a>相对路径和绝对路径的区别：
绝对路径就是主页上的文件或目录在硬盘上的真正路径，使用绝对路径定位链接目标文件比较清晰，但是有两个缺点：一是需要输入更多的内容，而是如果文件移动了，就要重新设置所有链接。
相对路径是文件只要属于同一个网站，即使不在一个目录中，也可以使用它链接。
两个的区别在于绝对路径是真正在硬盘上能找到的路径，而相对路径是对于自己目标文件的的位置。
小结：
今天的全部内容就讲完啦！！！其实有的时候的我们害怕的并不是失去，而是失去后的感觉，那种孤单寂寞的感觉，所以我们应该珍惜当下的任何有缘人，也许他/她们并不善于表达，请不要怪他们只要他们有一颗想去保护你的心就好了，也仅仅如此了，愿天下有情人终成眷属，好了，今天就用要学的《天后》来结尾吧！愿我们每个人都能找到属于自己的天后，我是在学校写博客的Joker.sun，我们下次再见！！！（歌依然是链接，别忘了听哟！！！）
今日电脑配置：
（如果有错误记得私信我哟！我会改正的！！！）
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
