Bootstrap

HTML(四)——建立超链接

1.文字超链接

文字链接是最简单的一种,我们在html文件中,用标签就可以实现;





Insert title here


百度一下

运行结果:

 

我们点击这个,就会跳转到百度的首页;

 

2.图片的超链接

这个其实在文字链接上把文字换成图片既可以了;





Insert title here




在a标签里面嵌套img标签;

运行结果是网上的一张图片,点击图片后就会跳到百度页面;

 

3.以新页面显示链接页面

 这里需要用到a标签的target属性





Insert title here


百度一下

其中target的属性值为:

_blank:在新窗口/选项卡中打开

_self:在同一框架中打开(默认)

_parent:在父框架中打开

_top:在整个窗口中打开

framname:在指定的框架中打开

 

4.设置电子邮件链接

这里需要用到mailto标签





Insert title here


联系一下

运行结果:

 

点击链接,会自动跳到邮件的界面;

 

5.框架之间的链接

框架是一种常用的网页布局工具。它的作用是把浏览器的显示空间分割为几个部分,每个部分都可以独立显 示不同的网页。

5.1 用cols属性将窗口分割成左右两个部分

要用到frameset标签,这个是和body一个级别层次的,所以要将body去掉;





Insert title here





运行结果:

 

5.2 用rows属性将窗口分割成上中下三个部分





Insert title here






运行结果:

 

5.3 框架之间嵌套

比如我想要左右3:7以及右边还要有上下5:5的布局;





Insert title here








运行结果:

 

5.4 用src属性在框架中插入网页

比如我们想让三个空白的地方分别显示不同的网页;

先在文件中新建三个html文件,分别为a.html,b.html,c.html,

最后将三个网页分别插到框架之中:





Insert title here








运行结果:

 

 5.框架之间建立链接

有时候需求是,一个网页左边是菜单,右边是相应的网页,点击相应的菜单,会出现对应的网页;

index.html内容是:





Insert title here





其中a.html的内容是:





Insert title here


百度一下


淘宝一下


跳到网页b

b.html的内容是:





Insert title here


这是b网页

我们去运行 index.html文件,运行结果是:

 其中左边不同的链接对应 不同的网页界面!

 6.嵌入式架构iframe

我们在网页里面嵌套另一个网页;





Insert title here

百度界面

运行结果: