• 技术文章 >web前端 >html教程

    html5怎么创建跳转页尾超链接

    青灯夜游青灯夜游2022-01-18 11:39:30原创71

    html5创建跳转页尾超链接的方法:1、在页尾创建一个元素,将其设置为锚点,语法“<元素名 id="锚点名称">...</元素名>”;2、创建一个超链接,将其与锚点关联即可,语法“<a href="#锚点名称">点我跳转页尾</a>”。

    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

    在html5中,可以利用锚点链接实现跳转到页尾的效果。

    什么是锚点链接?

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

    锚点就是定位器!

    创建跳转页尾超链接

    第一步:设置锚点

    <div id="bottom">页尾</div>

    第二步:设置启动定位器的开关

    <a href="#bottom">点我跳转页尾 </a>

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			body{
    				height: 1000px; 
    				background-color: #FFC0CB;
    				position: relative;
    			}
    			#bottom{
    				position: absolute;
    				bottom: 0;
    			}
    		</style>
    	</head>
    	<body>
    		<a href="#bottom">点我跳转页尾 </a>
    		<div id="top">页头</div>
    		<div id="bottom">页尾</div>
    	</body>
    </html>

    1.gif

    相关推荐:《html视频教程

    以上就是html5怎么创建跳转页尾超链接的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html5 锚点链接
    上一篇:十分钟搞懂form标签中的GET和POST提交方式 下一篇:html中怎么让列表横向排列

    相关文章推荐

    • html5中li标签的用法是什么• html5新特性中移除了哪些元素• html5标签head和header有什么区别• html5中新增加的属性与元素有哪些• 用html5开发的游戏有什么优点• html5属性值可以忽略引号吗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网