HTML的超链接

一、超链接概念:

  超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL的地址找到所需的资源。作用于连接资源

 

 

二、超链接的常用属性:

  1、href=指定目的地,当有了href属性才有点击效果,值不同解析方式也不同,如果该值中没有指定过任何协议(比如http协议),按照默认的file协议解析
    2、title="注释",就相当于当鼠标放在图片上有文字提示一样,当鼠标放在该链接上时也会有文字提示
  3、accesskey="w":为超链接创建快捷键 创建了快捷键之后只要在网页中按alt+设置的那个快捷键就可以定位到那个连接上
  4、tabindex="数值":为连接设置制表符次序
  5、target=
    "_blank":会打开一个新的窗口
    "_self":会再自身窗口中打开(默认值)
    "_parent":会再自身窗口中打开
    "_top":会再自身窗口中打开

<a href="http://sports.sina.com.cn/nba/" target="_self" title="新浪NBA" accesskey="p">新浪NBA</a>

 

 

 

三、 链接的分类:

  1、内部链接:

    当前文件与目标文件在同一个站点中:<a href=目标文档位置及名称>    如链接本地的一个图片

<a  href="../imgs/2013-12-22_130537.png" target="_blank">图片</a>

 

  2.、外部链接:

    当前文档与目标文档不在同一个站点中:<a href="URL(网址)">

