html中的锚点

一、页面内跳转的锚点设置

页面内的跳转需要两步：

方法一：

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

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

方法二：

①：同方法一的①

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

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

小案例：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

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

</head>

<body>

<ul>

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

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

<li><a href="#meng">其他萌物</a></li>

</ul>

<a name="miao"></a><!--设置锚点方法1-->

<h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<p>喵喵喵~</p>

<a name="wang"></a>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<p>汪汪汪~</p>

<a name="meng"></a>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

<p>萌萌萌~</p>

</body>

</html>

二、跨页面跳转

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

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

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

html中的锚点设置的更多相关文章

  1. HTML中的锚点设置和table格式

    锚点设置: <a href="#1">锚点</a> <a name="1"></a> table表格格式: &l ...

  2. 【转】cocos2d-x中锚点设置及定位方式

    http://blog.csdn.net/wayne5ning/article/details/8160506 说在前面:以下是基于cocos2d-2.0-x-2.0.3作的总结 问题 在cocos2 ...

  3. cocos2d-x中锚点设置及定位方式

    问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进 ...

  4. html中的锚点

    一.页面内跳转的锚点设置 页面内的跳转需要两步: 方法一: ①:设置一个锚点链接<a href="#miao">去找喵星人</a>:(注意:href属性的属 ...

  5. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  6. ahjesus在asp.net中还可以通过设置HttpCookie对象的过期时间为DateTime.MinValue来指定此Cookies为跟随浏览器生效

    ahjesus在asp.net中还可以通过设置HttpCookie对象的过期时间为DateTime.MinValue来指定此Cookies为跟随浏览器生效

  7. 讨论SEO中是锚文本有效，还是纯文本有效呢？

    现在很多SEO好友不断在讨论,在SEO优化中,到底是锚文本有效,还是纯文本有效呢? 在这里给大家举一下列子:如“张家口人才网”这样的就叫做锚文本,意思是在原有的文本中加上超级链接,指向到优化的网页上面 ...

  8. java项目中build path的设置

    右键点击项目新建文件libs 添加jtds  jar包引用本地动态链接库(dll)的设置方法 配置LibraryJRE的添加和更换  Java项目中build path的设置总结,包括JRE的添加和更 ...

  9. iOS中UITableView的一些设置

    不可滑动: ? 1 tableView.userInteractionEnabled = NO; 也可以在storyboard中的userInteractionEnable属性设置 显示导向箭头: ? ...

随机推荐

  1. UVA 11178 Morley's Theorem 计算几何模板

    题意:训练指南259页 #include <iostream> #include <cstdio> #include <cstring> #include < ...

  2. cmake 简单操作

    实例一: main.c #include <stdio.h> int main( int argc, char *argv[] ) { printf("hello cmake!\ ...

  3. Link-Cut Tree（LCT） 教程

    目录 前置知识 介绍 Access FindRoot MakeRoot Split Link Cut 关于Splay中操作的一点说明: 模板 前置知识 请先对树链剖分和Splay有所了解.LCT基于树 ...

  4. Jmeter连接Redis服务缓存

    1.添加线程组->Sampler->BeanShell Sampler,加入以下内容: import redis.clients.jedis.Jedis; import org.apach ...

  5. Docker入门-数据挂载

    Docker数据管理 在容器中管理数据主要有两种方式: 数据卷(Volumes) 挂载主机目录(Bind mounts) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,它绕过UFS,可以提供很 ...

  6. python3笔记十：python数据类型-Tuple元组

    一:学习内容 元组概念 元组创建.访问.删除 元组操作 元组方法 二:元组概念 1.本质:是一种有序集合 2.特点:与列表非常相似.一旦初始化就不能修改.使用小括号 三:元组创建 1.创建空元组 tu ...

  7. jquery数组的合并 对象的合并

    直接转自:https://www.cnblogs.com/ooo0/p/7737678.html 1.数组的合并 1.1 concat方法 var a=[1,2,3],b=[4,5,6]; var c ...

  8. Java 8：用Stream来循环集合

    本文由 ImportNew - 进林 翻译自 deadcoderising.欢迎加入翻译小组.转载请见文末要求. 正如我之前所写的,Java 8中的新功能特性改变了游戏规则.对Java开发者来说这是一 ...

  9. pandas dataframe类型操作

    用python做数据分析pandas库介绍之DataFrame基本操作   怎样删除list中空字符? 最简单的方法:new_list = [ x for x in li if x != '' ] 这 ...

  10. ControlTemplate in WPF —— TreeView

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...