您的位置：首页 > 职场人生

黑马程序员_html常用标签3

2012-04-29 11:34 225 查看

---------------------- android培训、java培训、期待与您交流！ ----------------------

六、链接标志

1.<a href=""></a>

2.<a name=""></a>

1.<a href=""></a>

本标志对的属性href是无论如何不可缺少的，标志对之间加入需要链接的文本或图像(链接图像即加入<img src="">标志)。href的值可以是URL形式，即网址或相对路径，也可以是mailto:形式，即发送E-Mail形式。对于第一种情况，语法为<a href="URL"></a>，这就能创建一个超文本链接了，例如：

<a href="http://xld.home.chinaren.net/">这是我的网站</a>

对于第二种情况，语法为<a href="mailto:EMAIL"></a>，这就创建了一个自动发送电子邮件的链接，mailto:后边紧跟想要制动发送的电子邮件的地址(即E-Mail地址)，例如：

<a href="mailto:xiaolida@263.net">这是我的电子信箱(E-Mail信箱)</a>

此外，<a href=""></a>还具有target属性，此属性用来指明浏览的目标帧，我们将在讲帧标志时作详细的说明，这里您只要知道如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中浏览新的Html文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口来浏览新的Html文档。例如：

<a href="http://xld.home.chinaren.net/" target="_blank">这是我的网站</a>

2.<a name=""></a>

<a name=""></a>标志对要结合<a href=""></a>标志对使用才有效果。<a name=""></a>标志对用来在Html文档中创建一个标签(即做一个记号)，属性name是不可缺少的，它的值也即是标签名，例如：

<a name="标签名">此处创建了一个标签</a>

创建标签是为了在Html文档中创建一些链接，以便能够找到同一文档中的有标签的地方。要找到标签所在地，就必须使用<a href=""></a>标志对。例如要找到“标签名”这个标签，就要编写如下代码：

<a href="#标签名">点击此处将使浏览器跳到“标签名”处</a>

注意：href属性赋的值若是标签的名字，必须在标签名前边加一个“#”号。

下面是本教程的一个综合示例：

例7 链接标志的综合示例

<html>

<head>

<title>链接标志的综合示例</title>

</head>

<body>

 

<a name="Top">创建标签处</a> 

 

 

欢迎想要学习网页***的同学访问我的网站 

<a href="http://xld.home.chinaren.net/" target="_blank">http://xld.home.chinaren.net/ 

 

<img src="http://xld.home.chinaren.net/logo468_60.gif"

alt="欢迎访问"网页***"" border="0" width="468" height="60"></a> 

 

本网站的主要内容 

 

<a href="index_Html.htm" target="_blank">Html教程</a> 

 

<a href="../DHtml/index_DHtml.htm" target="_blank">动态Html教程</a> 

 

<a href="../ASP/index_ASP.htm" target="_blank">ASP教程</a> 

 

JavaScript教程 

 

VBScript教程 

 

<a href="../yqlj/yqlj.htm" target="_blank">友情链接</a> 

 

我要留言 

 

作者介绍 

 

 

欢迎给我来信，我的E-Mail是：

<a href="mailto:xiaolida@263.net">xiaolida@263.net</a> 

 

<a href="#Top">点击此处回到标签处</a> 

 



</body>

</html>

七、帧标志

1.<frameset></frameset>

2.<frame>

3.<noframes></noframes>

帧是由英文Frame翻译过来的，它可以用来向浏览器窗口中装载多个Html文件。即每个Html文件占据一个帧，而多个帧可以同时显示在同一个浏览器窗口中，它们组成了一个最大的帧，也即是一个包含多个Html文档的Html文件(我称它为主文档)。帧通常的使用方法是在一个帧中放置目录(即可供选择的链接)，然后将Html文件显示在另一个帧中。

1.<frameset></frameset>

属性：border边框粗细、bordercolor边框颜色、frameborder=0/1是否显示边框、framespacing子框架之间的距离。

<frameset rows=",,*">	总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/3
<frameset cols="40%,,">	总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧
<frameset rows="40%," cols="50%,,200">	总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,所占空间依据rows和cols属性的值,其中200的单位是像素

2.<frame>

<frame>标志放在<frameset></frameset>之间，用来定义某一个具体的帧。<frame>标志具有src和name属性，这两个属性都是必须赋值的。src是此帧的源Html文件名(包括网络路径,即相对路径或网址)，浏览器将会在此帧中显示src指定的Html文件；name是此帧的名字，这个名字是用来供超文本链接标志<a href="" target="">中的target属性用来指定链接的Html文件将显示在哪一个帧中。例如定义了一个帧，名字是main，在帧中显示的Html文件名是jc.htm，则代码是<frame src="jc.htm" name="main">，当您有一个链接，在点击了这个链接后，文件new.htm将要显示在名为main的帧中，则代码为<a href="new.htm" target="main">需要链接的文本</a>。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当点击链接以后在另一个帧中显示被链接的Html文件。

此外，<frame>标志还有scrolling和noresize属性，scrolling用来指定是否显示滚动轴，取值可以是“yes”(显示)、“no”(不显示)或“auto”(若需要则会自动显示,不需要则自动不显示)。noresize属性直接加入标志中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。

3.<noframes></noframes>

<noframes></noframes>标志对也是放在<frameset></frameset>标志对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。在此标志对之间先紧跟<body></body>标志对，然后才可以使用我们在教程七以前讲过的任何标志。

4.<iframe></iframe> 在页面嵌入另一个窗口。属性：scroll=no/yes是否显示滚动条、height width设置高宽、name、src、

Frameborder=0/1是否显示边框、target。

下边是一个综合示例：

例8 帧标志的综合示例

主文档：

<html>

<head>

<title>帧标志的综合示例</title>

</head>

<frameset cols="25%,*">

<frame src="menu.htm" scrolling="no" name="Left">

<frame src="page1.htm" scrolling="auto" name="Main">

<noframes>

<body>

对不起，您的浏览器不支持“帧”！

</body>

</noframes>

</frameset>

</html>

menu.htm

<html>

<head>

<title>目录</title>

</head>

<body>

目录

<a href="page1.htm" target="Main">链接到第一页</a>

<a href="page2.htm" target="Main">链接到第二页</a>

</body>

</html>

page1.htm

<html>

<head>

<title>第一页</title>

</head>

<body>

这是第一页！

</body>

</html>

page2.htm

<html>

<head>

<title>第二页</title>

</head>

<body>

这是第二页！

</body>

</html>

---------------------- android培训、java培训、期待与您交流！ ----------------------

详细请查看：http://edu.csdn.net/heima

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航