Html语言——超级链接

网页设计教程2019/9/29SchoolofAppliedTechnologySoochowUniversity2超级链接超级链接标记URLlink标记设置超级链接的颜色a标记的target属性设置窗口2019/9/29SchoolofAppliedTechnologySoochowUniversity32.4.1设置超级链接1锚点标记a…／a锚点(anchor)标记由a定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源(目标资源)，这个目标资源有唯一的地址(URL)。以上特点的词、句或图片就称为热点。2019/9/29SchoolofAppliedTechnologySoochowUniversity4标记的格式为：ahref=”地址”或name=”字符串”热点/a属性href为超文本引用，它的值为一个URL，是目标资源的有效地址。属性name指定当前文档内的一个字符串，作为链接时可以使用的有效的目标资源的地址。热点可以根据需要设置颜色，利用body标记中相关的属性。2019/9/29SchoolofAppliedTechnologySoochowUniversity5URL在书写URL时，注意URL中要使用US-ASCII字符集中的可显示字符，如果使用不属于此字符集的字符，则需要使用特殊的符号对该字符进行编码，以用三个字符代替要使用的字符，三个字符是：%+两个十六进制数字。最常见的是空格，使用%20替换。URL中需要对保留(reserved)字符和不安全(unsafe)字符进行编码.2019/9/29SchoolofAppliedTechnologySoochowUniversity6URL保留字那些在URL中具有特定意义的字符。如：斜线字符。不安全字符：那些在URL中没有特殊含义，但在URL所在上下文中可能具有特殊意义的字符。如双引号(“”)2019/9/29SchoolofAppliedTechnologySoochowUniversity7URL的保留字符和不安全字符字符描述用法编码;分号保留%3B/斜线保留%2F?问号保留%3F:冒号保留%3A@at符号保留%40=等号保留%3D&和符号保留%26小于号不安全%3C2019/9/29SchoolofAppliedTechnologySoochowUniversity8URL的保留字符和不安全字符字符描述用法编码大于号不安全%3E“双引号不安全%22＃井号不安全%23:冒号不安全%3A%百分号不安全%25{左大括号不安全%7B}又大括号不安全%7D|竖线不安全%7C2019/9/29SchoolofAppliedTechnologySoochowUniversity9URL的保留字符和不安全字符字符描述用法编码\反斜线号不安全%5C^加字号不安全%5E~波浪号不安全%7E[左中括号不安全%5B]右中括号不安全%5D‘反单引号不安全%60注意：一般除了字母、数字和“$,-,_,.,+,!,*,’,()外，其他所有字符都应该使用编码”2019/9/29SchoolofAppliedTechnologySoochowUniversity102建立指向其他页面的链接其格式为：ahref=”目标文件的路径／目标文件名.html”热点文本/a根据目标文件与当前文件的目录关系，有如以下4种写法。1）链接到同一目录内的网页文件链接到同—目录内的网页文件的格式为：ahref=”目标文件名.html”热点文本/a2019/9/29SchoolofAppliedTechnologySoochowUniversity112）链接到下一级目录中的网页文件链接到下一级目录中的网页文件的格式为：ahref=”子目录名/目标文件名．html”热点文本/a3）链接到上一级目录中的网页文件链接到上一级目录中的网页文件的格式为：ahref=”../目标文件名．Html”热点文本/a其中“../”表示退到上一级目录中。2019/9/29SchoolofAppliedTechnologySoochowUniversity124）链接到同级目录中的网页文件链接到同级目录中的网页文件的格式为：ahref=”..／子目录名／目标文件名．html”热点文本／a5）创建指向本页中的链接要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：ahref=”#记号名”热点文本／a即单击热点文本，将跳转到“记号名”开始的文本。书签就是用a标记对该文本做一个记号。若有多个链接的书签名，书签名在a的name属性中定义。格式为：aname=”记号名”目标文本附近的字符串／a2019/9/29SchoolofAppliedTechnologySoochowUniversity13【例2-14】链接本页中的文本htmlheadtitle链接本页中的文本/title/headbodylink=greenalink=bluevlink=blackh2align=centerb学院概况/b/h2fontsize=3color=purplecenterahref=#11专业课/a/brahref=#22实验室/a/brahref=#33资料室/a/brcenter/fontdivalign=leftaname=1/a1专业设置brbr……brbrbrbrbrbrbrbrbrbrbrbrbrbraname=2/a2实验室brbr……brbrbrbrbrbrbrbrbrbrbrbrbrbraname=3/a3资料室brbr……brbrbrbrbrbrbrbrbrbrbrbrbrbr/div/body/html2019/9/29SchoolofAppliedTechnologySoochowUniversity14如何正确使用URL相对路径方法：head…/head之间指定相对URL的标记base本地计算机的相对URL:headbasehref=home/head2019/9/29SchoolofAppliedTechnologySoochowUniversity15如何正确使用URL相对路径其他计算机的相对URL：使用完整的协议、URL、计算机名。基于web服务器：headbasehref=基于ftp服务器headbasehref=标记文档之间的关系属性：rel、revrel:表明目标文档和当前文档之间的关系。previous:上一个文档next:下一个文档up:当前文档的父文档index：指向索引文档home:最高层目录或主页bookmark:文档的特殊部分help:帮助文档rev：描述当前文档与目标文档之间的关系，不常用。例如：headtitle连接到首页/titlelinkrel=uphref=“home.htm”/head2019/9/29SchoolofAppliedTechnologySoochowUniversity17指定超级链接的颜色利用body的属性：link:表示超链接接文字当前的颜色alink:表示超链接文字激活时的颜色vlink:表示超链接文字访问后的颜色如：bodybackground=“picture/marb18.jpg”link=blackalink=bluevlink=red/body样式表方法：2019/9/29SchoolofAppliedTechnologySoochowUniversity18用锚标记a的target属性调整窗口属性值：window_name:指在window_name窗口中打开文档。例如：ahref=1.htmtarget=mainmain/a_blank:表示在一个新窗口打开文档例如：ahref=1.htmtarget=_blanknew/a2019/9/29SchoolofAppliedTechnologySoochowUniversity19用锚标记a的target属性调整窗口_parent:指在窗口的父窗口中打开超链接文档。例如：ahref=1.htmtarget=_parentparent/a_self:表示在目前窗口中打开超链接文档例如：ahref=1.htmtarget=_selfself/a2019/9/29SchoolofAppliedTechnologySoochowUniversity20用锚标记a的target属性调整窗口_top:指在当前页面的整个视窗内显示超链接文档。例如：ahref=1.htmtarget=_toptop/a2019/9/29SchoolofAppliedTechnologySoochowUniversity216.创建指向电子邮件的链接若要创建指向电子邮件的链接，在a标记的href属性中加入mailto，其格式为：ahref=”mailto：E-mail地址”热点文本/a例如：E-mail地址是[e-mail]，建立如下链接：信箱：ahref=”mailto：[e-mail]”[e-mail]/a2019/9/29SchoolofAppliedTechnologySoochowUniversity22使用链接的注意事项尽量保持连接内容的简洁不要并排放置两个紧邻的链接保持一致性试着阅读一下将所有非锚文本删除后的文档。2019/9/29SchoolofAppliedTechnologySoochowUniversity23超级链接小结a……/a标记URL的正确设置link标记设置超级链接的颜色利用target属性设置窗口特性