html基础-框架、同(异)页面跳转、<a>标签

HTML <a> 标签的 target 属性

<a> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口。

链接(标签的内容可以任意)

 语法<a 属性=属性值>内容</a>

属性

链接的地址  href=”链接的地址url”,url绝对地址 相对地址

l Target 打开目标文件的窗口

    _blank  在新的窗口中打开目标文件

    _self 默认的打开方式,在原来的窗口中打开目标文件(原来的窗口被覆盖)

l Name 定义锚点的名称

绝对地址(网络地址)---http:

语法<a  href=http://www.taobao.com>淘宝</a>

 

本地的地址  ----在你的本机上测试

 

相对地址

在同一个站点下,在同一个文件夹

目标文件和当前文件在同一个目录 ,直接写文件名称  

目标文件在当前文件的下一级目录,XX表示文件夹名     XX/文件名称

目标文件在当前文件的下两级目录   xx/xx/文件名

目标文件在当前文件的上一级目录   ../文件名称

目标文件在当前文件的上两级 目录   ../../文件名称    上三级../../../文件名称

特殊链接

 下载链接

那些文件不用下载可以直接做链接    .html   .jpg  .gif  

那些文件必须下载链接  .zip  .exe

 

 邮件链接

   <a href=mailto:邮件的地址>内容</a>

 空链接

  在当前页面做链接  <a href=”#”>链接的内容</a>

 Javascript(可嵌套JavaScript代码)

 <a href=”javascript:window.close()”>关闭</a>

  Firefox设置问题

 

Name定义锚点的名称

同一个页面的不同区域直接跳转

定义锚点

  <a name=”自定义名称></a><a></a>不加内容,给链接中的target

跳转锚点

  <a href=”#锚点名称”>内容</a>



框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

使用框架的坏处:

· 开发人员必须同时跟踪更多的HTML文档

· 很难打印整张页面

框架结构标签(<frameset>)

· 框架结构标签(<frameset>)定义如何将窗口分割为框架

· 每个 frameset 定义了一系列行

· rows/cols 的值规定了每行或每列占据屏幕的面积

对页面进行划分区域

框架标签(<Frame>

Frame 标签定义了放置在每个框架中的 HTML 文档。

填充区域


Frame 标签定义了放置在每个框架中的 HTML 文档。

基本的注意事项 - 有用的提示:

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame>标签中加入:noresize="noresize"

为不支持框架的浏览器添加 <noframes> 标签。

重要提示:不能将 <body></body>标签与<frameset></frameset>标签同时使用!不过,假如你添加包含一段文本的<noframes>标签,就必须将这段文字嵌套于<body></body>标签内。

案例:

1.页面的框架分布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站后台系统显示页面</title>
	</head>
	<!--将网页分成两部分(上下)-->
	<frameset rows="20%,*">
		<frame src="top.html" noresize="noresize"/>
		<!--将下部分又分为左右两部分-->
		<frameset cols="20%,*">
			<frame src="left.html" />
                        <!--接收来自left的锚点跳转-->
                       <frame name="right" />
		</frameset>
	</frameset>
</html>

2.top.html(框架的上部内容)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body >
		<h2 align="center">欢迎您进入木子大大后台管理系统!!</h2>
	</body>
</html>

3.left.html(下部框架左侧内容)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	 	<h4 align="center">
	        <!--点击链接会将rightform.html的页面在框架的右部分显示-->
                 <!--在此相当于我们自定义了一个页面锚点的跳转(自定义target的值必须要在框架中接收)-->
               <a href="rightform.html" target="right">会员管理</a><br>
		<!--点击链接会在新窗口中打开被链接文档-->
		<a href="commodity.html" target="_blank">商品管理</a><br>
		<!--点击链接会在相同的框架中打开被链接文档。-->
		<a href="brand.html" target="_self">品牌管理</a><br>
		<!--点击链接会在父框架集中打开被链接文档。-->
		<a href="class.html" target="_parent">分类管理</a><br>
		<!--点击链接会在整个窗口中打开被链接文档。-->
		<a href="-top.html" target="_top">赠品管理</a><br>
		<a href="qita.html">……</a>
		</h4>
	</body>
</html>

4.其他的HTML页面(为了简单给的图片)

rightform.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="600" height="400" bgcolor="aqua"> 
			<tr>
				<td >id</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>手机号</td>
			</tr>
			<tr>
				<td>1</td>
				<td>木子大大</td>
				<td>男</td>
				<td>22</td>
				<td>12345678900</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

commodity.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="../../img/regist_bg.jpg" />
	</body>
</html>
brand.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="../../img/big01.jpg" />
	</body>
</html>

class.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="../../img/okwu.jpg" />
	</body>
</html>

-top.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="../../img/ad.jpg" />
	</body>
</html>

qita.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body a>
		<h3 align="center">
		<a href="">优惠一</a><br />
		<a href="">优惠二</a><br />
		<a href="">优惠三</a>
		</h3>
	</body>
</html>


上面代码中的HTML页面的跳转可用下列应用:

Name定义锚点的名称

同一个页面的不同区域直接跳转(比如我看小说章节的跳转)

定义锚点

  <a name=”自定义名称></a>快跳过来<a></a>不加内容,给链接中的target

跳转锚点(我们点击就跳转到我们自定义的锚点)

  <a href=”#锚点名称”>点击跳转</a>

案例:点击跳转锚点就跳转到定义锚点(部分)

 


如有不足请多多指教!希望给您带来帮助!祝您生活愉快。


猜你喜欢

转载自blog.csdn.net/muzidigbig/article/details/78532062