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. 大视频上传T级别解决方案

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  2. 51 Nod 1066 Bash游戏

    1066 Bash游戏  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到 ...

  3. KMP的妙用（利用next数组寻找字符串的循环节）

    利用KMP的next数组的性质,我们可以找到next数组的循环节. 先说结论: 设字符串长n,则若其  i % ( i – next[n] ) == 0 ,则其有循环节(循环节数目大于1),其循环节数 ...

  4. 国内著名的vue-element-admin-layout框架的使用

    vue-element-admin-layout 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提 ...

  5. SSH上传文件出现error

    如上图,因为我在SSH上的用户没有对Linux服务器的文件夹的修改权限,我在linux上把文件夹的权限改为可读可改,就可以了

  6. SpringMvc@RequestParam 来映射请求参数

    jsp页面 <a href="springmvc/testRequestParam?username=atguigu&age=11">Test RequestP ...

  7. 关于Layui的表格中分页处理

    table.render({ elem: '#test' ,height:'full-125' ,url:'data.php' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,l ...

  8. 开源控件slidingmenu的使用

    在github.com网站搜索slidingmenu后https://github.com/jfeinstein10/SlidingMenu 下载demo,导入library到你的项目中,添加到你项目 ...

  9. self-training and co-training

    半指导学习(Semi-supervised Learning)的概念说起来一点儿也不复杂,即从同时含有标注数据和未标注数据的训练集中学习模型.半指导学习是介于有指导学习与无指导学习之间的一种机器学习方 ...

  10. wpf passwordbox控件 光标移到最后

    /// <summary> /// 设置光标位置 /// </summary> /// <param name="passwordBox">&l ...