HTML链接和锚点学习---第四天
HTML链接和锚点设置
目录
HTML链接和锚点设置
一.超链接标签
1.1链接的语法格式
1.1.1通过使用 href 属性 - 创建指向另一个文档 / 网页的链接
1.1.2通过使用 name 属性 - 创建文档内的书签（也就是锚点设置）
一.超链接标签
1.1链接的语法格式
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
我们通过使用 <a> 标签在 HTML 中创建链接，a就是anchor，意为锚，语法格式如下：
<a href="链接目标">文字/按钮/图像。。。</a>
href属性规定链接目标，可以是该文档中的某一位置，也可以跳转到其他网页，开始标签和结束标签中间的文字等会以超链接的样式来显示。
| 属性 | 作用 |
| href | 用于指定链接目标的URL地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式 |
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档 / 网页的链接
通过使用 name 属性 - 创建文档内的书签（也就是锚点设置）
1.1.1通过使用 href 属性 - 创建指向另一个文档 / 网页的链接
链接方式：
1.外部链接：一般是链接到其他网站上，以http://为标准
<!DOCTYPE html>
<html lang="zh-CN"><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><a href="https://www.baidu.com/">外部链接---百度</a>
</body></html>
当我们点击这段链接的时候，就会自动把我们送到href指定的网站中去
但是这时候大家会发现，网页会在原网页上打开百度窗口，但是如果我们想保留原窗口，打开新窗口的话该怎么做呢？
target属性就是专门为这种特殊需求而存在的
当我们在文件中设置target="_blank"时，网页就会弹出新的窗口，而不会覆盖原窗口了：
<a href="https://www.baidu.com/" target="_blank">外部链接---百度</a>
2.内部链接：网站内部页面与页面之间的链接，直接链接到文件名称即可
<a href="./03-新闻案例.html" target="_blank">内部链接---新闻</a>
点击之后就会跳转到我们之前写的新闻网页上
3.空连接：当没有确定链接目标时，可以使用#代替
<a href="#" target="_blank">空连接</a>
空链接点开后还会跳转到当前页面，如果设置了target="_blank"，就会新打开一个当前页面
4.下载链接：如果href里面地址是一个文件或压缩包，就会直接下载这个文件
很多软件下载网站用的就是这种链接
跟大家提供一个思路，我们可以把压缩包拖到当前文件的文件夹下，然后引用其链接，接着尝试在网页中打开
<a href="./1.zip">下载压缩包</a>
网页元素的链接：除了文字外，图片等都可以做链接
比如下图我用了图片做链接：
<a href="./03-新闻案例.html"><img src="./1.jpg" alt="图片加载失败" width="500px"></a>
点击图片后就会把链接网页显示出来：
1.1.2通过使用 name 属性 - 创建文档内的书签（也就是锚点设置）
什么叫锚点链接？
锚点链接就是通过我们自己的设置，可以快速定位到页面中的某个位置，比如百度百科中经常会用到锚点
当我们点击目录时，会自动跳转到本页面中对应的介绍，而不是新打开一个页面
在这里就需要用到name 属性规定锚（anchor）的名称。
我们可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>提示：锚的名称可以是任何你喜欢的名字。
提示：可以使用 id 属性（例如：<a name="#bottom">底部跳转</a>，但是同样下方需要跳转到的地方也需要设置id属性<p id="bottom">这里是底部</p>）来替代 name 属性，命名锚同样有效。（id属性会在后期的css学习中具体讲到）
案例如下：
我已经设计好了一个页面
<!DOCTYPE html>
<html lang="zh-CN"><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><p>（轻小说《从零开始的异世界生活》的角色）</p><h2>目录</h2><a href="#character">1.角色设定<br/></a><a href="#figure">2.角色形象<br/></a><a href="#relation">3.人际关系<br/></a><a href="#experience">4.角色经历<br/></a><a href="#popularity">5.人气评选<br/></a><h3 id="character">角色设定</h3><p>种族：鬼族<br/> 武器：流星锤（铁链连着带棘刺的铁球）<br/> 能力：家务万能、鬼化（头上长角，战斗力会增强，但精神情绪也会受到影响）、魔法、嗅到魔女的气味<br/> 身份：露格尼卡王国，处在边境伯罗兹瓦尔宅邸的双胞胎女仆中的妹妹，鬼族后裔<br/> 维持着宅邸的机能，与笨手笨脚的拉姆不同，在工作上全能。</p><h3 id="figure">角色形象</h3><p>蓝色发色，蓝色瞳孔，身高154cm，大大的眼睛和桃红色嘴唇，轮廓不太分明的面容显得可爱。发型是齐颈短发，然而头发分界线却有所不同，前留海盖住她的右眼（姐姐是左眼）。一身以黑色为基调的围裙，头上是白色帽饰，除刘海方向、发色和瞳色外和姐姐长得几乎一样。</p><h3 id="relation">人际关系</h3><p>对姐姐拉姆有着绝对的信赖，是个十足的姐控（一直觉得姐姐是最优秀的）。因小时候作为鬼的能力不如姐姐而感到自卑，在姐姐为了救自己而失去了角的力量后为了能保护姐姐，以姐姐为目标努力着。<br/>一开始由于昴身上“魔女的香味”以及因为轮回而行动诡异而对昴充满着敌意和怀疑，甚至在轮回中数次下了杀手，但是在经历了种种事件后开始对昴十分信任，将昴的一切都看在眼里，深深地爱上了昴，性格逐渐开始温和，也变得更加爱笑了。在王选篇的轮回中多次为了昴牺牲了自己，始终陪伴着一度鲁莽行事，不断犯错导致轮回，甚至精神崩溃的昴，如同昴精神支柱一般的存在，也正是因为有雷姆始终如一不离不弃的陪伴，昴才找回了寻找完美结局的动力，也对雷姆产生了感情。罗兹瓦尔认为昴对雷姆的感情之强烈足以匹敌他对爱蜜莉雅的感情。</p><h3 id="experience">角色经历</h3><p>宅邸篇中对昴的情感（好感度）随着昴在几次重新读档后的不同表现而不同，曾因昴的行为可疑（不知道昴是读档重来的）怀疑昴是爱蜜莉亚敌对势力或者魔女教派来的间谍而伤害或杀死昴<br/>在王选篇中大为活跃，在菜月昴不被爱蜜莉雅所理解，鲁莽行事、不断犯错、遍遍轮回，陷入崩溃状态自暴自弃时，用各种代价，努力的让昴重新找回了要走向完美结局的动力。<br/>IF线中在王选篇第四周目中昴提出与雷姆浪迹天涯，雷姆答应的世界线中，逃避了王选，和昴结婚并生了两个孩子，还留了长发，过上了幸福的生活。</p><h3 id="popularity">人气评选</h3><p>2016年斩获第四届韩国 Aniplus Character Tournament 冠军。<br/> 2017年斩获第二届Bilibili动画角色人气大赏活动日漫区萌王（女子组第一名）。<br/> 2018年斩获第五届Reddit论坛Anime版块萌战冠军。<br/> 2019年斩获第十一届国际最萌大会皇冠赛冠军。</p></body></html>页面显示如下：
我们试着点击目录链接：
当点击角色设定时，页面顶部就会自动识别，将角色设定介绍推到页面顶部
当我们点击人气评选时，便会自动将页面拉到最底部
HTML链接和锚点学习---第四天相关推荐
- linux查找硬链接文件夹,linux学习（四）复制（cp）移动（mv）删除（rm）查找（find）文件、文件夹操作、软硬链接的区别...
@ 复制文件 cp命令用于复制文件到制定的目录 语法格式为: cp [选项] 源文件或目录 目标文件或目录 命令选项 含义 cp -d 当复制符号链接时,把目标文件或目录页建立为符号链接,并指向与源文 ...
- MVC学习（四）几种分页的实现（3）
在这篇MVC学习(四)几种分页的实现(2)博文中,根据URL中传入的两个参数(页码数,首页.上一页.下一页.末页的标记符)来获得对应的分页数据, 只是传入的参数太多,调用起来不太方便(标记符不能够写错 ...
- javaweb学习总结(四)——Http协议
javaweb学习总结(四)--Http协议 一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用 ...
- 学习Kotlin(四)对象与泛型
推荐阅读: 学习Kotlin(一)为什么使用Kotlin 学习Kotlin(二)基本语法 学习Kotlin(三)类和接口 学习Kotlin(四)对象与泛型 学习Kotlin(五)函数与Lambda表达 ...
- bootstrap学习（四）输入框、导航
bootstrap学习(四)输入框.导航 输入框组: 基本用法: //form-control 占满 //input-group:输入框组 //input-group-addon:输入框前加入一个前缀 ...
- MybatisPlus学习（四）条件构造器Wrapper方法详解
https://www.cnblogs.com/xianz666/p/13857733.html MybatisPlus学习(四)条件构造器Wrapper方法详解 文章目录 1.条件构造器 2.Que ...
- 吴恩达《机器学习》学习笔记四——单变量线性回归（梯度下降法）代码
吴恩达<机器学习>学习笔记四--单变量线性回归(梯度下降法)代码 一.问题介绍 二.解决过程及代码讲解 三.函数解释 1. pandas.read_csv()函数 2. DataFrame ...
- 跳转定义_HTML中的超级链接和锚点跳转
好好学习,天天向上 本章主要是HTML标签中,超级链接和锚点跳转的基础使用 一.超级链接 HTML 使用超级链接与网络上的另一个文档相连. 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可 ...
- [jQuery学习系列四 ]4-Jquery学习四-事件操作
[jQuery学习系列四 ]4-Jquery学习四-事件操作 前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 ...
- Scrapy学习第四课
python爬虫框架scrapy学习第四课 任务:爬取凤凰网导航下所有一级.二级和具体新闻数据 执行:爬虫实例 结果:爬取结果展示 任务:爬取凤凰网导航下所有一级.二级和具体新闻数据 凤凰网导航 一级 ...
最新文章
- 9个数据科学中常见距离度量总结以及优缺点概述
- AngularJs2与AMD加载器(dojo requirejs)集成
- 使用easyexcel导出
- nodogsplash的内部机制分析
- 解决ntfs格式的移动硬盘mount到Linux下时变成只读文件系统的问题
- 1039. 到底买不买（20）
- Android应用开发—ViewPager FragmentPagerAdapter和FragmentStatePagerAdapter下Fragment的生命周期
- 如何使用Nginx服务开启HTTP2
- JavaScript与JSP区别
- 关于DIV嵌套（二）：div嵌套div水平垂直居中
- php转化成json数组,php怎么实现数组转json,php把json转化成数组
- 怎样才是真正的架构师
- Houdini参数常见问题
- 卡尔曼滤波与扩展卡尔曼滤波(EKF)
- 手写实现乞丐版mybatis
- python爬虫100例--酷我音乐--周杰伦歌曲（1）
- [个人笔记] ssh-keygen和openssl工具的使用
- 教你如何安装小熊猫DEV-C++6.7.5版
- 这届90后女博士，对30岁不屑一顾
- 从零开始成为一名合格的数据分析师：为什么必须学统计学？