网页的链接标签

文本超链接

图像超链接

格式：<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的链接标签的更多相关文章

  1. ASP.NET Core教程【三】实体字段属性、链接标签、并发数据异常、文件上传及读取

    前文索引:ASP.NET Core教程[二]从保存数据看Razor Page的特有属性与服务端验证ASP.NET Core教程[一]关于Razor Page的知识 实体字段属性 再来看看我们的实体类 ...

  2. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  3. 认识HTML中文本、图片、链接标签和路径

    前端之HTML.CSS(一) 开发工具 编辑器 Dreamware.Sublime.Visual Studio Code.WebStorm 浏览器 Chrome.IE(Edge).Safari.Fir ...

  4. HTML之基本语法（链接标签、路径的介绍和使用）

    一.链接标签 语法:<a href="目标地址">这个标签上展示的内容</a> 作用:可以实现在当前页面跳转到新页面的操作 属性 1.target这个属性可 ...

  5. 链接标签（a 标签）

    一.链接标签 单词缩写: anchor 的缩写. 在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可. 语法格式: <a href="跳转目标" target ...

  6. 多测师讲解html _链接标签004_高级讲师肖sir

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链 ...

  7. html a 链接标签title属性换行鼠标悬停提示内容的换行效果

    鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...

  8. Struts2中的链接标签 <s:url>和<s:a>---在action中获取jsp表单提交的参数(转)

    转自:http://sgl124764903.iteye.com/blog/444183 1.普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page ...

  9. Html链接标签：

    <a>标签可以在网页上定义一个链接地址,它的常用属性有: (1)href属性 定义跳转的地址 (2)title属性 定义鼠标悬停时弹出的提示文字框 (定义鼠标悬停时,弹出的提示框中的文字) ...

随机推荐

  1. jquery-进度条

    function process_bar(s_date, e_date, data) { $('.modal-body').text('你选择的时期范围是:' + s_date + '到' + e_d ...

  2. gulp常用插件之gulp-rev-format使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-format这是一款提供静态资产的哈希格式选项(前缀,后缀,最后扩展名). 更多使用文档请点击访问gulp-rev-format ...

  3. 安装Ansible到CentOS（YUM）

    运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:ansible 硬件要求:无 安装过程 1.安装YUM-EPEL源 HTTP-Tools软件包由 ...

  4. 每天进步一点点------Modelsim添加Xilinx仿真库的详细步骤

    Modelsim,可以选型SE和XE两个版本.Modelsim XE可以直接被ISE调用,而Modelsim SE需要手动添加仿真库.但SE版和OEM版在功能和性能方面有较大差别,比如对于大家都关心的 ...

  5. VS中关于数据库的操作

    1.数据库迁移 第一步: 第二步: 在窗口中选择项目中的EntitiyFramwork项目(与数据库连接的文件集) 第三步: 输入update-database 二:数据对比 第一步: 第二步:选择需 ...

  6. HTTP代理服务器搭建

    由于在某些特定场景下,我们的外网访问会受到限制,如果有一些访问需求的话就需要一个代理作为中转了. 首先需要一台机器作为中转的服务器,这时候当然要去阿里云买一台啦.操作系统一定要选Linux,我使用的是 ...

  7. C++->以读或写方式打开一个文件

    以读或写方式打开一个文件 #include<iostream.h>   //.h以C|非C标准引用库文件 #include<fstream.h> #include<std ...

  8. fastadmin弹窗效果表单

    在项目所对应的js文件中的 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', s ...

  9. 假期学习【十】首都之窗百姓信件JavaWweb+Echarts图表展示

    今天主要对昨天爬取的数据进行处理,处理后用Echart图表展示, 效果如下:

  10. yolov3 进化之路,pytorch运行yolov3,conda安装cv2,或者conda安装找不到包问题

    yolov3 进化之路,pytorch运行yolov3,conda安装cv2,或者conda安装找不到包问题 conda找不到包的解决方案. 目前是最快最好的实时检测架构 yolov3进化之路和各种性 ...