html超链接
2021-04-21 本文已影响0人
零00_
超链接标签a
超链接使用：<a></a>
超链接属性：
<strong>href</strong>- - -指明要跳转到的地址 eg:<a\ href="https://www.baidu.com/">\点击跳转到百度</a> ,此例表示点击链接后，跳转到百度首页
<strong>target</strong>- - -指明点击链接后，打开跳转页面的方式，target="_blank"表示在新窗口打开（点击链接后，点击链接的这个网页窗口还在，新增加了另外一个窗口），target="_self"表示在链接所在这个网页窗口打开（点击链接后，点击链接的这个网页窗口出现跳转到的页面，不会新增窗口）
超链接分类
1.外部链接：点击链接，跳转到其他网站的页面
2.内部链接：点击链接，跳转到该链接所在网站的页面
3.空链接：href="#"代表空链接，可用于暂时还未确定具体链接地址的情况等，先填写一个空链接，后面确定了再填写具体的跳转地址
4.下载链接：href="压缩包名.zip"，点击链接后直接下载压缩文件
5.网页元素链接：其他网页元素，如图片<img><li>等等，都可以加上<a>
6.锚点连接
代码示例：
项目目录结构：
超链接demo.png
demo1.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接练习</title>
</head>
<body>
<h1>超链接练习</h1>
<h4>1.外部链接：跳转到其他网站页面</h4>
<a href="https://www.baidu.com/" target="_blank">点击跳转至其他网站页面---百度</a>
<h4>2.内部链接：本网站页面间的跳转</h4>
<a href="demo1-1.html" target="_self">点击跳转--本网站页面</a>
<h4>3.空链接：#</h4>
<a href="#">我是一条空链接，不会跳转到其他页面</a>
<h4>4.下载链接：a标签中链接地址=压缩包名.zip，点击链接后直接下载文件</h4>
<a href="cat1.zip">点击下载</a>
<h4>5.网页元素的链接：如图片等，标签外面再套一层a标签</h4>
<a href="cat1.jpg" target="_blank"><img src="cat1.jpg" width="300px"></a>
<h4>6.锚点链接，点击后跳转到标记位置</h4>
<h3 id="top">李白最著名的十首诗：</h3>
<a href="#poem1"><strong>静夜思</strong></a>---点击查看该诗内容<br />
<a href="#poem2"><strong>望庐山瀑布</strong></a>---点击查看该诗内容<br />
<a href="#poem3"><strong>早发白帝城</strong></a>---点击查看该诗内容<br />
<a href="#poem4"><strong>送孟浩然之广陵</strong></a>---点击查看该诗内容<br />
<a href="#poem5"><strong>夜宿山寺</strong></a>---点击查看该诗内容<br />
<a href="#poem6"><strong>望天门山</strong></a>---点击查看该诗内容<br />
<a href="#poem7"><strong>赠汪伦</strong></a>---点击查看该诗内容<br />
<a href="#poem8"><strong>独坐敬亭山</strong></a>---点击查看该诗内容<br />
<a href="#poem9"><strong>春夜洛城闻笛</strong></a>---点击查看该诗内容<br />
<a href="#poem10"><strong>渡荆门送别</strong></a>---点击查看该诗内容<br />
<pre id="poem1">
<h3>静夜思</h3>
床前明月光，疑似地上霜。
举头望明月，低头思故乡。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem2">
<h3>望庐山瀑布</h3>
日照香炉生紫烟，遥看瀑布挂前川。
飞流直下三千尺，疑是银河落九天。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem3">
<h3>早发白帝城</h3>
朝辞白帝彩云间，千里江陵一日还。
两岸猿声啼不住，轻舟已过万重山。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem4">
<h3>送孟浩然之广陵</h3>
故人西辞黄鹤楼，烟花三月下扬州。
孤帆远影碧空尽，唯见长江天际流。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem5">
<h3>夜宿山寺</h3>
危楼高百尺，手可摘星辰。
不敢高声语，唯恐天上人。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem6">
<h3>望天门山</h3>
天门中断楚江开，碧水东流至此回。
两岸青山相对出，孤帆一片日边来。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem7">
<h3>赠汪伦</h3>
李白乘舟将欲行，忽闻岸上踏歌声。
桃花潭水深千尺，不及汪伦送我情。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem8">
<h3>独坐敬亭山</h3>
众鸟高飞尽，孤云独去闲。
相看两不厌，只有敬亭山。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem9">
<h3>春夜洛城闻笛</h3>
谁家玉笛暗飞声，散入春风满洛城。
此夜曲中闻折柳，何人不起故园情。
<a href="#top">返回顶部目录</a>
</pre>
<pre id="poem10">
<h3>渡荆门送别</h3>
渡远荆门外，来从楚国游。
山随平野尽，江入大荒流。
月下飞天镜，云生结海楼。
仍怜故乡水，万里送行舟。
<a href="#top">返回顶部目录</a>
</pre>
</body>
</html>
效果图如下：
超链接.jpg
