HTML中超链接的语法、路径、分类和应用;浮动框架iframe的使用

 超链接语法、路径及分类

        超链接是指从一个网页指向一个目标的连接关系。

       这个目标可以是:一个网页、图片、一个电子邮件地址、一个文件或是一个应用程序。

      网页中超链接的对象是一段文本或者是一个图片。

基本语法  

<a href="url"  name="" title="" target="">超链接标题</a>

语法说明

超链接由目的地址、链接标题、打开方式等三部分组成。

1.href (href-Hypertext  reference):链接指向的目标文件。

2.title:指向链接的提示信息。

3.target:指定打开的目标窗口 。

有5 种取值:

_parent :上一级窗口;_blank:新窗口;                      

_self :同一窗口,默认值;

_top : 整个窗口打开;                    

framename:框架或浮动框架名

超链接路径:绝对路径、相对路径、根路径

1.绝对路径指文件的完整路径,包括盘符或文件传输的协议http、ftp等,一般用于网站的外部链接。

绝对路径有2种。

(1)从盘符开始定义的文件路径,如E:\web\index.html;

(2)从协议开始定义的URL网址,例如中国教育与科研计算机网的网址http://www.edu.cn。

2.相对路径是指相对于当前文件的路径,从当前文件所在位置指向目的文件的路径。

例如 web/index.html。

3.根路径是指从网站的最底层开始起,一般网站的根目录就是域名下对应的文件夹。以一个斜杠“/”开头,代表根目录,然后书写文件夹名,最后书写文件名。

例如/download/index.html。

超链接可以分为内部链接和外部链接两种。内部链接是指网站内部文件之间的链接,而外部链接是指网站内的文件链接到站点内容外的文件。 

例如:

内部链接:<a href="index.html">xxxxx</a>

外部链接:<a href="http://www.163.com/">网易</a>


 超链接的应用

最常用的两种应用是链接内部文件。例如<a href="index.html">xxxxx</a>

其次是外部网址。例如:<a href="http://www.163.com/">网易</a>

下面三种不常用:

1.创建图像链接      

链接标题是一个图像,浏览时单击链接图像时,可以打开超接href所设置的URL。

基本语法:

<a href=“#”><img src=“url” width=“” height=“” align=“” border=“” alt=“”></a>

2.创建电子邮件超链接          

一般网站上都会设置“联系我们”这样的栏目或超链接,目的是方便用户及时与网站管理员进行沟通与联系--电子邮件超链接。

基本语法:

<a href=“mailto:E-mail地址[ ?subject=邮件主题[&参数=参数值]]”>链接内容</a>   

例如: <a href="mailto:[email protected];[email protected][email protected]& [email protected]&subject=Hello%20again&body=下周二开会讨论">发送邮件</a>

3.创建页面书签链接

书签是指到文章内部的链接,可是实现段落间的任意跳转。实现这样的链接要先定义书签名称和书签链接。

书签定义步骤:

    1.定义书签名:

<a name=“书签名称">书签标题</a>

    2.定义书签链接:

<a href="#书签名称">书签标题</a>  <!-- 同一页面内   -->

<a href="URL#书签名称">书签标题</a><!--  不同页面间  -->  

URL:是放置标记的HTML文件的URL,name:标记名。


浮动框架

 浏览器窗口含有孤立的子窗口称为浮动框架。在浏览器窗口中使用<iframe></iframe>标记,可以嵌入浮动框架。    

<iframe name=" name " src="url"  width=“" height=" " ></iframe>

 <a href="target.html" target= " name" >链接标题</a>

属性

说明

属性

说明

src

设置源文件属性

scrolling

设置框架滚动条

name

设置框架名称

frameborder

设置框架边框

width

设置浮动框架窗口宽度

marginwidth

设置框架左右边距

height

设置浮动框架窗口高度

marginheight

设置框架上下边距

align

设置框架对齐方式

 

 

 

HTML中超链接的语法、路径、分类和应用;浮动框架iframe的使用     HTML中超链接的语法、路径、分类和应用;浮动框架iframe的使用

核心代码:

<iframe name="leftiframe" src="http://www.njust.edu.cn" width="300" height="300" ></iframe>   &nbsp;&nbsp;  

 <iframe name="rigtiframe" src="http://www.pku.edu.cn"  width="300" height="300" marginwidth="10px"></iframe>

   <p>

<a href="http://www.gov.cn" target="leftiframe">在左边浮动框架内显示*人民*网站</a>

  <a href="http://www.moe.gov.cn/" target="rigtiframe">在右边浮动框架内显示教育部网站</a>

</p>