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

页面内的跳转需要两步：

方法一：

①：设置一个锚点链接<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">
<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. 讨论SEO中是锚文本有效，还是纯文本有效呢？

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

  2. html中设置锚点定位的几种常见方法（#号定位）

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  3. vue中的锚点和查询字符串

    1.什么是锚点 锚点(achor):其实就是超链接的一种. 如:普通的超链接 <a href="sub_task_detail.php">详细</a>  主 ...

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

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

  5. html中的锚点设置

    html中的锚点 一.页面内跳转的锚点设置 页面内的跳转需要两步: 方法一: ①:设置一个锚点链接去找喵星人:(注意:href属性的属性值最前面要加#) ②:在页面中需要的位置设置锚点<a na ...

  6. ui-router中的锚点问题（angular中的锚点问题）

    angular.module('anchorScrollExample', []) .controller('ScrollController', ['$scope', '$location', '$ ...

  7. [原创作品]web网页中的锚点

    因为近来在从事web前端开发的工作,所以写的文章也都是关于web这一块.以后将分享算法和web高级编程的内容,很多公司的web前端不够重视,以为是很low-level,给的待遇也很一般,其实,这都是很 ...

  8. yaml中的锚点和引用

    项目引入yaml语言来写配置文件,最近发现利用其锚点&和引用*的功能,可以极大减少配置文件中的重复内容,将相同配置内容收敛到锚点处,修改时,只需要修改锚点处的内容,即可在所有引用处生效. ya ...

  9. Cocos2d-x 3.0final 终结者系列教程08-画图节点Node中的锚点和坐标系

    图片问答,(仅仅要回答正确,锚点和坐标系就学会了) 1.下图一共同拥有几个填充为淡黄色的实心矩形? 选择:A,2个  B, 4个 C,1个 D,16个 答案.B.4个 2.下图的4个实心矩形排列在几行 ...

随机推荐

  1. 你知道“移动端车牌识别”可以嵌入到PDA中应用吗？

    一.移动端车牌识别产品描述 移动端车牌识别软件是基于移动平台的OCR识别应用程序,支持Android/IOS等多种主流移动操作系统.该产品只需通过智能手机或Pad的摄像头对准车牌,无需拍照,实现自动采 ...

  2. stat命令

  3. Android WebView 不支持 H5 input type="file" 解决方法

    最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...

  4. Grunt压缩HTML和CSS

    我的小伙伴们!我明明 在压缩图片之前发过一篇,关于Grunt压缩cCSS是和HTML的!但是不知道为什么,今天再一看.迷之消失了! 没办法.只好今天在写一次,从头开始!首先.我来介绍一下为什么要用构建 ...

  5. Github 开源：高效好用的对象间属性拷贝工具：升讯威 Mapper（ Sheng.Mapper）

    Github 地址:https://github.com/iccb1013/Sheng.Mapper 对象属性值映射/拷贝工具.不需要创建映射规则,不要求对象类型一致,适用于简单直接的拷贝操作,可以全 ...

  6. od的用法

    一.功能 查看非文本文档的内容 二.用法 1.语法 od [-A RADIX] [-t TYPE] 文件名 2.选项与参数 -A: 指定偏移量的输出形式 d[size] :利用十进制(decimal) ...

  7. mac os 安装 python 环境

    1.我们先获取pip安装脚本: 1 wget https://bootstrap.pypa.io/get-pip.py 如果没有安装wget可以去这里将所有内容复制下来,新建get-pip.py文件, ...

  8. 在项目中利用TX Text Control进行WORD文档的编辑显示处理

    在很多文档管理的功能模块里面,我们往往需要对WORD稳定进行展示.编辑等处理,而如果使用微软word控件进行处理,需要安装WORD组件,而且接口使用也不见得简单易用,因此如果有第三方且不用安装Offi ...

  9. Java NIO学习笔记六 SocketChannel 和 ServerSocketChannel

    Java NIO SocketChannel Java NIO SocketChannel是连接到TCP网络socket(套接字)的通道.Java NIO相当于Java Networking的sock ...

  10. Spring mvc 中使用 kaptcha 验证码

    生成验证码的方式有很多,个人认为较为灵活方便的是Kaptcha ,他是基于SimpleCaptcha的开源项目.使用Kaptcha 生成验证码十分简单并且参数可以进行自定义.只需添加jar包配置下就可 ...