超链接
超链接是HTML文档的最基本特征之一。超链接的英文名是hyperlink,能让浏览者在各个独立的页面之间方便地跳转。每个网站都是由众多的网页组成,网页之间通常都是通过链接方式相互关联的。 超链接的范围很广,可以将文档中的任何文字及任意位置的图片设置为超链接。 超链接有外部链接、电子邮件链接、锚点链接、空链接、脚本链接.
超链接的基本知识
如果要很好地创建链接,就必须了解链接与被链接文档之间的路径,每个网页都有一个惟一的地址,称为统一资源定位符(URL)
当在网页中创建内部链接时,一般不会指定链接文档的完整URL,而是指定一个相对当前文档或站点根文件夹的相对路径。
绝对路径和相对路径
1.绝对路径
包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到,除非是目标文档的位置发生变化,否则链接不会失败。
好处:
与同链接的源端点无关,只要网站的地址不变,无论文档在站点中怎么移动,都可以正常实现跳转而不会发生错误。
注意:如果希望链接同站点上的其他内容,就必须使用绝对路径。
劣势:
1).这种方式的链接不利于后期的测试。
如果在站点中使用绝对地址,要想测试链接是否有效,必须在Internet服务器端对链接进行测试。
2).采用绝对路径不利于站点的移植。
2.相对路径
可以表述源端点同目标端点之间的相互位置,它同源端点的位置密切相关。如果链接中源端点和目标端点位于同一个目录下,则在链接路径中只需要指明目标端点的文档名称即可。
提示:
插入图像时,如果使用图像的绝对路径,图像在远程服务器而不在本地硬盘上,则将无法在文档窗口中查看该图像。此时,必须在浏览器中预览该文档才能看到它。对于图像尽量使用相对路径。
(一)内部链接
1.内部链接
指链接的对象是在同一个网站中的资源。
语法格式:
<a href="链接地址">
......链接的内容,可以是文字就,也可以是图像。
</a>
2.链接的目标窗口
在创建网页的过程中,默认情况下超链接在原来的浏览器窗口中打开,可以使用target属性来控制打开的目标窗口。
语法格式:
<a href="链接目标" target="目标窗口的打开方式">
target参数的取值有四种情况。分别如下:
属性值 含义
-self 在当前页面打开链接
-blank 在一个全新的空白窗口中打开链接
-top 在顶层框架中打开链接,即在根框架中打开链接
-parent 在当前框架的上一层打开链接
(二)锚点链接
锚点链接也叫书签链接,常用于那些内容庞大繁琐的网页,网站中也会经常出现文本或者是图像内容太多,造成页面太长。为了方便用户查看文档中的内容,在文档中需要进行锚点链接。
1.建立锚点
锚点(书签)就是指在给定名称的一个网页中的某一位置,在创建锚点链接前首先要建立锚点。
语法格式:
<a name="锚点名称"></a>
注意:
1).同一个网页中可以有无数个锚点,但是不能有相同名称的两个锚点。
2).锚点名称可以链接到相应的位置。这个名称可以是数字或英文,或者两者的混合,最好要区分大小写。
2.锚点建立完成之后,便可创建锚点的链接,需要用#号以及锚点的名称作为href属性值。
语法格式:
<a href="#锚点的名称">......</a>
注意:在href属性后输入页面中创建的锚点的名称,可以链接到页面中不同的位置。
3.链接到其他的页面中的锚点
锚点的链接不仅仅只可以链接到同一页面,也可以在不同页面之间链接设置。
语法格式:
<a href="链接的文件地址#锚点名称">......</a>
注意:与同一页面内的锚点链接不同的是,需要在锚点名称前增加文件所在的位置以设置一个单独的链接页面,使其链接到前面定义的锚点页面。
锚点这个问题,在网页中的导航栏这个部分应用最多。
(三)外部链接
1.链接到外部网站
网页中很常用的利用HTTP协议进行外部链接是在设置友情链接时。
语法格式:
<a href="http://......">......</a>
注意:http://表明这是关于HTTP协议的外部链接,在其后输入网站的网址即可。
2.链接到E-mail
在网页上创建E-mail链接,可以使浏览者能快速反馈自己的意见。当浏览者单击E-mail链接时,可以立即打开浏览器默认的E-mail处理程序,收件人的邮件地址由E-mail超链接中指定的地址自动更新,无需浏览者输入。
语法格式:
<a href="mailto:邮件地址">......</a>
mailto:后面输入电子邮件的地址。
3.链接到FTP
FTP是指文件传输协议,一个FTP站点通常包含一些容易上传和下载文件的文件目录。大部分的FTP网站需要一个用户名和密码来进入网站。
语法格式:
<a href="ftp://ftp地址">......</a>
注意:ftp:// ——————这是关于FTP协议的外部链接,在其后输入网站的网址即可。
在FTP网站的链接内如果包含用户名和密码,这些信息对任何浏览源代码的人都是公开的。
4.链接到Telnet
Telnet常常用来登陆一些BBS网站,也是一种远程登陆方式。
语法格式:
<a href="Telnet://地址">......</a>
注意:这种方式登陆的只是telnet站点。
5.下载文件
相信很多人都下载过文件,这些在网站中提供下载资料,就需要为文件提供下载链接,在某些网站中只需要单击一个链接即可自动下载文件。
语法格式:
<a href="文件地址>......</a>
注意:
1.在文件所在地址部分设置文件的路径,可以是相对地址,也可以是绝对地址。
2.如果超链接指向的不是一个网页文件,而是其他文件例如zip、mp3、exe文件等,单击链接的时候就会下载文件。
关于相对地址和绝对地址,就不在这里再此解释概念。
类似多媒体的问题
在网页中,除了能插入文字和图像之外,也可以插入动画、声音、视频等这些媒体内容。
(一)设置滚动效果
滚动效果一般用于滚动公告栏火新闻动态等方面。
1.滚动标记marquee
marquee不仅仅可以移动文字,也可以是图片的滚动或者是表格的移动等等。
语法格式:
<marquee>......</marquee>
提示:在......这里可以添加要进行滚动的内容,可以在标记之间设置文字或图像的属性。
2.滚动方向direction
默认情况下,方向都只是从右到左滚动,这时我们就可以使用direction来设置不同的滚动方向。
语法格式:
<marquee direction="滚动方向">......<marquee>
注意:滚动方向的值有4种情况,分别是向上(top)、向下(down)、向左(left)和向右(right)。
3.滚动方式
滚动方向可以设置之外,也可以通过behavior属性来设置滚动的方式。
语法格式:
<marquee behavior="滚动方式">......</marquee>
提示:滚动方式的取值有三种情况,分别如下:
behavior 滚动效果
scroll 循环滚动,默认滚动
slide 只循环滚动一次就停止
alternate 来回交替进行滚动
4.滚动速度scrollamount
滚动也是有速度的,我们可以使用scrollamount来设置滚动的快慢。
语法格式:
<marquee scrollamouont="滚动速度">......</marquee>
注意:滚动的速度实际上设置每次滚动时移动的长度,以像素为单位。
5.滚动延迟scrolldelay
滚动的时间间隔可以使用scrolldelay
语法格式:
<marquee scrolldelay="时间间隔">......</marquee>
注意:scrolldelay时间间隔的单位是毫秒。如果设置的时间比较长,产生走走停停的效果。
6.滚动循环loop
默认情况下,滚动会不断地循环,类似死循环。如果需要滚动几次之后就停止,我们可以是恶用loop设置滚动次数。
语法格式:
<marquee loop="循环次数">......</marquee>
7.滚动范围width、height
如果不设置滚动背景的面积,默认情况下,水平滚动的文字背景与文字同高、与浏览器窗口同宽,使用width和height参数可以调整其水平和垂直的范围。
语法格式:
<marquee width="背景宽度" height="背景高度">......</marquee>
注意:宽度和高度的单位均为像素。
8.滚动背景颜色bgcolor
语法格式:
<marquee bgcolor="背景颜色">......</marquee>
注意:背景颜色设置的是16进制的颜色。
9.空白空间hspace、vspace
默认情况下,滚动对象周围的文字或图像是与滚动背景紧密连接的,使用hspace和vspace可以设置它们之间的空白空间。
语法格式:
<marquee hspace="水平范围" vspace="垂直范围">......</marquee>
注意:两个范围的单位均为像素。
(二)插入多媒体文件
1.插入Flash动画
语法格式:
<ambed src="多媒体文件地址"width="多媒体的宽度" height="多媒体的高度"> ......</embed>
2.插入音频和视频文件
语法格式:
<embed src="多媒体文件的地址" width="播放界面的宽度" height="播放界面的高度"></embed>
(三)设置背景音乐
1.背景音乐
语法格式:
<bgcolor src="背景音乐地址">
注意:背景音乐的文件可以是avi、mp3等这些声音文件。
2.循环次数loop
默认情况下,背景音乐需要不断播放,所以可以使用loop来设置实现循环次数的控制。
语法格式:
<bgcolor src="背景音乐的地址" loop="播放次数">
提示:如果需要无限次数得播放背景音乐,就直接把次数设置为True。
(四)插入Java Applet
Java Applet是一种允许开发并可以嵌入Web页面得编程语言。Java Applet小程序是在小程序的Java的基础上而形成的应用程序,也是可以再网页在Jon用来执行一定的任务。
语法格式:
<applet code="..." width="宽度" height="高度">
<param name="文件夹的名称" value="图片名称">
</applet>
框架结构问题
框架一般由框架集和框架组成,框架集就是所有的框架,是框架的集合。框架集就是单纯的HTML文件,它定义一组框架的页面和属性。包括了框架的数目i、框架的大小和位置,以及再每个框架汇总初始显示的页面和URL。
框架是框架集中一个独立区域,用于显示一个独立的网页文档。框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示的内容无关的HTML文档。
框架技术广泛应用到网站导航和文档浏览器中,方便访问者对网页的浏览,减少访问者下载页面所需的时间。
(一)设置框架集的属性frameset
框架页面的结构是在框架集中设置的,根据分割方式的不同,可以将框架分为水平分割窗口、垂直分割窗口和嵌套分割窗口。
1.水平分割窗口
水平分割窗口是将页面沿水平方向切割,也就是将页面分成上下排列的多个窗口。这种方式和水平线的有一点类似,水平线也是把上下内容进行分隔。
语法格式:
<frameset rows="框架窗口的高度,框架窗口的高度,......">
<frame>
<frame>
......
</frameset>
注意:rows中可以取多个值, 它由逗号分割的像素值或百分比组成。
2.垂直分割窗口cols
cols属性指定了垂直框架的布局方法,页面被垂直分割成多个窗口,由一组用逗号分隔的像素值、百分比或相对度量值组成列表。
语法格式:
<frameset cols="框架窗口的宽度,框架窗口的宽度,......">
<frame>
<frame>
......
</frameset>
提示:cols可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占浏览器的百分比。
3.嵌套分割窗口
所谓的嵌套就是存在水平分割,也存在垂直分割。
语法格式:
<frameset rows="框架窗口的高度,框架窗口的高度,......">
<frame>
<frameset cols="框架窗口的宽度,框架窗口的宽度,......">
<frame>
<frame>
......
</frameset>
4.框架的边框frameborder
在默认情况下,浏览器都会给每一个框架加上一条明显宽度的边框。此时就可以通过frameborder
来控制边框的显示或者是隐藏了。
语法格式:
<frameset frameborder="是否显示">
提示:frameborder的取值只能为0、1,或者是yes、no。如果取值为0或no,那么边框将会隐藏;如果取值为1或yes,边框将会显示。
注意:如果想要不显示边框,最好把相邻框架的边框都设置为不显示。
5.框架的边框宽度framespacing
默认情况下,框架的边框宽度是1,我们就可以通过使用framespacing来调整边框的宽度。
语法格式:
<frameset framespacing="边框的宽度">
提示:边框宽度就是在页面中各个边框之间的线条宽度,以像素为单位。边框宽度只能对框架集使用,对单个框架无效。
6.框架的边框颜色bordercolor
语法格式:
<frameset bordercolor="边框颜色">
注意:颜色的属性值为16进制的颜色。
(二)设置窗口属性frame
<frame>用来定义每一个单独的框架页面,框架页面的属性设置都在<frame>标记里面进行。
1.页面源文件src
语法格式:
<frame src="页面源文件地址">
页面的源文件可以是一个网页文件,也可以一张图片,地址类型可以是相对地址、绝对地址又或者是带有锚点链接的地址。
2.页面名称name
语法格式:
<frame src="页面源文件" name="页面名称">
提示:框架的页面名称中是不允许包含特殊字符、连字符、空格等,必须是的单个的单词或者是字母的组合。
3.禁止调整窗口的尺寸noresize
语法格式:
<frame src="页面源文件地址"noresize>
注意:noresize没有属性值,添加该属性值后就不可以拖动边框。每一个框架都是有其本身固定的宽度和高度。
4.边框与页面内容的水平边距marginwidth
语法格式:
<frame src="页面源文件地址" marginwidth="水平边距">
提示:水平边距用于设置左右页面的边界与框架边框的距离。
5.边框与页面内容的垂直边距marginheight
语法格式:
<frame src="页面源文件地址" marginheight="垂直边距">
提示:垂直边距用于设置上下页面的边界与框架边框的距离。
6.控制框架滚动条显示scrolling
语法格式:
<iframe src="浮动框架的源文件" scrolling="是否显示滚动条"><iframe>
注意:scrolling的取值范围有如下三种情况:
属性值 含义
auth 默认值,整个框架在浏览器页面中居中对齐
yes 总是显示滚动条,即使页面不足以覆盖框架范围,滚动条的位置也会预留。
nor 在任何情况下都不显示滚动条
表单的问题
(一)表单标记form
在网页中,我们可以使用<form></form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都是属于表单的内容。
表单也是可以设置很多的基本属性。一般来说,表单的处理程序action和传送方式method是必不可少的参数。
1.提交表单action
指定表单数据提交到哪个地址进行处理的程序,我们可以使用action
语法格式:
<form action="表单的处理程序">
......
</action>
说明:表单的处理程序是表单要提交的地址,也就是表单中收集到的资料将要传递的程序地址。 给程序的地址可以是绝对地址,也可以是相对地址。
2.表单名称name
name用于给表单命名,这个命名主要是为了后台处理程序混乱问题,所以给表单命名。
语法格式:
<form name="表单名称">
......
</form>
注意:表单名称中不能包含特殊字符和空格。
3.传送方法method
表单的method属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方法,可取值为get或post。
get: 表单数据被传送到action属性指定的URL,然后这个新URL被送到处理程序上。
post: 表单数据被包含在表单主体中,然后被送到处理程序上。
语法格式:
<form method="传送方式">
......
</form>
4.编码方式enctype
enctype属性为表单顶了MIME编码方式,主要用于设置表单信息提交的编码方式。
语法格式:
<form enctype="编码方式">
......
</form>
提示:常见的编码方式有两种情况:
enctype的取值 取值的含义
application/x-www-form-urllencoded 默认的编码方式
multipart/form-data MIME编码,上传文件的表单必须选择该方式。
5.目标显示方式target
语法格式:
<form target="目标窗口的打开方式">
......
</form>
注意:目标窗口的打开方式有4个选项: _blank、 _parent、 _self和_top。
_blank为将链接的文件载入一个未命名的新浏览器窗口中;
_parent为将链接的文件载入含有该链接框架的父框架集或父窗口中;
_self为将链接的文件载入该链接所在的同一框架或窗口中;
_top为在整个浏览器窗口中载入所链接的文件, 因而会删除所有框架。
(二)表单对象中的使用问题
1.文字字段text
常见的表单元素就是文字字段,用户可以在文字字段内输入字符或者单行文本。
语法格式:
<input name="控件名称" type="type" value="文字字段的默认取值" size="控件的长度" maxlength="最大字符数"/>
说明:
参数类型 含义
type 用来指定插入哪种表单元素, 如type="text", 即为文字字段。
name 文字字段的名称,用于和页面中其他控件加以区别。名称由英文或数字以及下画线组成,但有大小写之分。
value 用来定义文本框的默认值
size 确定文本框在页面中显示的长度, 以字符为单位
maxlength 用来设置文本框中最多可以输入的字符数
2.密码域password
密码域是特殊的文字字段。属性与文字字段的属性是相同的。所不同的是,密码域全部都是“*”显示。
语法格式:
<inpput name="控件名称" type="password" value="文字字段的默认取值" size="控件的长度" maxlength="最大字符数"/>
提示:密码域仅仅使周围的人看不见输入的文本,它不能使数据安全。为了使数据安全,需要在浏览器和服务器之间建立一个安全链接。
3.单选按钮radio
单选按钮一般都是用户选择从一个列表选择中选择一个选项。
语法格式:
<input name="单选按钮名称" type="radio" value="单选按钮的取值"checked/>
注意:checked参数表示该项在默认情况下已经被选中。
4.checkbox
语法格式:
<input name="复选框名称" type="checkbox" value="复选框的取值" checked/>
注意:checked参数表示该项在默认情况下已经被选中,一个选项列表中可以有多个复选框被选中。
5.普通按钮button
语法格式:
<input type="submit" name="按钮名称" value="按钮取值" onlick="处理程序"/>
提示:value的取值就是显示在按钮上的文字,在button属性中可以添加onclick来实现一些特殊的功能。
6.提交按钮submit
实现表单内容得提交。
语法格式:
<input type="submit" name="按钮名称" value="按钮的取值"/>
7.重置按钮reset
主要用来清除用户再页面汇总输入的信息。
语法格式:
<input type="reset" name="按钮名称" value="按钮的取值"/>
8.图像域image
语法格式:
<input name="图像域名称" type="image" src="图像路径"/>
提示:图像的路径既可以是绝对地址,也可以是相对地址。
9.隐藏域hidden
有些数据的传送对于用户而言是不可见的,此时就可以使用隐藏域来实现。
语法格式:
<input name="隐藏域名称" type="hidden" value="隐藏域的取值"/>
提示:根据自己的需要,是可以再表单中使用多个任意隐藏域。
10.文件域file
文件域在上传文件时常常用到,它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传,在上传图像时也常常用到。
语法格式:
<input name="文件名称" type="file" size="控件的长度" maxlength="最长字符数"/>
(三)菜单和列表
1.下拉菜单
下拉菜单是一种最节省页面空间的选择方式,因为在正常状态下只显示一个选项,单击下拉按钮打开菜单后才会看到全部的选项。
语法格式:
<select name="下拉菜单名称">
<option value="选项值" selected> 默认选项内容</option>
...... 选项显示内容
</select>
注意:选项值是提交表单时的值, 而选项显示内容才是真正在页面中显示的选项内容。 selected表示该选项在默认情况下是选中的, 一个下拉菜单中只能有一个默认选项被选中。
代码示例:
<form action="m.html" method="post" name="form1">
名山
<select name="select">
<option value="泰山" selected="泰山">泰山</option>
<option value="黄山">黄山</option>
......
</select>
</form>
2.列表项
语法格式:
<select name="列表项名称" size="显示的列表项数"multiple>
<option value="选项值" selected> 选项显示内容</option>
......
</select>
提示:size用于设置在页面中显示的最多列表项数,当超过这个值时会出现滚动条。
(四)文本域标记textarea
当需要让浏览者填入多行文本时,就应该使用文本域而不是文字字段。和其他大多数表单对象不一样,文本域使用的是textarea标记而不是input标记。
语法格式:
<textarea name="文本域名称" cols="列数" rows="行数"></textarea>
例如留言框的代码示例:
<form action="liuyan" method="post" name="form1">
留言:
<textarea name="textarea" cols="20" rows="5"></textarea>
</form>
(五)id标记
id标记是一个较为特殊的标记,它主要用于标示一个惟一的元素。 这个元素可以是文字字段,可以是密码域,也可以是其他的表单元素,甚至可以是一幅图像、一个表格。
语法格式:
<id=元素的标识名>
提示:在定义标签的时候很常用。