HTML语言是网页的源代码程序语言，我们平时看到的花花绿绿形形色色的网页，它并不是想象中的电影海报那样，将文字和图片简单拼接，像贴画一样就可以贴成的，而是通过HTML源程序来具体规定网页的排版方式、网页显示的内容。
HTML的全名是HyperText Markup Language，直译就是超文本标记语言。从这个名字上来讲，一、它是文本，它在网上就是以文本的方式传输的；二、它是一种标记性质的语言。这个深入之后就可以体会到所谓“标记”的真正含义。
在这里我只介绍基础的简单的HTML语言不详细展开，可以参考详细的书籍资料。
HTML编辑的方法很简单，正因为是文本，你可以用任何文本编辑工具来编写HTML源代码，比如最常用的就是WINDOWS的“记事本”。当然，在你保存的时候不能保存为单纯的文本文件，而要选择保存为“网页”，在“记事本”中你可以这样保存，选择“另存为”，保存类型为“任何文件”，文件名加上“.html”或者“.htm”的扩展名就行了，这两个扩展名表示文件类型为网页文件。
HTML是一种文本语言，所以，你所输入的文本信息，是会直接显示给大家看到的，而标记的部分，只是作为限定文本显示的方式而已，我们举个例子：
首先我们希望在网页上显示“欢迎”这两个字，那要怎么它才会显示呢？很简单，你直接在网页文件中写入“欢迎”，这两个字就会显示出来了，但是我们并不满足，我们希望这两个字能够显示的显眼一点，所以可以用一个加粗的标记：<b>欢迎</b>，再打开网页的时候我们发现欢迎已经显示为加粗了。我们用了一对<b>...</b>标签来限定了“欢迎”这两个字的显示方式——加粗，几乎所有的HTML标记都是这个样子，不同的标签其实就是对文本不同方式的限定而已，所以，到这里我想你能明白为什么把它叫做“标记语言”的原因了吧 。
加粗标签<b>...</b>只是我们最常用的也是最简单的一个标签而已，不同功能的标签，我们根据功能来分类：顶级标签、文本标签、图片媒体标签、表格排版标签、框架标签还有表单标签，不明白不要紧，我会一一介绍给大家的。
今天我们就来谈谈这顶级标签
顶级标签是用来说明文档的基本信息用的，主要包括这几个：<html>...</html>、<head>...</head>、<body>...</body>
1.<html>...</html>标签
作用：说明该文档是一个HTML网页文档
这个是最主要的标签，它表示其中的内容是HTML源代码，所以，其他的源代码、标签都位于这个标签以内。
2.<head>...</head>
作用：头部标签，这个标签用来存放文档的基本信息，仅仅作为说明用的，所以在网页中一般都不显示
3.<body>...</body>
作用：这个才是主题部分，是网页内容显示，所有网页中的主体内容均包含在这个标签以内。
仍然用我们刚才的那个例子，一个显示加粗的欢迎字样的网页，可以这样来编写：
程序代码： [ 复制代码 ] [ 运行代码 ]
<html>
<head>
</head>
<body>
<b>欢迎</b>
</body>
</html>
将它保存为“.htm”扩展名的文件，双击运行看看，效果就有了哦！其实网页就是这样的标签堆成的：）
可能大家注意到<head></head>这个头部标签没有包含任何内容，我们刚才说过这个是用来存放说明网页基本信息用的，如何存放呢，这个标签还有这么几个子标签可以使用，分别说明文档的信息：
1.<title>...</title>
网页的标题，它会显示在浏览器的标题栏上面，例如我们可以这样写：
<title>欢迎页面</title>
这几个字就会在标题栏上面显示出来了。
2.<link>
这个标签是没有结束标记的（</link>），这是怎么回事呢？因为这个标签只是引进外部的文件，它并不包含任何文本内容，我们来看一个例子：
程序代码： [ 复制代码 ] [ 运行代码 ]
<link rel=stylesheet href="style.css" type="text/css">
这个大概有点复杂了，我解释一下：标签中的内容叫做标签的属性，它是具体来说明标签包含的内容的，其中的内容不在网页上面显示，上面这一句的意思是从外部导入一个叫做style.css的文件（href表示的内容），它的文件类型是stylesheet（样式表，以后会知道的，rel表示的内容），类型为 CSS样式表（type表示的内容）。这里我们从外部导入了一个文件，并且可以在网页中使用这个导入的文件（这是后话了），导入过程中我们没有需要网页显示出任何文本的信息，所以自然就不用结束标签了，以后有几个标签也是没有结束标签的，比如换行标记“<br>”
3.<meta>
作用：原数据
这个标签用来说明文本的一些基本的数据资料，也是不在网页中显示出来的，所以，也没有结束标记。
举个例子：
程序代码： [ 复制代码 ] [ 运行代码 ]
<meta name="keywords" lang="en" content="web,page">
这里就说明了一个网页关键字，name表示这个标签的内容（可以任意设置只要自己看得懂表示什么意义就行了），lang表示语言（en是英语的意思）， content则是关键字的内容，有什么作用呢？这个是提供给搜索引擎查找数据用的，搜索引擎查找关键字的时候，首先就是扫描这个标签内容，所以，要是为了让搜索引擎更快的搜索到你的网页，这个设置就很重要拉～这只是一个应用而已，meta标签非常有用，以后具体遇到运用的地方再详细展开咯！
头部标记主要的子标签就这3个，注意运用的话将会启到很好的作用。
除了子标签以外，头部标签中还经常包括一些功能性的程序模块，比如JAVA SCRIPT代码段等等，这些运用都是十分常用的，以后会详细说明。
我们把今天所学的内容汇总起来编写成一个网页：
程序代码： [ 复制代码 ] [ 运行代码 ]
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css">
<meta name="keywords" lang="en" content="web,page">
</head>
<body>
<b>欢迎</b>
</body>
</html>
在上一讲中，我们提到的是HTML文档的主标签也叫顶级标签，以及头部标签<head>...</head>子标签的运用，这些部分一般都不在网页中显示出来，它的作用，主要是为了说明文档的一些概要性质的资料，一方面，可以给搜索引擎之类的查询系统能更快得搜集资料，另外一方面，也是告诉了浏览器一些初始的操作：比如<link>标签的外部导入文件功能。
我们正在要显示在网页中的内容，全部包含在<body>...</body>标签（网页主体标签）中，这个我们上一次其实也已经提到了，以后我们所要说到的那些标签，基本上都是用在主体之中也就是<body>标签里面。这些标签有许多，我们按照功能来对其进行分类，上一讲中已经提到，我们先来学习一下文本标签。
文本标签，顾名思义就是用来修饰文本用的，比如，文字的大小、颜色、样式、字体等等等等。
1.<p>...</p> 段落标签
可用属性：align
段落标签表示位于其中的文本，为一个段落，在显示的时候，会自动首行缩进字符，而且会与前一段和后一段文字空出一行来，以体现这段文字为一个独立的段落。
加入属性align，它的取值可以是：left、center、right，这个是对齐属性，可以让这段文字在网页中分别：左对齐、居中、右对齐，举个例子
程序代码： [ 复制代码到剪贴板 ]
<p align=center>这里是段落</p>
功能就是把“这里是段落”这几个文字归为一个段落，与前文和后文都空一行，而且，文字居中对齐。
注意：在这里你可以省略结束标签</p>，这是什么道理呢？因为后面又会有新的段落，当遇到新的段落或者其他文本的时候，系统也就自然会知道上一段落到这里也就结束了，所以自动会把上一个段落结束掉，但是，我们不鼓励这里的缺省标签！在国际网页规范中，是不允许有未封闭的标签的，因为这会给统计系统、其他文本识别系统带来处理的麻烦，作为一个网页设计师，严谨的工作态度也是十分必要的。
2.<pre>...</pre>预定义标签
属性：width
所谓预定义标签，就是让其中的文字能够按照你输入的方式显示出来。这句话可能你有点犯迷糊了，难道网页中的文本不是我怎么写就是怎么显示的吗？事实确实是这样，HTML网页文档在显示的时候，它只承认你输入的第一个空格符号，而其他的符号均会忽略，例如两个文字之间你一共打了5个空格符号，显示出来的时候却会发现只空了一格而已，而且，换行符（TAB键），回车符号等等一切超过一个空格长度的间隔符号都会被忽略为一个空格。这其中的道理其实也是有利有弊，空格符的忽略，可以给文本的后台程序处理带来方便，同时也会在制作的时候带来麻烦，但既然它这样规定我们也是没有办法改变的。如果你要想保持你输入的那些空格、换行之类的符号，那就用这个预定义标签把你想保留间隔符的文本给限定起来，它将不会忽略你所输入的空格和换行。
属性width是规定文本的最大宽度，如果不限定的话，网页显示时是不会自动换行而一直显示下去，除非遇到换行标签。
3.<q>...</q>引用标签
经常在论坛灌水的朋友我想对引用这个功能一定不会陌生，引用别人说的话和文字，引用的内容会被一个特殊的方框框起来并且提示引用，这里的引用标签就是这个作用，引用部分的文本会像<p>标签那样与前后的文字空行分隔，而且会在前面留白，以区别其他文字。
4.<hr> 水平线
很简单，加这个标签就是在网页中显示一条水平线而已，它没有结束标签，因为它不具有修饰文本的功能。
水平线的显示效果由一下属性来规定：
width 水平线宽度，值可以是正整数或者百分数，正整数表示单位为象素，百分比。。当然就是占当前行的百分比拉
size 水平线的高度，其实就是粗细，值取正整数，单位也是象素
align 对齐，取left/center/right，表示对齐方式
noshade 无阴影，水平线默认有一个阴影效果，如果输入这个值，就会取消而只显示一条平面的线
举个例子：
程序代码： [ 复制代码到剪贴板 ]
<hr size=2 width=100 noshade align=left>
就是一条左对齐，高度为2象素，长度为100象素并且没有阴影效果的直线（属性顺序可以任意写）。
5.<br>换行标签
这个非常常用了，很简单，就是在标签位置插入一个换行，前面我们说过，编辑文档的时候输入的换行是会被忽略为一个空格的，所以换行的部位你可以用换行标签来实现，当然你用<pre>标签也是可以的，不过换行标签更加常用更加方便，它没有任何属性也没有结束标签，理由我想可以不用说了吧
6.<center>...</center>居中标签
作用也非常简单也非常实用，可以让位于标签中的一切东东全部居中显示，也许你要问，那如果我在居中标签中使用了<p align=left>段落文字</p>，那“段落文字”是居中呢还是左对齐？呵呵，你只要记住HTML这个特性就行了：修饰标签修饰功能有重叠或者冲突时，总是以最靠近被修饰文本的标签或者说最后一次修饰的标签为准，所以，“段落文字”会左对齐。
7.<font>字体标签
这个标签非常实用，大部分文本的修饰工作都要靠它来完成。我们看看它可以使用的属性，就知道它可以怎么修饰文本了：
size 字体大小，可以取1、2、3、4、5、6、7，1最小7最大，还可以取+1,+2,+3,+4,+5,+6,+7,-1,-2,-3,-4,-5,-6这是相对大小，即在原来大小上做加减。
color 颜色，字体的颜色由这个属性来修饰，颜色必须使用网页通用的颜色代码，它由一个#符号开始，6位16进制数字组成，比如#ff0000代表红色，这个代码可以对照颜色表来决定。你也可以输入一些预设好的颜色如：red（红色）、green（绿色）等等，不过不是你认为对的颜色英文单词都可以用，你可以自己试试看。
face 字体，多种字体可以用半角的“,”隔开，比如：“宋体,楷体,黑体”，第一个首选，如果浏览者没有第一种字体就尝试第二个，依此类推。
字体标签的运用：
程序代码： [ 复制代码到剪贴板 ]
<font color="#ff0000" size=3 face="宋体,楷体,黑体">被修饰的文字</font>
表示大小为3号，红色，首选为宋体的文字。
8.特殊修饰字体标签，这几个标签都是没有属性，而且非常简单只实现单一修饰功能的标签，如下：
<b>...</b> 加粗字体
<i>...</i> 斜体字
<u>...</u> 加下划线
<sup>...</sup> 上标
<sub>...</sub> 下标
<s>...</s> 加删除线
<em>...</em> 斜体，跟<i>标签功能相同
<strong>...</strong> 加粗
<code>...</code> 代码，会以特殊的字体显示，可以自己试试看了
以上分成了两组，第二组还有其他的标签，但是运用的比较少，第一组是修饰标签，第二组则是归类为强调性文字用的标签。
9.<a>...</a> 链接标签
这个用处非常大，就是给文本加上超链接信息（以后我们讲了图片之后，你会发现也可以给图片加链接），可以说网页的浏览功能就是靠这个标签的完成的！看它的属性：
href 链接地址URL，就是链接的地址，可以是相对的地址也可以是绝对地址
target 目标位置，就是打开链接的位置，可以取_self（在当前窗口打开新链接）、_blank（在新窗口打开）、name（在指定窗口名字的窗口打开），还有一些其他的取值等我们提到框架的时候在具体说明。
举个例子：
程序代码： [ 复制代码到剪贴板 ]
<a href="
http://thefeeling.rknw.com"& ... quot;_self">虫子的博客</a>
这就给“虫子的博客”加上了链接，点击这个链接的时候会在当前窗口打开我的博客网页：）
文本标签主要说的就这些，这些也是最常用到的，在下一次，我们讲述的是图片媒体标签与排版标签，进一步美化我们的网页咯！好，我们把今天所讲的东西做在一个页面里：
程序代码： [ 复制代码到剪贴板 ]
<html>
<head>
<title>HTML学习</title>
</head>
<body>
<font size=6 color=green>HTML 的学习</font>
<hr size=1 width=100% ailgn=left>
<p align=left><b>今天我们学习了文本标签</b></p>
这篇文章出自<a href="
http://thefeeling.rknw.com" target=_self>未名虫子的博客</a>
</body>
</html>
请注意：当我们需要多个显示效果的时候，我们的标签是可以互相套用起来的，但是要注意，就像括号一样标签必须成对出现，并且一一相对应好，不然，会出现意外的显示效果出来！
在网络中，我们常用的地址有绝对地址与URL，所谓绝对地址，就是物理地址，也就是我们电脑上最常用来表示文件地址，格式一般是这样：“盘符:\文件夹\文件”，实际在网络上的运用要比URL要少得多，很多情况是在后台程序中运用，比如ASP中常用的数据库连接，数据库所在位置必须使用绝对地址也就是物理地址才能够完成读取、写入操作，这些内容等与大家聊到后台程序设计的时候再细细地说吧。
URL是我要说的一个比较重要的概念，英文全名是： Uniform Resource Locator（统一资源定位器），是文档在Web或者Internet上的地址，一般用在超级链接当中。尽管URL 看起来可能很长很复杂，但它总是由四个部分构成：协议、主机名、文件夹名（路径）和文件名，各有各的特定功能。
下面是一个标准的URL：
程序代码： [ 复制代码到剪贴板 ]
http://thefeeling.rknw.com/music/musiclist.html其中，http://是协议，thefeeling.rknw.com是主机名，/music是文件夹名，musiclist.html是文件名。
协议
协议用于指定计算机传输信息时所用的语言，具体来说，协议告诉浏览器信息在什么地方（例如在Web服务器、FTP服务器或者本地硬盘等等），并且告诉浏览器取得文件的过程（例如是否需要登陆、服务器提供哪些信息等）。
下面是常用的几个协议：
http:// 用于Web文档，包括HTML文档及相关链接，最常用。
file:/// 用于本地硬盘上的文档，第三个“/”表示主机名，所以可以直接输入文件夹名和文件名。
ftp:// 用于FTP服务器上的文档。
gopher:// 用于gopher服务器上的文档。
telnet:// 用于与特定主机的telnet链接，一般用于链接图书馆书目，但这个协议是不确定的，因为不知道访问者端是否安装或者设置了telnet应用程序。
wais:// 用于链接wais数据库，很少用到。
mailto: 用于提供一个窗口，让访问者向指定e-mail地址发送消息。大多数浏览器都支持mailto:，但是它还不是标准或者正是接受的协议。这个协议不带//。
news: 用于连接新闻组或者组中的特定文章，但这是不保险的，因为我们无法知道浏览者要访问哪一个新闻组。
主机名
主机名是保存HTML文档和相关文件的服务器名。每一个服务器都有特定的地址，该服务器上所有的文档都有相同的主机名。
作为信息的提供者，不一定非用服务器名作为URL的主机名部分。我们可以使用虚拟域名，用自己的主机名，但文件仍然存在别的主机上。
文件夹名
文件夹名使URL中的下一段信息，表示文件所在的文件夹。文件夹在Web服务器上的作用与PC机上相同，就是用于组织文档。如果把文件放在最高层，则可以不要文件夹名。为了管理和维护的方便，一般都是把相关的文件放在相关的文件夹里的。这是文件管理和网页制作的一个好习惯。
文件夹命名时，它只能以下列字符：
1。字母（大写，小写）
2。数字
3。符号，包括美元（$），连字符（-），下划线（_），点号（.）
如果文件夹名含有其他字符，就要采用这些字符的十六进制表示。例如，有些操作系统在文件夹名中支持空格，为了在URL中放进空格，就需要采用与空格对应的十六进制表示符20%。一般来说，最好不要使用特殊符号给文件夹命名。
文件名
文件名时具体HTML文档或者其他文件的名称，具体包括两个信息：文件的名称和文件的扩展名。在提供文件名时，者两个信息都不能有错误，否则就会报告找不到这个文件。
在Web服务器上，指定URL中的主机名或者文件夹名而不指定文件名时，可以取得某个缺省的文件。比如我们在浏览器中只需要输入主机名：www.sina.com.cn，而不输入文件名就能显示页面，原因是Web服务器根目录下有一个缺省文件index.htm存在。
URL的类型
URL随链接文档的位置不同而不同。例如：如果文件在www上，URL就比较长，有比较多的信息：如果文件在本地硬盘上，那么就可以比较短了。
URL大致可以分成：
绝对URL
相对URL
绝对URL几乎包含了URL的全部信息，包括协议、主机名、文件夹名和文件名。如果其中的任何一个部分出错，那么都会找不到相应的文件。
相对URL通常只包含文件夹名和文件名，如果就在当前文件夹下，那么连文件夹名都不需要。此时，浏览器假设链接的目标文档和原文档在同一个文件夹中或者同一个服务器中，所以不需要协议和主机名。相对URL的使用跟Unix和Dos中的目录进出很相似。比如“../”表示上一级目录，“./”表示当前目录， “/”表示根目录。
举个例子：
程序代码： [ 复制代码到剪贴板 ]
../../hello.htm
表示链接到当前文件所在位置的上一级的上一级文件夹中的hello.htm文件的URL。
程序代码： [ 复制代码到剪贴板 ]
/index.htm
表示链接到当前服务器下根目录中的index.htm文件的URL。
在做叶子时，对于同一服务器下的页面，一般鼓励使用相对URL，这与访问链接的速度很有关系，如果你使用的时绝对地址，那么服务器在进行寻址操作时，会按照绝对URL的支持重复一次寻址操作，如果用了相对URL，那么服务器在寻址时就直接从当前文件所在文件夹开始进行，速度上有明显的优势，一般情况下除非没有办法，尽量使用相对URL。
首先说说图片标记，从前几次我们也了解到，网页其实就是用HTML语言写的特殊类型文本文件，而不是如同WORD那样的软件，文字和图片可以以“块”的方式进行任意编排，用一个白背景，然后所有的块可以任意往上面贴的，任意变换他们的位置的，一切，都必须用HTML设定好的标记来添加进去。因此，插入图片也是使用特定标签——图片标签来插入的，至于图文混排的具体方法，这个接下来说网页排版问题的时候再详细展开。
HTML文档，属于纯文档，因此用简单的记事本就可以打开编辑，我们不可能用WORD中的“插入图片”命令来简单把图片放进去，我们要用到的标记是：<img>
<img>标记相比其他的标签来说稍微复杂一点，我先用个例子来说明：
程序代码： [ 复制代码到剪贴板 ]
<img src="tupian.jpg" align=absmiddle alt="这里是图片" width=120 height=120>
什么意思呢？其实就是指，在这个标签的位置插入一张图片，图片的来源是src中的内容即tupian.jpg，width/height这个我想不用我解释大家也能明白，这个分别是图片的宽度和高度，align这个属性似曾相识，我们在<p>段落标记中也用到过，它代表的是“对齐方式”，这里也是用样的道理，也是表示图片的对齐方式，但是稍稍不同的是，图片的对齐方式指的是与四周文字的对齐方式，我们可以取的值有： top middle bottom abstop absmiddle absbottom等，常用的就这几个，什么意思呢？top即顶对齐，其实就是图片的上缘与文字的顶部对齐，middle当然就是文字对齐到图片的中间，而bottom则是文字对齐到图片的下缘。很显然一般图片的高度是肯定要超过文字的，所以这个对齐方式决定了它周围一行文字的位置关系，abs是“绝对”的意思，是以文字所在行的对齐方式，与“非绝对”有什么不同呢？这个在说道网页排版的时候，就清楚了。此外，align还可以取left（左对齐），这种对齐方式，文字将环绕图片分布，具体效果是什么样大家可以自己操作试试看。记住是图文混排的时候才起作用的。alt属性是对图片的说明，不在网页上直接显示，当由于某种原因图片文件没有找到的时候，说明文字则会被显示出来，这很重要，由于网络速度的问题，图片并不一定能完全导入，或者导入失败，那么，必要的文字说明是很需要的，浏览者需要知道这个位置原来是要放什么东西。
从这个例子我们看到，HTML插入图片的时候，并不是直接把一张图片放进去，而是用了一种间接的方式，做了一个标记（即<img>标签），告诉浏览器从哪里下载这一张图片（即src属性指定的地址），然后以多少宽度高度显示，如何与周围文字对齐，在找不到图片的时候如何显示，这样HTML就把原本是图片的文件简单的用一行语句给代替了，当浏览者打开这个网页的时候，在从标签中指定的位置取读取图片文件并以指定的方式显示出来。以后你会发现 HTML除了图片，其他例如声音、动画等等之类的媒体插入的时候都是利用这种方式。
总结一下图片标签的运用：
标签：<img> （没有结束标签）
可用属性：
src 图片的来源，值为URL（上次我们已经详细讨论过了），相对和绝对URL都可以，当然，尽量用相对URL
width 图片宽度，值为正整数，可以取0（取0图片就没了。。。也没多大意义），单位是象素
height 图片高度，用法同width
align 与周围文字对齐方法，取值：top（顶部对齐）、middle（中间）、bottom（底部）、absmiddle（绝对中间）、absbottom（绝对底部）、baseline（基线对齐）、left（左对齐）、right（右对齐）
alt 文字说明，当图片不能显示时，会在原来图片位置显示说明文字，当鼠标移动到图片上方并停留时，也会显示出来
border 图片的边线，取值为整数，表示图片边线的宽度，0时没有边线
hspace、vspace 图片与周围文本的距离，值为整数
如何给图片做链接呢，上回我们说到<a>标记的时候，我提到<a>标记不仅可以给文字加链接，也可以给图片加链接，所以，只要把图片标记放到<a>...</a>之间就实现链接了，举例如下：
程序代码： [ 复制代码到剪贴板 ]
<a href="
http://thefeeling.rknw.com" target="_self"><img& ... nbsp;width=88 height=31 alt="虫子的BLOG" border=0></a>
这个例子，其实就是我的BLOG的图片链接：）
网页中除了文本之外有了图片，就变得丰富多彩了，但是，图文混排就成了问题，我们不能随便让一个图片插入到文本之间，虽然图片标记中的align属性能提供简单的对齐关系，但是这样版面还是比较混乱，所以，必须需要一个框框架架的东西，来编排好网页的格局，就像书架一样，先得有个架子，然后往上面放东西就会比较整齐、条理，网页中的编排方式，大致可以分成一下三种：表格布局、框架布局和CSS+DIV布局方法，我们这里要讨论的，主要是表格布局，框架布局略微说明（其实是比较简单的），CSS+DIV布局方式是目前最标准的布局方法，需要很深的CSS基础，所以，暂时只作为介绍。
关于表格布局，今天的篇幅有限，所以放到下一次专门来讨论这个表格布局方法。
框架布局，就是把原本是一个页面的网页，分成块，然后在每一个块中分别导入一个页面，以此拼成一个整体的页面。框架的页面，需要以下两个部分：一就是架子，二就是架子里放的东西。首先我们要搭一个网页的架子出来，单独保存为一个页面，这个页面包括了网页的基本框架结构和框架中导入页面的地址。
框架的主标记：<frameset>...</frameset>
属性：
rows 多重框架高度
cols 多重框架宽度
这个标记是用来切分页面用的，比如：
程序代码： [ 复制代码到剪贴板 ]
<framset rows="80,*">
将页面分成了两个部分，即上部和下部，上部高度占80象素，下部则是占剩下的高度（用*来表示余下的部分），另外这个80可以写成百分数，这样就以百分比来切分页面。这个标签，就是框架的架子
除了上述两个切分页面的属性外还有：
frameborder 是否显示框架分隔线，取值为yes、no
framespace 框架内部留白，即框架内容与分隔线之间的距离
bordercolor 分隔线的颜色
框架单元标签：<frame>
没有结束标记
属性：
name 这个框架单元的名字
src 框架内容的来源
frameborder 是否显示框架分隔线，取值为yes、no
marginwidth 框架内留白的宽度
marginheight 框架内留白的高度
scrolling 框架内容超过内容大小的时候是否显示滚动条，可以取auto（自动，超过就显示不超过则不显示，这个是默认值）、yes（总是有滚动条）、no（没有滚动条，这样超过的部分就显示不出来了）
这个标签的作用，就是用来代表框架中的具体内容了。下面我们来看一个具体的例子：
程序代码： [ 复制代码到剪贴板 ]
<html>
<head>
<title>框架实例</title>
</head>
<frameset rows="80,*" frameborder="no" border=0 framespacing=0>
<frame src="top.htm" scrolling="no" name="top">
<frame src="content.htm" scrolling="auto" name="content">
</frameset>
</html>
这个框架页面，把网页分成了上下两个部分，上部占80象素高，下部占余下的部分，上部导入top.htm这个页面为内容，下部导入content.htm这个页面作为内容，也就是说这个页面其实是由两个页面拼接而成的。
为什么我们要设置name这个属性呢？假如我们在top.htm这个叶子里有这样的一个链接：
程序代码： [ 复制代码到剪贴板 ]
<a href="myfavorite.htm" target="content">我的爱好</a>
当我们点击这个“我的爱好”的链接，就会打开myfavorite.htm这个页面，在哪里打开？对了，注意到target属性没有用我们上次说的那些值： _self、_blank，而是用了下部的那个框架content的名字，就是在命名为content的框架中打开这个页面，这样，就实现了网页中部分内容的切换而不切换整个页面，就像电视的画中画功能一样，通过上部框架页面的链接控制下部框架显示的内容，反过来也可以用下面的链接控制上部框架的内容，这个只是跟target的取值有关而已，这样我们也就体会到框架的好处了
我们修改一下上面的那个框架页面：
程序代码： [ 复制代码到剪贴板 ]
<html>
<head>
<title>框架实例</title>
</head>
<frameset rows="80,*" frameborder="no" border=0 framespacing=0>
<frame src="top.htm" scrolling="no" name="top">
<frameset cols="10%,*" frameborder="no" border=0 framespacing=0>
<frame src="left.htm" scrolling="no" name="left">
<frame src="content.htm" scrolling="auto" name="content">
</frameset>
</frameset>
</html>
这段代码，我们对下部的框架进行了再分割，分成左边占10％、右边占剩下的空间两个部分，左边导入left.htm页面作为内容，右边则是导入content.htm作为内容。
类似的，我们可以对框架再细细分隔，但是，随着分隔数量增多，网页被分成了许多块，每一块必须导入一个页面作为内容，这样，对网页的更新、修改是非常麻烦的一件事情，所以，框架的布局是十分有限的，复杂的页面，我们最好还是采用表格布局或者CSS+DIV布局。
CSS +DIV布局的思想，有点类似WORD的排版，也就是把文字图片等等网页的内容分成许多块，然后，用坐标值来定位每一个块的位置，这样就实现了类似于 WORD的排版方式，所谓的DIV其实就是块的意思，而CSS在布局时发挥的作用就是用坐标来详细定义这些块的位置，以此可见，只要我们改动CSS中关于坐标的定位值，我们就可以轻松改变网页中块的位置，网页的整体布局也就会完全被改变！这种布局方式是目前的潮流所趋，但是需要比较搞的HTML+CSS编辑能力，真正排版起来，也并不是向我现在说的那么轻松的。但是，它比表格布局方式运行更快、更方便搜索引擎之类的查询媒体搜索，所以潜力很大，而表格布局的简单实用也有它的优势，也有其生命力，不需要熟悉CSS就可以实现网页的编排，所以下一次，我们详细来讨论如何用表格来对网页进行布局。
今天讲的差不多是HTML基础的最后一讲，也是最关键的表格布局。
先不说布局，来说说怎么在网页上画出一张表格来。HTML是纯文本的一种网页语言，所以，网页中的表格也必须转化成标签代码的格式，我们用<table>....< /table>代表一个表格，用<tr>...</tr>来表示表格中的一行，用<td>...< /td>来表示表格中的一格。具体来看下面一个例子：
程序代码： [ 复制代码到剪贴板 ]
<table>
<tr><td>第一行第一格</td><td>第二格</td><td>第三格</td></tr>
<tr><td>第二行第一格</td><td>第二格</td><td>第三格</td></tr>
</table>
上述例子是画了一个2×3的表格，即有两行，三列。这样，HTML就把这个表格转化成了代码表示，我们现在具体看看这些标签的运用：
1.<table>...</table>
表格标记，代表其中是一个表格
可用的属性：
width 表格宽度，可以取整数或者百分比数，如果为百分比数，则表示占网页总宽度的百分比，如果表格嵌套在其他表格的某个单元格中，则表示占这个单元格宽度的百分比。
height 表格高度，取值与宽度相同
border 表格边线宽度，取整数，取0即不显示边线
background 背景图片，取值为URL
bgcolor 背景颜色
align 对齐方式，与<p>的align对齐方式完全相同
cellpadding 单元格填充距离，就是单元格中的内容与边线之间的距离，取整数
cellspacing 单元格间距，取整数
2.<tr>...</tr>
表示表格的一行，只能用在<table>标签内部
属性：
align 该行中内容的水平对齐方式，取值：left（左对齐）、center（居中）、right（右对齐）
valign 该行中内容的垂直对齐方式，取值：top（顶端）、middle（中间）、bottom（底部对齐）
bgcolor 该行背景颜色
3.<td>...</td>
表示一个单元格，只能用在<tr>标签内部
属性：
width、height 单元格宽度和高度，取值和<table>中相同
bgcolor 单元格的背景颜色
background 单元格背景，取值为图片的URL
align、valign 单元格对齐方式，与<tr>标签中用法相同
colspan 该单元格占用多少格列数
rowspan 该单元格占用多少格行数
下面我们举一个稍微复杂一点的表格例子：
程序代码： [ 复制代码到剪贴板 ]
<table width=500 height=400 cellpadding=0 cellspacing=0 bgcolor="#cccccc" border=1>
<tr>
<td align=center width=20%>第一行第一格</td>
<td align=center width=30%>第一行第二格</td>
<td align=center valign=middle width=50%>第一行第三格</td>
</tr>
<tr>
<td colspan=2 align=center>第二行第一格</td>
<td align=center>第二行第二格</td>
</tr>
</table>
画出来表格大致是这个样子：
┌──┬─────┬─────────┐
├──┴─────┼─────────┤
└────────┴─────────┘
在例子中，第一行的每一个单元格的宽度我都做了限定，而第二行我则没有做限定，第二行的单元格会自动与上一个单元格对应对齐，也就是和该列上一个单元格的宽度相等，如果想要不相等怎么办？对不起没有办法。。。HTML的表格自动对齐方式有利有弊，如果同一列上下两个单元格宽度不等时，一个方法就是用 colspan来合并几个单元格成为一格，这样这个单元格的宽度就增加了，但是这样这个单元格的宽度就等于上一列所合并的单元格宽度之和，还是不能随意的改动，唯一的解决办法是：在需要重新拆分成不同宽度的这个单元格中再插入一个表格，用新的表格来限定宽度！不同表格之间宽度是互相不影响的，这也是表格排版的一个重要思想！例如上一个表格中我们需要在第二行的第二格重新分成左右两格，宽度与上一行不等：
程序代码： [ 复制代码到剪贴板 ]
<table width=500 height=400 cellpadding=0 cellspacing=0 bgcolor="#cccccc" border=1>
<tr>
<td align=center width=20%>第一行第一格</td>
<td align=center width=30%>第一行第二格</td>
<td align=center valign=middle width=50%>第一行第三格</td>
</tr>
<tr>
<td colspan=2 align=center>第二行第一格</td>
<td align=center>
<table width=100% height=100% cellpadding=0 cellspacing=0 border=1>
<tr>
<td width=50% align=center>左边的表格</td>
<td width=50% align=center>右边的表格</td>
</tr>
</table>
</td>
</tr>
</table>
表格的多重嵌套，就可以使表格的排版越来越复杂，但是，请注意表格嵌套层次越多，网页导入的速度也就越慢，所以，合理嵌套并划分表格以尽量减少对导入速度的影响，这是一个好的网页设计师必须考虑的问题。
表格的画法，我们就介绍这么多了，下面我们就来谈谈如何用表格来布局。
其实非常简单，我们可以先用表格来画一个网页的整体框架结构，然后，把表格的边线设置为0（即border=0）隐去所有的边线，就可以实现网页的布局了，除去边线之后只有表格中的内容会被显示，框架结构是不会显示出来的，这就是我们说的表格布局，熟练了表格的制作以后其实这是非常简单的。
这里，表格布局的观念我要给大家说几个注意点，首先，一个网页不要用一个表格来布局，网页显示时，是一个表格导入完了然后全部显示出来的，所以整个网页如果只有一个表格的话，那么，只有等整个表格内容导入之后才会被显示出来，所以，如果网速比较慢的浏览者，那他将面对比较长的时间是一个空白的页面，而我们的期望是导入一部分就显示一部分，避免消磨浏览者的耐心，所以表格布局要拆分成若干个表格来分担，如何拆分这就是个人习惯问题了，需要一段时间的实践，慢慢就会有自己的套路。
另外，将表格布局与框架布局合理结合，可以使网页在浏览操作的时候更加方便，比如网页的导航栏与内容部分分成两个框架，点击导航栏链接时更换内容部分的显示而不更换导航栏的内容，导航栏和内容部分又可以使用表格来布局，浏览这样一个布局格式的页面将会是一件很方便的事情
HTML 语言是动态网页设计最基本的内容，也是必须要熟悉的基础，ASP等等其他后台程序的设计都是基于HTML的基础之上的。但是，这里讲HTML语言，目的并非是要大家用HTML来编写网页的源代码，但可以作为修改网页源代码的基础，网页细节部分的内容还是必须通过对HTML源代码直接修改来完成的。不过用记事本来编辑网页是锻炼基本功的一个非常好的途径，其实我本人学习网页制作，一开始接触的也是HTML而不是诸如FRONTPAGE、DW之类的软件， FEELING DESIGN最初版本，就是我完全使用记事本写出来的，当然这样做的效率比起用软件来要低得多，但是亲手写出来的网页源代码，结构清晰，层次明确，没有冗余的代码，这也是软件所不能及的，大家用什么方法来学HTML，可以自己把握衡量，如果你想向着网络程序员的方向发展，那么鼓励使用记事本或者其他纯文本编辑器来写网页文件！
本次要说的，如何丰富和美化网页的内容，其实也是一些纯理论的东西，多实践是最好的锻炼方法。
1.给网页加入图片。
图片对于一个网站来说是一把双刃剑，加入图片，给网页的导入带来了负荷压力，图片的文件大小往往比一个网页（xxx.htm文件）大得多，这会减慢导入网页的速度，然而图片对于网站的美化来说不可缺少的。随着现代网络硬件的发展，网速也提高得非常快，可以说图片导入的速度问题，以不像原来那样占据主要地位了，但是一个好的网站，导入速度与美化必须都要慎重考虑！
理论上说，比起密密麻麻的文字，直观的图片是浏览者更加愿意看的，所以，给网页加上必要的图片，为了加快导入的速度，图片尽量使用网页通用的图片格式例如：GIF JPG等，而不要使用未经压缩的BMP PNG等，在不影响浏览效果的前提下，尽量压缩图片，能用HTML代替的地方尽量不要使用图片。
2.给网页加入背景
方法：<body>标签的属性：background、bgcolor
<body>标签的两个属性，background可以定义背景图片，bgcolor则定义背景的颜色，例如：
程序代码： [ 复制代码到剪贴板 ]
<body background="bg.gif" bgcolor="#eeeeee">
背景图片会自动重复铺满整个页面，当这两个值都设置时，将显示图片而不显示背景颜色，两个都定义的好处就是，如果背景图片由于某些问题没有导入成功，那么就不会显示而显示出背景颜色。
3.给网页加入背景音乐
方法：<bgsound>标签
程序代码： [ 复制代码到剪贴板 ]
<bgsound src="URL" loop=number>
src属性代表音乐来源URL，loop属性表示音乐重复的次数，如果想让音乐无限循环，取-1。注意，请慎重使用背景音乐，一方面会影响页面的导入速度（音乐文件一般比图片还要大），另一方面，比较正式的网站需要比较严肃的气氛或者浏览者并不希望听到什么声音。
4.给网页加入视频文件
方法：<embed>...</embed>标签
程序代码： [ 复制代码到剪贴板 ]
<embed src="tv.wmv" width=500 height=400 autostart="yes"></embed>
src属性表示视频文件的来源URL
width、height 表示视频的宽度和高度
autostart 表示是否在网页导入后自动播放，取值为yes、no
这个标签不仅可以加入视频，音频也可以加入
5.给网页加入FLASH
方法：<embed>...</embed>标记
用法和插入视频相同，此外还可以用<object>...</object>（其实这个更加常用一点），属性比较复杂，用法见下：
程序代码： [ 复制代码到剪贴板 ]
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/sho ... h/swflash.cab#version=4,2,0" width="300" height="300" vspace=0 hspace=0 border=0>
<param name=flash value="flash.swf">
<param name="scale" value="noborder">
</object>
< object>标签是插入媒体的标签，<param>是它的子标签，用来设定用<object>插入媒体的一些参数。 <object>标签中的classid属性，后面跟着一大堆代码，我们不用去管他，它是代表FLASH播放插件的，codebase代表 flash播放插件的位置，也就是说如果浏览者的浏览器上没有安装FLASH播放器的话，就会从这个位置下载播放插件以播放媒体文件。 width/height/vspace/hspace 这几个属性我想不用我多介绍了吧：）
<param>是< object>专用的子标签，它只能位于<object>标签内部，用来设定播放插件的参数值，第一个参数值就是代表FLASH文件的地址URL，第二个参数是设定FLASH播放器没有边线显示，参数根据object标签插入媒体的不同而不同，所以属性是比较复杂的，这里我不详细展开，大家可以参考HTML相关的书籍。
6.内部框架
方法：<iframe>...</iframe>
属性：
src 内部框架的内容来源URL
width、height 框架宽度 高度
marginwidth、marginheight 框架内部内容留白
frameborder 框架边线的宽度，取值为整数
例如：
程序代码： [ 复制代码到剪贴板 ]
<iframe src="window.htm" width=300 height=200 marginwidth=0 marginheight=0 frameborder=1>无法显示框架</iframe>
iframe 的功能，是插入一个内部框架，就像打开了一个窗口，窗口内导入了另外一个网页，合理利用这个标签将给页面的布局带来不少方便，< iframe>...</iframe>标签内的文本，是当浏览器不能支持框架时所显示的内容（目前浏览器的版本基本都支持）
7.加入动态的文字
方法：<marquee>...</marquee>标签
属性：
direction 滚动方向，取值：left（从右到左）、right（从左到右）、up（从下到上）、down（从上到下）
behavior 滚动方式，取值：scroll（无限次反复滚动），slide（滑入，就是只滚动一次），alternate（来回振荡）
loop 循环次数，默认无限次
scrollamount 运动速度，取正整数，默认是6
scrolldelay 运动停顿，取正整数，默认是0，也就是没有停顿，如果这个值不为0则在滚动中就会出现停顿现象
align 滚动部分的垂直对齐方式，取值：top middle bottom，默认是middle
bgcolor 滚动部分的背景颜色
height 滚动部分的高度
width 滚动部分的宽度
hspace 内部内容留白
一个例子：
程序代码： [ 复制代码到剪贴板 ]
<marquee behavior="scroll" direction="up" width=100 height=200 scrollamount=2 scrolldelay=60>
<p>这里是滚动的文字
<p><img src="image.jpg" alt="图片也可以滚动" width=50 height=120 border=0>
<marquee>
8.加入脚本
方法：<script>...</script>标签
可以加入用其他语言编写的脚本文件，例如最常见的Javascript脚本等等，可以帮助网页实现一定的特效功能，这些脚本在网上有很多，他们属于外部代码不包括在HTML语言中，我这里也不详细讨论了。
属性：
language 脚本使用的语言
src 外部脚本文件导入地址，有些网页为了方便将嵌入的脚本程序单独保存为一个文件，然后用这个属性来导入，这样脚本可以被多个网页使用而减少重复写脚本代码的时间。
内部脚本使用的例子：
程序代码： [ 复制代码到剪贴板 ]
<script language="Javascript">
<!--
alert("脚本被执行了！");
-->
</script>
运行时会弹出一个警告窗口，并告诉浏览者“脚本被执行了！”，这个弹出警告窗口的功能就是javascript脚本来实现的，<!-- -- >这是什么意思呢？这是HTML中使用的注释语句，包括在其中的文本不会显示在网页上，而保存在源代码中，当JAVASCRIPT源代码编写有问题时有时会把源代码当作普通文本显示到网页上，这不是我们想看到的，因为会严重影响网页的内部文本显示，影响美观，用这个注释标签可以保证内部的文字不会被显示，另外，写过程序的朋友也知道，在程序中加入注释可以增加程序的可读性，虽然它并不在网页的显示中体现什么功能或者说是效果，但是给编程人员修改网页，查看代码的时候带来了很大的便利，网页比较复杂，程序比较长的时候必要的地方（如果功能模块等）加入注释是编程的一个好习惯
外部导入脚本文件的例子：
程序代码： [ 复制代码到剪贴板 ]
<script language="Javascript" src="javascript.js">...</script>
这段代码从外部导入了一个叫做javascript.js的脚本文档，功能上，与脚本文档中的程序代码直接写到HTML网页里是完全相同的，好处就是一来多个网页可以导入这同一个文档避免重复写代码，二来修改这个脚本文档，所有导入了这个脚本文档的网页功能也随之会改变，修改起来就减轻了工作量，三来，网页的结构也更加清晰简单，给网页的修改编辑带来了方便。
HTML的内容到此全部结束，还有一个重要的层<div>标签没有讲，是因为它在CSS中才发挥了强大的作用，所以当我们说到CSS的时候再详细给大家说明。
另:
格式预设：<pre>内容</pre>
这是非常有用的一个标签，它可以使得最终显示效果以原始格式实现。请看以下代码和效果：
代码：
<pre>
1236
-1207
--------
29
</pre>
效果：
1236
-1207
--------
29
论坛里，有时我们需要精确地对齐某些元素，pre标签能够帮上大忙，它能令效果比在“设计”模式下用空格符移动显示符号更准确。
posted on 2006-03-29 01:33
行 阅读(7230)
评论(5) 编辑 收藏