页面添加锚点的三种方式

页面添加锚点的三种方式

  HTML中的链接,正确的说法应该称作"锚点",它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具,让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时,标记锚点是最佳的方法。  

锚点链接对SEO的作用

  锚链接是一个非常重要的概念,在网页中增加恰当的锚链接,会让所在网页和所指向网页的重要程度有所提升,从而影响到关键词排名。锚链接对SEO的作用主要体现在以下几个方面:

  对锚链接所在的页面的作用

  正常来讲,页面中增加的链接锚链接都和页面本身有一定的关系,因此,锚文本可以做为锚链接所在的页面的内容的评估。例如:本篇文章中含有“SEO”的链接,那么,说明本篇文章和SEO有一定关系。

  对锚链接所指向页面的作用

  锚链接能精确的描述所指向页面的内容,因此,锚链接能做为对所指向页面的评估。

  锚链接对关键词排名的影响

  锚链接对于关键字排名的意义在于它可以让内容页随机链接在一起,让蜘蛛可以很好的抓取更多页面,权重也能均匀的传递,同时增强页面的相关性,最终提升网站的关键词排名。

锚点的添加方式

  1、给锚点文本标签添加id,使用<a href="#"></a>来定位,当单击a链接时,就会跳到id为a01的p标签处;

<div>
    <a href="#a01"></a>
</div>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p id="a01">练习</p>
<p>练习</p>

  这样的定位可以针对任何标签来定位。  

  2、给a标签的文本添加锚点,单击链接可跳到name为a01的a标签处;

<div>
    <a href="#a01"></a>
</div>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<p>练习</p>
<a name="a01" href=“#”>练习</a>
<p>练习</p>

  使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。 

    3、使用js。

<li class="" onclick="javascript:document.getElementById(‘here‘).scrollIntoView()"></li> 

  

时间: 2025-01-19 21:34:54

页面添加锚点的三种方式的相关文章

小蚂蚁学习页面静态化(2)——更新生成纯静态化页面的三种方式

更新生成纯静态化页面的三种方式:1.按照时间间隔更新.2.手动更新.3.定时更新(需要系统配合). 1. 按照时间间隔更新. 当用户第一次访问这个页面的时候,程序自动判断,该静态文件是否存在,并且该文件是否还在有效时间内,如果该文件未超出了有效时间,用户访问的是已经生成的静态文件.如果超出了有效时间,用户得到的是动态输出的内容,同时重新生成静态文件.稍微修改一下昨天的代码为例: <?php //首先判断是否有静态文件,并且文件的最新修改时间到现在是否大于20秒 if(is_file('./tex

YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法

上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把查询结果的 HTML 代码呈现到 Razor 视图中,考虑到灵活性,需要能在任意 Razor 视图中调用该方法,这样任意 Razor 页面都能以统一的方式方便地共享该页面部件的 HTML 内容,这对于代码的重用性和可维护性都是非常有必要的. 为实现上述要求,本文介绍如下可供选择的三种方式.   1.

PHP 页面跳转的三种方式

第一种方式:header() header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. 语法: void header ( string $string [, bool $replace = true [, int $http_response_code ]] ) 可选参数replace指明是替换前一条类似标头还是添加一条相同类型的标头,默认为替换. 第二个可选参数http_response_code强制将HTTP相应代码设为指定值. header函数中Location类

MVC页面常见的三种传值方式

前言最近在敲积分系统,发现有很多对象可以用来传值,今天就来总结一下常见的三种方式:ViewData.ViewBag和TempData 这三种方式用于Controller向View传值,一般情况下我们不会只传list,还会附带很多额外的零散的数据,这样通过model就无能为力了,这时候就会用到上文的三种对象 首先对比一下前两者——ViewData&ViewBag Controller里边的代码(ViewData): public ActionResult Index() { List<stri

AngularJs学习——实现数据绑定的三种方式

三种方式: 方式一:<h5>{{msg}}</h5>  此方式在页面刷新的时候会闪现{{}} 方式二:<h5 ng-bind="msg"></h5> 方式三:<h5 ng-clock class="ng-clock">{{msg}}</h5> 示例代码: <!DOCTYPE html> <html lang="en" ng-app="myapp&q

Tomcat热部署的三种方式

热部署是指在你修改项目BUG的时候对JSP或JAVA类进行了修改在不重启WEB服务器前提下能让修改生效.但是对配置文件的修改除外! 1.直接把项目web文件夹放在webapps里. 2.在tomcat\conf\server.xml中的<host></host>内部添加<context/>标签: <Context debug="0" docBase="D:\demo1\web" path="/demo1"

Struts2访问servlet的三种方式

第一种方式:使用ActionContext类实现 //获取对象 ActionContext context = ActionContext.getContext(); //获取页面提交数据 Map<String, Object> parameters = context.getParameters(); //操作域对象相关的方法 context.put(String,Object);//相当于HttpServletRequest的setAttribute方法 context.getApplic

获取页面元素的几种方式

在JS中我们可以通过以下几种方式获取到页面中的元素: 1.使用id来获取对象的元素(获取到的对象元素是唯一的) document.getElementById("") 例: <input type="text" value="默认的文字" id="txt"/><input type="button" value="按钮" id="btn"/>&

iOS中的视图跳转的三种方式(代码跳转,根据桥跳转,按钮跳转)

#import "ViewController.h" #import "SecondViewController.h" @interface ViewController () @property (retain, nonatomic) IBOutlet UITextField *textField; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // D