在html中超链接_HTML 链接及页面内部链接
基本上每个网页上都能找到链接(link)。链接允许用户通过点击它们跳转到一个新的网页或者当前网页的另一个位置,所以又称为“超链接”(hyperlink)。这东西有点儿像游戏里的“传送门”,是联系网络不同位置的重要手段。
下面简单介绍 HTML 中(超)链接及其特性,然后简单介绍 1. 如何创建到其它页面的链接;2. 如何创建页面内部链接。
0. 超链接
超链接使用 HTML 标记语言的 来标记。使用 标记包裹的内容可以是一个单词、一组单词(句子)或者是图片。点击之后可以跳转到另外一个文档,也可以跳转到当前文档内部的其它位置。这取决于 的属性设置。
默认情况下,当鼠标指针移到一个超链接(链接)上的时候,原来的“箭头”会变成“小手”。但是这可以通过 CSS 来控制和改变。
默认情况下,所有浏览器中链接的外观都是如下表现(当然也可以通过 CSS 来控制和改变):
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
做为一个 HTML 标签(元素), 也支持很多 HTML 属性(attribute),包括 HTML 标准属性(所有 HTML 和 XHTML 标签都支持的属性,仅有少数例外)和 HTML 事件属性(使 HTML 事件触发浏览器中的行为,例如当鼠标滑过或者悬停,或者当用户点击某个 HTML 元素时启动一段 JavaScript)。
常用的 的属性有:
自有属性
href – 指定超链接的目的地址(url)(最重要的属性)
rel – 规定当前文档与目标 URL 之间的关系,一般不用设置,属性值可以是
alternate – 可相互替代的内容
author – 文档作者
bookmark – 书签
nofollow – 告诉搜索引擎不要此链接到的权重(可以理解为表示虽然链接了目标网页,但是却不认可目标网页)
target – 指定超链接的打开方式,一般不设置该属性,属性值可以是
_blank – 在新的窗口打开
_self – 在当前窗口打开
name – 规定锚的名称(此属性在 HTML5 中已被去掉。)
标准属性
class – 规定元素的类名(classname)
id – 规定元素的唯一 id,常用于制作页面内部链接(锚点)
style – 规定元素的行内样式(inline style)
title – 规定元素的额外信息(标题,可在工具提示中显示)
事件属性
onclick – 鼠标点击时的动作
1. 创建到其它页面的链接
HTML 链接的使用语法如下(尽量包含了上面的各个属性),
水景一页
显示到网页上就是这个样子:
点击上面的链接会打开本站首页。鼠标悬停时能看到提示语,也就是 title 属性的值。
提示:
上面示例中的四个字”水景一页“也可以是图片,或者其它 HTML 元素。
如果目标地址是个目录(或目录形式),最好总是给链接的结尾加上一个 / 符号。例如,如果链接是
href="http://cnzhx.net/blog"
点击后服务器需要响应两次请求,第一次会将链接转变为
href="http://cnzhx.net/blog/"
第二次才打开转变后的网址(过程应该很快,但是我们应该尽量避免这种不必要的过程)。
2. 创建页面内部链接
前面提到过,id 属性常被用于创建到当前页面(文档)内部的链接,其作用类似于锚点(anchor)。也因此,HTML5 中将用于制作锚点的 的属性 name 取消了。
例如,在下面的位置创建一个”内部链接锚点位置“:
内部链接锚点位置
内部链接锚点位置
在同一个文档的其它位置创建一个到”内部链接锚点位置“的链接就是:
访问”内部链接锚点位置“
显示出来就是,
而如果在别的文档中,还需要在 #tips 前面加上到目标文档的链接地址:
访问 ”HTML 链接“ 页面上的”内部链接锚点位置“
显示出来就是,
提示:
所有支持 id 属性的 HTML 标签都可以做为锚点,直接创建到该锚点的链接就可以了。如,
标题一
就有了一个锚点 h1anchor。比如本文内部的几个小标题都设有锚点,并且在标题后面还用一个符号建了个超链接到当前锚点的位置。这主要是因为在页面上是看不到锚点的,查看页面源文件才能看到,不方便。可以点击这里跳转到 1. 创建到其它页面的链接 试试看。
同一个页面内部不能有重复的 id 属性值。
如果创建了一个指向页面内部位置的超链接,但是却没有写锚点文本,如
本文
就会指向该页面的顶部。例如本站页面底部的”TOP“按钮就是用这种方式制作的(查看回到顶部按钮的制作方法)。
另外,本站给文档内部锚点都用一个符号 ¶ 标记出来了,将下面的代码放到锚点后面就可以了(注意将其中 # 号后面的文本 anchor 改成对应的猫点名称):
¶
其中 anchorlink 类的 CSS 样式是:
.anchorlink {
background-color: transparent;
color: transparent;
text-decoration: none;
font-size: smaller;
margin-left: 0.25em;
margin-right: 0.25em;
padding-left: 0.5em;
padding-right: 0.5em;
}
.anchorlink a:link {
background-color: transparent;
color: transparent;
text-decoration: none;
}
h1:hover .anchorlink a,
h2:hover .anchorlink a,
h3:hover .anchorlink a {
color: lightgray;
}
因为主要是针对
等 HTML 标记使用页面内部链接。©
在html中超链接_HTML 链接及页面内部链接相关推荐
- Java Web开发4___HTML基本标签: 超链接标签之页面内部链接
页面内部链接: 意思是在一个页面内, 点一个网页元素 会链接到当前页面另外一个地方去,称之为页面内部链接 实现步骤 1. 首先在页面中给需要链接的位置命名, 方法如下: <a name= ...
- 在html中超链接_HTML 超级链接详细讲解
超级链接 超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转.超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习. ...
- web前端学习(四)——HTML5的超链接标签设置(页面间链接、锚链接以及邮件链接)
1.HTML5的超链接--页面间链接 <a href ="链接网址" target="目标窗口位置">文本或图像</a> 这里的 hre ...
- html中超链接使用_HTML实例源码
HTML实例源码 实例一 1.要求: 知识要点: html 文档的基本结构,html 标签的书写格式.作用.用法 实训目的: 掌握 html 文档的基本结构,掌握 html 代码网页编辑的基本方法实训 ...
- 网站SEO优化中内部链接的优化
重要性:内链有效的优化能够间接的提高某页面的权重达到搜索排名靠前的效果.同时有效的带领搜索引擎蜘蛛对整站进行抓取. 网站头部导航: 这个导航称为'网站主导航',当用户来到网站需要给他们看到的内容.也就 ...
- 网站内部链接优化大解析
相信广大站长们也知道,无论是什么样的网站,其内部链接都是必不可缺的,可能有部分刚入行的从业者会问内部链接是什么?其实内部链接是很好理解的,简单的来解释一下,内部链接是和外部链接相反的,外部链接我们俗称 ...
- 网站应该更注重内部链接还是外部链接?
在搜索引擎上,去获取流量的最基本单位就是网页.一个网页的外部链接因素,对这个网页的排名影响很大.这个网页的外部链接,既有同一个网站的其他页面给的站内链接,也有其他网站上的网页给的站外链接.下面文章里的 ...
- pyqt怎么button怎么链接_SEO内部链接怎么优化
站的内部链接一般是指在站内的A页面有相关链接指向到B页面.在网站的SEO优化中,做好内部链接的作业是SEOer们的基础作业之一. 内部链接的目的除了进步整个网站的录入状况与频率之外,更重要的是引导使用 ...
- 什么是链接属性,外部链接,内部链接,无链接详解
为什么需要学习链接属性? 从原始代码生成可执行的目标文件需要经过-编码,预处理,编译,汇编,链接,执行等过程.在此处提及是为了让知识能够串联起来,了解什么是链接属性,为什么需要链接属性,链接属性的作用 ...
最新文章
- html5图片灰度显示,HTML5 组件Canvas实现图像灰度化
- python os获取文件大小_Python3基础 os.path.getsize 获得文件的大小
- 十四、“沥沥雨丝如落泪,麻麻密密总为愁。”(2021.5.2)
- Git复习(四)之解决冲突
- 在.Net Core中实现一个WebSocket路由
- 服务器硬盘 主板,服务器主板和普通主板有什么区别?
- Leetcode--15. 三数之和
- sublime test3 php语法错误高亮
- 安装PhantomJS
- entsel约束条件lisp_autocad-plugin
- 局域网内时间同步配置
- Unity复制粘贴功能
- Specified class is an interface
- MFC与DX11结合
- [WIN32]MessageBox用法
- ubuntu 轻量级图片编辑软件
- 美国医生谈医疗创业公司的五大成功要素:简化流程、绩效工资、授权
- Excel 中如何去掉数值中出现的 E +,网上的方法都试过了不管用,改变单元格格式等都无效
- Factory Method
- [笔记] 疯狂JAVA讲义(第3版)第4章 流程控制与数组