html 锚点的使用

简介:

1:锚点是什么? 
锚点也可以理解成为一种超级链接,只不过它是网页内部的超级链接(注意不是网站内部)。 
比如我们有一个网页很长很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。
2:锚点的使用。 
锚点从代码上看,仍然是超级链接的一种应用。 
<a name="A1" id="A1"></a>这样的一个无内容的<a>标签,便是一个锚点了,我们可以把它放在网页中<body& gt;与</body>之间的任意位置。当然,究竟放在哪个位置,就要看我们的实际需要了。

 

下面举一个例子:

Java代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>锚点示例</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <a name="A0" id="A0"></a>  
  10. <a href="#A1">网页第一部分</a>  
  11. <a href="#A2">网页第二部分</a>  
  12. <div style="height:900px; background:#CCCCCC"></div>  
  13. <a name="A1" id="A1"></a>1<a href="#A0">返回顶部</a>  
  14. <div style="height:900px; background:#999999"></div>  
  15. <a name="A2" id="A2"></a>2<a href="#A0">返回顶部</a>  
  16. <div style="height:900px; background:#666666"></div>  
  17. </body>  
  18. </html>  

另外再说一下,<a name="A0" id="A0"></a>中的name与id,可以只使用一个,但某些情况下,只是用name会造成锚点无效的错误。建议还是name与id同时使用 。推荐使用id~呵呵~但是根据教程上说的~id 和name 一起用也貌似不错~不过遵循xhtml规则的话.还是老老实实的定义id吧~

相关文章
|
3月前
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
72 0
|
5月前
|
移动开发 UED HTML5
HTML锚点链接的深入解析与应用
HTML锚点链接的深入解析与应用
104 0
|
移动开发 JavaScript 前端开发
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
141 0
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
|
开发者
HTML标签- 锚点定位|学习笔记
HTML标签- 锚点定位|学习笔记
148 0
HTML标签- 锚点定位|学习笔记
|
BI 容器
HTML——标签,路径,锚点,列表
HTML——标签,路径,锚点,列表
156 0
html 锚点定位偏移 外边距增加
html 锚点定位偏移 外边距增加
542 0
|
开发者
HTML标签- 锚点定位|学习笔记
快速学习HTML标签- 锚点定位
HTML标签- 锚点定位|学习笔记
|
Web App开发
HTML-文字标记 超链接锚点
在网页中文本都是用标记包住的文字效果 <!-- 文档规范引用 --> <html> <head> <meta charset="utf-8" /> <title>嘻嘻哈哈</title> </head> <body> <!-- <f...
881 0
|
JavaScript 前端开发 Go