<a href="http://sports.sina.com.cn/nba/" target="_self" title="新浪NBA" accesskey="p">新浪NBA</a>

 

  3、E-mail链接:

    运行访问者向指定的地址发送邮件:<a href="mailto:指定的电子邮件地址">

 <a href="mailto:fengqingyuhou@gmail.com">联系我们</a>

 

  4、空链接:

    空链接就是没有目标端点的链接,格式:<a href="#">内容</a>

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage(http://www.baidu.com')">设为首页</a>
<a href="#" onclick="javascript:window.external.addfavorite('http://www.baidu.com','百度')">加入收藏</a>

 

  5.、脚本链接:

    是一种特殊的链接,当单击设置脚本链接的文本或图像时,可以运行相应的javascript语句,常用到的脚本链接:

<a href="javascript:window.open('http://www.baidu.com')">打开窗口</a>
<a href="javascript:window.close()">关闭窗口</a>

 

  6、锚点链接:

    跳转到同一网页或者其他文档中指定位置

      先创建锚点:<a name="锚点名称">内容</a>
      链接锚点:<a href="#锚点名称">内容</a>
      注:当想通过链接跳转到另外一个网页中的某一个部分点,先通过外部链接链接到另外一个网页,再通过锚点链接链接到这个网页中某一部分点格式:<a href=index.html#常见实体>

<body>
<h1><font color="#0000FF">超文本标记语言</font></h1>
    html即超文本标记语言。<br/>
    <p>超文本标记语言,标准通用标记语言下的一个应用。</p>
    
    <p>"超文本"就是指页面内可以包含图片、链接,甚至音乐、程序(head)提供关于网页的信息,主体(body)部分提供网页的具体内等非文字元素。超文头容。 </p>
    
    <font color="#0033FF" size="6"><strong>目录</strong></font>
    <table width="500">
        <tr>
            <td><font color="#003399">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本介绍</font></td>
            <td><font color="#003399">语言特点</font></td>
            <td><font color="#003399">书写方式</font></td>
        </tr>
        <tr>
            <td><font color="#003399">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;整体结构</font></td>
            <td><font color="#003399">发展历史</font></td>
            <td><font color="#003399">相关要求</font></td>
        </tr>
        <tr>
            <td><font color="#003399">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#常见实体">常见实体</a></font></td>
            <td><font color="#003399">其他版本</font></td>
            <td><font color="#003399">关联项目</font></td>
        </tr>
    </table>
     <p>
    <h2>基本介绍</h2>
    在万维网上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言。网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓"超级链接"点。超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果.
    </p>
    
    <p>
    <h2>语言特点</h2>
    超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:
    1、 简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
、平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
    4、通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
    </p>
    
    
    <p>
<h2>书写方式</h2>
        它其实是文本,它需要浏览器的解释,它的编辑器大体可以分为三种,<br />
    1.基本文本、文档编辑软件,使用微软自带的记事本或写字板都可以编写,当然,如果你用WPS来编写,也可以。不过存盘时请使用.htm或.html作为扩展名,这样    就方便浏览器认出直    接解释执行了。
    2.半所见即所得软件,如FCK-Editer,E-webediter等在线网页编辑器。
    3.所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如AMAYA(单位:万维网联盟)、FRONTPAGE(单位:微软)、Dreamweaver(单位:Adobe)。与半所见即所得的软件相比,开发速度更快,效率更高,且直观的表现更强。任何地方进行修改只需在网页中除了可显示常见的美国信息交换标准代码(外语缩写:ASCII)字符和汉字外,HTML还有许多特殊字符,它们一起构成了HTML字符集。有2种情况需要使用特殊字符,一是网页中有其特殊意义的字符,二是键盘上没有的字符。

字符集
HTML字符可以用一些代码来表示,代码可以有2种表示方式。即字符代码(命名实体)和数字代码(编号实体)。字符代码以"&"符开始,以分号";"结束,其间是字符名,如&reg;。数字代码也以"&#"符开始,以分号";"结束,其间是编号,如&#34;。要刷新即可显示。
    </p>
    
    <p>
<h2>整体结构</h2>
        一个网页对应一个HTML文件,超文本标记语言文件以.htm(磁盘操作系统DOS限制的外语缩写)为扩展名或.html(外语缩写)为扩展名。可以使用任何能够生    <br />
        成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。
        标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部    
        与实体两大部分。有三个双标记符用于页面整体结构的确认。
        标记符,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头;而,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。
    </p>
    
    <p>
<h2>发展历史</h2>
        标记语言

        超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准):
        HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
        HTML 3.2——1997年1月14日,W3C推荐标准
        
        html 5
        HTML 4.0——1997年12月18日,W3C推荐标准
        HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
        HTML 5的第一份正式草案已于2008年1月22日公布,仍继续完善
        ISO/IEC 15445:2000("ISO HTML")——2000年5月15日发布,基于严格的HTML 4.01语法,是国际标准化组织和国际电工委员会的标准。
        Wijmo是基于HTML5、jQuery、CSS3和SVG的一个控件包,能够满足构建当今Web系统的需求。基于Wijmo,您的系统运行将更加快速和流畅,外观也会更加引人入胜。Wijmo中所有新的控件都是在符合最新的UI设计潮流的基础上,对新的以及改良后的主题进行封装。优美的、专业的控件外观会让您的应用程序引人注目。比如 ComponentOne Studio for ASP .NET Wijmo 控件包内置的6个主题,同时可以使用jQuery UI项目提供的 30 多个主题,甚至可以使用 ThemeRoller 创建属于您自己的系统主题。
        HTML没有1.0版本是因为当时有很多不同的版本。有些人认为蒂姆·伯纳斯-李的版本应该算初版,这个版本没有IMG元素。当时被称为HTML+的后续版的开发工作于1993年开始,最初是被设计成为"HTML的一个超集"。第一个正式规范为了和当时的各种HTML标准区分开来,使用了2.0作为其版本号。HTML+的发展继续下去,但是它从未成为标准。
        HTML3.0规范是由当时刚成立的W3C于1995年3月提出,提供了很多新的特性,例如表格、文字绕排和复杂数学元素的显示。虽然它是被设计用来兼容2.0版本的,但是实现这个标准的工作在当时过于复杂,在草案于1995年9月过期时,标准开发也因为缺乏浏览器支持而中止了。3.1版从未被正式提出,而下一个被提出的版本是开发代号为Wilbur的HTML 3.2,去掉了大部分3.0中的新特性,但是加入了很多特定浏览器,例如Netscape和Mosaic的元素和属性。HTML对数学公式的支持最后成为另外一个标准MathML。
        HTML 4.0同样也加入了很多特定浏览器的元素和属性,但是同时也开始"清理"这个标准,把一些元素和属性标记为过时,建议不再使用它们。HTML的未来和CSS结合会更好。
        HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。
        标记语言
        
        XHTML1.0——发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。
        XHTML 1.1,于2001年5月31日发布,W3C推荐标准。
        XHTML 2.0,W3C工作草案。
        XHTML 5,从XHTML 1.x的更新版,基于HTML 5草案。
        XHTML 4.01 是常见的版本。
    </p>
    
    
    <p>
