有時，您希望用戶單擊網站鏈接并在新的瀏覽器選項卡中打開它。但是，如何在 HTML 中做到這一點呢？在本文中，我將通過代碼示例向您展示如何使用該特性。我還將討論何時應該考慮使用此屬性。target="_blank"

　　如何使用打開新的瀏覽器選項卡

　　target="_blank"

　　該屬性在開始錨點標記內使用，如下所示：target="_blank"

　　當用戶單擊該鏈接時，一個新的瀏覽器選項卡將自動打開該頁面。

　　在這個例子中，我在一組段落標簽中嵌套了一個鏈接，以將人們引導到 freeCodeCamp。

　　當您單擊“免費代碼營”鏈接時，它將為您打開一個新的瀏覽器選項卡。

　　如果我省略該屬性，則默認行為是離開當前網頁并直接轉到鏈接，而無需打開新的瀏覽器選項卡。target="_blank"

　　什么是關鍵字？

　　noopener

　　該屬性中的關鍵字主要用于安全原因，以防止惡意用戶通過該屬性弄亂原始網頁。如果惡意用戶獲得了對您的窗口對象的訪問權限，那么他們可以將您的頁面重定向到惡意URL。noopenerrelWindow.opener

　　您可以使用關鍵字來幫助防止該安全問題的發(fā)生。關鍵字的使用方式如下：noopener noopener

　　關鍵字更新noopener

　　在2021年，進行了更新，現代瀏覽器現在使用該屬性設置為任何鏈接。正如你在這個可以使用表格中看到的，除了IE Explorer 11之外，大多數瀏覽器都支持該關鍵字。rel=noopenertarget=_blanknoopener

　　即使進行了此更新，許多開發(fā)人員仍將使用該屬性進行鏈接。rel=noopener target=_blank

　　是否應始終使用該屬性？target="_blank"

　　當用戶單擊鏈接時，默認行為是在當前頁面上打開該鏈接，而不打開新的瀏覽器選項卡。在很多情況下，您不希望更改此默認行為，因為用戶已經逐漸期望這樣做。

　　您必須仔細考慮何時是使用該屬性的好時機。一個很好的例子是，如果用戶正在處理一個頁面，如果他們點擊鏈接，他們不想離開該頁面。target="_blank"

　　在此示例中，我們鏈接到 DevDocs 文檔，以便用戶可以留在其當前頁面上，并在新選項卡上查找引用。

　　結論

　　如果您希望用戶單擊打開新瀏覽器選項卡的鏈接，則可以使用該屬性。target="_blank"

　　該屬性在開始錨點標記內使用，如下所示。target="_blank"

　　添加屬性中的關鍵字是為了防止惡意用戶通過屬性弄亂原始網頁。noopenerrelWindow.opener

　　您必須仔細考慮何時是使用該屬性的好時機，因為您不希望總是更改鏈接的默認行為。target="_blank"