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>
随机推荐
- jquery text html width heigth的用法
<body> <div id="div1"> <h3>我是标题</h3> </div> <div id=" ...
- Saiku 系列
1.Saiku2.6 Saiku315 链接SQL的JDBC字符串 2.Saiku2.6 配置数据源 3.Saiku2.6 保存查询后,重新打开报 Error Loading Query错误. 4.C ...
- VS 代码自动对齐快捷键
全部代码代码自动对齐快捷键为 Ctrl + a(按后可松松手) + k(按后可松松手) + f
- Visual Studio 跨平台開發實戰(1) - Hello Xamarin! (转帖)
前言 應用程式發展的腳步, 從來沒有停過. 從早期的Windows 應用程式, 到網路時代的web 應用程式, 再到近幾年相當盛行的行動裝置應用程式(Mobile Application), 身為C# ...
- [DPF] DPF 常见的问题
问题一: SQL6031N Error in the db2nodes.cfg file at line number "5". Reason code "12&qu ...
- 【文档】五、Mysql Binlog事件结构
这个部分描述了事件被写入binlog或者delay log中的属性.所有的事件有相同的整体结构,也就是包含事件头和事件数据: +===================+ | event header ...
- MYSQL 本地无ROOT权限 忘记密码
打开CMD窗口 net stop mysql //停止MYSQL mysqld -nt --skip-grant-tables //跳过密码检测. mysqld.exe在Bin目录下 然后另外新打 ...
- Idea与Eclipse操作代码的快捷方式
1.Idea格式化代码的快捷键:ctrl+alt+L 2.在IDEA中创建了properties文件,发现默认中文不会自动进行unicode转码.如下 在project settings - File ...
- C 扩展库 - mysql API CRUD
CRUD table create table if not exists `student` ( `id` int auto_increment, `name` varchar(16) not nu ...
- 剑指offer(26-30)编程题
二叉搜索树与双向链表 字符串的排列 数组中出现次数超过一半的数字 最小的K个数 连续子数组的最大和 26.输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整 ...