标签之美三——超链接的嵌入 原

标签之美——超链接标签

一、创建超链接

通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置。这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标地址。

1、链接到当前页面指定位置

被链接的地方需要使用<a>标签的name属性标记,示例如下:

<a href="#last">链接到本页最后</a><!--创建一个超链接-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="last">最后</a><!--链接的标记名-->
</body>

2、链接到本地相对路径文件

相对路径是以当前文件所在的路径为参考的。示例如下:

<body>
<!--同级链接:所链接到得文件与当前文件在同一目录下,直接链接文件名即可-->
<a href="nwe.html">同级链接</a>
<!--下级链接:所链接的文件在当前文件所在目录的子目录下-->
<a href="thml/new.html">下级链接</a>
<!--上级链接:所链接文件在当前文件所在的上级目录-->
<a href="../new.html">上级链接</a>
</body>

3、链接到网址URL

这种方式通常会用在友情链接中。例如如下链接到百度:

<body>
<a href="http://www.baidu.com/">百度</a>
</body>

二、链接的打开方式

<a>标签中的target属性可以设置标签的打开方式,一共有四种方式,分别是_blank,_parent,_self,_top。

1、_blank打开方式

会让浏览器在新的窗口中打开标签。

2、_parent打开方式

在父窗口中打开,当前页面会被覆盖。

3、_self打开方式

在当前窗口打开,当前窗口会被覆盖。

4、_top打开方式

在最上层窗体中打开。

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏salesforce零基础学习

salesforce零基础学习(八十四)配置篇: 自定义你的home page layout

当我们进入salesforce系统或者切换app后,默认第一个看到的就是home页面。home页面简单的来说可以包括左侧(narrow component)和右...

3455
来自专栏Youngxj

微信内置浏览器自动跳转其它浏览器

6.4K6
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——系统更新以及配置字体

打造前端 Deepin Linux 工作环境——系统更新以及配置字体 安装好编辑器,然后就准备码代码了,但是感觉字体不是很好看。所以决定配置一下字体。顺便把系统...

4106
来自专栏疯狂的小程序

像 React Native 开发 APP 一样,用wn-cli 开发 weapp (微信小程序)

wn-cli 像React组件开发一样来开发微信小程序

4096
来自专栏互联网杂技

把图片变成字体,然后在引入到网页

首先是字体:如果把想要的字体引入到网页。 第一步:下载字体文件,一般下载到的是.TTF文件,只有一个文件。 第二步:把下载的字体,转换为其他格式,一般为了解决...

3668
来自专栏mySoul

微信小程序初步入坑指南

https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

1374
来自专栏前端新视界

构建通用的 React 和 Node 应用

原文:Build a universal React and Node App 演示:https://judo-heroes.herokuapp.com/ 译者...

3107
来自专栏阮一峰的网络日志

网页开发的6种在线调试环境

如今的网页代码,一般由三个部分组成:   * HTML,语义层,提供网页的内容。   * CSS,表现层,规定网页的外观。   * Javascript,...

3143
来自专栏漏斗社区

打个响指Selenium自动化开启

最近斗哥在朋友的影响下,接触了自动化测试工具中的一个项目:appium自动化测试脚本。

842
来自专栏IMWeb前端团队

基于vue2.0+vuex+localStorage开发的本地记事本

本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。 在线预览地址:DEMO 功能...

2866

扫码关注云+社区

领取腾讯云代金券