Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录
- 前言
- 一、超链接标签
- (一)链接其它子网页
- (二)链接其它站点
- (三)虚拟超链接
- 二、从当前页面链接到指定位置
- 三、链接的访问情况
- 四、在新窗口中打开链接
- 例题
- 结语
前言
本节介绍超链接标签即a标签的用法以及相关应用例题。
一、超链接标签
a标签
,也叫超链接标签
,在图片或者文字上使用,或者可以用在导航栏上,点击后跳到新的页面,以供用户浏览。超链接表示为<a href ="网址">文字或图片</a>
,这里的"href=
“是该标签的属性即超链接,通过赋值符号”=",来对该属性进行赋值,而网址是要跳转的目标网址。
<a href ="网址">文字或图片</a>
它有几种应用情况:
1、链接到本站点的其它子网页;
2、链接到其它站点;
3、虚拟超链接。
(一)链接其它子网页
这种情况,是在主页中点击文字或者图片,使其跳转到其它子网页。表示为<a href ="文件名">文字或图片</a>
,属性的赋值号后跟子网页的文件名
,使href属性取值。
例如下图在主页面中点击"国际",链接至国际栏目子网页中:
(二)链接其它站点
而当点击文字或者图片后,若想链接至其它站点,表示为<a href ="网页地址">文字或图片</a>
,即创建一个指向网站的超链接,属性的赋值号后跟跳转网页的地址
,使href属性取值,且在地址中要使用https协议。
例如像这样是错误的:
<a href="www.baidu.com">百度一下</a>
正确写法:<a href="http://www.baidu.com">百度一下</a>
例如登录csdn,使用qq登录,这里的qq图标点击后跳转至qq登录页面,在这里a标签的作用就是创建一个指向qq登录页面的超链接:
(三)虚拟超链接
虚拟超链接,表示为<a href ="#">文字或图片</a>
,属性的赋值号后跟#
,它不会链接到其它网址,即还未设计的链接,可以理解为空链接
。
二、从当前页面链接到指定位置
当需要通过a标签跳转到指定页面位置时,需要使用虚拟超链接并在跳转位置的a标签加上id属性,即虚拟超链接的取值与跳转位置的a标签id属性取值是一样。
例如,下列html代码中,我们点击查看数据库原理与应用或者查看QT Creator就会跳转至指定的栏目03和06中:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>直接跳转:</p><a href="#03">查看数据库原理与应用</a><a href="#06">查看QT Creator</a><hr /><h2>栏目 01</h2><p>Web前端开发</p><h2>栏目 02</h2><p>计算机网络</p><h2><a id="03">栏目 03</h2><p>数据库原理与应用</p><h2>栏目 04</h2><p>c++程序设计</p><h2>栏目 05</h2><p>c语言</p><h2><a id="06">栏目 06</a></h2><p>QT Creator</p></body>
</html>
运行结果:
点击查看QT Creator,跳转至栏目06:
三、链接的访问情况
默认情况下,即在未进行CSS的样式编辑的情况下,链接会以不同字体颜色的形式展示其浏览情况:
未访问的链接显示为蓝色字体
且带有下划线;
访问过的链接显示为紫色字体
且带有下划线;
当点击链接时,链接会显示为红色字体
且带有下划线。
四、在新窗口中打开链接
在a标签内添加上target属性
,且target="_blank"
,当点击这个超链接时浏览器则会新建一个窗口解析这个链接并打开。
<a href ="网址" target="_blank">文字或图片</a>
例如,下列html代码中,在新的窗口中打开百度链接:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><a href ="https://www.baidu.com" target="_blank">百度一下</a></body>
</html>
运行结果如下:
点击“百度一下”后,新窗口自动弹出:
例题
例、完成下列网页设计,其中导航栏里链接首页的其它子网页,且子网页中可以跳转文章,文章暂且不用编辑目录即可,另外还可以返回csdn主页和进行百度搜索,效果图如下:
1、创建站点文件夹,编辑主页html代码,即主页.html文件,如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Document</title></head><body><h1>首页</h1><h2>导航栏</h2><hr /><pre><a href="Web前端开发.html">Web前端开发</a><br /><a href="计算机网络.html">计算机网络</a><br /><a href="数据库原理与应用.html">数据库原理与应用</a><br /><a href="QT Creator.html">QT Creator</a><br /><hr /><a href="https://www.csdn.net/">返回csdn主页</a><a href="https://www.baidu.com">未找到需要,百度一下</a></pre></body>
</html>
2、对四个子网页编辑,分别是Web前端开发.html、计算机网络.html、数据库原理与应用.html和QT Creator.html四个html文件,其实代码都大同小异,如下;
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>Web前端开发</h1><p><a href="#">Web前端开发笔记——第一章 Web前端概论</a></p><p><a href="#">Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性</a></p><p><a href="#">Web前端开发笔记——第二章 HTML语言 第二节 基本标签</a></p></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>计算机网络实验</h1><p><a href="#">*(绝对可以安装成功的HUAWEI eNSP模拟器)计算机网络实验(华为eNSP模拟器)——第一章 华为eNSP安装教程</a></p><p><a href="#">计算机网络实验(华为eNSP模拟器)——第二章 VRP通用路由平台介绍</a></p><p><a href="#">计算机网络实验(华为eNSP模拟器)——第三章 配置IP地址和网关</a></p></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>数据库原理与应用</h1><p><a href="#">数据库原理与应用(SQL Server)笔记 第一章 数据定义语言和数据操纵语言</a></p><p><a href="#">数据库原理与应用(SQL Server)笔记 第二章 简单数据查询</a></p><p><a href="#">数据库原理与应用(SQL Server)笔记 第三章 连接查询</a></p></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>QT Creator</h1><p><a href="#">QT Creator应用程序开发——01简单按钮显示</a></p></body>
</html>
3、都保存好后,此时创建的站点文件夹里面有了五个html文件,如下:
创建的文件夹中,五个html文件:
4、用浏览器打开主页.html,这里我用的是火狐:
5、然后我们测试下导航栏功能,点击不同的栏目是否可以进行跳转:
我们发现是没有问题的,其它也是一样:
当点击其中的文章时,我们发现无法跳转,因为定义是虚拟超链接。
6、测试是否能跳转至csdn官网和百度搜索,点击导航栏下方的“返回csdn主页”和“未找到需要,百度一下”,如下:
百度也是可以的:
达到了题设要求!
结语
以上就是全部内容,篇幅较长,感谢您的阅读和支持,若有表述或代码中有不当之处,望指出!您的指出和建议能给作者带来很大的动力!!!
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签相关推荐
- Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
目录 一.区域标签 (一)div标签的定义 (二)div标签的属性 二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
- Web前端开发笔记——第二章 HTML语言 第十一节 语义标签
目录 一.语义标签的定义 二.头部标签.底部标签 三.导航栏标签 四.内容栏标签.区段标签 五.其它内容标签 六.< figure > 和 < figcaption >标 结语 ...
- Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
目录 一.画布标签 二.音视频标签 (一)音频标签 (二)视频标签 (三)资源标签 结语 一.画布标签 <canvas> </canvas> 画布标签用于图形.字符等的绘制,它 ...
- Web前端开发笔记——第二章 HTML语言 第七节 表格标签
目录 一.表格标签的定义 二.表格标签的属性 (一)边框属性 (二)单元格属性 三.表格标签的表头 表头属性 四.表格标签的标题 五.表格标签的嵌套 结语 一.表格标签的定义 在html中,表格标签表 ...
- Web前端开发笔记——第二章 HTML语言 第五节 图像标签
目录 前言 一.图像标签的属性 (一)src属性和alt属性 (二)width属性和height属性 (三)borde属性 二.绝对路径和相对路径 三.图像映射 例题 结语 前言 本节介绍图像标签即i ...
- Web前端开发笔记——第二章 HTML语言 第三节 文本格式化标签
目录 前言 一.文本加粗.斜体标签 二.文本字体缩小.放大标签 三.文本下标.上标标签 四.文本下划线.删除线标签 五.双引号字符 结语 前言 这里主要介绍对html语言中对文本的处理. 一.文本加粗 ...
- Web前端开发笔记——第二章 HTML语言 第八节 表单标签
目录 一.表单的定义 二.输入标签 (一)文本框和密码框 (二)提交按钮和重置按钮 (三)数值选项菜单 (四)滑动条 (五)搜索框 (六)input标签的其它type属性 (七)单选框和复选框 (八) ...
- Web前端开发笔记——第二章 HTML语言 第二节 基本标签
目录 前言 一.标题标签 二.段落标签和段内换行 三.预留格式标签 四.行内组合标签 五.水平线标签 六.注释标签 七.空格字符 例题(创建一个网页) 结语 前言 本节主要讲解HTML的一些基本标签. ...
- Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性
目录 一.什么是HTML? 二.标签 (一)标签.元素的定义 (二)标签的嵌套 (三)标签的属性 (四)父元素.子元素.兄弟元素 三.HTML DOM树 结语 一.什么是HTML? HTML语言,即超 ...
最新文章
- Windows 软件推荐2020
- 一图秒懂P2P、P2C 、O2O 、B2C、B2B、C2C
- AX宏Macros运算
- 十一、python生成器和迭代器
- 【笔试/面试】—— 二叉树的最远距离
- java 接口 白名单,SpringBoot HTTP接口跨域调用及白名单实现
- 机器学习算法之KNN算法,python实现
- VS报错:“Stack around the variable XX was corrupted”
- PHP ‘Array and string offset access syntax with curly braces is deprecated’ 错误的原因和解决办法...
- 元宇宙开发者的乐园 解析元宇宙协议Caduceus生态价值
- 测试IP和端口是否通
- 年薪百万的阿里 P7 到底该具备什么样的能力?!解密篇
- 王者荣耀赛季更新服务器维护到什么时候,王者荣耀赛季更新到几点?s24维护公告最新内容一览[多图]...
- 打造你的“私人空间”,玩客云详细评测
- js多文件下载和多文件分文件夹打包下载并重命名
- 聚合支付系统开发究竟难不难?
- 李开复做客CCTV《面对面》:世界因我而不同
- html中测试心理测试的代码,趣味心理测试源码、心理测试_心理测评微信小程序版...
- java基于springboot+vue的旧衣服捐赠系统 毕业设计nodejs技术
- 四门轿跑 标致发布Exalt概念车设计图