HTML基础教程：网页设计与多媒体应用-优快云博客

这里的颜色值可以是一个十六进制数(用“#”作为前缀),也可以是以下16种颜色名称。 black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white, green, purple, silver, yellow, aqua

位置控制

通过align属性可以选择文字或图片的对齐方式,left表示向左对齐,right表示向右对齐,center表示居中。基本语法如下:

#=left/right/center

另外,align属性也常常用在其它标签中,引起其内容位置的变动。

无序号列表

无序号列表使用的一对标签是,每一个列表项前使用

。其结构如下所示:

第一项

第二项

第三项

序号列表

序号列表和无序号列表的使用方法基本相同,它使用标签,每一个列表项前使用

。每个项目都有前后顺序之分,多数用数字表示。其结构如下所示:

第一项

第二项

第三项

定义性列表

定义性列表可以用来给每一个列表项再加上一段说明性文字,说明独立于列表项另起一行显示。在应用中,列表项使用标签标明,说明性文字使用表示。在定义性列表中,还有一个属性是compact,使用这个属性后,说明文字和列表项将显示在同一行。其结构如下所示:

第一项叙述第一项的定义

第二项叙述第二项的定义

第三项叙述第三项的定义

表格的基本结构

...定义表格

... 定义标题

定义表行

定义表头

定义表元(表格的具体数据)

表格尺寸设置

表格的大小

一般情况下,表格的总长度和总宽度是根据各行和各列的总和自动调整的,如果我们要直接固定表格的大小,可以使用下列方式:

width和height属性分别指定表格一个固定的宽度和长度,n1和n2可以用像素来表示,也可以用百分比(与整个屏幕相比的大小比例)来表示。

下表是一个长为200像素,宽为100像素的表格。

下表是一个长为屏幕的20%,宽为屏幕的10%的表格。

表格内文字的对齐/布局

表格中数据的排列方式有两种,分别是左右排列和上下排列。左右排列是以align属性来设置,而上下排列则由valign属性来设置。其中左右排列的位置可分为三种:居左(left)、居右(right)和居中(center);而上下排列基本上比较常用的有四种:上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。

#=left, center, right

#=top,middle,bottom,baseline

跨多行、多列的表元

要创建跨多行、多列的表元,只需在或

中加入rowspan或colspan属性,这两个属性的值,表明了表元中要跨越的行或列的个数。

跨多列的表元

colspan表示跨越的列数,例如colspan=2表示这一格的宽度为两个列的宽度。

跨多行的表元

rowspan所要表示的意义是指跨越的行数,例如rowspan=2就表示这一格跨越表格两个行的高度。

表格的颜色

在表格中,既可以对整个表格填入底色,也可以对任何一行、一个表元使用背景色。

表格的背景色彩

行的背景色彩

表元的背景色彩或

#=rrggbb 16进制 rgb数码, 或者是下列预定义色彩名称:

black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white, green, purple, silver, yellow, aqua

文件之间的链接

超文本中的链接是其最重要的特性之一,使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下:

链接文字

·标签表示一个链接的开始,表示链接的结束;

·属性“href”定义了这个链接所指的地方;

·通过点击“链接文字”可以到达指定的文件。

中国山西之窗

链接分为本地链接、url链接和目录链接。在各种链接的各个要素中,资源地址是最重要的,一旦路径上出现差错,该资源就无法从用户端取得。

本地链接:

**************

对同一台机器上的不同文件进行的连接称为本地链接,它使用unix或dos系统中文件路径的表示方法,采用绝对路径或相对路径来指示一个文件。

例如:我们现在正在浏览的这一页的绝对路径是:c:\study\html教程\link01.htm

而这一页相对于当前目录即“html教程”的相对路径是:link01.htm

如果是浏览html教程之外的一页,该文件路径要以两个圆点(..)来表示上一层目录:http://www.cnblogs.com/internet/ip地址

现在我们把这几种路径的表示方法写入链接中:

以绝对路径表示:文件的链接

以相对路径表示:文件的链接

链接上一目录中的文件:ip地址

一般情况下,我们是不用绝对路径的,因为我们的资源常常是放在网上供其他人浏览的,写成绝对路径,当我们把整个目录中的所有文件移植到服务器上时,带有c:\的资源地址用户将无法访问到。所以我们最好写成相对路径,避免了重新修改文件资源路径的麻烦。

url链接

************

如果链接的文件在其它服务器上,我们就要弄清我们所指向的文件时采用的哪一种url地址。url意思是统一资源定位器,通过它可以以多种通讯协议于外界沟通来存取信息。

url链接的形式是:协议名://主机.域名/路径/文件名

其中协议包括:

file本地系统文件

httpwww服务器

ftpftp服务器

telnet基于telnet的协议

mailto电子邮件

newsusenet新闻组

gophergopher服务器

waiswais服务器

例如,我们这样来表达一个url地址:

http://www.sjstc.edu.cn/

ftp://ftp.sjstc.edu.cn

telnet://bbs.xanet.edu.cn

写在html文件中,链接其他主机上的文件时,格式如下:

中国山西之窗

西北网络中心兵马俑站

目录链接

**************

前面所谈的资源地址,只是单纯的指向一份文件,但是,对于直接指到某文件上部、下部或是中央部分,以上方法却是无法做到的。然而,我们要这样做,也并不是毫无办法。我们可以是使用目录链接。

制作目录链接方法是:

·首先把把某段落设置为链接位置,格式是:〈a name="链接位置名称">

·在调用此链接部分的文件,定义连接:链接文字

如果是在一个文件内跳转,文件名可以省略不写。

插入图形

超文本之所以在很短的时间内如此广泛的受到人们的青睐,很重要的一个原因时它能支持多媒体的特性,如图象、声音、动画等。这一部分,我们先来学习在一个页面中如何插入图象。

基本格式

超文本支持的图象格式一般有x bitmap(xbm)、gif、jpeg三种,所以我们对图片处理后要保存为这三种格式中的任何一种,这样才可以在浏览器中看到。

插入图象的标签是,其格式为:

src属性指明了所要链接的图象文件地址,这个图形文件可以是本地机器上的图形,也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中url地址表示方法。

例:

img还有两个属性是height和width,分别表示图形的高和宽。通过这两个属性,可以改变图形的大小,如果没有设置,图形按原大显示:

例:

图形与文字的对齐排列:

由img中的align属性来设置图文的对齐方式,有以下几种:

align=top

〈img src="love.gif" align=top>美丽的心灵

美丽的心灵

align=middle

〈img src="love.gif" align=center>美丽的心灵

美丽的心灵

align=buttom

〈img src="love.gif" align=buttom>美丽的心灵

美丽的心灵

align=texttop

〈img src="love.gif" align=textop>美丽的心灵

美丽的心灵

align=baseline

〈img src="love.gif" align=baeline>美丽的心灵

美丽的心灵

align=left

〈img src="love.gif" align=left>美丽的心

灵,有着数不清的爱心,象天空里的星星,明

亮晶莹。

美丽的心灵,

有着数不清的

爱心,象天空

里的星星,明

亮晶莹。

align=right

〈img src="love.gif" align=right>美丽的心

灵,有着数不清的爱心,象天空里的星星,明

亮晶莹。

美丽的心灵,

有着数不清的

爱心,象天空

里的星星,明

亮晶莹。

图文之间的距离设置:

在html文件里图形水平位置的配置,可由hspace属性来完成,其垂直位置的配置,由vspace来完成。

美丽的心灵

图形按钮:

图形按钮就是使用者通过在图形上单击,就能连接到某个地址上去。很简单,我们只要调用一下前面的知识就可以完成了。其基本格式如下:

例:

播放音乐

html除了可以插入图形之外,还可以播放音乐和视频等。用浏览器可以播放的音乐格式有:midi音乐、wav音乐、au格式。另外在利用网络下载的各种音乐格式中,mp3是压缩率最高,音质最好的文件格式。

点播音乐

将音乐做成一个链接,只需用鼠标在上面单击,就可以听到动人的音乐了,这样做的方法很简单:

乐曲名

例如:播放一段midi音乐:

midi音乐 midi音乐

播放一段au格式音乐:

同桌的你-au音乐同桌的你-au音乐

把我们喜欢的音乐收集起来,作成一个音乐库,随时都可以让自己和别人徜徉在音乐的海洋中,已经有人这样做了,你一定已经遇到很多,而且自己也可以试着去做了!

自动载入音乐

前面,我们是借助链接来实现网上播放音乐这一功能的,我们还可以让音乐自动载入,你可以让它出现控制面板或当背景音乐来使用。基本语法:

属性有:

src="filename"

设定音乐文件的路径

autostart=true/false

是否要音乐文件传送完就自动播放,true是要,false是不要,默认为false

loop=true/false

设定播放重复次数,loop=6表示重复6次,true表示无限次播放,false播放一次即停止。

startime="分:秒"

设定乐曲的开始播放时间,如20秒后播放写为startime=00:20

volume=0-100

设定音量的大小。如果没设定的话,就用系统的音量。

width height

设定控制面板的大小

hidden=true

隐藏控制面板

controls=console/smallconsole

设定控制面板的样子

ie中的背景音乐

另外,还有一种插入背景音乐格式,不过只有在ie浏览器中才可以听到。

#=循环数

例:

播放视频

用浏览器可以播放的格式有:mov格式、avi格式。

链接一个视频文件

将视频文件做成一个链接的方法:

视频名称

自动载入视频

与音乐的播放一样,我们可以使用embed标签播放视频,

属性有:

src="filename"

设定文件的路径

autostart=true/false

是否要文件传送完就自动播放,true是要,false是不要,默认为false

loop=true/false

设定播放重复次数,loop=6表示重复6次,true表示无限次播放,false播放一次即停止。

startime="分:秒"

设定开始播放时间,如20秒后播放写为startime=00:20

volume=0-100

设定音量的大小。如果没设定的话,就用系统的音量。

width height

设定控制面板的大小

多窗口页面(frames)

使用frames结构设计的html文件,能够将整个窗口分成几个独立的小窗口,每一个窗口可分别载入不同的文件,令人高兴的是,每个窗口是可以相互沟通的。有时用得恰到好处,感觉真是好极了。

这是一个非常好用的技巧,不过,学习内容也不少,我们一起从基本语法学起吧!

frames结构的基本格式

...

在有frames结构的html文件中,frames文件的整体结构为:

......

framees结构中的每个url值指定了一个文件(这个文件必须事先做好),这个文件将载入相应的窗口。

各窗口的尺寸设置

我们将窗口分割为几块,横向分用rows属性,纵向分用cols属性,每一块的大小可以由这两个属性的值来实现。

例:

#的值为一对用引号括起来的字符串,字符串中的数字表示每个分窗口所占的尺寸,数字中间用逗号隔开,有几个数字就表示分出了几个窗口。当然,这其中的任何一个数字也可以由“*”来代替,这样表示由浏览器自动设置其大小。

如:

将100像素以外的窗口平均分配

将窗口分为三等份

各窗口间相互操作(frame target)

由frames分出来的几个窗口的内容并不是静止不变的,往往一个窗口的内容随着另一个窗口的要求而不断变化,这就提高了frames的利用价值。为了完成各窗口之间的相互操作,我们必须为每一个窗口起一个名字,这个名字用属性name来定义。

窗口标识(frame name)

例如:

定义了窗口名称,还应该有target来配合使用,target属性指定了所链接的文件出现在哪一窗口。target的值可以是name定义的名称,也可以是以下四类值:

　　显示一个新窗口　　显示在同一个窗口　显示在frameset的前一份文件的窗口　　　显示在整个浏览器窗口frame 的其它属性

#=yes, no

各窗口边框的设置,yes表示有边框,no表示没有边框

#的值为像素点

设置各窗口的上下左右边界宽度,如果不设置,由浏览器自动决定。

#=yes, no, auto

滚动条设置,yes 表示有,no表示没有,auto表示由浏览器自动设置,#=缺省值是 auto

noresize属性来设置不可变动的框边

设置背景属性

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/

HTML基础知识