#HTML5建立超链接(URL概念、超链接标记、创建热点区域、浮动框架)

HTML 专栏收录该内容
3 篇文章 0 订阅

URL的概念

URL通常情况下翻译为:“统一资源定位器”,也就是我们通常说的“网址”,它用于指定Internet上的资源位置
URL格式
网络中计算机是通过IP地址区分的,如果需要访问网络中某台计算机中的资源,首先要定位到这台计算机,IP地址是由32位二进制代码组成,数字之间没有意义,且不容记忆。为了方便记忆,现在计算机一般采用域名的方式寻找地址,即在网络上使用一组有意义的字符组成的地址代替IP地址来访问网络资源。
URL是由4哥部分组成的,即 “协议”“主机名”“文件夹名”“文件名”
举个例子

http://www.webDesign.com/pages/computer.html
URL组成

互联网中有着各种各样的应用,如web服务、FTP服务,每种服务应用都对应有协议,一般通过浏览器浏览网页的协议都是HTTP协议(超文本传输协议),因此通常网页的地址都可以是 “http://” 开头。
例如:
www.baidu.com为主机名,表示文件存在于那台服务器上,主机名可以通过IP地址或者域名来表示。
确定主机后,还需要说明文件存在于这台服务器的哪个文件夹中,这里文件夹可以分为多个层及级。
确定文件后,就要定位到文件,即要显示的哪个文件,网页文件通常是以“.html” 或者是 “.htm” 为扩展名。
——————————我是分割线————————————————————

超链接<a>

超链接是指当鼠标单机一些文字、图片或者其他网页元素时,浏览器会根据其指示载入一个新的页面或者跳转到页面的其他位置,超级链接除了可链接文本之外,还可以链接各种各样的多媒体,如声音、图像动画等,通过他们可享受丰富多彩的多媒体世界。
建立超链接所使用的HTML标记为<a></a>
超链接最重要的两个要素;超链接指向的目标的地址设置为超链接的网页元素。
基本的超链接结构为

<a href=URL>网页元素</a>

注:
火狐浏览器中,图片超链接不会层架边框,而IE浏览器中,图片超链接会增加边框。
默认情况下,为文本添加超链接,文本会自动增加下划线,其颜色为蓝色,凡是点击过的超链接文本会变成红色。

超链接指向的目标类型
超链接<a>标记的href属性指向链接的目标,目标可以是各种类型的文件。如果是浏览器能够识别的类型,会直接在浏览器中显示,如果时浏览器不能识别的类型,在IE浏览器中会弹出文件下载的对话框。
实例:
效果截图
源码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>

<body>
	<a href="../../Pictures/Camera Roll/untitled.png">链接图片</a>
	<br>
	单击<a href="http://www.baidu.com">绝对URL</a>链接到baidu网站首页
	<br>
	<a href="../c语言第12次作业.docx">链接word文档</a>
</body>
</html>

效果截图
设置以新窗口显示超链接界面
一般默认的情况下,当单机超链接时,目标会在当前窗口中显示并替换掉当前页面的内容。如果要实现单机某个超链接后再浏览器窗口新生成一个窗口进行显示就需要使用<a>标记的targer属性,targer属性取值有4个,_blank、_self、_top、_parent,由于HTML5不再支持框,所以后两个不常用。

_blank表示在新窗口中显示超链接页面。
_self表示在当前窗口显示超链接页面
当省略targer属性是,默认取值为_self
————————————我是分割线——————————————

创建热点区域

我们在浏览网页时会发现,当单击一张图片的不同须臾会显示不同的链接内容,这就是所谓的图片热点区域,所谓图片热点区域就是将一个图片划分为若干个链接区域,访问者点击不同的区域会链接到不同的目标页面。
在HTML中,可以为图片创建3中类型的热点区域矩形 圆形 多边形。创建热点区域使用标记<map>和<area>语法格式如下

<img src="图片地址" usemap="#名称">
<map id="#名称">
	<area shape="rect" coords="10,10,100,100" href="#">
	<area shape="circle" coords="120,120,50" href="#">
	<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">

注意事项:
(1) 要先建立图片热点区域,必须先插入图片。注意,图片必须增加usemap 属性,说明图像是热点映射图像,属性值必须以 “#” 开头。
(2) <map>标记只有一个属性id,其作用是为区域命名,属性值必须与<img>标记的usemap属性值相同。
(3) <area>标记主要是定义热点区域的形状以及超链接,它有三个对应属性:
shape属性 空间划分区域的形状,其取值有3个,分别是rect(矩形)、circle(圆形)、poly(多边形)
coords属性 控制区域的划分坐标。
如果shape属性取值为rect,那么coords的设置值分别为矩形的左上角x,y坐标点和右下角x,y坐标点,单位为像素
如果shape属性取值为circle,那么coords的设置值分别为圆形圆心x,y坐标点和半径值,单位为像素。
如果shape属性取值为poly,那么coords的设置值分别为多边形的在各个点x,y坐标点,单位是像素。
href属性 是为区域设置超链接的目标,设置值为“#”时表示为空连接
——————————我是分割线————————————

浮动框架iframe

HTML5已经不支持frameset框架,但是他仍然支持iframe互动框架的使用。浮动框架可以自由控制宽口大小,可以配合表格随意的在网页中的任何位置插入窗口。实际上就是窗口中再创建一个窗口。
基本语法如下:

<iframe src="链接对象">

实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>

<body>
	<iframe arc="http://www.baidu.com"></iframe>
</body>
</html>

效果
至于修改尺寸这个就要用到css了,只可惜我还没学到css,等到后面学到了我会继续分享给大家。
注:
在HTML5中,iframe仅支持src属性,再无其他属性。

  • 0
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值