html中的锚点

、页面内跳转的锚点设置

页面内的跳转需要两步：

方法一：

①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）

②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容

方法二：

①：同方法一的①

②：设置锚点的位置 <h3 id="miao">喵星人基地</h3>；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#

方法二不用单独添加一个a标签来专门设置锚点，只在需要的位置的标签中添加一个id即可。

小案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>萌宠集结号</title>

</head>

<body>

<ul>

<li><a href="#miao">去找喵星人</a></li>

<li><a href="#wang">去找汪星人</a></li>

</ul>

<h3 id="miao">喵星人基地</h3>

</body>

</html>

二、跨页面跳转

①：设置锚点链接，在href中的路径后面追加：#+锚点名，即可

如：<a href="萌宠集结号.html#miao">跳转到萌宠集结号页面</a>

②：要跳转到的页面中要设置锚点，方法见一种的步骤②，两个方法任选其一。

超链接除了可以链接特定的文件和网站之外，还可以链接到网页内的特定内容。这可以使用<a>标签name或id属性，创建一个文档内部的书签。也就是说，可以创建指向文档片段的链接。

例如，使用以下命名可以将网页中的文本，“你好”定义为一个内部书签，书签名称为“name1”。

在网页中的其它位置可以插入超链接引用该书签，引用命名如下：

<a href="#name">使用内部书签</a>

一般网页内容比较多的网站会采用这种方法，如一个电子书网页。

下面就使用锚链接制造一个电子书网页。

（1）编写代码如下图所示：

（2）在浏览器中打开文件，预览效果图如下所示，由于内容较少，还看不出效果。

（3）为每一个诗词添加内容，完善后的代码如下：

（4）在浏览器中打开文件，预览整体效果图如下所示：

（5）单击《书愤二首》，页面会自动跳转《书愤二首》对应的内容，如下所示：

更多精彩等你来学习哦！

了方便用户在 Chrome 中轻松分享内容，谷歌于近日推出了一项新功能 —— 允许用户在使用期间，或多或少地创建锚标记（anchor tags）。据悉，这些标记其实属于小型的 HTML 标签，能够直接定位到一个网页的特定位置。资深网民对此应该不会感到陌生，尤其是在那些帮助搜索者查找问题答案的工具上。

需要指出的是，你实际上并未看到那些标签，而是从搜索引擎直接跳转到了网页上的某个部分的“小链接”。

在次之前，这项功能仅面向 Web 开发者开放。如果你想分享最新一期《大西洋月刊》上的一段话，用起来就不那么方便了。

好消息是，谷歌现在为 Chrome 用户提供了一项被称作“滚动到文本”（Sroll-to-text）的新功能，目前隐藏在“标记”（flag）后面。

其允许用户创建一个超链接，其中包括了您要分享的内容信息，有效扮演一个锚标记的角色。

这意味着，用户能够将新闻文章中的单词或段落分享给其他人，然后直接弹出（跳转）到你希望他们看到的页面部分（而无需导引至这里），从而节省大量的时间。

目前谷歌正在 Chrome Canary 分支测试这项功能，如果一切顺利，其有望在今年 4 月抵达 Chrome 的其它分支。

[编译自：MSPU]

在线咨询

上一篇：巨浪滔天，微信今日正式公布“小游戏”：H5手游迎来真正爆发点
下一篇：单页网站设计指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html中的锚点

您的项目需求