HTML学习(五)链接
1.创建文本链接
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
2.创建图片链接
<html>
<body>
<p>
您也可以使用图像来作链接:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
HTML 链接语法
链接的 HTML 代码很简单。它类似这样:
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
<a href="http://www.w3school.com.cn/">Visit W3School</a>
target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
name 属性
name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法:
<a name="label">锚(显示在页面上的文本)</a>
提示:锚的名称可以是任何你喜欢的名字。
提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。
实例
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
<a name="tips">基本的注意事项 - 有用的提示</a>
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
例:
<html> <body> <p>
<a href="#C4">查看 Chapter 4。</a>
</p> <h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p> </body>
</html>
注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。
提示:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。
提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。
HTML学习(五)链接的更多相关文章
- muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor
目录 muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor Connector 系统函数connect 处理非阻塞connect的步骤: Connetor时序图 Accep ...
- TweenMax动画库学习(五)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- Android JNI学习(五)——Demo演示
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
- 云端搭建Linux学习环境 链接https://edu.aliyun.com/article/19 (阿里云ECS服务器 )课堂
云端搭建Linux学习环境 链接https://edu.aliyun.com/article/19 1. 开通云服务器 2 1.包年包月 按量付费(适合测试数据的时候) 2 2.地域 服务器数 ...
- live555学习经验链接二
live555学习经验链接二:http://blog.csdn.net/nkmnkm/article/category/1066093/2
- live555学习经验链接一
live555学习经验链接:http://xingyunbaijunwei.blog.163.com/blog/#m=0&t=1&c=fks_084071082087086069082 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- ZigBee学习五 无线温度检测
ZigBee学习五 无线温度检测 1)修改公用头文件GenericApp.h typedef union h{ uint8 TEMP[4]; struct RFRXBUF { unsigned cha ...
- (转)MyBatis框架的学习(五)——一对一关联映射和一对多关联映射
http://blog.csdn.net/yerenyuan_pku/article/details/71894172 在实际开发中我们不可能只是对单表进行操作,必然要操作多表,本文就来讲解多表操作中 ...
- cesium 学习(五) 加载场景模型
cesium 学习(五) 加载场景模型 一.前言 现在开始实际的看看效果,目前我所接触到基本上都是使用Cesium加载模型这个内容,以及在模型上进行操作.So,现在进行一些加载模型的学习,数据的话可以 ...
随机推荐
- Drivers Dissatisfaction
Drivers Dissatisfaction time limit per test 4 seconds memory limit per test 256 megabytes input stan ...
- WPF从我炫系列4---装饰控件的用法
这一节的讲解中,我将为大家介绍WPF装饰控件的用法,主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollView ...
- UIActivityIndicatorView的详细使用(加载菊花)
UIActivityIndicatorView实例提供轻型视图,这些视图显示一个标准的旋转进度轮.当使用这些视图时,最重要的一个关键词是小.20×20像素是大多数指示器样式获得最清楚显示效果的大小.只 ...
- 构建一个最简单的web应用并部署及启动
第一种构建方式:不使用maven File-new-Dynamic Web Project,用这种方式构建的web项目是在web.xml文件中配置了welcome-file的,但是却没有对应的文件,所 ...
- Android上掌纹识别第一步:基于OpenCV的6种肤色分割 源码和效果图
Android上掌纹识别第一步:基于OpenCV的6种肤色分割 源码和效果图 分类: OpenCV图像处理2013-02-21 21:35 6459人阅读 评论(8) 收藏 举报 原文链接 ht ...
- 新建aix实例
http://www.cnblogs.com/kfarvid/archive/2010/12/21/1912553.html DB2数据库 http://wenku.baidu.com/view/ ...
- sessionStorage用于分页,瀑布流和存储用户数据等
在手机网页开发中,会用到分页和瀑布流来分量显示数据.这里会遇到一个问题.当点击某条数据进入详情后,再按手机的返回键会到上一个页面,该页面是重新加载的. 本人在微信里用内置的qq浏览器打开页面,wind ...
- Override/implements methods 如何添加
用过Eclipse 的ADT的都知道,要快速添加override或者implements方法,右键---Source---Override/Implements Method... 中文:右键---& ...
- 1. Hyper上的CentOS 6.5 网络配置
在hyper上安装了一个centos系统, 默认安装的是命令行模式,网络默认是不开启的.由于是在虚拟机上安装的centos所以需要现在hyper上新添加一个网络适配器后然后再进行下面的设置: 登陆到r ...
- Java NIO的探究
1.Java NIO与阻塞IO的区别 阻塞IO通信模型(在上一篇<J2SE网络编程之 TCP与UDP>博客中有所介绍) 我们知道阻塞I/O在调用InputStream.read()方法时是 ...