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>
随机推荐
- AFNetworking 3.1.0 使用中某些知识点讲解
# POST / GET 请求 /*! 首先要知道,POST请求不能被缓存,只有 GET 请求能被缓存.因为从数学的角度来讲,GET 的结果是 幂等 的,就好像字典里的 key 与 value 就是 ...
- 架构师养成记--25.linux用户管理
用户管理配置文件用户信息文件:/etc/passwd密码文件:/etc/shadow用户配置文件:/etc/login.defs /etc/default/useradd新用户信息文件:/etc/sk ...
- win8.1中向IIS注册asp.net
以前都是用aspnet_regiis -I 命令向IIS注册asp.net ,今天换了win8.1后竟然发现这招不好使了. 根据提示,需要用dism.exe来完成注册. 折腾一会儿后,问题最终解决: ...
- 关闭mac自带apache的启动。
关闭mac自带apache的启动. sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 如果哪天 ...
- Java的三个基础排序算法(其余将在以后补充)
第一个:冒泡排序算法 原理:相邻的两个值进行比较,如果前面的比后面的大就交换位置 eg:假设有5个元素的一个array 第一次:会比较4次,将最大的值放在最右边 第二次:会比较3次,又排出剩余4个元素 ...
- Android开源项目xUtils HttpUtils模块分析(转)
xUtils是github上的一个Android开源工具项目,其中HttpUtils模块是处理网络连接部分,刚好最近想整理下Android网络编程知识,今天学习下xUtils中HttpUtils. x ...
- js脚本语言在页面上不执行
转换原理:// 编码原理就是创建TextNode节点,附加到容器中,再取容器的innerHTML.(将脚本编码) // 解码原理是将字符串赋給容器的innerHTML,再取innerText或text ...
- git 学习之撤销和删除
在实际的工作和学习中我们经常的会对文件进行修改,但是或多或少的就会发现由于某些原因修改是错误的这时候就需要对所做的修改进行撤销,更或者某些时候需要对文件进行删除.本节就会告诉大家如何操作. 撤销操作 ...
- Java的枚举类型
引用并转载于:http://blog.csdn.net/ishallwin/article/details/9440251 1.什么是枚举: 在实际编程中,往往存在着这样的“数据集”,它们的数值在程序 ...
- Lenovo笔记本Fn的总结
Fn与其他按键结合使用以访问特殊的ThinkPad功能. Fn+F2 锁定计算机 Fn+F3 管理电池和电源 Fn+F4 进入睡眠(待机)模式 Fn+F5 管理无线连接 Fn+F6 打印屏幕 Fn+ ...