HTML(六) 超链接和框架

最新推荐文章于 2022-02-24 21:43:12 发布

原创最新推荐文章于 2022-02-24 21:43:12 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML中超链接的应用，包括基本文字链接、图片链接、电子邮件链接等，并深入探讨了框架的使用方法，如使用cols和rows属性划分窗口、框架间的链接及嵌套等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本文字超链接

<a href="http://www.baidu.com">点我去百度</a>

图片超链接

baidu.gif在当前目录下，并且以新窗口显示链接页面

<a href="http://www.baidu.com" target="_blank"><img src="baidu.gif"/></a>

电子邮件链接

<a href="mailto:XXX">联系我</a>

框架之间的链接

cols 属性将窗口分为左右两部分
ps：使用了框架之后，不需要加body标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用cols属性将窗口分为左右两部分</title>
</head>
<frameset cols="30%,*">
<frame src="x.html">
<frame src="x.html">
</frameset>
</html>

rows 属性将窗口分为上中下三部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用rows属性将窗口分为上中下三部分</title>
</head>
<frameset rows="30%,10%,*">
<frame src="x.html">
<frame src="x.html">
<frame src="x.html">
</frameset>
</html>

框架的嵌套

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架的嵌套</title>
</head>
<frameset cols="30%,*">
<frame src="x.html">
<frameset rows="50%,*">
<frame src="x.html">
<frame src="x.html">
</frameset>
</frameset>
</html>

框架之间建立链接
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架之间建立链接</title>
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frame name="main">
</frameset>
</html>

a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="b.html" target="main">b</a><br/>
<a href="c.html" target="main">c</a>
</body>
</html>

嵌入式框架iframe

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

<iframe width="900" height="600" src="http://www.baidu.com"></iframe>