文档章节

HTML5之锚链接

Aaron_DMC
 Aaron_DMC
发布于 2016/11/29 15:14
字数 1047
阅读 34
收藏 0
点赞 0
评论 0

锚链接一般用于本页面的跳转,比如页面太长,到了尾部要瞬间到顶部,就可以用锚链接。

如下图所示:

数码 男装 女装 电影 音乐会 通信 阅读 美容 旅游”  就是一些锚链接。

示例:点击"数码 男装 女装 电影 音乐会 通信 阅读 美容 旅游"等就能跳转到相关内容,就像船放的一个锚。

代码实现如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>HTML5之锚链接 --- 测试</title>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<style type="text/css">
			*{margin:0px;padding:0px;}
			html,body{family:"微软雅黑";font-size:12px;color:#666;}
			ul,li{list-style-type:none;}
			a{text-decoration:none;}
			#nav{width:100%;height:100px;background:#DD2727;}
			#nav ul{width:1200px;height:100px;margin:0px auto;}
			#nav ul li{float:left;width:100px;height:50px;margin-top:50px;}
			#nav ul li a{font-size:20px;color:#fff;}

			#digtal{width:100%;height:500px;background:#ff9933;}
			#male{width:100%;height:500px;background:#ccff66;}
			#female{width:100%;height:500px;background:#ff00cc;}
			#movie{width:100%;height:500px;background:#99ff00;}
			#music{width:100%;height:500px;background:#006600;}
			#cmcc{width:100%;height:500px;background:#0000ff;}
			#reading{width:100%;height:500px;background:#ff0000;}
			#beautiful{width:100%;height:500px;background:#ff00cc;}
			#travel{width:100%;height:500px;background:#339900;}

			.box{width:1200px;margin:0px auto;}
			.box h1{background:#000;color:#fff;line-height:50px;}
		</style>

	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#digtal">数码</a></li>
				<li><a href="#male">男装</a></li>
				<li><a href="#female">女装</a></li>
				<li><a href="#movie">电影</a></li>
				<li><a href="#music">音乐会</a></li>
				<li><a href="#cmcc">通信</a></li>
				<li><a href="#reading">阅读</a></li>
				<li><a href="#beautiful">美容</a></li>
				<li><a href="#travel">旅游</a></li>
			</ul>
		</div>

		<div class="box">
			<div id="digtal">
				<h1>数码</h1>
			</div>
			<div id="male">
				<h1>男装</h1>
			</div>
			<div id="female">
				<h1>女装</h1>
			</div>
			<div id="movie">
				<h1>电影</h1>
			</div>
			<div id="music">
				<h1>音乐会</h1>
			</div>
			<div id="cmcc">
				<h1>通信</h1>
			</div>
			<div id="reading">
				<h1>阅读</h1>
			</div>
			<div id="beautiful">
				<h1>美容</h1>
			</div>
			<div id="travel">
				<h1>旅游</h1>
			</div>
		</div>
	</body>

</html>

 

 

第二种: 

  1. 首先,在 HTML 文档中对锚进行命名(创建一个书签):<a href="#tips">锚链接</a>

  2. 然后,在同一个文档中创建指向该锚的链接:<a name="tips">锚链接</a>

  name 属性规定锚(anchor)的名称。

  可以使用 name 属性创建 HTML 页面中的书签。

  书签不会以任何特殊方式显示。

  当使用命名锚(named anchors)时,可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样就无需不停地滚动页面来寻找需要的信息了。

  提示:当点击“到下面”后,焦点就会跳到”下面“处,如果想让效果明显,可以在上面代码片断之间加上。

代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>HTML5之锚链接 --- 测试</title>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<style type="text/css">
			*{margin:0px;padding:0px;}
			html,body{family:"微软雅黑";font-size:12px;color:#666;}
			ul,li{list-style-type:none;}
			a{text-decoration:none;}
			#nav{width:100%;height:100px;background:#DD2727;}
			#nav ul{width:1200px;height:100px;margin:0px auto;}
			#nav ul li{float:left;width:100px;height:50px;margin-top:50px;}
			#nav ul li a{font-size:20px;color:#fff;}

			#digtal{width:100%;height:500px;background:#ff9933;}
			#male{width:100%;height:500px;background:#ccff66;}
			#female{width:100%;height:500px;background:#ff00cc;}
			#movie{width:100%;height:500px;background:#99ff00;}
			#music{width:100%;height:500px;background:#006600;}
			#cmcc{width:100%;height:500px;background:#0000ff;}
			#reading{width:100%;height:500px;background:#ff0000;}
			#beautiful{width:100%;height:500px;background:#ff00cc;}
			#travel{width:100%;height:500px;background:#339900;}

			.box{width:1200px;margin:0px auto;}
			.box h1{background:#000;color:#fff;line-height:50px;}
		</style>

	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#digtal">数码</a></li>
				<li><a href="#male">男装</a></li>
				<li><a href="#female">女装</a></li>
				<li><a href="#movie">电影</a></li>
				<li><a href="#music">音乐会</a></li>
				<li><a href="#cmcc">通信</a></li>
				<li><a href="#reading">阅读</a></li>
				<li><a href="#beautiful">美容</a></li>
				<li><a href="#travel">旅游</a></li>
			
				<!--  第二种方式  -->
				<li><a href="#abc">链接标题</a></li>
			</ul>
		</div>

		<div class="box">
			<div id="digtal">
				<h1>数码</h1>
			</div>
			<div id="male">
				<h1>男装</h1>
			</div>
			<div id="female">
				<h1>女装</h1>
			</div>
			<div id="movie">
				<h1>电影</h1>
			</div>
			<div id="music">
				<h1>音乐会</h1>
			</div>
			<div id="cmcc">
				<h1>通信</h1>
			</div>
			<div id="reading">
				<h1>阅读</h1>
			</div>
			<div id="beautiful">
				<h1>美容</h1>
			</div>
			<div id="travel">
				<h1>旅游</h1>
			</div>


			<!--  第二种方式  -->
			<div id="anchor">
				<a name="abc">链接标题</a>
			</div>
			
		</div>
	</body>

</html>

 

© 著作权归作者所有

共有 人打赏支持
Aaron_DMC
粉丝 9
博文 65
码字总数 73707
作品 0
上海
后端工程师
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
Amaze UI让HTML5 Web应用接近原生体验

近日,第四届HTML5峰会在北京国际会议中心拉开序幕,云适配携其“HTML5跨屏前端框架Amaze UI”高调亮相,并在大会上了做了《组件化-Web前端开发的未来趋势》的重要演讲。 组件化是Web开发的未...

妹子有爱
2015/08/10
0
0
前端存储 - localStorage

发布自Kindem的博客,欢迎大家转载,但是要注意注明出处 localStorage 介绍 在HTML5中,引入了两个新的前端存储特性: localStorage sessionStorage 这两者非常相似,都是用来在前端保存一定...

Kindem
07/08
0
0
网站页面间脚本传至 sessionStorage

sessionStorage、localStorage详解 webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象...

小仙女KOMons
07/10
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
HTML5定稿了,为什么原生App世界将被颠覆

2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿。 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界...

程序袁_绪龙
2015/01/05
0
0
Nitobi推出的Windows Phone“芒果”适用的PhoneGap

Nitobi,移动跨平台PhoneGap的应用程序开发框架制造商,联合微软释放了一个新的测试版的Windows Phone 7“芒果”PhoneGap。Nitobi和微软已经宣布,PhoneGap这个HTML5支持跨平台的移动应用程序...

PhoneGap
2011/09/14
0
0
html5 使用window.history进行前端mvc跳转

//主要行为和方法如下: history.pushState(), history.replaceState() window.onpopstate事件 使用方式 if (!!(window.history && history.pushState)) { // 支持History API var stateOb......

IamOkay
2014/11/29
0
0
HTML5编程之旅 第1站 Geolocation

HTML5 Geolocation 初探 让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API(地理定位API),可以请求用户共享他们的...

倪伟伟
2014/02/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue基础知识练习

一、Hello World <div id="itany">{{msg}} <!-- 两对大括号{{}}称为模板,用来进行数据的绑定显示在页面中 --> </div><script src="js/vue.js"></script><script>var vm=new Vue({......

一个yuanbeth
7分钟前
0
0
spring @Transactional注解参数详解

原文:事物注解方式: @Transactional 当标于类前时, 标示类中所有方法都进行事物处理 , 例子: 1 @Transactional public class TestServiceBean implements TestService {} 当类中某些方法不需...

binhu
9分钟前
0
0
CORS 跨域实践

本文首发于个人微信公众号《andyqian》,期待你的关注~ 前言 系统通常都是由单体应用逐渐演化而来,演化成为前后端分离的分布式应用。在享受分布式系统带来的诸多好处之时,随之而来的也有不...

andyqian
17分钟前
7
0
开源 java CMS - FreeCMS2.8 会员管理

项目地址:http://www.freeteam.cn/ 会员组管理 会员管理 会员管理 从左侧管理菜单点击会员管理进入。 添加会员 在会员列表下方点击“添加”按钮。 填写相关属性后点击“保存”按钮即可。 编...

freeteam
18分钟前
0
0
bboss升级至 v5.0.6.8版本,改善对Elasticsearch SQL 的支持

v5.0.6.8功能改进如下: (1)持久层支持支持Elasticsearch SQL,使用参考文档:玩转Elasticsearch SQL功能 (2)解决持久层/elasticsearch模板变量解析多层级不起作用问题 (3)完善国际化功能 (4...

linux-tao
19分钟前
0
0
扫码二维码跳转到某个网站

添加maven依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.0.0</version></dependency><dependency><groupId>com.goog......

gaomq
25分钟前
0
0
Windows平台下搭建Git服务器的图文教程

Git没有客户端服务器端的概念,但是要共享Git仓库,就需要用到SSH协议(FTP , HTTPS , SFTP等协议也能实现Git共享,此文档不讨论),但是SSH有客户端服务器端,所以在windows下的开发要把自己...

MKChan
31分钟前
0
0
告警系统主脚本&告警系统配置文件&告警系统监控项目

20.20 告警系统主脚本 准备工作 定义监控系统的各个目录,然后再去定义主脚本,因为是分布式的,所以需要每一台机器都需要定义,事先创建好各个脚本和各个目录,随后脚本直接拷贝过去即可,然...

影夜Linux
32分钟前
0
0
谈谈神秘的ES6——(一)初识ECMAScript

谈谈神秘的ES6——(一)初识ECMAScript 在《零基础入门JavaScript》我们就说过,ECMAScript是JavaScript的核心,是JavaScript语法和语义的解释器,同时也是一个标准。而ECMAScript标准其实也...

JandenMa
今天
1
0
第16章 Tomcat配置

16.1 Tomcat介绍 ####Tomcat介绍 LNMP架构针对的开发语言是PHP语言,php 是一门开发web程序非常流行的语言,早些年流行的是asp,在Windows平台上运行的一种编程语言,但安全性差,就网站开发...

Linux学习笔记
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部