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,现在进行一些加载模型的学习,数据的话可以 ...
随机推荐
- Linux下安装php开发框架yaf
yaf框架中文手册:http://yaf.laruence.com/manual/index.html yaf手册:http://www.php.net/manual/en/book.yaf.php ...
- UIView的layoutSubviews,initWithFrame,initWithCoder方法
****************************layoutSubviews************************************ layoutSubviews是UIView ...
- 一个经典的PHP验证码类分享
我们通过PHP的GD库图像处理内容,设计一个验证码类Vcode.将该类声明在文件vcode.class.php中,并通过面向对象的特性将一些实现 的细节封装在该类中.只要在创建对象时,为构造方法提供三 ...
- Java Concurrent Topics
To prevent Memory Consistency Errors(MCEs), it is good practice to specify synchronized class specif ...
- druid-1.0.13 数据库配置文件密码加密
1.cmd 切换到druid目录 我的是C:\tool\apache-tomcat-7.0.67\webapps\projectA\WEB-INF\lib 2.运行命令 java -cp druid ...
- Android提高第十九篇之"多方向"抽屉--转
本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 在android上要实现类似Launch的抽屉效果,大家一定首先会想起SlidingDrawer.Slidin ...
- db2导入表结构和表数据
http://www.cnblogs.com/kfarvid/archive/2010/12/15/1906776.html db2的博文 -bash-3.2$ db2 connect to ca ...
- AI 人工智能 探索 (七)
我简单画了一幅图,来讲下 ai 中的设计模式.图形中的这些人物,我想大家都能看的明白. 当 盗贼出现,人们发现了他们,就 呼叫 主类,然后主类再 通知 下面对应的管理局,然后管理局再 分配人手过去 ...
- cortexm内核 栈的8字节对齐及关键字PRESERVE8
一.什么是栈对齐? 栈的字节对齐,实际是指栈顶指针须是某字节的整数倍.因此下边对系统栈与MSP,任务栈与PSP,栈对齐与SP对齐 这三对概念不做区分.另外下文提到编译器的时候,实际上是对编译器汇编器连 ...
- hdu_5616_Jam's balance(暴力枚举子集||母函数)
题目连接:hdu_5616_Jam's balance 题意: 给你一些砝码,和一些要被称出的重量,如果这些砝码能称出来输出YES,否则输出NO 题解:我们想想,这题求组合方式,我们这里可以直接用母函 ...