HTML语言入门教程(一)

我爱逃亡 · 发表于 2012-6-20 22:05

HTML语言入门教程(一)

§ 什么是HTML语言

HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言，由W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起来编辑HTML文件，因为它就是一种纯文本文件。

§ HTML语言的基本结构

下面我们来看一小段HTML语言的代码，来了解HTML语言的基本结构：

<html>

<head>

<title>HTML语言的基本结构</title>

</head>

<body>

HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。

</body>

</html>

将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm或者.html即可，然后再所在的目录下就可看到一个IE的图标，名字就是你所存的文件名称。

这是声明HTML文件的语法格式。每一个HTML文件，都必须以<HTML>开头，以</HTML>结束

这是文件头声明的语法格式。在这之内的所有文字都属于文件的文件头，并不属于文件本体。

这是声明文件标题的语法格式。在这之中写下的所有内容，都将写在网页最上面的标题栏中。

这是声明文件主体的语法格式。在者之间写下的内容都是文件的主体，也就是说将会被显示在客户区之中。

注意：几乎每一种HTML语言的语法都是以<>开头，以</>结束。在编辑HTML语言过程中，也可以使用注释。语法格式为：<!-文件注释->。就好像C语言中的 /* …… …… */ 一样，中间的内容只是解释说明，并不被编译器所编译。

§ HTML语言的基本单位

1. 长度单位

长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性，同时也可以用来定义这些对象在页面上的位置等属性，用来描述页面上可能遇到的各种长度。

长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例，说明这两种表示方法。

<html>

<head>

<title>HTML语言的长度表示</title>

</head>

<body>

HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。

</body>

</html>

在文本编译器中编译，改变网页的大小，就会看到这两者表示长度方法的不同。

其中 <hr> 标记是在页面上建立水平线的标记。width是水平线元素中的一种属性，用来表示水平线的宽度。这里width="500"即表示这个水平线的宽度是500像素；width="%50"即表示水平线占据客户区的总宽度的%50。

2. 颜色单位

和长度单位一样，颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位有三种表示方法：16进制颜色代码、10进制RGB码、直接颜色名称。这三种表示方法不同，但是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。

<html>

<head>

<title>HTML语言中颜色的不同表示方法</title>

</head>

<body>

<font color="#008000">窗前明月光</font><br><!绿色>

<font color="rgb(0,0,255)">疑是地上霜</font><br><!蓝色>

<font color="#ffff00">举头望明月</font><br><!黄色>

<font color="#800000">低头思故乡</font><!栗色>

</body>

</html>

注意：本文件在保存时请选择 Unicode 字符型进行保存。

16进制颜色代码，语法格式： #RRGGBB 。16进制颜色代码之前必须有一个“#”号，这种颜色代码是由三部分组成的，其中前两位代表红色，中间两位代表绿色，后两位代表蓝色。不同的取值代表不同的颜色，他们的取值范围是00--FF。

10进制RGB码，语法格式： RGB(RRR,GGG,BBB) 。在这种表示法中，后面三个参数分别是红色、绿色、蓝色，他们的取值范围是0--255。以上两种表达方式可以相互转换，标准是16进制与10进制的相互转换。

直接颜色名称，可以在代码中直接写出颜色的英文名称。

以上三种表示方法的效果相同，一般16进制颜色代码的表示方法比较常用。读者可以根据自己的喜好和实际情况来决定使用哪一种表示方法。关于不同颜色的定义，请查看相关资料。。

3. URL路径

URL(Universal Resource Locator)路径是一种互联网地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服务器(Server)里文件的完整路径和文件名称等信息。在HTML中，URL路径分为两种形式：绝对路经和相对路径。

a. 绝对路径：

绝对路径是将服务器上磁盘驱动器名称和完整的伦够写出来，同时也会表现出磁盘上的目录结构。

语法格式： <scheme>:<scheme_dependent_information>

其中，<scheme>是某一种传输协议，而 <scheme_dependent_information> 则是连接的位置信息。

例如：

b. 相对路径：

相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。

语法格式：相对关系/部分路径/文件名

根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。

<1>相对文档：

这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“../”表示上一级目录，没有“../”表示当前目录。

例如当前文档的路径是：test/project1/index.htm 。我们要找test目录下的html.htm 。而当前的目录是project1，我们要回到上一级目录中，所以路径是“../html.htm”。

<2>相对根目录：

这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个字符是“/”，这个符号表示这个路径是一个相对于根目录的表达式。

例如：

这一课我给大家介绍html文档中head部分的基本使用方法。

head这一部分是由标记<head>开始，以标记</head>结束，是html文档的首要部分。下面我们看一下head部分所包含的元素：

