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属性 定义鼠标悬停时弹出的提示文字框 (定义鼠标悬停时,弹出的提示框中的文字) ...
随机推荐
- typescript-环境搭建
这个环境比较简单 搭建 TypeScript 开发环境 什么是 compiler? less 编译器:less EcmaScript 6 编译器:babel TypeScript 编译器:typesc ...
- nodejs events
EventEmitter类 events模块提供一个对象:events.EventEmitter,核心是事件触发和事件监听的封装. 大多数时候不会直接使用EventEmitter,而是在对象中继承它( ...
- jvm编译器的优化
1.对byte.short.char赋值时,若右边范围没有超过左边类型的最大表达范围则会自动隐式的加上(byte).(short).(char)强制转换:若右边范围超过了左边类型的最大表达范围则编译失 ...
- udp_demo(傻瓜来回发送)
代码讲解 import socket # 发送数据 def send_data(udp_socket, dest_ip, dest_port): send_msg = input('请输入要发送的数据 ...
- Android_SQLite简单的增删改查
SQLite数据库,和其他的SQL数据库不同, 我们并不需要在手机上另外安装一个数据库软件,Android系统已经集成了这个数据库,我们无需像 使用其他数据库软件(Oracle,MSSQL,MySql ...
- list类型的应用场景 —— Redis实战经验
list类型是简单的字符串列表,按照插入顺序排序.每个列表最多可以存储 232 - 1 个元素(40多亿) ,list类型主要有以下应用场景.. 1. 消息队列 list类型的lpop和rpush(或 ...
- selenimu--find_element_by_css_selector()方法汇总
一.单一属性定位 type selector driver.find_element_by_css_selector('input') id 定位 driver.find_element_by_css ...
- Extreme Learning Machine
Extreme Learning Machine 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. ELM 2004年南洋理工大学黄广斌提出了ELM ...
- jQuery---固定导航栏案例
固定导航栏案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- oracle建数据库
oracle用户界面登陆 用户要切换到oracle sqlplus / as sysdba //sys用户是oracle的最高管理员所以要加上as help index //查看命令列表,sql中不区 ...