链接标签(anchor)和锚点定位

一、链接标签

HTML中创建超链接只需要用标签环绕需要被链接的对象即可，基本原格式如下：

    <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定连接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。Hypertext
Reference的缩写，意思是超文本引用。
target：用于指定链接页面的打开方式，取值有self和blank两种，其中self为默认值，blank为在新窗口中打开。
特殊base：在head标签中写入可以设置整体标签的打开状态为新窗口。

注意：
1.外部链接需要添加http：//www.baidu.com
2.内部链接(本地链接) 直接链接内部页面名称即可比如<a href="index.html">首页</a>
3.如果当时没有确定连接目标时，通常将链接标签的href属性值定义为"#"(即href=“#”)，表示该链接暂时为一个空连接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><h3>友情链接:</h3><a href="https://www.bilibili.com/" target="self">bilibili</a>   <br /><a href="VSCode安排上了.html" target="_blank">本地链接</a> <br /><a href="#" target="_blank">这是我的个人网站</a> <br />
</body>
</html>

链接标签效果展示：

二、锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分两步：

使用 <a href="#id名">链接文本 </a> <br />创建链接文本。
使用相应的id名标注跳转目标的位置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><h3 id="top"></h3><img src="双笙1.jpg" alt="图片加载失败" width="200"><h2>目录</h2><hr /><a href="#experience">1 早年经历 </a> <br /><a href="#show">2 演艺经历</a> <br /><a href="#music">3 音乐作品</a> <br /><a href="#evaluate">4 人物评价</a> <br /><h3 id="experience">早年经历</h3><hr />“双笙”是她小学毕业那年给自己取的圈名。她曾在“双笙”和“霜笙”两个名字之间犹豫很久，最终认定前者那两个字的结构看起来更美。初二时，双笙开始用社交软件直播唱古风音乐，也随着伴奏录过几首中国风的小情诗。母亲希望双笙学播音主持，以后回老家当播音员，为此还把她送到县广电局上了一段时间培训课，但双笙有自己的想法，更希望成为歌手。 <h3 id="show">演艺经历</h3><hr />2015年4月，双笙在一款音乐App上发布了自己翻唱的古风音乐《故梦》，从而获得了一定的关注度；同年，推出个人原创单曲《采茶纪》。2016年4月，为网游《龙之谷》演唱的插曲《查尔德》正式上线；5月13日，发行专辑《笙声不息》；同年，与易言、樊棋、南久合作翻唱歌曲《九九八十一》（Bilibili2016年拜年祭歌曲）。2017年3月，为电视剧《红楼梦》青春版演唱的推广曲《终身误》正式上线；4月，与歌手慕寒合作，为网易网游《新倩女幽魂》六周年资料片“紫禁风云”演唱了倩女串烧歌曲《倩音流年》；同月，发布了一首为漫画《笑傲江湖》原创的东方不败同人歌曲《不立传-东方不败》 [7]  。2018年1月13日，推出原创单曲《少女净妖师》；同月，与GAI合作演唱《都市惊奇夜》。1月25日，为手游《楚留香》演唱的宣传曲《马步谣》正式上线。3月24日，推出个人单曲《司南歌》。8月24日，为电影《阴阳诀之祭情》演唱的主题曲《阴阳诀》正式上线 。12月5日，推出个人原创单曲《谢芳菲》。<h3 id="music">音乐作品</h3><hr />01. 《长安忆》          　 05.    《琴师》    <br />02. 《霜雪千年》      06. 《故梦》    <br />03. 《浮生未歇》      07. 《泸沽寻梦》  <br />04. 《画双》                <br /><h3 id="evaluate">人物评价</h3><hr />双笙对古风音乐优美的旋律和独特的意境情有独钟，她略带沙哑的独特嗓音，具有极高的辨识度，被形容为“又沧桑又稚嫩”。在日本的Niconico上，有人说听了她的歌就想学汉语。（人民网、《齐鲁晚报》评）双笙用独有的古风曲调，独特的声线，以及宛如天籁的嗓音，将生命中的花谢花开，缘起缘灭，生活中的友情，乃至爱情等情感于诗情画意中娓娓道来，尽显古风古韵之纯净唯美 [5]  。（中国新闻网评）双笙在演唱歌曲《阴阳诀》时，将歌曲演唱的情感丰富、回味悠长，歌曲曲调优美中透露着一股悲壮，配合抒情的旋律，极具情绪感染力 。（腾讯娱乐评）<a href="#top">top</a> <br />
</body>
</html>

锚点定位效果展示：

链接标签(anchor)和锚点定位相关推荐

html 标签、图像、链接、注释、锚点定位、特殊字符
常用的 html 标签 <h1>h1标题</h1> <div>这是一个div标签</div> <p ...
如何用html语言定位img,html经常使用标签(图像标签img，连接标签a，锚点定位，及路径)...
1 图像标签img (重点) 单词缩写: image 图像html HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就须要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性 ...
页面内锚点定位及其跳转
一.前言这篇文章我们来看一个网页中常用的小功能--锚点定位及其跳转.简单理解,这个功能就是点击"目录"中相应的"标题",对应"滚动跳转"到 ...
【2022.7.11】HTML基础介绍语法常用标签超文本链接锚点定位
来自2022.7.11 今日学习一.HTML基础介绍 1.网页 1.1什么是网页 1.2什么是HTML 1.3超文本 1.4网页的形成 2.常用浏览器 2.1常用浏览器 2.2浏览器内核 3.web ...
JS 获取链接(url)参数以及锚链接（anchor）结合富ajax的应用（ajax前进/后退的问题）...
1. JavaScript获取url链接的方法: <script language="javascript">document.write(window.locatio ...
HTML超链接标签——a标签、锚点、base标签、假链接标签
目录一.a标签 1.什么是a标签? 2.a标签中的属性: 3.注意点: 二.锚点 1.什么是锚点? 2.如何实现锚点? 3.要想实现通过a标签跳转到指定的位置分为两步:(重点!!!) 4.格式: 5 ...
标签有关用法以及锚点定位；
一.页面内的锚点定位: 锚点定位中,就算采用overflow:hidden将滚动条隐藏,但是它依然可以发生锚点定位,实现定点跳转: 1.单向定位: 锚定定位实在页面必须要发生滚动的情况下,不滚动也能发 ...
html锚点定位（锚点链接：name还是id，一文搞定）
锚点链接是超链接的一种.锚点可以连接到文档中的某一个特定位置.对于较长的页面来说,使用锚点链接可以快速定位到页面中的某一个位置,提升用户体验. 锚点链接的使用场景一般有以下两种: 跳转到当前页面的指 ...
【HTML】HTML 标签 ⑤ ( 锚点定位 | base 标签 | 预格式化文本标签 | HTML 特殊符号 )
文章目录一.锚点定位二.base 标签三.预格式化文本标签四.HTML 特殊符号一.锚点定位锚点定位步骤 : 创建锚点 : 使用 id 属性 , 创建跳转锚点 , 一般情况下是在各种级别 ...

链接标签(anchor)和锚点定位

链接标签(anchor)和锚点定位相关推荐

最新文章

热门文章