关于target的一些发散思考与应用

理解:

target=”_blank”表示在新的窗口打开

target有如下4 个目标名称用作特殊的文档重定向操作:

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

 

提示:

这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

在新的窗口打开

<h3>Table of Contents</h3>

<ul>

  <li><a href="pref.html" target="view_window">Preface</a></li>

  <li><a href="chap1.html" target="view_window">Chapter 1</a></li>

  <li><a href="chap2.html" target="view_window">Chapter 2</a></li>

  <li><a href="chap3.html" target="view_window">Chapter 3</a></li>

</ul>

当用户第一次选择内容列表中的某个链接时,浏览器将打开一个新的窗口,将它标记为 "view_window",然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接,且这个 "view_window" 仍处于打开状态,浏览器就会再次将选定的文档载入那个窗口,取代刚才的那些文档。

 

在框架中使用

<h3>Table of Contents</h3>

<ul>

  <li><a href="pref.html" target="view_frame">Preface</a></li>

  <li><a href="chap1.html" target="view_frame">Chapter 1</a></li>

  <li><a href="chap2.html" target="view_frame">Chapter 2</a></li>

  <li><a href="chap3.html" target="view_frame">Chapter 3</a></li>

</ul>

不用打开一个完整的浏览器窗口,使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中,并用这个相邻的框架来显示选定的文档:

<frameset cols="100,*">

  <frame src="toc.html">

  <frame src="pref.html" name="view_frame">

</frameset>

注意,在文档 "toc.html" 中,每个链接的目标都是 "view_frame",也就是右边的框架。

当用户从左边框架中的目录中选择一个链接时,浏览器会将这个关联的文档载入并显示在右边这个 "view_frame" 框架中。当其他链接被选中时,右边这个框架中的内容也会发生变化,而左边这个框架始终保持不变。

重要事项:不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。

思考:

写文章时候,就很突然想到了平时用到的a标签,就想对它做个小结,a标签是日常开发经常使用的一个内联元素,默认display:inline,既没有宽高的作用效果,如果你想让某个超链接hover显示背景,那么就需要将内联元素转变成块级元素

display:block //此元素将显示为块级元素,前后带有换行符

display:inline-block //行内块元素

那么上面两者有何区别?

如果设置的是display:block ,会让元素前后带有换行符,如果想让导航元素在一行内显示,那么就需要额外添加float属性

<a href=# style=display:block;float:left;>block</a>

如果设置的是display:inline-block行内块元素,则不需要设置float属性

<a href=# style=display:inline-block;>inline-block</a>

猜你喜欢

转载自blog.csdn.net/weixin_38091904/article/details/84642136