老师说H5 a 标签的 target='_blank' 可以直接去掉 '_' 是不是讲错了?

老师说H5 a 标签的 target='_blank' 可以直接去掉 '_' 是不是讲错了?

最新的HTML5规范,target的值仍然是包含'_'的~~

我查了点资料:

  • _blank 是标准的在新的空白页面打开链接;

  • 而直接用 blank 是打开个页面,并命名为 blank;当存在 blank 页面的时候,并不会和上一条一样。


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,关于同学的疑问解答如下:

1、只创建一个新窗口的情况下,在a标签中,target属性值为blank和_blank的效果是一样(老师指的是这种情况)。因为blank只能创建一个新窗口,而_blank能创建多个新窗口,如下:

http://img1.sycdn.imooc.com//climg/5f64a1660a56c4d619180944.jpg

2、由于iframe元素会创建包含另外一个文档的内联框架,当a标签的target属性和iframe的name结合使用的时候,实现的是局部刷新功能(有点类似于锚点跳转)。想要实现在新的窗口打开必须将target的属性值书写成_blank,浏览器才能识别,如果去掉_blank的下划线,浏览器会认为是页面要做局部刷新。比如同学的代码:

http://img1.sycdn.imooc.com//climg/5f6495a2099877ea14090484.jpg

希望可以帮到你,祝学习愉快!

正版鲜人 提问者 2020-09-18 18:40:12
<!DOCTYPE html>
<html lang="en">
<head>
    <title>“blank”和“_blank”的区别</title>
</head>

<body>
    <a target="blank" href="https://www.baidu.com">target:blank</a><br />
    <iframe name="blank"></iframe><br />
    <hr />

    <a target="_blank" href="https://www.baidu.com">target:_blank</a><br />
    <iframe name="_blank"></iframe><br />
    <hr />

    <a target="b" href="https://www.baidu.com">target:b</a><br />
    <iframe name="b"></iframe><br />
</body>

</html>

参考资料:https://blog.csdn.net/zswang/article/details/5453191

自问自答一下~~我继续搜索了相关的资料并实验了一下:

将上述代码copy到一个html文件中并使用浏览器打开,依次点击三个链接可以发现target的值是"blank"还是"_blank"并非是等价的。为了方便实验,target 在这里是指定在哪一个 iframe 中加载链接,a标签target就对应着iframe标签的name属性。 

http://img1.sycdn.imooc.com//climg/5f648dba0901caec38402055.jpg

结果表明,target='blank' 实际上是将链接指向了一个名为“blank”的页面,并在这个页面打开链接;而 target='_blank' 才是真正的指向了一个新的空白页面,并在该页面打开链接。这两者在实质上并不一致。

好帮手慕鹤 2020-09-18 18:05:55

同学你好,视频中老师没有讲错哦,“_blank”属性值中的下划线去掉也不影响实际效果。这一现象是老师在实践中研究出来的,因此在视频中也跟大家分享了一下这种现象。但是,建议同学在使用时,按照带有下划线这种比较规范的写法来进行书写。

祝学习愉快!

  • 提问者 正版鲜人 #1
    经过查证,我觉得之所以视频中target的值是否有下划线的效果一致。只是因为当前环境中并没有一个 name 为“blank”的 iframe 或页面,然后被浏览器修正了为了“_blank”。
    2020-09-18 18:47:26
  • 提问者 正版鲜人 #2
    https://stackoverflow.com/questions/35703005/what-is-the-difference-between-target-blank-and-target-blank 在 StackOverflow 中也有网友问过这个问题
    2020-09-18 18:49:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师