现在的位置: 首页 > web前端 > 正文

html target属性详解(如何分窗口,frame、target、base、hr)

2017年08月10日 web前端 ⁄ 共 1920字 ⁄ 字号 评论关闭

A的target属性

  介绍A标签的另一个重要的属性——target。

例子

<a target=_blank href=/cgi-bin/mybbs/>myBBS</a>

显示

myBBS

说明
  这个连接和一般的连接看起来没有任何区别,只是点这个连接时,
浏览器将打开一个新的窗口显示myBBS。target可能的值还有:

_blank 开一个新窗口
_parent 显示在上一层窗口中
_top 显示在最上层窗口
name 显示在名字叫name的窗口中
_self 显示在当前窗口
缺省的属性,点一下,当前页面就换成href指向的页面

_parent,_top,name,必须结合frame的使用。

 

frame

  使用frame(框、框架),可以将浏览器分成几个部分,每个部分再显示一个独立的页面。

例子

<html>
<head>
<FRAMESET COLS="25%,*">
    <FRAME SRC="a.htm">
    <FRAME SRC="b.htm">
</FRAMESET>
</head>
</html>

因为这个效果不太好显示,大家可以在自己的机器上试一下。

说明
  上面是一个完整的文件,注意包含frame的html文件不能在有BODY部分了。出现在
HEAD中的标签还可以使用,下面为了方便,只写出frame部分。
  frameset定义一个frame集合,cols(列)将窗口分成左右两部分,一个占25%的宽度,
另一个占剩余部分(*)。然后两部分页面的URL分别用frame定义为a.htm和b.htm。

例子

<FRAMESET rows="100,200,*">
    <FRAME SRC="a.htm">
    <FRAME SRC="b.htm">
    <FRAME SRC="c.htm">
</FRAMESET>

显示上中下三部分,上面部分是高度100点,中间高200,剩下的为下面的部分。
三部分的url是a.htm,b.htm和c.htm。

frameset也可以嵌套使用

例子A

<FRAMESET cols="100,*">
    <FRAME SRC="a.htm">
    <FRAMESET rows="50%,50%">
        <FRAME SRC="b.htm">
        <FRAME SRC="c.htm">
    </FRAMESET>
</FRAMESET>

显示为左右两部分,左面是宽度为100点的,右面又分成上下相等两部分。

 

target和frame的结合使用

_top

  一个在frame中的页面,点他里面的连接,始终显示在他自己的窗口里。
如果指定_top,则可以“跳”出frame,将这个连接显示在最上层的窗口。

例子

<a target=_top href=/cgi-bin/mybbs/>myBBS</a>

显示

myBBS

说明
  点上面的连接,大家就会明白_top的含义了(可以用浏览器的“返回”键返回)。

_parent

  _top直接显示在最上层窗口了,而_parent则只显示在上层,
当frame只有一层时,两者效果是一样。当frame有嵌套时,
比如“例子A”中c.htm中的_parent连接将使右边上下两部分变成一个窗口。
这个用的并不多,有时间大家自己试一下好了。

name

  更一般的,在frame里可以定义名字。

例子

<FRAMESET COLS="25%,*">
    <FRAME SRC="a.htm" 
name=left>
    <FRAME SRC="b.htm" 
name=right>
</FRAMESET>

这样右面的窗口叫“right”,a.htm中类似

<a target=right href=...>

的连接,将显示在右面。大家应该知道类似导航栏的页面是如何做出来了吧。

 

base标签

  可以通过head中的base标签来设置当前页面缺省的target

例子

<html>
<head>
<base target=right>
</head>
<body>
<a href=...>a</a>

<a target=_self href=...>b</a>
...

说明
  指定了该页面的缺省target为right,a连接(没有指定target使用默认)
将显示在名为right的frame里,b连接将显示在当前frame。

 

 

最后介绍一个标签

HR

  显示一个分隔线

例子

<HR>

显示


例子

<hr width=50%>

显示


 

说明

  很简单也很常用。

转载自:http://blog.csdn.net/ysuncn/article/details/2214217

参考:http://www.cnblogs.com/Tally/archive/2013/02/19/2916475.html

抱歉!评论已关闭.