首页 > 编程技术 > html

HTML网页超链接标记学习教程

发布时间:2016-9-20 19:06

HTML网页超链接标记学习教程

链接标记的属性

 

链接是网页页面中最重要的元素之一,是一个网站的灵魂。一个网站是由多个页面组成的,页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址,在英文中被称作url(Uniform Resource Locator:通用资源标示符)。在地址栏输入然后回车,会打开网页教学网网站的主页面。可以看到,页面中有多个栏目,多条新闻等,最上方不同的栏目就是文字链接。

链接标记虽然在网站设计制作中占有不可替代的地位,但是其标记只有一个,那就是<a>标记。本站介绍的链接应用都是基于<a>标记基础上的。

链接标记的属性见下表


属性 描述
href 指定链接地址
name 给链接命名
title 给链接提示文字
target 指定链接的目标窗口
accesskey 链接热键

 

关于路径

 

每一个文件都有自己的存放位置和路径,理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。url—统一资源定位器,指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址之下,但是当创建网页时,不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此链接可以分为以下3种:


绝对路径
如http://111cn.net

相对路径
如news/default.htm

 

根路径
如/website/news/default.htm


在了解这三种地址形式前先要理解另外两个概念:内部链接和外部链接

 

内部和外部都是相对于站点文件夹而言,如果链接指向的是站点文件夹之内的文件,就是内部链接。如果链接指向站点文件夹之外的,就被称做外部链接。在添加外部链接的时候,将用到下面所讲的绝对地址;而添加内部链接的时候,将用到下面所讲的根目录相对地址和文件相对地址。

下面分别介绍这3种链接:


绝对路径
绝对路径为文件提供完全的路径,包括适应的协议,如http,Ftp,rtsp等。一般常见的有:

http://www.sohu.com


ftp://202.136.254.1

 

当链接到其它网站中的文件时,必须使用绝对链接。

相对路径
相对链接最适合网站的内部链接。只要是同一网站之下的,即使不在同一个目录下,相对链接也非常合适。文件相对地址是书写内部链接的理想形式。只要是处于站点文件夹之内,相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系,不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是:站点文件夹所在的服务器地址发生改变时,文件夹的所有内部链接(如果采用此种地址形式)都不会出问题。

相对链接的使用方法为:

如果链接到同一目录下,则只需输入要链接文档的名称。
要链接到下一级目录中的文件,只需先输入目录名,然后加" / "再输入文件名。
如链接到上一级目录中的文件,则先输入"…/ ",再输入目录名、文件名。
根路径
根目录相对地址同样适应于创建内部链接,但大多数情况下,不建议使用此种地址形式。它在下列情况下使用:

当站点的规模非常大,防置于几个服务器上时
当一个服务器上同时放置几个站点时
根目录相对地址的书写形式也很简单,首先以一个斜杠开头,代表根目录,然后书写文件夹名,最后书写文件名。根路径以" / "开始,然后是根目录下的目录名。

 

HTML网页列表标记学习教程.
在html页面中,列表可以起到提纲写领的作用。列表分为两种类型,一是有序列表,一是无序列表。前者用项目符号来标记无序的项目,而后者则使用编号来记录项目的顺序。

所谓有序,指的是按照数字或字母等顺序排列列表项目。
所谓无序,是指以●、○、□等开头的,没有顺序的列表项目。
关于列表的主要标记,如下表所示

 

标记 描述
<ul> 无序列表
<ol> 有序列表
<dir> 目录列表
<dl> 定义列表
<menu> 菜单列表
<dt>、<dd> 定义列表的标记
<li> 列表项目的标记


有序列表标记<OL>
有序列表使用编号,而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头,通常各项目间有先后的顺序性。在有序列表中,主要使用<ol>和<li>两个标记以及type和两个start属性。

基本语法
<ol>
   <li>项目一
   <li>项目二
   <li>项目三
      ……
</ol>
语法解释
在有序列表中,使用<ol>作为有序的声明,使用<li>作为每一个项目的起始。


文件范例:7-1.htm
通过<ol>和<li>标记建立有序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:7-1.htm -->
03 <!-- 文件说明:建立有序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立有序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 </body>
18 </html>

 

 

1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如:

以下为引用的内容:

 

<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">请填入你的姓名</textarea>

 


类似的,可以加入代码到<input>。

2、表单输入单元点击删除:本列同上则作用类似,只是使用鼠标上略有变化,需要点击而不像上则的只要鼠标覆盖。如:

以下为引用的内容:

<input type=text name="address" size=19 value="请填入你的邮箱"onFocus="this.value=''">
 


点击输入单元后,提示信息会删除,是不是很方便。

 

3、表单输入单元的边框设置:更改传统的表单单元边框,会让你的主页生色不少。如:

 

以下为引用的内容:

<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">
 

 


其中"style=***"为左右上下和背景色设置,适用于其它单元。


4、表单输入单元的文字设置:表单中单元的字体是可以修改的,如:


以下为引用的内容:

<input type=text name="address" size=19 value="请填入你的姓名" style=font-family:"verdana";font-size:10px >
 

 

其中"style=***"为字体和字大小设置。

5、修改表单属性为弹出窗口:大多数表单激活后,会在当前页面中打开,影响正常浏览。不如修改一下,如:

以下为引用的内容:
<form method=POST action=url target=_blank>

 

其中"target=_blank"为控制在弹出窗口打开。

 

标签:[!--infotagslink--]

您可能感兴趣的文章: