1. 程式人生 > >關於target的一些發散思考與應用

關於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>