第十二章 链接(二)

你会发现上一章的链接是在当前页面中打开的,那我们能不能让这个链接在新的标签页中打开呢?当然可以了,这时候我们又要增加一个新的属性(target),来告诉浏览器,我们这个链接,要用何种方式进行打开。比如在新标签页中打开(_blank)。

那我们按着上面所做的总结,试着添加一下这个属性:

<a href="https://dmnydn.com/" target="_blank">《代码能有多难?》</a>

完全一样的结构,一样的前面加一个空格进行分隔,免得乱了。现在我们只要记住每一个属性表达的是什么意思,然后它的值又可以有哪些,就可以很好的自己去写这些代码了。href 是说这个链接要链接到哪里,所以他可以用的值,就是各种网址[1]target 是说页面在哪里打开,设置为 _blank 是在新标签页中,最常用到的也只有这一个值。因为如果你需要在当前页面中打开,那就不用写这个属性了(默认就是在当前页面中打开的)。

关于属性怎么写,大家应该已经了解了。接着我们来介绍链接所具有的第三个属性:title,这个是什么作用呢?先不说,咱们写一下试试看:

<a href="https://ek58.com/" target="_blank" title="这是个啥呀?">《代码能有多难?》</a>

我们保存以后,看一下效果:《代码能有多难?》,好像并没有发生任何的变化。现在你把鼠标移动到这个链接上,不要点击也不要移动,等一小会儿,会发现有一个小小的提示:

图片[1]-第十二章 链接(二)-易看设计 - 专业设计师平台

原来这个属性就是我们最常见的链接提示。当然它的显示效果,因为浏览器的不同而有所区别。这个属性虽然效果不是那么直白,但他还是十分重要的,它可以让读者在点击链接之前,了解自己要访问的内容是些什么。现在我们来把这个描述认真的写一下吧,~

<a href="https://ek58.com/" target="_blank" title="这是一本写给前端小白的故事书,带大家认识前端代码,并培养兴趣。">《代码能有多难?》</a>

差不多就是这个样子,那么我们来试一下效果:《代码能有多难?》。效果完全符合预期。

这里有一个细节,就是我们的描述中用的标点,是中文标点。因为虽然它写在标签之中,但是它是一个属性的值,而这个属性的值,要的是一段描述,明显这是一个我们可以自由发挥的地方,你可以理解为,这也是一种内容,而不是代码。

但并不是说自由发挥就可以写任何内容。我们看到每一个属性的值,都用引号包含起来,表示这是一个整体。那如果你在其中再写引号,这就开始冲突了,因为电脑搞不清楚哪两个引号才是一对。同样的,在网页内容中,你也不能随意的去写尖括号,因为这会和网页标签的尖括号产生冲突。而如何处理这些问题,我们后面慢慢再聊。

>注释 1: 虽然链接的地址以网址居多,但是实际上它可以填写的类型也非常复杂。后面我们会涉及到一部分,如果有兴趣也可以自己查阅资料,了解一下。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容