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. POJ 1466 大学谈恋爱 二分匹配变形 最大独立集

    Girls and Boys Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 11694   Accepted: 5230 D ...

  2. Codeforces 1213E Two Small Strings

    cf题面 中文题意 给个n,再给两个长度为2的字符串,要求构造一个长度为\(3n\)的字符串,a.b.c三个字母各n个,且构造出的字符串子串中不能出现给定的两个字符串.如果不存在这样的字符串,就输出N ...

  3. x_-admin

    https://www.cnblogs.com/shikaishikai/p/9699076.html

  4. auth 认证组件的补充

    Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...

  5. springboot 项目中在普通类中调用dao层的mapper 出现空指针异常

    项目中我遇到同样的问题 特记载一下 有两种方式 一. 该类使用@Component注解 添加一个本类类型的静态字段 创建一个初始化方法,贴上@PostConstruct 标签,用于注入bean 创建方 ...

  6. WIN10下命令行禁用编辑模式

    在开发的时候 控制台输出信息 点一下右键就进入编辑模式了,WIN7没有这个问题.网上搜了一下 说是要 禁用编辑模式,下面是代码VS2005可用 { #ifndef ENABLE_EXTENDED_FL ...

  7. vue小故事之父子(上下级)通信之父传子props

    vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props  或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

  8. [论文理解] Receptive Field Block Net for Accurate and Fast Object Detection

    Receptive Field Block Net for Accurate and Fast Object Detection 简介 本文在SSD基础上提出了RFB Module,利用神经科学的先验 ...

  9. JVM系列1：内存区域

    1.JVM运行区域内存划分 2.各内存区域详细介绍 2.1 程序计数器 程序计数器是一块很小的内存区域,它作为前线程所执行的字节码的行号指示器,指向当前class文件的执行代码的行数.字节码解释器工作 ...

  10. VC中MessageBox与AfxMessageBox用法与区别

    一.MessageBox()用法 1.函数原型 Messagebox函数在Win32 API和MFC里的定义有区别. Win32 API的定义如下: int WINAPI MessageBox(    ...