HTML的链接标签
网页的链接标签
文本超链接
图像超链接
格式:<a href="path" target="目标窗口位置" >链接文本或图像</a>
锚链接(实现页面内或者页面间,指定位置的跳转)
邮件链接
文本超链接(点文本就能链接网页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body> <a href="1.我的第一个网页.html"> 点击跳转到页面1 </a>
<a href="https://www.baidu.com/"> 点击跳转到百度 </a> </body>
</html>
图像超链接(点图片就能链接网页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<a href="https://www.baidu.com/">
<img src="../resources/image/1.jpg" alt="桌面壁纸" title="桌面图像" width="200" height="100">
</a>
</body>
</html>
在新标签页打开和在当前网页打开
区别在于:target="_blank" 和 target="_self"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body> <a href="https://www.baidu.com/" target="_blank"> 点击跳转到百度 </a> </body>
</html>
锚链接
第一种锚链接:实现页面内的跳转
第二种锚链接:实现页面间跳到锚链接
1. 第一种锚链接(实现页面内的跳转)
锚链接的头部标记语法: <a name="top"> 锚标签的顶部 </a>
锚链接的点击标记语法: <a href="#top"> 回到锚链接的顶部 </a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!-- 锚链接的头部标记 -->
<a name="top"> 锚标签的顶部 </a>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<!-- 锚链接跳到头部标记 -->
<a href="#top"> 回到锚链接的顶部 </a>
</body>
</html>
2. 第二种锚链接(实现页面间跳到锚链接)
锚链接的头部标记语法(在1.中): <a name="另一个页面的锚链接标记">另一个页面的锚链接标记</a>
锚链接的点击标记语法(在4.中): <a href="1.我的第一个网页.html#另一个页面的锚链接标记"> 跳转到另一个页面的锚链接 </a>
完整代码为:
1、在1.我的第一个网页.html中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
Hello, World!
<!-- 锚链接的头部标记 -->
<a name="另一个页面的锚链接标记"></a>
</body>
</html>
2、在4.链接标签。html中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<p> <img src="../resources/image/1.jpg" alt="桌面图片" width="400" height="200"> </p>
<!-- 锚链接跳到头部标记 -->
<a href="1.我的第一个网页.html#另一个页面的锚链接标记"> 跳转到另一个页面的锚链接 </a>
</body>
</html>
邮件链接
语法格式:<a href="mailto:1125570966@qq.com">点击联系我</a>
HTML的链接标签的更多相关文章
- ASP.NET Core教程【三】实体字段属性、链接标签、并发数据异常、文件上传及读取
前文索引:ASP.NET Core教程[二]从保存数据看Razor Page的特有属性与服务端验证ASP.NET Core教程[一]关于Razor Page的知识 实体字段属性 再来看看我们的实体类 ...
- H5的段落标签、图片标签、列表标签与链接标签
段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...
- 认识HTML中文本、图片、链接标签和路径
前端之HTML.CSS(一) 开发工具 编辑器 Dreamware.Sublime.Visual Studio Code.WebStorm 浏览器 Chrome.IE(Edge).Safari.Fir ...
- HTML之基本语法(链接标签、路径的介绍和使用)
一.链接标签 语法:<a href="目标地址">这个标签上展示的内容</a> 作用:可以实现在当前页面跳转到新页面的操作 属性 1.target这个属性可 ...
- 链接标签(a 标签)
一.链接标签 单词缩写: anchor 的缩写. 在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可. 语法格式: <a href="跳转目标" target ...
- 多测师讲解html _链接标签004_高级讲师肖sir
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链 ...
- html a 链接标签title属性换行鼠标悬停提示内容的换行效果
鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...
- Struts2中的链接标签 <s:url>和<s:a>---在action中获取jsp表单提交的参数(转)
转自:http://sgl124764903.iteye.com/blog/444183 1.普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page ...
- Html链接标签:
<a>标签可以在网页上定义一个链接地址,它的常用属性有: (1)href属性 定义跳转的地址 (2)title属性 定义鼠标悬停时弹出的提示文字框 (定义鼠标悬停时,弹出的提示框中的文字) ...
随机推荐
- JS 自动关闭页面
<script language=javascript> this.window.opener = null; window.close(); </script>
- LeetCode:27 移除元素
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
- [HNOI2009]图的同构记数
题意 在所以置换下,本质不同的\(n\)阶图个数 做法 可以假想成\(K_n\),边有黑白两色,黑边存在于原图,白边存在于补图 由于\(n\le 60\),可以手算出拆分数不大,所以我们爆搜置换群 对 ...
- 配置webpack中dev.env.js、prod.env.js,解决不同命令下项目启动和打包到指定的环境
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
- C语言实现顺序栈
C语言实现顺序栈,顺便加深刻++i,++i的区别 #include <stdio.h>#include <stdlib.h>#define maxsize 100/*写在前面的 ...
- 03_TypeScript函数
1.函数的定义 es5定义函数的方法 //函数声明法 function run(){ return 'run'; } //函数表达式 var run = function(){ return 'run ...
- ansi sql 语法 切换为 oracle 语法
语句粘贴到 工作表 打开查询构建器 勾选 创建oracle连接 over sql dev 的语法设置调整,否则表别名会右对齐 下面是 转换后的结果,是不是看得舒服多了
- 51nod(1089 最长回文子串 V2)(hash 加二分)
1089 最长回文子串 V2(Manacher算法) 回文串是指aba.abba.cccbccc.aaaa这种左右对称的字符串. 输入一个字符串Str,输出Str里最长回文子串的长度. 输入 ...
- shell-删除指定时间前的文件
需要配合find和rm两个命令完成 显示20分钟前的文件: find /home/prestat/bills/test -type f -mmin +20 -exec ls -l {} \; 删除20 ...
- Win10安装7 —— 系统的优化
本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12371356.html 一:引言 在我们使用电脑的过程中,总是有一些窗口弹出来需 ...