赵工的个人空间


网络课堂部分转网页计算部分转编程演练

 网页结构轻松学

首页 > 网络课堂 > 网页结构轻松学 > HTML的超链接标记
HTML的超链接标记
链接是网页中最有特色的方面。很多文本编辑软件,如word等都可以设定文本的字体及大小,还有颜色、粗体、斜体等样式,但在网页出现以前,并不能通过链接来实现页面之间的跳转, 所以超链接是网页独有的特性,后来其他软件才逐渐加入类似功能,但通过点击来打开另外一个页面仍然没有实现。

超链接标记使用<a></a>,两个标记之间是页面中需要点击的内容。示例:我的网站
链接标记的常用格式为:<a href="链接网址" target="_blank/_self/_parent/_top/framename">链接指示</a>
其中,“链接指示”是在页面中这个链接显示的内容;而href属性值"链接网址"是点击这个链接需要打开的页面,一般是输入一个对应的网址。
比如,示例中显示的是“我的网站”,而href的属性值为"http://www.dwenzhao.cn/",是点击“我的网站”时要打开的页面。也可以在页面中使用“百度搜索”,而在href中用"http://www.baidu.com",如此等等。
注意,href中如果使用外链网址,需要使用"http://"前缀,而使用本网站的内部网页,可以使用相对地址。比如打开上一课的页面"marktext.html",可以使用:
<a href="marktext.html" target="_blank">上一课</a> 上一课
因为上一课的页面"marktext.html"与本页面放置在同一个目录中,可以直接使用其页面文件名来访问,而如果放置在不同的目录中,就需要使用"../"来指定父目录,一级级上溯,或者直接使用网站根目录"/"。示例:
<a href="../htmluse/gb18030.html" target="_blank">HTML汉字编码标准</a> HTML汉字编码标准
<a href="/lesson/htmluse/gb18030.html" target="_blank">HTML汉字编码标准</a> HTML汉字编码标准

target属性的值表示在何处打开链接,常用的是_blank和_self,_blank表示在一个新窗口或新标签页中打开链接,而_self表示在当前窗口中打开链接。示例:
在新窗口中打开网站
在本窗口中打开网站
可以试着打开上述两个链接,感受差别。而_parent属性值表示父窗口中打开链接,_top表示在整个窗口中打开链接,framename表示在指定的框架中打开页面,但使用的比较少,就不细致说明了。
注意,href属性值经常使用的是一个网页的网址,但未必一定是一个html文件,也可以是其他类型文件,如txt、json、js等等。

还有一种<a></a>的使用方法是作为本网页的锚来实现网页内的跳转,其实a就是anchor的缩写,这是锚的意思。一个网页可以做得很长,如果逐一寻找其中的部分内容就比较麻烦, 这时使用在一些地方设置锚的方法就能迅速找到对应位置。
使用时在页面的一些位置使用<a name="location">页面中的位置</a>进行设定,而在需要点击的地方放置<a href="#location">跳转到设定位置</a>。 注意,不同位置使用的location名字必须唯一,而在href的属性值中要在前面加上"#",如果只有"#"则表示是页首。
转到页首 转到头部 转到尾部
要说明的是,上面的方法是早期的使用方法,新版本中修改了在页面的固定位置加入锚的方法,不再必须使用a标记的name属性来设定,而是可以使用任意标记的id属性来设置,比如可以使用span、p、div、h1~h6等标记的id属性。示例:
<span id="location">页面中的位置</span>
而点击跳转的方法没有改变,仍然使用<a href="#location">跳转到设定位置</a>,不过其中的href属性值对应的是设定位置的id值。很多较长的网页, 会在前面列出整个网页的索引,并在其中加入<a href="#chapterx">第X章</a>而在网页中对应章节头部加上<p id="chapterx">页面中的位置</p>。这样点击第X章, 就可以直接跳转到对应的章节,非常有效,虽然设定时比较麻烦,但是用户体验非常友好的设计方法。
HTML的<a></a>标记还有其他一些属性,但都不常用,可以不去花时间在这些方面。详见W3school

链接是一种非常重要的网页元素,为了比较醒目,浏览器设定了显示的默认样式:
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
这是浏览器的默认样式,而用户为了整体页面的风格,一般会使用CSS重新设定样式,一般会把已访问链接设定的颜色更浅或与未访问链接的颜色设置的接近,而活动链接很少使用。 比如我的网站中,未被访问的链接并没有设置下划线,而只是在鼠标移动到其上时才显示下划线,这也是通过CSS来设定的,具体方法见CSS相关内容。

设置网页链接,还有一种是在图片上划分区域来设置,见下面一课。
Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659