HTML基础04图像和超链接

超链接标签

语法:< a href= "" >内容</a>

属性:

属性 描述
href 链接地址
target

链接的目标窗口

_self、 blank. top、_parent
title 链接提示文字
name 链接命名

 

 

 

 

 

 




命名锚记

定义锚(同一页面) :

< a href= "#锚名1" >目录1 </a>

< a href= “#锚名2”>目录2 </a>

< a href=name=“锚名1" >内容</a>

xXXXXXXXXXXXX

xXXXXXXXXXXXX

< a href=" ..." name= "锚名2”>内容</a>
XXXXXXXXX

 



定义锚(不同页面)

网页1: < a href= ...”name= "锚名" >内容</a>
网页2: < a href=“网页名称#锚名”> .... </a>

演示代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello</title>
 6 </head>
 7 <body>
 8      <a name="top"></a>
 9         这里是顶部
10         <br>
11         <a href="imooc.html#a1">水果</a>
12         <br>
13         <a href="imooc.html#a2">蔬菜</a>
14         <br>
15         <a href="imooc.html#a3">运动</a>
16     </ul>
17 </body>
18 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>imooc</title>
 6 </head>
 7 <body>
 8     <dl>
 9         <a name="a1"></a>
10         <dt>水果</dt>
11         <dd>
12             <ul>
13                 <li>香蕉</li>
14                 <li>苹果</li>
15                 <li>葡萄</li>
16                 <li>梨</li>
17                 <li>西瓜</li>
18                 <li>樱桃</li>
19                 <li>菠萝</li>
20                 <li>橙子</li>
21                 <li>柚子</li>
22                 <li>芒果</li>
23                 <li>香蕉</li>
24                 <li>苹果</li>
25                 <li>葡萄</li>
26                 <li>梨</li>
27                 <li>西瓜</li>
28                 <li>樱桃</li>
29                 <li>菠萝</li>
30                 <li>橙子</li>
31                 <li>柚子</li>
32                 <li>芒果</li>
33             </ul>
34         </dd>
35     </dl>
36     <a href="Hello.html#top">返回Hello</a>
37     
38     <dl>
39         <a name="a2"></a>
40         <dt>蔬菜</dt>
41         <dd>
42             <ul>
43                 <li>西红柿</li>
44                 <li>黄瓜</li>
45                 <li>土豆</li>
46                 <li>芹菜</li>
47                 <li>蒜台</li>
48                 <li>西葫芦</li>
49                 <li>香菇</li>
50                 <li>菠菜</li>
51                 <li>豆角</li>
52                 <li>油菜</li>
53                 <li>西红柿</li>
54                 <li>黄瓜</li>
55                 <li>土豆</li>
56                 <li>芹菜</li>
57                 <li>蒜台</li>
58                 <li>西葫芦</li>
59                 <li>香菇</li>
60                 <li>菠菜</li>
61                 <li>豆角</li>
62                 <li>油菜</li>
63             </ul>
64         </dd>
65     </dl>
66     <a href="Hello.html#top">返回Hello</a>
67 
68     <dl>
69         <a name="a3"></a>
70         <dt>运动</dt>
71         <dd>
72             <ul>
73                 <li>田径</li>
74                 <li>球类</li>
75                 <li>武术</li>
76                 <li>健美操</li>
77                 <li>登山</li>
78                 <li>举重</li>
79                 <li>摔跤</li>
80                 <li>柔道</li>
81                 <li>游泳</li>
82                 <li>滑冰</li>
83                 <li>田径</li>
84                 <li>球类</li>
85                 <li>武术</li>
86                 <li>健美操</li>
87                 <li>登山</li>
88                 <li>举重</li>
89                 <li>摔跤</li>
90                 <li>柔道</li>
91                 <li>游泳</li>
92                 <li>滑冰</li>
93             </ul>
94         </dd>
95     </dl>
96     <a href="Hello.html#top">返回Hello</a>
97 </body>
98 </html>

 

 

posted @ 2020-07-22 12:35  雪中加点糖  阅读(155)  评论(0)    收藏  举报