3 _0 e( T8 E' \ 元素 . E0 k6 \|' c- [0 X: v	( ?4 U) G) r& W% G# {) ]9 C 描述 " E1 p7 J- K9 z( q( u; z Y7 h
; Y X. ?% `/ L title ! M. v( L- B. i( l) }	, ?+ M$ _9 r2 o" T8 ] 文档标题 ! @) ^' x6 r% a' k
4 T" P5 h6 f& O3 k4 h' w3 \|2 \4 O meta ; H- p5 ^ P5 U+ \9 Y/ M4 G$ y	. ~! o# P# D2 d 描述非html标准的一些文档信息 ' B; c" G" Z0 i+ A1 u2 l5 W2 N. s5 [
% f# o# B$ a. {; O; @ link ; I" o8 d7 T% t2 n- G7 h	' N$ A' e" [5 Z* L/ S 描述当前文档与其他文档之间的连接关系 , \4 ?0 `$ w3 w ]" \|, ^
{5 F \$ d/ V% \ base 8 A' M. ^, H8 C2 A7 b) D	) o# i6 @6 ?; C5 y+ a: Y& q 定义体试时默认的外部资源 . b( _, O/ c. o5 M) t
1 v2 q4 K6 l- T6 Y. o script @ J' C% ?/ f' R	& n* L6 d) Z0 G) F 脚本程序内容 6 V! ]; d" s' g& I$ c3 _2 [
! U+ \|( L6 P9 t2 I' X, j: j style 9 _/ I/ x+ D$ ^! [# T	9 i3 ^& o/ p6 \, a 样式表内容 , k% s g5 c: `0 I; y5 r

下面简要介绍一下各个部分的功能及用法：

title：

title包含的内容将会被显示在浏览器窗口的标题栏中。给自己的网页起一个适当的名字，可以体现出一些自己的个性。

语法格式：

在省略号处加入的文字或符号，都将显示在浏览器的标题栏中。

meta：

meta元素提供的信息是用户不可见的。下面是meta的几种用法：

定义搜索关键字：

这里介绍两种基本的用法：

这样一来，在你的网页中就会体现出这样的信息。但是这些信息是不可见的，只是提供给那些搜索引擎使用。

控制页面缓存：

浏览器一般为了节约时间，都在本地硬盘上保存一个网上的文件作为临时版本。在用户下次打开这个网页的时候，浏览器将会直接调用硬盘上的这个版本，而不是网上的。如果想让浏览者每次打开网页的时候都是看到的最新版本，那么就在网页上加上这一句吧！

定义语言：

我们可以通过这样的语句设定语言的编码方式。这样，浏览器就可以为我们正确的选择语言，不需要我们来选取。上面的例子显示的就是简体中文，如果想要显示繁体中文，将GB3212替换为BIG5就可以了。

刷新页面

这样的语句可以让我们的浏览器按照content属性中制定的时间来跳转到URL属性中设定的URL地址。上面的例子就是在打开页面60秒后调用一个新的页面new.htm。如果没有能够找到new.htm，浏览器就﹞执行刷新本页的操作。这也是大多数聊天室的设定方法。

link：

这个元素用来指定当前文档和其他文档之间的联接关系。

语法格式：

rel说明两个文档之间的关系；href说明目标文档名。以下是一个指定外联样式表文件的例子：

关于css层叠样式表，请查阅有关资料。

base：

用于定义文档提交是默认的外部资源。

语法格式：

href指定文档中链接到的所有文件默认的URL地址。在这里指定href的属性，所有的相对卢劲的前面都会加上href属性中的值。

target指定文档中所有链接的默认打开窗口。最常见的应用是在框架页(frame)中。我们要把Menu框架中的联接显示到content框架中，就可以在Menu的网页中加上<base target="content">。这样，就省去了在Menu网页上所有链接的<a>属性上加上target属性了。

script：

标记用来在页面中加入脚本程序。

语法格式：

在language中一定要指定脚本语言的种类。如VBScript等。

style：

用来指定当前文档的css层叠样式表。css对于网页的字体样式、背景、边界等都有很大的应用。详细部分请大家参阅css有关内容。

这一次我给大家介绍html语言中的body的部分用法。

大家从各大门户网站的主页上就可以看出，body部分占据了大部分的代码。可见body是一个网页代码的绝对主要部分。body是由<body>开始，由</body>结束。下面我们看一下body部分的元素：

' u8 P! P/ M" h$ V/ a. y 元素 2 o" S6 [% q, }; F7 C* j, T	Z0 x% b0 M1 D! K 描述 " S: w' o& }8 E+ O
8 L* F1 s+ K; t/ ^" U bgcolor ( o7 Q* m# n! x1 E- b' p	7 N" `. Q0 X+ P/ K 背景色 , i4 \|+ S7 O# X/ [
' l( D' O0 l% j3 k3 c0 g background ) a- X$ X5 F+ q+ ]. [8 S, x& F	: s! V- x* _( Q+ ~5 {4 {7 O/ F* L 背景图案 9 M" `, a4 r$ E3 s" p: I6 t' t" \|- l
; x: O! N( M7 [. x& G- K text . k& E* \|0 B k W	% D. ^: u6 w: g8 d( V. { a 文本颜色 " w) c4 z2 N E2 M l
! t6 y' _& M E+ ? P link 9 e D9 w; r9 q$ O6 D5 {. C	: i( G* H2 Q# I. \| 链接文字颜色 $ t6 H5 W, g! g+ _1 E$ J
4 J [/ g8 F+ q* m5 G alink ! D' g8 \|: Y7 @+ ?	! P3 a ^9 S- u9 a8 V 活动链接文字颜色 " z W9 L8 ^& S' e/ N8 @$ V
4 I% k1 q3 R! B# R/ d }) c vlink 6 G2 S( _8 }6 {' E L Z Y4 d1 U	1 c+ @" ~8 }* E 已访问链接文字颜色 , s3 }6 O6 p% l! J
, [5 F$ G$ w" J$ M: `' r leftmargin 7 w c# x5 w( c* t8 t	8 J" q' T- M; i! m: L 页面左侧的留白距离 6 q8 q" J: _* e; m
. z1 C: \|) O! `! J topmargin % H2 m3 y/ N3 k& h	. m" s+ B8 V" A9 Z! ^: d 页面顶部的留白距离 z& ^3 A2 M b$ z8 W/ b' W6 i

下面介绍各个部分的功能及用法：

bgcolor:

bgcolor用于指定页面的背景颜色。在Microsoft公司的IE浏览器中，默认情况下是白色，Netscape公司的Navigator浏览器的默认情况是灰色。

语法格式：

background:

background属性用于指定页面的背景图案。

语法格式：

下面介绍几种文字的属性，可以改变文字的颜色,以及在页面上留出空白：

text link alink vlink leftmargin topmargin

他们的作用分别是：非链接文字的颜色；可连接文字的颜色；正被点击的可链接文字的颜色；已被点击的可链接的文字的颜色；页面左侧的留白；页面顶部的留白。

语法格式：

示例：

<html>

<head>

<title>body元素示例</title>

</head>

<p>这里显示body的示例。</p>

</body>

</html>

说明：对于link这样的属性，大多数html的页面已经不使用这样的用法了。现在多数是在head中加入相应的代码。要达到的效果是鼠标放到有链接的字体上时，字体变色，点击后字体变为灰色。具体方法如下：

A:link {color:#00007f;}
A:visited {color:#65038e;}
A:active {color:#ff0000;}
A:hover {color:#ff0000;}

将这段代码加入到head中，在body中加入有链接的文字，就可以看出效果了。这一部分是属于css中的知识。在body中加入有链接的文字：在Dreamweaver中，选定文字后，在下面的Properties中的link中加入想要链接到的页面的地址。在FrontPage中，选定文字后，点击右键就会有相应的选项。

第一课基础

Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名></标志名>来表示标志的开始和结束(例如<html></html>标志对)，因此在Html文档中这样的标志对都必须是成对使用的。

当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音、图片、文字等连结显示出来。

　　HTML标记是由 < 和 > 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >，< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。

　　HTML文件基本架构　　

<HTML> 文件开始
<HEAD> 标头区开始
<TITLE>...</TITLE> 标题区
</HEAD> 标头区结束

<BODY> 本文区开始
本文区内容
</BODY> 本文区结束

</HTML> 文件结束

<HTML> 网页文件格式。
<HEAD> 标头区 : 记录文件基本资料，如作者、编写时间。
<TITLE> 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。
<BODY> 本文区 : 文件资料，即在浏览器上看到的网站内容。

　　注意事项

　　通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文件格式。

　　习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站，浏览器便会自动的找出 index.htm 文件。

第二课字体

<hn>...</hn> 标题，设定标题字体大小， n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。

如 : <h2> 标题 </h2>

标题

如 : <h3 align = center> 标题 </h3> ( 标题置中 )

标题

<b>...</b> 粗体字。

如 : <b> 粗体字 </b>

粗体字

<i>...</i> 斜体字。

如 : <i> 斜体字 </i>
斜体字

<del>...</del> 横线 ( 表示删除 )。

如 : <del> 横线 </del>

<tt>...</tt> 打字体 ( 固定宽度文字 )。

如 : <tt> 打字体 </tt>
打字体

<sup>...</sup> 上标字。

如 : 字体 <sup> 上标字 </sup>
字体上标字

<sub>...</sub> 下标字。

如 : 字体 <sub> 下标字 </sub>
字体下标字

<!...> 注解 ( 不会显示在浏览器上 )，可以多行。

如 : <! 更新日期 : 2000/1/1>

第三课表格

表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。

　　常用表格标记

<table>...</table> 表格指令。

相关属性 :
·align 调整
·bgcolor 背景颜色
·border 边框
·height 高度
·width 宽度

<caption>...</caption> 表格标题。

相关属性 :
·name 名称

<area> 设定地图动作区域

相关属性 :
·coords 设定动作区域座标 ( 左上角座标 : x1,y1 ; 右下角座标 : x2,y2 )
·href 动作区域连结点 ( 可载入位址或文件 )
·nohref 动作区域连结点不动作
·shape 外型

举例

设定地图
<img border=0 src=a.gif usemap=#a>
<map name=a>
<area shape=rect coords=0,0,200,100 href=1.htm>
<area shape=rect coords=0,100,200,200 nohref>
<area shape=rect coords=0,200,200,300 href=3.htm>
</map>

第九课加入声音
　

html不仅能插入图片，也可以载入midi音乐、wav 音效喔！

常用音乐标记

<bgsound> 背景音乐、音效。

相关属性 :
·loop 循环 , 背景音乐播放次数
·src 文件或url位址 (可为wav、midi格式 )

如 :
<bgsound src=m-1.mid loop=true>

内嵌音乐插件

相关属性 :
·height 高度
·width 宽度 ( 可设百分比% )
·src 设定内嵌物件的 url 位址
·loop 循环 , 背景音乐播放次数
·autostart 自动播放

如 :
<embed src=m-1.mid width=145 height=60 autostart=true loop=true></embed>

第十课滚动条
　

这是由ie提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！

【文字卷动标记】

<marquee>...</marquee> 文字卷动 ( 滚动条 )。

【相关属性】

·behavior = 设定卷动方式
-- alternate 交替来回卷动
-- scroll 卷动 ( 预设 )
-- slide 滑动

·bgcolor = color 背景颜色
·direction = 设定卷动方向
·height = n 高度
·loop = n 循环 , 卷动次数 ( 预设循环 )
·scrollamount = n 设定卷动距离
·scrolldelay = milliseconds 设定卷动时间
·truespeed = milliseconds 设定卷动速度
·width = n 宽度 ( 可设百分比% )

【举例】

如 : <marquee bgcolor=red behavior=alternate direction=left scrollamout=10 scrolldelay=100> <font color=white>太平洋网络学院</font></marquee>

如 : <marquee bgcolor=green height=50 behavior=scroll direction=up scrollamout=10 scrolldelay=300> <font color=white><center>太平洋网络学院</center></font></marquee>

一 html的标签

table，tbody,tr,td 称为html的标签，以双标签的形式出现，所谓双标签，也就是有一个<table>就有一个对应的</table>与之对应，同样适用于其他的双标签。

一般标签都为双标签。标签最终所显示的网页效果由各个属性来表达，属性可选择使用，不一定全部都用。在整个图片或帖子里双标签以首尾呼应的方式出现。

<table align=center background="背景图片地址" border=0 cellpadding=0 cellspacing=0 bordercolor=#0000ff width="100%">
<tbody>
<tr>
<td>
这里是图片,文字或帖子内容.
</td>
</tr>
</tbody>
</table>

<table> 的常用参数设定：

width="400"
表格宽度，接受绝对值(如width=80)及相对值(width=80%)。

border="1"
表格边框的厚度，不同浏览器有不同的内定值。

cellspacing="2"
表格格线的厚度

align="center"
表格的摆放位置(水平)，可选值为： left(居左), right(居右), center(居中)

valign="top".
表格内内容的对齐方式(垂直)，可选值为： top, middle, bottom。　　

background="myweb.gif"
表格的背景图片，与 bgcolor 不要同用。

bgcolor="#0000ff"
表格的背景颜色，与 background 不要同用

bordercolor="#cf0000"
表格边框颜色

bordercolorlight="#00ff00"
表格边框向光部分的颜色

bordercolordark="#00ffff"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

播放器宽度width和高度height的值根据需要自定

二帖图格式

帖图基本代码如下：

<img> 称图形标记，主要用来插入图形标记。

三文字设制

基本代码如下：

align=center　表示字体居中，可选值为居右（right）居左（left）

color=颜色代码　

face=字体　常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等

size=字体大小，这里的最大值为7　取值越大文字就越大

四加入音乐

常用属性如下：

src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。

autostart=true
是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。

loop="true"
是否自动反复播放。loop=2 表示重复两次，true 是， false 否。

hidden="true"
是否完全隐藏控制画面，true 为是，no 为否 (内定)。

starttime="分:秒"
设定歌曲开始播放的时间。如 starttime="00:30" 表示从第30秒处开始播放。

volume="0-100"
设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定

width="整数" 和 high="整数"
设定控制面板的高度和宽度。(若 hidden="no")

align="center"
设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom

controls="smallconsole"
设定控制面板的外观。预设值是 console。
console 一般正常面板　　
smallconsole 较小的面板　　
playbutton 只显示播放按钮　　
pausecutton 只显示暂停按钮　　
stopbutton 只显示停止按钮　　
volumelever 只显示音量调节按钮

贴音乐的完整语法如下:

一: 隐藏播放器

二: 不隐藏播放器

入门

HTML>
<HEAD>
<TITLE> 我的页面 </TITLE>
</HEAD>
<BODY>
网页的内容.......
</BODY>
</HTML>
例1-1
当你点开任何网页的源文件的时候，相信都可以在长长的字符中寻找到上面这些单词,或者你现在把上面这些单词复制到你新建的文档文件中，保存之后把后缀名改成.html，一个网页就诞生了。这就是HTML语言，它不象C++，VB等等程序语言要你摸不清头脑，HTML语言只是一个在SGML定义下的描述性语言，或者说是标识语言。
既然是标识语言，我们就从标识开始进行学习好了，也许当你完全掌握标识之后，就会发现基本上已经明白什么是HTML了。
标识的写法:
1.任何标识都应该写在"<"和">"之间，如<html>
2.标识的字母没有大小写的区分。
3.在起始标识中加入“/”就是终止标识，一般情况下有起始表示就有终止标识。例如<html>...</html>
4.有的标识需要加入参数，有的不必，需要注意的是这些参数只能加在起始标识中。
现在我们开始认识第一类标识：文件标识
事实上你已经见过了这些标识,没错就是<HTML> ； <HEAD> ； <BODY> ； <TITLE> ，
<html>.....</html>
这段标识告诉浏览器现在运行HTML文件，所以你写HTML文件都应该以<html>开头，</html>.
<head>.....</head>
这是HTML文件的开头部分，相应的<body>...</body>就是本文部分，开头部分主要是用来记载关于这个页面的一写重要资讯，所以呢大部分的标记都将在本文部分进行应用。
<title>...</title>
这里的文字就成了你所建立页面的标题，你可以更改一下例1-1中非标记部分。
这些标记就构成了HTML的基本构架，其中只有<body>具有参数设定,我们就通过一个例子还认识好了
<BODY text="" link="" alink="" vlink="" background="" bgcolor="" leftmargin= topmargin= bgproperties="fixed">
text=""
用以设定文字颜色。
link=""
设定一般文字连结颜色。
alink=""
设定刚按下时文字连结颜色。
vlink=""
设定连结后的颜色。（被按过）。
background=""
设定背景墙纸。
bgcolor=""
设定背景颜色。
leftmargin=
设定整份文件显示画面的左方边沿空间，单位为像素。
topmargin=
设定整份文件显示画面的上方边沿空间。
bgproperties="fixed"
固定背景墙纸，当卷动文字时墙纸不会跟著卷动。
这里需要说明的是色彩的问题，色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示的，所以一个颜色也就由RRGGBB的格式构成,而16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
#000000, 其中红=00，蓝=00,绿=00，色彩即为黑色
#0000FF，其中红=00,绿=00，蓝=ff,色彩即为蓝色
如果你想深入了解色彩的问题，你可以查看诸如FLASH等等软件的色彩表.
首先我们看<font>,<basefont>
这两个标识都是用于控制字体的大小，色彩，字体，但<basefont>可以用于<head></head>之间，控制全文的文字;而<font>只应用与<body></body>之间，控制在它选择范围中的文字.两个标识出现在一个html文件中的时候，没有被<font>选择的文字才会受到<basefont>的影响。
下面我们就来看一个例子：
<html>
<head>
<title>H.S Workshop</title><basefont face="Arial" size="7" color="#000000">
</head>
<body>
欢迎来到<font face="Arial" size="5" color="ff0000">H.S Workshop</font>
</body>
<html>
[例2-1]
我们看到<basrfont>告诉IE全文用7号黑色Arial字体显示，但H.S Workshop被我们用<font>围住了，所以执行<font>的设定.这里有face=,size=,color=三个参数可以进行设定，
face=
设定字体。
size= (1,2,3,4,5,6,7,-x,+x)
设定字体大小，这里需要注意的是相对值和绝对值，我们在例2-1中，把<font>的size的值改成"-2"你会发现效果是一样的，相应的把<basefont>的size值改成其他任何小于7的数值，你就会发现改变。我们在这里就把size="-2"称为相对值,被<font>围住的文字在<basefont>的基础上，减少2个字符大小,公式为"n-/+x".当然只有<font>可以设定相对值。
color=
设定文字色彩.
这里我们还发现了一个问题，<basefont>没有终止标识，但它一样可以实现它的功能，这就是HTML的空标识，因为我们看到</basefont>没有存在的意义，所以可以忽略，当然如果你在<basefont>后面添加</basefont>对整个html文件也没有影响。其他的我们就称之为围堵标识。
接下来看<Hn>...</Hn>（n=1,2,3,4,5,6)
这是一个标题标识，从1到6替减，是一个围堵标识，我们需要注意的是这个标识独占一行并自动插入一个空行，你可以自己尝试一下，这里就不举例说明了。
<STRONG> <B> <TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <s> <BIG> <SMALL> <SUP> <SUB> <I> <EM> <VAR> <CITE> <DFN> <ADDRESS>：
这是对文字进行一些特殊处理的标识，我们就来看看他们的效果来进行学习好了.
欢迎来到H.S Workshop 欢迎来到H.S Workshop
<strong>欢迎来到H.S Workshop</strong> 欢迎来到H.S Workshop
<b>欢迎来到H.S Workshop</b> 欢迎来到H.S Workshop
<tt>欢迎来到H.S Workshop</tt> 欢迎来到H.S Workshop
<samp>欢迎来到H.S Workshop</samp> 欢迎来到H.S Workshop
<code>欢迎来到H.S Workshop</code> 欢迎来到H.S Workshop
<kbd>欢迎来到H.S Workshop</kbd> 欢迎来到H.S Workshop
<u>欢迎来到H.S Workshop</u> 欢迎来到H.S Workshop
<strike>欢迎来到H.S Workshop</strike> 欢迎来到H.S Workshop
<s>欢迎来到H.S Workshop</s> 欢迎来到H.S Workshop
<big>欢迎来到H.S Workshop</big> 欢迎来到H.S Workshop
<small>欢迎来到H.S Workshop</small> 欢迎来到H.S Workshop
<sup>欢迎来到H.S Workshop</sup> 欢迎来到H.S Workshop
<sub>欢迎来到H.S Workshop</sub> 欢迎来到H.S Workshop
<i>欢迎来到H.S Workshop</i> 欢迎来到H.S Workshop
<em>欢迎来到H.S Workshop</em> 欢迎来到H.S Workshop
<var>欢迎来到H.S Workshop</var> 欢迎来到H.S Workshop
<cite>欢迎来到H.S Workshop</cite> 欢迎来到H.S Workshop
<dfn>欢迎来到H.S Workshop</dfn> 欢迎来到H.S Workshop
<address>欢迎来到H.S Workshop</address> 欢迎来到H.S Workshop
你是否已经了解了呢，这些就是HTML实现字体特殊效果的标识，唯一特别的是，<address>可以不用插入<br>换行。至于<br>是什么，我想看了明天的排版标识我就可以了解了。
昨天我们已经认识了文字标识，为了让整个网页更清晰美观，我们就不可以少了排版标识，那么现在就要我们开始来认识他们吧。
现在比较讲知识产权，呵呵~我们就先来看看如何告诉别人这是你的产权好了，当然我们还可以用它来告诉你的工作伙伴，这段开始是什么，那就是
HTML和其他的程序语言一样，可以在代码中添加注释，来告诉别人这里开始写的是什么，当然这也是告诉自己，方便以后的管理，不过你放心，这只存在于你的原代码中，不会在浏览器中发生任何影响。
现在我们开始认识对段落控制的标识，<p>,<br>,<nobr>.
<p>
我们可以把他看做一个空行标识，既在网页中显示一段空白行，一般在DW或者FG等网页编辑工具中，回车即在HTML插入一个<

>，这也是一个空标记，他的常用参数是
align="#"(#=right, left, center)
分别表示左对齐，右对齐，居中。默认值为left.
实现一下下面的例子你就明白了:
<HTML>
<HEAD>
</HEAD>
<BODY>
H.S Wrokshop
<p>H.S Wrokshop
<p align="center"> H.S Wrokshop
<p align="right">H.S Workshop
</BODY>
</HTML>
[例3-1]
<br>,<nobr>
这两个标记分别表示换行和不换行，前者使网页中的元素直接在下一行，不插入空行，后者则表示不换行，对于一些必须在一行中显示的文字，对电话号码等等的显示比较有用。这里的<br>是个空标识,<nobr>是围堵标识.需要注意的是align=""在BR中没有的意义.
这时候我们就要通过一个另一个标识来实现对齐效果，<div>....</div>,当然这个标识有它更广泛的用途，在这里只简单的提一下其中的对齐参数运用。下面我们就来看一个简单的例子。
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV align="center">H.S Workshop
<br>H.S Workshop </DIV>
<br>H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop H.S Workshop <nobr>H.S Workshop</nobr>
<DIV align="right">H.S Workshop
<br>H.S Workshop </DIV>
</BODY>
</HTML>
[例3-2]
这样一来我们就可以实现对<br>的对齐效果了。
<left>,<center>,<right>
现在我们把align=""的三个值提出来，发现他们其实自身也是标识，它们可以对单个，单行文字进行围堵，实现他的效果，这样又多了一个途径实现<br>的对齐效果了，具体的就举例说明了，你可以自行尝试一下，注意，他们可是围堵标识哦。
<wbr>
这里把它从换行中分出来，是想大家于<br>对比一下，这是个建议折行的标识，当用户的分辨率无法完整的显示出一段文字的时候，你就可以插入这个标识,这时候就会发生于<br>同样的效果,如果达到了条件则没有效果产生，你可以自己尝试一下，它是一个空标识。接着我们来看看HTML两个在排版上非常使用的标识。
<pre>,<listing><xmp>
预格式化文本标识，他们允许你在HTML原文件里输入空白，并显示出和你在HTML编辑的一模一样的格式，区别就在<pre>显示出来的是设定好了的字体大小，<listing>显示小于设定的一号字体, 〈xmp>则在<pre>的基础上把html里的标识也显示出来。
<pre>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</pre>
<listing>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</listing>
<xmp>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</xmp>
大家可以自己看看三者的效果。
<hr>
今天的最后一个标识称为水平线。顾名思义，它实现插入一条水平线的效果。
<HR align="" size="" width="" color="" noshade>。
align=
设定线条置放位置，可选择：left；right；center 三种设定值。
size=
设定线条厚度，以像素作单位.
width=
设定线条长度，可以是绝对值（以像素作单位）或相对值，默认值为 100%。
color=
设定线条颜色，内定为黑色.
noshade
设定线条为平面显示，若删去则具阴影或立体，这是默认值。
通过这三天的学习，你是否可以运用已知的标识写出一个网页了呢？呵呵~这就开始尝试一下吧.
今天我们学习的只有一个标识，重点并不在这个标标识本身，而在于这个标识的参数设置，现在我们就来认识一下吧。
<img>
图形对于一个网页来说其占的位置尽次于文字所占的比重，我们同过这个标识在网页中加入一张图片做到图文并茂，它只是一个空连接，现在我们就来看看它的参数设定。
<img src="" width= height= hspace= vspace= border= align="" alt="" lowsrc="">
src=
首先我们必须向HTML中导入一张图片，这张图片的格式可以是jpg，gif或者png，同时我们还要注意导入图片的途径书写，当你要求导入的图片和显示此图的html在同一个文件夹下，我们就可以只写文件名即可，如则需要完整的途径表示。
width=,height=
设定图象显示的大小，以象素为单位，不过一般情况下为了保持页面的美观，我们使用真实的大小为佳，通过专业的图形编辑工具来编辑图形的大小。
border=
设定图象边框的大小，单位也是象素，它可以是任何数值，在现代网页编辑中通常取值为1。
hspace=,vspace=
设定图象边缘的空白数，hspace设定左右，vspace设定上下，这样可以确保其他元素与图片的距离。
align=（top, middle, bottom, left, right）默认值为 botom
这个参数昨天我们已经讲过，在这里我们我们需要注意的是它的作用是控制文字的位置，具体的运用我们就通过这下面的例子来看看好了.
alt=
在图片显示的位置插入一段文字，当图片还没有被读取或这浏览者使用的是文字游览器的时候，这段文字就会显示出来。
lowsrc=
同样在显示src所显示的图片之前先显示出一张图片，条件也是在src还没有被读取的时候，一般我们用于显示原图片的缩略图，使浏览者不会因为图片读取慢而失去浏览的兴趣。
表格在网页排版中所占的比重不用说相信大家也都知道，它把整个页面清晰的分成多个区域。专业的网页怎么可以少了对表格的操作呢~现在我们就来看看关于表格的标识。

首先我们必须建立一个表格，我们可以通过<table>着个围堵标识来实现，着个标识的作用就好象<html>告诉浏览器开始处理HTML文件一样，它告诉浏览器现在开始处理表格，其他所有的表格标识都必须写在<table>里面。
关于它的参数比较多，我们现在一个个来看它有什么作用。
<table width="" border="" cellspacing="" cellpadding="" align="" valign="" background="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="" cols="" rules="" frame="">
windth=
设定表格的宽度，一般来说在这层我们只需要指定一个表格的宽度就可以了。这个值可以是绝对的也可以是相对的。
border=
设定表格边框的厚度，当取值为0时或者不用这个参数的时候，表格就不在浏览器中显示出来，但表格中的元素仍然是按表格排列。
cellspacing=
表格线的厚度，为了和border=区别开来，我们看个例子
<table width="70" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table width="70" border="1" cellspacing="5">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
[例5-1]
比较一下这两个例子，我们就可以很清晰的看到两个例子的不同.
cellpadding=""
文字和格线之间的距离，使文字看起来更清晰。
align=""(left, right, center)
这个值在前面我们已经重复的介绍过了，这里是对表格的位置进行水平位置设定.
valign=""(top, middle, bottom)
这是对表格垂直位置的设定.
background=""
导入表格的背景图片。
bgcolor=""
设定表格的背景颜色。
bordercolor=""
设定表格的边框颜色。（注意，当设定border=为0时，这个值无效)
bordercolorlight=""
设定表格边框向光部分的颜色.
bordercolordark=""
设定表格边框背光部分的颜色.
cols=""
表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己.
frame=""(box,above,below,hsides,vsides,lhs,rhs,void)
显示边框，参数的含义依此是：显示所有边框，只显示上边框，只显示下边框，只显示上下边框，只显示左右边框，只显示左边框，只显示右边框，不显示任何边框.
rules=""(all,groups,rows,cols,none)
显示分隔线，参数的含义依此是：显示所有分隔线，只显示组与组之间的分隔线，只显示行与行之间的分隔线，只显示列与列之间的分隔线，不显示任何分隔线。
建立了一个表格区，接着我们就要把这个表格分开，那么就必须用到<tr></tr>这个标识，一般我们添加多少个<tr></tr>就表格就会分成多少行。一个表格的基本格式如下:
<table>
<tr>
<td>
</td>
</tr>
</table>
[例5-2]
现在我们就来看看<tr>的参数设定吧。
<tr align="" valign="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="">
align=""(left, right, center)
这就不多说了。水平位置的设定.
valign=""(top, middle, bottom)
垂直位置的设定琀?瑧?瑬;开嫞??????。
bgcolor=""
这一列的背景色。
bordercolor=""
这一列的边框颜色。
bordercolorlight=""
这一列的向光部分.
bordercolordark=""
这一列的背光部分.
有了列，就要开始设定单元格，可以说单元格就是一个表格的最小单位。我们用过<td></td>来实现.在<tr>下面写入多少个<td></td>就会在这一列中显示出多少个单元格。然后我们来看看对单元格有些什么参数可以设定吧。
<td width="" height="" colspan="" rowspan="" align="" valign="" bgcolor="" bordercolor="" bordercolorlight="" bordercolordark="" background="">
windth=""
通过相对值或绝对值设定这个单元格的宽.
height=""
通过相对值或绝对值设定这个单元格的高.
colspan=""
rowspan=""
这里我们看一个例子来说明一下好了.
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<tr>
<td>第一列第一栏</td>
<td colspan="2">第一列之第二栏及第三栏</td>
</tr>
<tr>
<td rowspan="2">第二列及第三列之第一栏</td>
<td>第二列第二栏</td>
<td>第二列第三栏</td>
</tr>
<tr>
<td>第三列第二栏</td>
<td>第三列第三栏</td>
</tr>
</table>
第一列第一栏第一列之第二栏及第三栏
第二列及第三列之第一栏第二列第二栏第二列第三栏
第三列第二栏第三列第三栏
　　　　　　　　　　　　　　　　　　　　　　　 [例5-3]
同过标识，我们看到这实际上是个三列三行的表格，如果只看第一行第一列是不是认为这是两行两列的呢。没错，colspan就是向右合并单元格，rowspan则是向下合并单元格.
align=""(left, right, center)
元素水平位置设定.
valign=""(top, middle, bottom)
元素垂直位置设定.
background=""
导入单元格的背景图片。
bgcolor=""
设定单元格的背景颜色。
bordercolor=""
设定单元格的边框颜色。（注意，当设定border=为0时，这个值无效)
bordercolorlight=""
设定单元格边框向光部分的颜色.
bordercolordark=""
设定单元格边框背光部分的颜色.
另一个单元格表示<th></th>，它同样也表示一个单元格，唯一不同的是<TH>所标示的储存格中的文字是以粗体出现，当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。用它取代<td>即可显示效果,关于它的参数和<td>一样，这里就不详细说明了.
今天最后一个标识<CAPTION>，它可以在表格上显示出一段没有格线的列。通常我们把他来给表格内容命题。关于它的参数有两个,分别是align和valigan,(left, right, center,top, middle, bottom)

<TABLE cellSpacing=边框宽度 width="网页宽度" background=第一层边框图片网址>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=1 borderColorDark=#0d1737 cellPadding=边框宽度 width="网页宽度" borderColorLight=#24387a background=第二层边框图片网址 border=1>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=边框宽度 width="网页宽度"background=第三层边框图片网址>
<TBODY>
<TR>
<TD>
<TABLE width="网页宽度" background=背景图片网址 border=0>
<TBODY>
<TR>
<TD>此处加入文章内容</TD> </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

标签的分析：

<table>：表格的起始符。任意一个表格的开始都必须以它开头，且必须有终止符</table>。

cellspacing：单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

width：表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比，如widht="100%"，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。

background：表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。

<tbody>：表体的起始符。紧跟在<table>之后，表示表体开始。必须有终止符<／tbody>，放在</table>之前。在纯网页中可以不要tbody元素，但在论坛一定要使用，因为，当帖子用到较多的表格时，论坛的自动填充功能将可能会导致代码出错。

<tr>：表示表格的行，其中，t是table，r是row（行）。有多少组tr，这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。

<td>：表示表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格就有多少列。<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

1：borderColorDark=#0d1737 暗边框，颜色为0d1737 当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

2：borderColorLight=#24387a 亮边框，颜色为24387a 当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

3：cellpadding：单元格衬距。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。

		自动登录	找回密码
密码			立即注册

HTML语言入门教程(一)

浏览过的版块