HTML中“blank”和“_blank”目标属性的区别
有时,我们可能会注意到网页上的链接会引导我们到不同的网页。在某些网站上,如果我们点击某些链接,它们会在新的浏览器标签页或新窗口中打开,而有些网站会为后续点击链接重复使用同一个新的浏览器标签页。此外,有些网站对链接使用相同的原始页面。这些行为是通过使用HTML target属性实现的。
在本文中,我们将探讨如何使用target="blank"和target="_blank"属性在新标签页中打开超链接。
Target属性
target是锚标签的一个可选属性。如果我们使用target=“blank”作为此属性的值,则单击链接时会在新的浏览器标签页中打开该链接。对于具有相同属性(target=“blank”)的所有链接,将重复使用相同的标签页。
通过使用此属性,用户可以获得无障碍的体验,因为无论何时用户点击网页中的链接,它都将在单独的标签页中打开,而不是在同一标签页中。它还可以避免在浏览器中使用过多的标签页,这可能会影响浏览器的性能并导致卡顿。
示例
在下面的示例中,我们对超链接使用带“blank”值的target属性。
<!DOCTYPE html> <html> <head> <title>Using target = "blank"</title> <style> div { text-align: center; } </style> </head> <body> <div> <h3>Here we are using the target attribute with "blank" value</h3> <a href="https://tutorialspoint.com/index.htm" target="blank">Click here for tutorialspoint</a> </div> </body> </html>
正如我们在上面的代码中看到的,我们在超链接中使用了target="blank"属性,它在新浏览器标签页中打开链接。具有相同属性的后续链接也将在这个相同的标签页中打开。
Target = "_blank"
如果我们将值作为target="_blank"传递给锚标签中的target属性,则链接将在新的浏览器标签页中打开。每次我们点击链接时,它都会打开一个新的浏览器标签页。此属性不会重复使用单个新标签页。
通过使用此属性,用户可以无缝地浏览不同的网页,同时保持原始页面易于访问。但是,这也可能会影响浏览器的整体性能以及系统性能。
示例
在下面的示例中,我们对超链接使用带“_blank”值的target属性。
<!DOCTYPE html> <html> <head> <title>Using target = "_blank"</title> <style> div { text-align: center; } </style> </head> <body> <div> <h3>Here we are using the target attribute with "_blank" value</h3> <a href="https://tutorialspoint.com/index.htm" target="_blank">Click here for tutorialspoint</a> </div> </body> </html>
在这里,我们在超链接中使用了target="_blank"属性,每次点击该链接时,它都会在新浏览器标签页中打开链接。
示例
在下面的示例中,我们没有对超链接使用任何target属性。
<!DOCTYPE html> <html> <head> <title>Without target attribute</title> <style> div { text-align: center; } </style> </head> <body> <div> <h3>Here we are not using the target attribute with any value</h3> <a href="https://tutorialspoint.com/index.htm">Click here for tutorialspoint</a> </div> </body> </html>
正如我们在下面的输出中看到的,每当我们点击链接时,它都将在同一网页中打开。
Target = "blank"和Target = "_blank"的区别
target="blank"属性将在新的浏览器标签页中打开链接,并对任何具有相同属性(target="blank")的未来链接使用相同的标签页。
target="_blank"属性每次都会在新标签页中打开链接。