HTML的链接标签

网页的链接标签

文本超链接

图像超链接

格式:链接文本或图像

锚链接(实现页面内或者页面间,指定位置的跳转)

邮件链接

文本超链接(点文本就能链接网页)





链接标签学习



点击跳转到页面1
点击跳转到百度


HTML的链接标签_第1张图片

图像超链接(点图片就能链接网页)





链接标签学习


桌面壁纸


 HTML的链接标签_第2张图片

在新标签页打开和在当前网页打开

 区别在于:target="_blank"  和  target="_self"





链接标签学习



点击跳转到百度


HTML的链接标签_第3张图片

锚链接

第一种锚链接:实现页面内的跳转

第二种锚链接:实现页面间跳到锚链接

1. 第一种锚链接(实现页面内的跳转)

锚链接的头部标记语法:  <a name="top"> 锚标签的顶部 a>

锚链接的点击标记语法:  <a href="#top"> 回到锚链接的顶部 a>


<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>

 HTML的链接标签_第4张图片

 

2. 第二种锚链接(实现页面间跳到锚链接)

锚链接的头部标记语法(在1.中): 另一个页面的锚链接标记

锚链接的点击标记语法(在4.中):  跳转到另一个页面的锚链接

HTML的链接标签_第5张图片      HTML的链接标签_第6张图片

HTML的链接标签_第7张图片

完整代码为:

1、在1.我的第一个网页.html中:





基本标签学习


Hello, World!



2、在4.链接标签。html中:





链接标签学习

桌面图片


桌面图片


桌面图片


跳转到另一个页面的锚链接


HTML的链接标签_第8张图片

 

HTML的链接标签_第9张图片

邮件链接

语法格式:点击联系我

HTML的链接标签_第10张图片

 

你可能感兴趣的:(HTML的链接标签)