HTML学习笔记之超链接的使用

一.超链接的建立

在HTML文件中,建立超链接的标签为<a>和</a>。一个链接的基本格式如下:

<a href=资源地址 target=窗口名称>链接文字</a>

其中标签<a>表示一个链接的开始,</a>表示链接的结束;属性href定义了链接目标,即文件所在的位置;属性target用于指定打开链接的目标窗口,其属性的默认方式是原窗口,如果想再新窗口打开链接,可以设置targe=_blank。


二.超链接的应用

1.站内链接

如果一个页面很长,寻找相应的内容比较困难,可以通过在同一个文件中建立链接来实现。在文件的开头设置目录,在要链接的目标处设置标记即可实现单击目录达到相应的目标处,而不需要从头阅读到尾。其基本语法为:

<a href=#目标名称 target=窗口名称>目录文字</a>

在链接的目标处(通常我们称之为书签或锚)使用<a name=目标名称>超链接目标</a>

示例:

<html>
	<head>
		<title>考倒你</title>
	</head>
	<body>
		<h3>考倒你</h3>
		<a href="#t.1">世界上哪里的海不产鱼?</a><br>
		<a href="#t.2">一对健康的夫妇,为什么会生出没有眼睛的婴儿</a><br>
		<a href="#t.3">农夫养了10头牛,为什么只有19只角</a><br>
		<br><br><br><br><br><br><br><br>
		<h3><a name="t.1">第一题答案</a></h3>
		辞海不产鱼。
		<br><br><br><br><br><br><br><br>
		<h3><a name="t.2">第二题答案</a></h3>
		鸡生蛋。
		<br><br><br><br><br><br><br><br>
		<h3><a name="t.3">第三题答案</a></h3>
		一只是犀牛。		
		<br><br><br><br><br><br><br><br>
	</body>
</html>

运行结果:




2.其他站点链接

超链接还有一种用法就是要链接到网上的某些页面,可以运用http协议。其语法格式如下:

<a href=http://网址 target=窗口名称>

示例:

<html>
	<head>
		<title>其他站点的链接</title>
	</head>
	<body>
		<a href=http://keyof.net target="_blank">KOF调研小组</a> 
	</body>
</html>

运行结果:




3.图像链接

想要将图片作成超链接,只需要将<img>标签放在<a>和</a>之间,那么这个图像将成为一个可单击的图像,并产生一个链接.其语法格式如下:

<a href = 图片要链接的目标地址 target=窗口名称><img src=参数值 alt=参数值 border=参数 align=参数值 height=参数值 width=参数值 vspace=参数值 hspace=参数值></a>

示例:

<html>
	<head>
		<title>图像的链接</title>
	</head>
	<body>
		<a href=http://keyof.net target="_blank"><img src=2.jpg></a> 
	</body>
</html>
运行结果:




4.邮箱链接

在浏览网页时,经常会出现“给我写信”之类的字样,用鼠标单击后会发现将启动本地机器的邮箱服务系统发送邮件,并且地址栏的内容已经填写完整。实现语法格式如下:

<a href=mailto:E-mail 地址 cc = 抄送人 E-mail 地址 &subject = 邮件主题 &body = 邮件正文>描述文字</a>


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基本的HTML操作,来自IMOOC的学习笔记。 1 1. HTML介绍 4 1.1. HTML与CSS的关系 4 1.2. 标签 4 1.3. HTML5文档结构 5 1.4. head标签 7 1.5. body标签 8 1.6. html注释 8 2. HTML5语义化标签 8 2.1. 语义化 8 2.2. 标签:段落标签 8 2.3. 标签:DIY一个标签 8 2.4. 标签:添加标题 9 2.5. 标签:自定义块 10 2.6. 标签:定义头部区域 11 2.7. 标签:定义底部区域 12 2.8. 标签:定义区段 12 2.9. 标签:定义侧边栏区域 13 3. HTML5效果标签 14 3.1. 标签:换行效果 14 3.2. 特殊字符&nbsp;实现空格效果 14 3.3. 标签:水平线效果 15 4. HTML5列表标签 15 4.1. 标签:实现无序列表 15 4.2. 标签:实现有序列表 16 5. HTML5图片,链&表格标签 16 5.1. 标签:为网页添加图片 16 5.2. 标签:为网页添加 17 5.3. 标签 target属性:在窗口中打开链 17 5.4. 家族:为网页添加表格 18 5.5. 、、标签:定义表格的表头、表身、表尾 19 6. HTML5表单标签 20 6.1. 标签:创建表单,与用户交互 20 6.2. 输入框:文本输入框、密码输入框 22 6.3. :placeholder属性:输入框占位符——输入提示 23 6.4. number类型:数字输入框 23 6.5. url类型:网址输入框 24 6.6. email类型:邮箱输入框 24 6.7. 标签:创建文本域 25 6.8. 标签:为鼠标用户改进可用性 25 6.9. radio/checkbox:单选框、复选框 26 6.10. &标签:创建下拉菜单 27 6.11. submit类型:提交按钮 27 6.12. reset类型:重置表单信息 28 7. CSS3介绍 29 8. CSS3选择器 29 9. CSS3的继承、优先级&重要性 29 10. CSS3字体样式 29 11. CSS3文本样式 29 12. CSS3盒模型 29 13. CSS3布局模型 29 14. flex弹性盒模型 29 15. CSS3样式设置小技巧 29

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值