HTML <a> 标签的 target 属性
<a href='' target=''> 标签的 target 属性规定在何处打开链接文档。
如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口。
语法<a 属性=”属性值”>内容</a>
属性
l 链接的地址 href=”链接的地址url”,url绝对地址 相对地址(必备属性)
l Target 打开目标文件的窗口
_blank 在新的窗口中打开目标文件
_self 默认的打开方式,在原来的窗口中打开目标文件(原来的窗口被覆盖)
Name定义锚点的名称
同一个页面的不同区域直接跳转
定义锚点
<a name=”自定义名称”></a>在<a></a>可不加内容,给链接中的target用
跳转锚点(点击跳转锚点-->定义锚点)
<a href=”#锚点名称”>内容</a>
框架(将页面划分不同的区域,显示不同的html页面)
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:
· 开发人员必须同时跟踪更多的HTML文档
· 很难打印整张页面
框架结构标签(<frameset>)
· 框架结构标签(<frameset>)定义如何将窗口分割为框架
· 每个 frameset 定义了一系列行或列
· rows/cols 的值规定了每行或每列占据屏幕的面积
对页面进行划分区域
框架标签(<Frame>)
Frame 标签通过src属性定义了放置在每个框架中的 HTML 文档。
填充区域
基本的注意事项 - 有用的提示:
假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame>标签中加入:noresize="noresize"。
frameborder='1/0' 1显示边框 0不显示边框
border 自定义边框
为不支持框架的浏览器添加 <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>
案例:点击跳转锚点就跳转到定义锚点(部分)
若有不足请多多指教!希望给您带来帮助!