HTML超级链接

< a > 标签——超链接标签

< a > 标签（没有带属性）

超链接调用javascript 超链接的html_超链接调用javascript

效果：

好像没什么效果

超链接调用javascript 超链接的html_超链接调用javascript_02

< a > 标签及href属性

href属性——超链接要链接的对象的地址

超链接调用javascript 超链接的html_超链接调用javascript_03

效果：

超链接调用javascript 超链接的html_HTML_04

点击后：

把当前页面替换成了一个新的网页

超链接调用javascript 超链接的html_超链接调用javascript_05

< a > 标签的target属性

target属性——指定超链接的链接对象的打开方式，_blank属性值表示在新页面打开（不写target属性，就默认在当前页面打开）

超链接调用javascript 超链接的html_HTML_06

点击后：

弹出一个新的页面

超链接调用javascript 超链接的html_html_07

< a > 标签中的内容不仅能是文字，还可以是其他东西

比如：图片

超链接调用javascript 超链接的html_html页面_08

效果：

超链接调用javascript 超链接的html_html页面_09

点击后：

超链接调用javascript 超链接的html_超链接调用javascript_10

< a > 标签的另外一种作用——设置锚点，使其点击后跳转到html页面的指定位置

  • 跳转到当前html页面的指定位置：
    在href属性中填入#和要跳转的位置的id，即可在点击后跳转到当前html页面对应id的内容的所在位置。
  • 跳转到另一个html页面的指定位置：
    在href属性中填入另一个html页面所在的路径，在路径后面加上#和要跳转的位置的id，即可在点击后跳转到另一个html页面对应id的内容的所在位置。

如果href属性中只填入#，不加上id，就跳转到页面最顶部

超链接调用javascript 超链接的html_html页面_11

超链接调用javascript 超链接的html_HTML_12

超链接调用javascript 超链接的html_html页面_13

点击跳转到最下方：

超链接调用javascript 超链接的html_html_14

效果：

超链接调用javascript 超链接的html_超链接调用javascript_15

点击跳转到第170行：

超链接调用javascript 超链接的html_html_16

效果：

超链接调用javascript 超链接的html_超链接调用javascript_17

点击跳转到最上方：

超链接调用javascript 超链接的html_超链接调用javascript_18

效果：

超链接调用javascript 超链接的html_html页面_19

HTML超级链接-课后作业

1.实现导航栏功能：创建3个html文件，1.html可以跳转到2和3页面，2和3页面可以返回到1页面。

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1</title>
</head>
<body>
<a href="2.html">页面2</a><br>
<a href="3.html">页面3</a><br>
<h1>当前所在页面是页面1</h1>
</body>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面2</title>
</head>
<body>
<a href="1.html">页面1</a><br>
<a href="3.html">页面3</a><br>
<h1>当前所在页面是页面2</h1>
</body>
</html>

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面3</title>
</head>
<body>
<a href="1.html">页面1</a><br>
<a href="2.html">页面2</a><br>
<h1>当前所在页面是页面3</h1>
</body>
</html>

2.在1.html里面增加一个链接，打开后跳到4页面的中间。

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1</title>
</head>
<body>
<a href="2.html">页面2</a><br>
<a href="3.html">页面3</a><br>
<a href="4.html#page4-c">跳转到页面4的中间</a><br>
<h1>当前所在页面是页面1</h1>
</body>
</html>

4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面4</title>
</head>
<body>
<h1>当前所在页面是页面4</h1>
<p>开头</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="page4-c">中间</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>结尾</p>
</body>
</html>

3.在1.html加个图片，点击图片后，在新的标签里面打开小米闪购页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1</title>
</head>
<body>
<a href="2.html">页面2</a><br>
<a href="3.html">页面3</a><br>
<a href="4.html#page4-c">跳转到页面4的中间</a><br>
<a href="https://www.mi.com/seckill/"><img src="小米闪购.jpeg" height="50px" width="50px"></a>
<h1>当前所在页面是页面1</h1>
</body>
</html>

4.点击1.html里面的链接，直接弹出邮件系统进行发送邮件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面1</title>
</head>
<body>
<a href="2.html">页面2</a><br>
<a href="3.html">页面3</a><br>
<a href="4.html#page4-c">跳转到页面4的中间</a><br> 
<a href="https://www.mi.com/seckill/"><img src="小米闪购.jpeg" height="50px" width="50px"></a><br> 
<a href="mailto:">发送邮件</a>
<h1>当前所在页面是页面1</h1>
</body>
</html>