Html5 锚 <a>的页内跳转, name=abc herf=#abc
- 锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
英文名：anchor
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。示例代码
在HTML页面中适当位置定义如下的锚点：
|
<a name="top">这里是TOP部分</a> |
<a href="#top">点击我链接到TOP</a> |
|
<a name="content">这里是CONTENT部分</a> |
<a href="#content">点击我链接到CONTENT</a> |
|
<a name="foot">这里是FOOT部分</a> |
<a href="#foot">点击我链接到FOOT</a> |
|
（您可以使用 id 属性来替代 name 属性，命名锚同样有效。[1]） |
另一种方式是直接在页面地址后面加锚点标记，主要用于不同页面之间的锚点访问 |
2.html 锚点 到底是干吗的？
通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。
代码：
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" ></a>
...文字省略
其实锚点只需name就可以可，加id是为了让它兼容性更好.
href的值要跟name \ i d 一致，前面必须加"#"，以上代码在ie6/7,ff中都可以兼容，但在ie8中就不行。
因为我们锚点的<a></a>值为空，为不影响美观我们加个空格就行了,
如以下代码，就可以兼容ie8
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" > & n b s p </a>
...文字省略
另一问题，想显示某页面(如：123.html)的某锚点内容呢？
代码如下
<a href="123.html#001">跳到001</a>
...文字省略
<a name="001" id="001" > & n b s p </a>
...文字省略
这是昨天在做后台时候，想实现"修改定位"，就把锚点标记搬了出来（平常它都被我遗忘）。
但是程序那边说他们要取值，连接中必须要有"?"或"&"，那这样我的锚点就不兼容了...
呵呵！以后会有解决方法的！
虽然在jsp页面中锚点兼容有问题，但是在静态页面中是没有问题的，还是值得学下的！
3.在 WEB 开发中，会使用到页面锚点。HTML 页面锚点用于链接到一个页面的某一章节。W3School 中说到，创建锚点使用 <a> （锚）标签和 name 属性，但这不是创建页面锚点的唯一方法。下面简要说一下制作 HTML 页面锚点的两种方式。
我们可以利用 W3School 的在线测试工具来进行测试。打开链接后的测试代码使用的是 <a href="#C4″> 和 <a name="C4″>，测试没有问题。再将" <h2> <a name="C4″>Chapter 4 </a> </h2>"改为" <h2 id="C4″>Chapter 4 </h2>" 后进行测试，效果一样。
说明，制作页面锚点除了使用 锚点标签 name 属性之外，还可以使用 id 属性。锚点 <a> 标签中 href 属性的值为 # 开头加上目标的 name 或 id 的值：
代码如下:
<html>
<body>
<p>
<a href="#method1">页面锚点方法一</a>
</p>
<p>
<a href="#method2">页面锚点方法二</a>
</p>
<h2><a name="method1">方法一</a></h2>
<p>使用锚标签的 href 和 name 属性</p>
<h2 id="method2">方法二</h2>
<p>使用锚标签和 id 属性</p>
</body>
</html>
Html5 锚 <a>的页内跳转, name=abc herf=#abc的更多相关文章
- Markdown页内跳转实现方法
目录 Markdown页内跳转实现方法 HTML锚点跳转 生成目录 Markdown页内跳转实现方法 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内跳转,ht ...
- MarkDown技巧：两种方式实现页内跳转
MarkDown技巧:两种方式实现页内跳转 本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论. 欢迎转载,转载请注明网址:http://www.cnblogs.com/JohnT ...
- 常用Markdown公式整理 && 页内跳转注意 && Markdown preview
目录: 常用Markdown公式及注意事项 标题 列表 链接 区块 代码块 / 引用 粗体和斜体 文字块 图片 表格 横线 页内跳转注意事项 其他重要需注意 Markdown preview 前提: ...
- MarkDown 的两种页内跳转方法！！！！！
页面内跳转就是点击某个文本,能够跳转到页面里指定的其他地方,经常用于目录中. 第一种是利用Html5 比如点击Feature, 跳转到features中 MarkDown: [Feature](#1) ...
- html 页内跳转
第一种 <a href="#div1">to div1</a> //跳转链接<div id="div1">div1</ ...
- css3:target页内跳转
:target 用于选取当前活动的目标元素 <!DOCTYPE html> <html> <head lang="en"> <meta c ...
- 关于锚点页内链接跳转出现问题(不响应,没有反应)的解决方法(ZT)
我们知道,利用锚点可以实现页面链接跳转,也可以实现同一页面内的跳转功能. 例如:<a href="somepage.htm>某页面链接</a> 可以跳转链接到som ...
- markdown文本内跳转
Markdown文本内跳转 构建茅的过程中使用markdown语法,类似于markdown向外跳转链接,目的地地址写成#. 在markdown文本中写入: 目录 跳转 跳转部分按照html文本的写法 ...
- markdown实现页内目录跳转
1.实现页内目录跳转 语法: 页面首部添加目录:[目录](#jump_id) 页面内部锚点:<span id='jump_id'>标题</span>
随机推荐
- RunningCassandraInEclipse（转载）
转载自:http://wiki.apache.org/cassandra/RunningCassandraInEclipse Eclipse is open source. Download Ecli ...
- Universal-Image-Loader完全解析（下）
Universal-Image-Loader完全解析(下) 在这篇文章中,我会继续跟大家分享有关于Universal-Image-Loader框架的相关知识,这次主要分享的是框架中图片缓存方面的知识. ...
- (转)Linux下部署tomcat及tomcat war包应用程序
原文:http://www.cnblogs.com/smallfa/news/2017/07/17/7193620.html 1, 通过winscp将tomcat包(6和7版本都是一样的安装方法)和j ...
- docker私有仓库搭建及认证
什么是docker? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机 ...
- C# virtual abstract
virtual和abstract都是用来修饰父类的,通过覆盖父类的定义,让子类重新定义. 它们有一个共同点:如果用来修饰方法,前面必须添加public,要不然就会出现编译错误:虚拟方法或抽象方法是不能 ...
- Linux 设置代理时, 密码出现特殊字符怎么办?
配置代理的格式一般是这样的: $ export https_proxy=https://用户名:密码@代理地址:代理端口 比如需要配置这些: $ export http_proxy=http://Co ...
- Executors多线程
介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...
- Scrum 冲刺博客第五篇
一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 实现题目的生成并将其显示到页面上,设置了背景音乐 今天计划完成的工作 判断 ...
- 微信小程序初体验
小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxado ...
- [PHP] 从 PHP 5.3.X 迁移到 PHP 5.6.X不兼容点
从 PHP 5.3.X 迁移到 PHP 5.4.X不兼容点: 1.不再支持 安全模式 2.移除 魔术引号,设置 magic_quotes_gpc 系列将不会生效 3.Salsa10 和 Salsa20 ...