<h2>相关要求</h2>
        在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。
⑴ 文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于操作系统或程序辨认,除自定义的汉字扩展名。在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
⑵ 超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)"&nbsp(注意此字母必须小写,方可空格)"表示非换行空格;表示文件路径时使用符号"/"分隔,文件名及路径描述可用双引号也可不用引号括起。
⑶ 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号"&nbsp(注意此字母必须小写,方可空格)";许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
⑷ 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
⑵ 超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)"&nbsp(注意此字母必须小写,方可空格)"表示非换行空格;表示文件路径时使用符号"/"分隔,文件名及路径描述可用双引号也可不用引号括起。
⑶ 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号"&nbsp(注意此字母必须小写,方可空格)";许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
⑷ 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
⑵ 超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)"&nbsp(注意此字母必须小写,方可空格)"表示非换行空格;表示文件路径时使用符号"/"分隔,文件名及路径描述可用双引号也可不用引号括起。
⑶ 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号"&nbsp(注意此字母必须小写,方可空格)";许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
⑷ 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符而不能使用全角字符。
⑸HTML注释由""结束结束,例如。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。
    </p>
    
    <p>
<h2><a name="常见实体">常见实体 </a></h2>
        ⑴ 文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于操作系统或程序辨认,除自定义的汉字扩展名。在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
⑵ 超文本标记语言源程序为文本文件,其列宽可不受时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
⑵ 超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)"&nbsp(注意此字母必须小写,方可空格)"表示非换行空格;表示文件路径时使用符号"/"分隔,文件名及路径描述可用双引号也可不用引号括起。
⑶ 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号"&nbsp(注意此字母必须小写,方可空格)";许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
⑷ 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
⑵ 超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)"&nbsp(注意此字母必须小写,方可空格)"表示非换行空格;表示文件路径时使用符号"/"分隔,文件名及路径描述可用双引号也可不用引号括起。
⑶ 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号"&nbsp(注意此字母必须小写,方可空格)";许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
⑷ 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
⑵ 超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)"&nbsp(注意此字母必须小写,方可空格)"表示非换行空格;表示文件路径时使用符号"/"分隔,文件名及路径描述可用双引号也可不用引号括起。
⑶ 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号"&nbsp(注意此字母必须小写,方可空格)";许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
⑷ 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)"&nbsp(注意此字母必须小写,方可空格)"表示非换行空格;表示文件路径时使用符号"/"分隔,文件名及路径描述可用双引号也可不用引号括起。
⑶ 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号"&nbsp(注意此字母必须小写,方可空格)";许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
⑷ 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。
⑸HTML注释由"结束结束,例如。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。
    </p>
</body>

  锚点链接的另一种写法:

</head>
<body>
    <a href="#p1">p1</a>
    <a href="#p2">p2</a>
    <a href="#p3">p3</a>
    <a href="#p4">p4</a>
    
    
    <p id="p1">1.............................</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <p id="p2">2.............................</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <p id="p3">3.............................</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <p id="p4">4.............................</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>

 

  7、图片链接:将图片作为超链接

<a href="#"><img src="../image/chrome.png"/></a>

 

  8、文件下载链接

     当a标签的href值不在是一个链接,或者锚点等,而是一个文件或者压缩包的时候是下载

<a href="123.ppt">下载</a>

 

转载于:https://www.cnblogs.com/LO-ME/p/3548291.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值