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"> <a name="miao"></a><!--设置锚点方法1--> |
二、跨页面跳转
①:设置锚点链接,在href中的路径后面追加:#+锚点名,即可
如:<a href="萌宠集结号.html#miao">跳转到萌宠集结号页面</a>
②:要跳转到的页面中要设置锚点,方法见一种的步骤②,两个方法任选其一。
html中的锚点的更多相关文章
- 讨论SEO中是锚文本有效,还是纯文本有效呢?
现在很多SEO好友不断在讨论,在SEO优化中,到底是锚文本有效,还是纯文本有效呢? 在这里给大家举一下列子:如“张家口人才网”这样的就叫做锚文本,意思是在原有的文本中加上超级链接,指向到优化的网页上面 ...
- html中设置锚点定位的几种常见方法(#号定位)
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...
- vue中的锚点和查询字符串
1.什么是锚点 锚点(achor):其实就是超链接的一种. 如:普通的超链接 <a href="sub_task_detail.php">详细</a> 主 ...
- angularjs中使用锚点,angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- html中的锚点设置
html中的锚点 一.页面内跳转的锚点设置 页面内的跳转需要两步: 方法一: ①:设置一个锚点链接去找喵星人:(注意:href属性的属性值最前面要加#) ②:在页面中需要的位置设置锚点<a na ...
- ui-router中的锚点问题(angular中的锚点问题)
angular.module('anchorScrollExample', []) .controller('ScrollController', ['$scope', '$location', '$ ...
- [原创作品]web网页中的锚点
因为近来在从事web前端开发的工作,所以写的文章也都是关于web这一块.以后将分享算法和web高级编程的内容,很多公司的web前端不够重视,以为是很low-level,给的待遇也很一般,其实,这都是很 ...
- yaml中的锚点和引用
项目引入yaml语言来写配置文件,最近发现利用其锚点&和引用*的功能,可以极大减少配置文件中的重复内容,将相同配置内容收敛到锚点处,修改时,只需要修改锚点处的内容,即可在所有引用处生效. ya ...
- Cocos2d-x 3.0final 终结者系列教程08-画图节点Node中的锚点和坐标系
图片问答,(仅仅要回答正确,锚点和坐标系就学会了) 1.下图一共同拥有几个填充为淡黄色的实心矩形? 选择:A,2个 B, 4个 C,1个 D,16个 答案.B.4个 2.下图的4个实心矩形排列在几行 ...
随机推荐
- cpp(第六章)
1. #include <iostream> #include <limits> int main() { ; ) { std::cout<<"enter ...
- angular指令ng-class巧用
什么是ng-class ng-class最大的妙用就是可以根据你的逻辑表达式.来添加或移除对应的class ng-class是angular.js里面内置的一个指令. 项目中,有时候,我们需要根据需求 ...
- python学习-面向对象
面向对象 编程方式的区别 过程式编程 函数式编程 面向对象式编程 面向对象编程 对象是类的一个实例 创建 class foo(): def __init__(self): #类的构造方法 pass d ...
- IntelliJ IDEA的激活和汉化
1.下载 IntelliJ IDEA 下载地址 Community 社区版,免费使用,下载后发现没有JAVA EE,推荐下载 Ultimate Ultimate 需要注册码. 2.激活 我下载的是20 ...
- LoadRunner11_录制Oracle数据库脚本
[oracle环境] ①oracle:无需在本地安装oracle,但是oracle的odbc驱动一定要装:(我的安装路径为 D:\oracle ).安装好后在环境变量 " Path &quo ...
- isNaN() 函数用于检查其参数是否是非数字值。如果是非数字值则返回true
isNaN() 函数用于检查其参数是否是非数字值.如果是非数字值则返回true.document.write(isNaN(0)); falsedocument.write(isNaN("He ...
- Python基础-类
Python基础-类 @(Python)[python, python基础] 写在前面 如非特别说明,下文均基于Python3 摘要 本文重点讲述如何创建和使用Python类,绑定方法与非绑定方法的区 ...
- Vulkan Tutorial 24 Descriptor pool and sets
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 描述符布局描述了前一章节讨论过的可以绑定的描述符的类型.在 ...
- javascript字符串属性及常用方法总结
length属性:str.length; 常用方法: 1. str.charAt(n) 查找字符串中的第n个字符,如果不在0~str.length-1之间,则返回一个空字符串 2 .str.ind ...
- bootstrap轮播和百叶窗
轮播 在bootstrap里面,有设置的图片轮播的代码: <div id="carousel-example-generic" class="carousel sl ...