下载文档原格式
⽤HTML建⽴超链接（a）HTML⽂件最重要的特征之⼀就是超链接，通过⽹页上所提供的连接功能，⽤户可以链接到⽹络上的其他⽹页。
4.1 设置基本⽂字超链接建⽴超链接所使⽤的HTML标记为<a></a>标记。
超链接最重要的有两个要素，设置为超链接的⽂本内容和超链接指向的⽬标地址。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超链接</title></head>点击<a href="4.1.2.html"这⾥</a>连接到⼀个图⽚⽹页</body></html>注：在<a>和</a>标记之间的内容就是在⽹页中被设定为超链接的内容。
hef属性是必要属性，⽤来放置超链接的⽬标地址，可以是本⽹站内部的某个HTML⽂件，也可以是外部⽹站某个⽹页的URL地址4.1.1 URL的格式每个⽂档在互联⽹上有唯⼀的地址，该地址的全称为统⼀资源定位器(Uniform Resource Laocator），简称URL。
URL由4个部分构成，即“协议”，“主机名”，“⽂件夹名”，“⽂件名”。
http:（协议）//（主机名）/study（⽂件夹名）/index.htm（⽂件名）注：RL可分为两种：相对⽂档的URL，这种URL以链接的原⽂档为起点；相对服务器的URL，这种URL以服务器的根⽬录为起点。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超链接</title></head><body>点击<a href="https:///EditPosts.aspx?opt=">链接01</a>链接到第⼀个⽹页<br>点击<a href="3.4.html">链接02</a>链接到第2个⽹页</body></html>其中第1个使⽤的是绝对URL；第2个⽤的是服务器相对URL。
word应用技巧：好用的超链接功能超链接，常见于网页制作中，是将两个网页之间建立链接关系，即当点击一个A对象的时，自动跳转到另一个B对象的位置，从而快速查阅网页内容。
但是，超链接不仅仅用于网页，在Word中同样也是可以实现的。
Word中链接对象可以是文本，网页，图片、图形，文本框或电子邮件地址等。
在Word中，常用超链接方法有两种：一是文档内部的超链接，二是，文档外部的超链接。
下面分别进行介绍。
一、文档内部的超链接文档内部的超链接最常见于文档目录。
将目录与内容进行链接，用户就能很方便地跳转到文档中的相应位置处，快速查看内容。
下面以链接文档目录“第六节，硝基漆”及其文档中对应内容为例，方法如下：1、选中需要链接的对象，点击“插入—链接—书签”。
2、打开“书签”对话杠，输入“硝基漆“文字后，点击”添加“按钮，作为Word文档的标签。
3、返回工作界面，定位到文档目录，选择“第六节，硝基漆”文本，点击”插入—超链接“。
4、在打开的对话框中选择“本文档中的位置”，选中书签中的“硝基漆”标签，点击“确定”按钮。
5、完成超链接设置，文本呈蓝色显示，可以按住Ctrl键，点击目录链接文本，即跳转至对应位置。
二、文档外部的超链接许多时候，当我们在网页中复制文本到Word时，会同时将网页的超级链接复制过来，这个链接即可称为文档外部超链接。
那么，我们自己在编辑文档时，想将文本或图片等元素设置外部超链接，应该如何操作？下面以链接“部落窝教育”官网为例，方法如下：1、在文档中选择“部落窝教育”文本，单击鼠标右键，在弹出的快捷菜单中选择【超链接】。
2、打开“插入超链接”对话框，在“现有文件或网页”栏的“地址”文本框中输入官网网页链接地址，点击“确定”按钮。
3、完成设置后，文本变成了带下划线的蓝色，按住Ctrl键单击文本，即可打开官网网页。
提示：Word中可选择链接的目标有多种，包括文档当前位置（文档内部之间的链接）、链接地址（网址、邮箱链接等）以及文档外的文件、程序链接。
第6章超链接a标签的使用超链接也叫URL，中文翻译为资源定址器，这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。
应该是一个站长必须接触的标签，主要包含内容：1、超链接的基本格式；2、超链接的种类；3、相对链接和绝对链接；4、书签的链接；5、基准参考点；6、超链接事；7、为链接创建键盘快捷键；8、为链接设置制表符次序等。
一、超链接的基本格式格式:…scheme 指的是http，ftp，file，mailto，news，gopher，telnet七种；host 指的是IP 地址或计算机名称；post 指的是服务器端口；path 指的是文件路径；filename 指的是文件名；二、超链接的种类一般常用的分为四种:1、http声明2、file声明e/images/pic.jpg>图片3、ftp声明进入4. mailto>E-MAIL三、相对链接和绝对链接相对链接：index.htm../index.htm../page/index.htm绝对地址：/index.htm//page/index.htm四、书签的链接下的属性属性名称属性值说明name 字符串设置超链接的标记基本格式：瞄点…目前厦门小鱼网的首页就有是有此书签链接，大家可以去体验看看。
五、基准参考点基本格式：主要用户相对链接或图片等相当链接地址，可以给于根目录，然后通过此来判断其他的相对路径。
六、超链接事件LINK 颜色的设置基本格式：link 超链接尚被选中的文字alink 超链接点选但未被放开的颜色vlink 超链接已被点选过的颜色七、在何处打开目标 URL基本格式：name链接的 target 属性为 '_blank'，该链接会在新窗口中打开。
target的值有：_blank；_parent；_self；_top framename。
超链接是网页中最重要的元素之一，一个网站的各个网页就是通过超链接关联起来的，用户通过点击超链接可以从一个网页跳转到另一个网页。
常用的超链接形式有：(1)文字超链接：在文字上建立超链接；(2)图像超链接：在图像上建立超链接；(3)热区超链接：在图像的指定区域上建立超链接。
本部分介绍文字超链接和图像超链接。
超链接的定义文字超链接和图像超链接都是使用 <a> 标签定义的，它的一般格式是：<a 属性="值">文字或图像</a>当把文字或图像定义为超链接后，鼠标移动到上面时会变为“手”形，点击后可跳转到指定网页。
以下是<a> 标签的主要属性。
href 属性：这个属性用于定义超链接的目标地址，它的取值可以是本地的地址，也可以是一个远程地址。
<a href="h01.htm">上一页</a>本例在文字“上一页”上定义了一个超链接，当单击此文字时，打开当前文件夹中一个名为“h01.htm”的网页文件。
<a href="/">包头师范学院</a>本例的目标是一个URL，单击此超链接将打开指定的网站。
target 属性：这个属性用于指定目标文件的打开位置。
它的取值有：_self：在当前窗口打开目标文件，这是默认值。
_blank：新开窗口打开目标文件。
_top：在顶层框架打开网页。
_parent：在当前框架的上一层框架打开网页。
窗口名：在指定的框架窗口打开网页。
其中 _top、_parent、窗口名主要用于框架型网页。
例如：<a href="h01.htm" target="_blank"><img src="./image/g.jpg" /></a>本例定义了一个图像超链接，当单击这个图像时，会打开一个新窗口显示网页“h01.htm”。
超级链接a标记代表一个链接点，是英文anchor（锚点）的简写。
它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像，这已是众所周知了，但关于它的语法结构可能有点鲜为人知，而要用活它则必须了解其语法结构. 超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。
它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像，这已是众所周知了，但关于它的语法结构可能有点鲜为人知，而要用活它则必须了解其语法结构。
<a>标记的基本语法结构是：<aclass=typeid＝valuehref＝referencename＝valuerel=same|next|parent|previousrev＝valuetarget＝windowstyle＝valuetitle=titleonclick＝functiononmouseout＝functiononMouseOver=function> </a>从标记的语法结构可以看出，在设定一个超级链接时有很多参数可供选择，以实现不同的链接效果，这有点出乎意料吧？！其中class和id选项：用于设定链接点所属的类型和分配的ID号，通常不加以设定。
最常用的两个参数是href和name。
其中href是hypertext reference的缩略词，用于设定链接地址。
链接地址必须为url地址，如果没有给出具体路径，则默认路径和当前页的路径相同。
链接到的文件也分为几种情况：如果为HTML文件，则在当前浏览器中直接打开；如果为可执行文件（.exe文件），则直接执行或下载，我们提供下载的文件就是用它的这种特性做的；如果为文本文件如word格式的文件，则在浏览器中打开此文件，并可以进行编辑加工。
rel：表示设定链接的关系：rel=same表示待链接的文件与此文件相同，rel=next表示待链接的文件为下一页，rel＝parent表示本文件为待链接文件的父文件，rel=previous则表示待链接的文件为上一页。
A标签的href设置为#代表什么意思？
空锚点
<a href="#abc">a link <#>
表⽰跳到锚点abc，
<a href="#">a link <#>
表⽰空锚点，不做跳转刷新的超链接。
a href="#" 时表⽰⼀个空链接，点击时链接停留在当前页⾯，相当于刷新当前页⾯，有时使⽤该⽅法实现刷新本页⾯功能。
表⽰⼀个空链接
返回当前页⾯
如果你没有设置特别的链接效果，那么点击效果和默认的点击链接效果⼀样
⼀般⽤于返回当前页的某⼀点
⽐如说你看很长的⼀个⼩说，分成很多章节你点击某⼀⽬录就到了当前页的该⽬录的内容那
#后⾯可以跟任意标签的id，或者任意a标签的id或者name,点击链接就可以跳转到当前页⾯的这个节点的位置
<div id="abc"></div>
<a name="bcd"></a>
<a href="#abc"></a> /*跳转到div id="abc"></*/
<a href="#bcd"></a> /*跳转到a name="bcd"></*/
<a href="#"></a> /*跳转到当前页⾯的顶部*/。
超链接A的样式<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>链接样式测试</title><style type="text/css"><!--/* 全局 */body{ line-height:1.5; font-size:14px;}a{ color:#2c850d; text-decoration:none;}a:link{ color:#2c850d; text-decoration:none;}a:visited{ color:#2c850d; text-decoration:none;}a:hover{ color:#ff2020; text-decoration:underline;}a:actived{ color:#2c850d; text-decoration:none;}/* 第⼀种 */.f_red a{ color:#cc0000; text-decoration:none;}.f_red a:link{ color:#cc0000; text-decoration:none;}.f_red a:visited{ color:#cc0000; text-decoration:none;}.f_red a:hover{ color:#ff2020; text-decoration:underline;}.f_red a:actived{ color:#cc0000; text-decoration:none;}.f_black a{color:#000000; text-decoration:none;}.f_black a:link{color:#000000; text-decoration:none;}.f_black a:visited{color:#000000; text-decoration:none;}.f_black a:hover{color:#999999; text-decoration:underline;}.f_black a:actived{color:#000000; text-decoration:none;}/* 第⼆种 */a.f_orange{ color:#FF9A00; text-decoration:none;}a.f_orange:link{ color:#FF9A00; text-decoration:none;}a.f_orange:visited{ color:#FF9A00; text-decoration:none;}a.f_orange:hover{ color:#cc0000; text-decoration:underline;}a.f_orange:actived{ color:#FF9A00; text-decoration:none;}a.f_green{color:#2c850d; text-decoration:none;}a.f_green:link{color:#2c850d; text-decoration:none;}a.f_green:visited{color:#2c850d; text-decoration:none;}a.f_green:hover{color:#999999; text-decoration:underline;}a.f_green:actived{color:#2c850d; text-decoration:none;}/* 第三种 */.f_blue:link{ color:#0000ff; text-decoration:none;}.f_blue:visited{ color:#0000ff; text-decoration:none;}.f_blue:hover{ color:#ff2020; text-decoration:underline;}.f_blue:actived{ color:#0000ff; text-decoration:none;}.f_black3:link{color:#000000; text-decoration:none;}.f_black3:visited{color:#000000; text-decoration:none;}.f_black3:hover{color:#999999; text-decoration:underline;}.f_black3:actived{color:#000000; text-decoration:none;}/* 第四种 */.a f_gray:link{ color:#666666; text-decoration:none;}.a f_gray:visited{ color:#66666; text-decoration:none;}.a f_gray:hover{ color:#cc0000; text-decoration:underline;}.a f_gray:actived{ color:#66666;text-decoration:none;}--></style></head><body>1.<a href="#">链接样式1</a><br /><br />2.<a href="#" class="f_blue">链接样式2</a><br /><br />3.<a href="#" class="f_black3 f_blue">链接样式3</a><br />3.<a href="#" class="f_blue f_black3">链接样式3_2</a><br /><br />4.<span class="f_red"><a href="#" class="f_black3 f_blue">链接样式4</a></span><br /><br />5.<span class="f_black"><span class="f_red"><a href="#" class="f_black3 f_blue">链接样式5</a></span></span><br />5.<span class="f_red"><span class="f_black"><a href="#" class="f_black3 f_blue">链接样式5_2</a></span></span><br /><br />6.<span class="f_red"><span class="f_black"><a href="#" class="f_orange f_blue">链接样式6</a></span></span><br />6.<span class="f_red"><span class="f_black"><a href="#" class="f_orange f_green">链接样式6_2</a></span></span><br /> 6.<span class="f_red"><span class="f_black"><a href="#" class="f_green f_orange">链接样式6_3</a></span></span><br /></body></html>。
a页面跳转到b页面的不同方法一、超链接方式在网页设计中，最常见的跳转方式就是使用超链接。
通过在a页面中添加一个超链接，可以实现从a页面跳转到b页面的功能。
超链接可以是文本、图片或按钮等形式，用户点击超链接后即可跳转到指定页面。
这种方式简单易用，广泛应用于网页设计中。
二、表单提交方式除了超链接方式，还可以通过表单提交来实现页面跳转。
在a页面中设置一个表单，用户在表单中输入相关信息后点击提交按钮，服务器端接收到表单数据后可以根据用户输入的内容跳转到b页面。
这种方式适用于需要用户输入信息，并根据输入的内容进行页面跳转的场景。
三、JavaScript方式JavaScript是一种常用的网页脚本语言，可以通过编写JavaScript 代码来实现页面跳转。
在a页面中添加一个JavaScript函数，当用户执行某个操作时，调用该函数即可实现页面跳转。
例如，用户点击按钮后执行JavaScript函数，函数中包含页面跳转的代码，即可实现从a页面跳转到b页面。
这种方式灵活性较高，可以根据具体需求进行定制化的页面跳转。
四、框架方式在网页设计中，还可以使用框架来实现页面跳转。
框架是将网页分割成多个独立的区域，每个区域显示不同的内容。
通过在a页面中设置一个框架，并将b页面加载到该框架中，即可实现从a页面跳转到b页面。
这种方式适用于需要在同一个页面中显示多个不同内容的场景。
五、重定向方式重定向是一种在服务器端进行页面跳转的方式。
当用户访问a页面时，服务器端会将请求重定向到b页面，从而实现页面跳转。
重定向方式可以通过服务器端的配置文件进行设置，也可以通过编写服务器端脚本来实现。
这种方式适用于需要在服务器端进行页面跳转的场景。
六、AJAX方式AJAX是一种异步的网页交互技术，可以在不刷新整个页面的情况下更新部分页面内容。
通过使用AJAX技术，可以实现从a页面跳转到b页面的效果，同时还可以实现数据的异步加载和更新。
这种方式适用于需要在页面之间进行数据交互的场景。
表现形式
用户或设计师遇到的麻烦：
1.用户分不清是否是链接，得鼠标移到目标上如果变成手形才能确定是链接。
2.统一链接颜色不利于界面设计。
分析：
以baidu/google为代表的蓝色加下划线是为最经典的链接样式，很直接的体现了可点/已点过。
但是不同的网站各有风格，不可能都做成那样的链接样式，会对设计产生很大的限制。
我把链接分为推荐点击(文章标题等)、提示可点击（作者名、“更多”、段落内的链接等）、功能性链接（导航、按钮等）。
解决办法：
推荐点击性链接，设置一个默认链接颜色，让人一看到这种颜色的字体就知道是个链接是可以点击的，比如蓝色。
保证这个颜色比普通文字颜色要深一些，这样容易分辨。
提示可点击性链接，这种链接颜色往往要设计成跟周围文字一样，所以加下划线是最好的办法。
功能性链接，比如导航链接和按钮这种是一看就知道可点的，并不需要以颜色和下划线来区分，可以自定义设计。
打开方式
用户遇到的麻烦：
1.弹出窗口太多，整个屏幕被占满，甚至会把电脑都卡住了。
2.全是本页面跳转，想看上一页面的其它内容要后退。
分析：
大部分传统型的网站喜欢弹出式链接，以占领用户的屏幕为目的- -|，而2.0的网站喜欢本页面跳转，认为弹出是非常不友好的。
用户为什么要到上一页面去点另外的链接？因为当前页面没有上一页面的链接或上一页面存在同级可筛选的内容比如文章列表。
最理想的打开方式对于用户来说应该是合理的本页跳转或打开新选项卡。
解决办法：
列表式的链接，比如一组新闻标题，类似这种链接用弹出式打开窗口。
功能性链接，比如导航、类别、分页、“更多”等类似链接以本页面跳转打开窗口。
外链，比如友情链接段落内文字链，用弹出式打开窗口。
用户自行选择打开，右键“在新选项卡中打开”或设置浏览器“始终在新选项卡中打开弹出窗口”。
