利用name和id属性创建目的地锚点进行页面定位

最新推荐文章于 2023-01-02 21:27:42 发布

王伴农

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量1.7k

点赞数 1

文章标签： XML

本文链接：https://blog.csdn.net/hongkangwl/article/details/16857019

版权

html中的锚记

a,是anchor(锚)的第一个字母，就是链接啦！

a 标签 -- 代表HTML链接

* a标签是成对出现的,以<a>开始, </a>结束
* 属性.
o Common -- 一般属性
o accesskey -- 代表一个链接的快捷键访问方式
o charset -- 指定了链接到的页面所使用的编码方式,比如UTF-8
o coords -- 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标
o href -- 代表一个链接源(就是链接到什么地方)
o hreflang -- 指出了链接到的页面所使用的语言编码
o rel -- 代表文档与链接到的内容(href所指的内容)的关系
o rev -- 代表文档与链接到的内容(href所指的内容)的关系
o shape -- 使用图像地图的时候可以使用shape指定链接区域
o tabindex -- 代表使用"tab"键,遍历链接的顺序
o target -- 用来指出哪个窗口或框架应该被此链接打开
o title -- 代表链接的附加提示信息
o type -- 代表链接的MIME类型
* a,是anchor(锚)的第一个字母
 
锚的定制:
<!-- 定义一个锚。 -->
<A NAME="anchor">锚点</a>

本页面的一个连接,连接到锚:
<A HREF="#anchor">锚</A>

注意以#开始连接的标记.Ok,到目前点击锚就转到了锚点段落.

利用name和id属性创建目的地锚点（链接到页面的特定部分）

<hl>Linking and Navigation</hl>

<h2><a id="SourceAnchors">Source Anchors</a></h2>

<h2><a id="DestinationAnchors">Destination Anchors</a></h2>

<h2><a id="Examples">Examples</a></h2>

添加目的地锚点之后，可以添加源锚点以链接到这些部分，如下所示：

<p>This page covers the following topics:

<ul>

<li><a href="#SourceAnchors">Source Anchors</a></li>

<li><a href="#DestinationAnchors">Destination Anchors</a></li>

<li><a href="#Examples">Examples</a></li>

</ul>

</p>

实例代码如下：

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">

<head>
  <title>A link to a specific part of the page</title>
</head>

<body>
<h1><a name="top">Linking and Navigation</a></h1>
<p>This page covers the following topics:</p>
  <ul>
    <li><a href="#URL">URL</a></li>
    <li><a href="#SourceAnchors">Source Anchors</a></li>
    <li><a href="#DestinationAnchors">Destination Anchors</a></li>
    <li><a href="#Examples">Examples</a></li>
  </ul>
<h2><a id="URL">URLs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#top">Back to top</a></p>

<h2><a id="SourceAnchors">Source Anchors</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.</p>
<p><a href="#top">Back to top</a></p>

<h2><a id="DestinationAnchors">Destination Anchors</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#top">Back to top</a></p>

<h2><a id="Examples">Examples</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
 occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#top">Back to top</a></p>

</body>
</html>

显示效果如下：

Linking and Navigation

This page covers the following topics:

URL
Source Anchors
Destination Anchors
Examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.