HTML文件大致结构:
HTML文件是一种纯文本格式的文件，我们可以直接用写字板来打开。
一个HTML文件大体分为以下几部分：
<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
网页的内容
</BODY>
</HTML>
<HTML>表示这是一个HTML文件，呵呵，就象我们写文章一样，给你留出空白的页面，让你把内容放在这里，并且规定你只能写“HTML类型”的文章哟，我们就将<HTML>...</HTML>比如文章页面边框吧！
开始写文章啦！文章有题头部分，题头里包括标题等，标题下是正文，正文里可能有什么段落、图片、表格等等内容，好，HTML里面也有这些东西：
<HEAD>...</HEAD>：表示这是文章的题头部分
<TITLE>...</TITLE> ： 文章的标题
<BODY>....<BODY> 文章的正文部分就在这里面咯
怎么样，有了个大体的印象吧，HTML就是通过这些标记， 将我们所要表示的内容用HTML规定的标记“框起来”，并不是我们所想象的比较复杂的程序语言。不过呢，你需要记一些标记哟，虽然现在已经有了很好的编写HTML文件的工具，但懂得HTML语言对你深入掌握网页技术是很有好处的。
基 本 标 签
<html></html> 创建一个HTML文档
<head></head> 设置文档标题以及其他不在WEB网页上显示的信息
<body></body> 设置文档的可见部分
标 题 标 签
<title></title> 将文档的题目放在标题栏中
文 档 整 体 属 性
<body bgcolor=?> 设置背景颜色，使用名字或十六进制值
<body text=?> 设置文本文字颜色，使用名字或十六进制值
<body link=?> 设置链接颜色，使用名字或十六进制值
<body vlink=?> 设置已使用的链接的颜色，使用名字或十六进制值
<body alink=?> 设置正在被击中的链接的颜色，使用名字或十六进制值
文 本 标 签
<pre></pre> 创建预格式化文本
<h1></h1> 创建最大的标题
<h6></h6> 创建最小的标题
<b></b> 创建黑体字
<i></i> 创建斜体字
<tt></tt> 创建打字机风格的字体
<cite></cite> 创建一个引用，通常是斜体
<em></em> 加重一个单词（通常是斜体加黑体）
<strong></strong> 加重一个单词（通常是斜体加黑体）
<font size=?></font> 设置字体大小，从1到7
<font color=?></font> 设置字体的颜色，使用名字或十六进制值
链 接
<a href="URL"></a> 创建一个超链接
<a href="mailto:EMAIL">
</a> 创建一个自动发送电子邮件的链接
<a name="NAME"></a> 创建一个位于文档内部的靶位
<a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接
格 式 排 版
<p> 创建一个新的段落
<p align=?> 将段落按左、中、右对齐
<br> 插入一个回车换行符
<blockquote>
</blockquote> 从两边缩进文本
<dl></dl> 创建一个定义列表
<dt> 放在每个定义术语词之前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<li> 放在每个数字列表项之前，并加上一个数字
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个圆点列表项之前，并加上一个圆点
<div align=?> 一个用来排版大块HTML段落的标签，也用于格式化表
图 形 元 素
<img src="name"> 添加一个图像
<img src="name" align=?> 排列对齐一个图像：左中右或上中下
<img src="name" border=?> 设置围绕一个图像的边框的大小
<hr> 加入一条水平线
<hr size=?> 设置水平线的大小（高度）
<hr width=?> 设置水平线的宽度（百分比或绝对像素点）
<hr noshade> 创建一个没有阴影的水平线
表 格
<table></table> 创建一个表格
<tr></tr> 开始表格中的每一行
<td></td> 开始一行中的每一个格子
<th></th> 设置表格头：一个通常使用黑体居中文字的格子
表 格 属 性
<table border=#> 设置围绕表格的边框的宽度
<table cellspacing=#> 设置表格格子之间空间的大小
<table cellpadding=#> 设置表格格子边框与其内部内容之间空间的大小
<table width=# or %> 设置表格的宽度－用绝对像素值或文档总宽度的百分比
<tr align=?> or <td align=?> 设置表格格子的水平对齐（左中右）
<tr valign=?> or <td valign=?> 设置表格格子的垂直对齐（上中下）
<td colspan=#> 设置一个表格格子应跨占的列数（缺省为1）
<td rowspan=#> 设置一个表格格子应跨占的行数（缺省为1）
<td nowrap> 禁止表格格子内的内容自动断行回卷
窗 框
<frameset></frameset> 放在一个窗框文档的<body>标签之前，也可以嵌在其他窗框文档中
<frameset rows="value,value"> 定义一个窗框内的行数，可以使用绝对像素值或高度的百分比
<frameset cols="value,value"> 定义一个窗框内的列数，可以使用绝对像素值或宽度的百分比
<frame> 定义一个窗框内的单一窗或窗区域
<noframes></noframes> 定义在不支持窗框的浏览器中显示什么提示
窗 框 属 性
<frame src="URL"> 规定窗框内显示什么HTML文档
<frame name="name"> 命名窗框或区域以便别的窗框可以指向它
<frame marginwidth=#> 定义窗框左右边缘的空白大小，必须大于等于1
<frame marginheight=#> 定义窗框上下边缘的空白大小，必须大于等于1
<frame scrolling=VALUE> 设置窗框是否有滚动栏，其值可以是"yes","no","auto"，缺省时一般为"auto"
<frame noresize> 禁止用户调整一个窗框的大小
表 单
对于功能性的表单，一般需要运行一个CGI小程序，HTML仅仅是产生表单的表面样子。
<form></form> 创建所有表单
<select multiple name="NAME" size=?></select> 创建一个滚动菜单，size设置在需要滚动前可以看到的表单项数目
<option> 设置每个表单项的内容
<select name="NAME"></select> 创建一个下拉菜单
<option> 设置每个菜单项的内容
<textarea name="NAME" cols=40 rows=8></textarea> 创建一个文本框区域，列的数目设置宽度，行的数目设置高度
<input type="checkbox" name="NAME"> 创建一个复选框，文字在标签后面
<input type="radio" name="NAME" value="x"> 创建一个单选框，文字在标签后面
<input type=text name="foo" size=20> 创建一个单行文本输入区域，size设置以字符计的宽度
<input type="submit" value="NAME"> 创建一个submit（提交）按钮
<input type="image" border=0 name="NAME" src="name.gif"> 创建一个使用图象的submit（提交）按钮
<input type="reset"> 创建一个reset（重置）按钮
框架
在网页上加上框架可使设计多变化和让浏览者不用再重新下载同一网页。 <html>
<head>
<title>Frames Within A Homepage</title>
</head>
<frameset rows="100%" cols="15%,*">
<frames name="Frame1" src="menu.html" scrolling="auto">
<frames name="Frame2" src="main.html" scrolling="auto">
</frameset>
</html>
以一对 <frameset></frameset> 取代 <body></body>，rows 和 cols 分别用来定义行列的分割，frame 是定义一个框架，name、src分别用来定义该框架的名称和 html 文件来源，scrolling 是设定有否卷轴，可设定成 yes, no 和 auto。
上下 <frameset row="50%,*">
<frame src="frame1.html" name="a">
<frame src="frame2.html" name="b">
</frameset> a
b
下分 <frameset row"50%,*">
<frame src="frame1.html" name="a">
<frameset cols="50%,*" rows="*">
<frame src="frame2.html" name="c">
<frame src="frame3.html" name="d">
</frameset> a
c d
左右 <frameset cols="30%,*">
<frame src="frame1" name="a">
<frame src="frame2" name="b">
</frameset> a b
其中的 name 是十分重要的，因为要令那些超连结能在这些 frames 中走来走去，都是全靠这些 name 作定位。
<a href="page.html" target="a">超连结</a>
这样，那页 page.html 便会在 a 框中出现了。而
<a href="page.html" target="_top">超连结</a>
便会令 page.html 在整个浏览范围中出现，即破框而出。
框架架构的标记，主要是分割窗口和插入浮动窗口的功能。如果能有效的运用将有助于浏览网页的效率！
常用窗口标记
<FRAMESET>...</FRAMESET> 定义分割窗口。
相关属性 :
?BORDER 边框
?COLS 行 , 设定分割左右窗口宽度 ( 用『,』分隔，可设百分比 % ;『*』表示剩余部份 )
?FRAMEBORDER 显示边框
?ROWS 列 , 设定分割上下窗口高度 ( 用『,』分隔，可设百分比 % ;『*』表示剩余部份 )
<FRAME> 定义窗口。
相关属性 :
?FRAMEBORDER 显示边框
?NAME 名称
?NORESIZE 设定是否可以调整窗口大小
?SRC 文件或URL位址
?SCROLLING 设定是否可以卷动
<NOFRAMES>...</NOFRAMES> 无支援分割窗口浏览器显示文字。
<IFRAME>...</IFRAME> 插入浮动窗口。
相关属性 :
?BORDER 边框
?FRAMEBORDER 显示边框
?NORESIZE 设定是否可以调整窗口大小
?SRC 文件或URL位址
?SCROLLING 设定是否可以卷动
举例
如 : 本站窗口架构。
( 先分割成上下窗口，再于窗口各分割成左右窗口。 )
<FRAMESET ROWS=74,* COLS=140,* FRAMEBORDER=NO BORDER=0>
<FRAME SRC=rad.htm NAME=RAD NORESIZE SCROLLING=NO>
<FRAME SRC=a-1.htm NAME=FRAME1 NORESIZE SCROLLING=NO>
<FRAME SRC=b-1.htm NAME=FRAME2 NORESIZE SCROLLING=AUTO>
<FRAME SRC=c-1.htm NAME=FRAME3 NORESIZE SCROLLING=AUTO>
</FRAMESET>
如 : 浮动窗口
<CENTER>
<IFRAME FRAMEBORDER=YES SCROLLING=YES SRC=c1-01.htm>
</IFRAME>
</CENTER>
注意
窗口基本架构的文件，通常放在HTML文件的第一页，如 : index.htm 。此HTML文件的基本架构并不需要本文区 ( BODY )，只需定义窗口架构，而其他HTML文件可用连结方式 ( A HREF=...连结标记 TARGET属性 ) 显示于指定的窗口中。
图片
当我们撰写了一个网页后，试用浏览器看一看，是否觉得如开水的淡而乏味？是的，一个网页除了文字外，图片也是很重要的。说到图片，就不得不介绍Paint Shop Pro了。Paint Shop Pro不但提供了一个强大的编辑图片功能，更能支援上数十种图像格式。
在网上，大多数图片的格式都是以GIF和JPEG为主，这因为大多数浏览器都支援该两种图片格式。
GIF 与 JPEG 之 256 色图像比较
GIF 与 JPEG 之 16M 色比较
GIF 适合用来储存一般图片，而 JPEG 则是适合用来储存相片。
我们在网页上加上以下的 Tags，就可以把图片加上去。
SRC (Source)定义你所选用的图片档案，WIDTH 及 HEIGHT 是分别定义其阔度及高度，BORDER 则是定义其边界，而 ALT (Alternate text)是定义用来取代该图片的文字，当有浏览者设定他的浏览器不载入图片时或当滑鼠在该图片上的时候，文字便会出现。
现在的网站没有用图片的，几乎很少了吧！图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站传输的效率喔！
有关设定图片的方法共有以下几种 :
设定HTML文件背景图片、背景颜色。<BODY>...</BODY>标记。
如 : <BODY BACKGROUND=A.GIF>...</BODY> 或
<BODY BGCOLOR=#000000>...</BODY>
设定图片。<IMG>标记。
设定地图。<MAP>...</MAP>标记。
常用图片标记
<IMG> 指令
相关属性 :
?ALIGN 调整
?ALT 提示字
?BORDER 边框
?HEIGHT 高度
?SRC 文件或URL位址
?USEMAP 地图名称
?WIDTH 宽度
如 : 可插入图片 ( GIF、JPG格式 )、AVI电影
<CENTER>
<IMG SRC="../../../images/pcedu_lo.gif" ALT="太平洋网络学院" ALIGN=TOP BORDER=1>
</CENTER>
<MAP>...</MAP> 地图
相关属性 :
?NAME 名称
<AREA> 设定地图动作区域
相关属性 :
?COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 )
?HREF 动作区域连结点 ( 可载入位址或文件 )
?NOHREF 动作区域连结点不动作
?SHAPE 外型
举例
设定地图
<IMG BORDER=0 SRC=A.GIF _fcksavedurl="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>
字体
我们在这里将要谈的是有关文字的标记，包括字体大小、颜色、字型...等变化，适当的应用可以增加页面的美观！
常用字体标记
<Hn>...</Hn> 标题，设定标题字体大小， n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。
如 : <H2> 标题 </H2>
标题
如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 )
标题
<B>...</B> 粗体字。
如 : <B> 粗体字 </B>
粗体字
<I>...</I> 斜体字。
如 : <I> 斜体字 </I>
斜体字
<U>...</U> 加底线。
如 : <U> 加底线 </U>
加底线
<DEL>...</DEL> 横线 ( 表示删除 )。
如 : <DEL> 横线 </DEL>
横线
<TT>...</TT> 打字体 ( 固定宽度文字 )。
如 : <TT> 打字体 </TT>
打字体
<SUP>...</SUP> 上标字。
如 : 字体 <SUP> 上标字 </SUP>
字体上标字
<SUB>...</SUB> 下标字。
如 : 字体 <SUB> 下标字 </SUB>
字体下标字
<!...> 注解 ( 不会显示在浏览器上 )，可以多行。
如 : <! 更新日期 : 2000/1/1>
设定字体大小、颜色、字型
有关设定文字的方法共有以下几种 :
1.设定HTML文件主体文字颜色。<BODY>...</BODY>标记。
如 : <BODY TEXT=RED>...</BODY> 或
<BODY TEXT=#FF0000>...</BODY>
2.设定基本字体大小、颜色、字型。<BASEFONT>...</BASEFONT>标记。
3.设定字体大小、颜色、字型。<FONT>...</FONT>标记。
<BASEFONT>...</BASEFONT> 设定基本字体，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。
如 : <BASEFONT SIZE=4> 基本字体大小为 4 </BASEFONT>
基本字体大小为 4
如 : <BASEFONT COLOR =#FF0000> 设定颜色 </BASEFONT>
设定颜色
如 : <BASEFONT FACE = 标楷体 , 细明体 > 设定字型 </BASEFONT>
设定字型
<BIG>...</BIG> 基本字体加大。
如 : <BASEFONT SIZE=4> 基本字体大小为 4，</BASEFONT>
<BIG> 加大为 5 </BIG>
基本字体大小为 4，加大为 5
<SMALL>...</SMALL> 基本字体减小。
如 : <BASEFONT SIZE=4> 基本字体大小为 4，</BASEFONT>
<SMALL> 减小为 3 </SMALL>
基本字体大小为 4，减小为 3
<FONT>...</FONT> 设定字体大小、颜色、字型，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。
如 : <FONT SIZE=4> 字体大小为 4 </FONT>
字体大小为 4
如 : <BASEFONT SIZE=4> 基本字体大小为 4
<FONT SIZE=+1> +1字体大小为 5 </FONT>
<FONT SIZE=-2> -2字体大小为 2 </FONT>...</BASEFONT>
基本字体大小为 4
+1字体大小为 5
-2字体大小为 2
如 : <FONT COLOR =#FF0000> 设定颜色 </FONT>
设定颜色
如 : <FONT FACE = 标楷体 , 细明体 > 设定字型 </FONT>
设定字型
注意事项
1. 设定字体的大小分 : 绝对SIZE 如 : <FONT SIZE=4>
和 相对SIZE 如 : <FONT SIZE=+1> ( 以 BASEFONT 设定的字体大小做加减 )。
2. 设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度 ( 00 暗 ~ FF 亮 )。 #RRGGBB 所代表的是红、绿、蓝三原色，每一色由两位十六进制的数值表示 ( 即十进制 0 ~ 255 )。
十六进制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。
3. 设定字体的字型会按照顺序找出显示的字型，若找不到则以系统预设字型显示
------------------------------------------
表格
表格是HTML的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。
常用表格标记
<TABLE>...</TABLE> 表格指令。
相关属性 :
?ALIGN 调整
?BGCOLOR 背景颜色
?BORDER 边框
?HEIGHT 高度
?WIDTH 宽度
<CAPTION>...</CAPTION> 表格标题。
相关属性 :
?ALIGN 调整
<TR>...</TR> 表格列 ( </TR>可省略 ) 。
相关属性 :
?ALIGN 调整
<TH>...</TH> 表格栏标题 ( 表头 ) 粗体字 ( </TH>可省略 ) 。
相关属性 :
?ALIGN 调整
?COLSPAN 栏宽
?ROWSPAN 栏高
<TD>...</TD> 表格栏资料 ( 储存格 ) ( </TD>可省略 ) 。
相关属性 :
?ALIGN 调整
?BGCOLOR 背景颜色
?HEIGHT 高度
?WIDTH 宽度
?COLSPAN 栏宽
?ROWSPAN 栏高
举例
如 : ( 基础型 )
<TABLE BORDER=1 ALIGN=CENTER>
<TR><TD>太平洋网络学院<TD>太平洋网络学院
<TR><TD>太平洋网络学院<TD>太平洋网络学院
</TABLE>
太平洋网络学院 太平洋网络学院
太平洋网络学院 太平洋网络学院
如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。
<TABLE BORDER=1 ALIGN=CENTER BGCOLOR=#CCCCFF>
<CAPTION>表格标题</CAPTION>
<TR><TD><TH COLSPAN=2>行标题 1 <TH COLSPAN=2>行标题 2
<TR><TH ROWSPAN=2>列标题 1 <TD>A <TD>A <TD>A <TD>A
<TR><TD>B <TD>B <TD>B <TD>B
<TR><TH ROWSPAN=2>列标题 2 <TD>C <TD>C <TD>C <TD>C
<TR><TD>D <TD>D <TD>D <TD>D
</TABLE>
表格标题 行标题 1 行标题 2
列标题 1 A A A A
B B B B
列标题 2 C C C C
D D D D
看了以上的例子，应该了解表格的基本写法吧！
我喜欢表格.
我知道,我知道.我是个耍把 戏的.但我确实知道.记得我第一次发现表格,是在
Netscape 1.1时代.我彻夜不眠, 并在凌晨四点左右领略到一种超常的体验.最后,我能控制什 么内容落在页面上什么地方.
嗳...是这样.
实际上,表格之美在于灵活.你 能使它们变宽,占据整个页面(无 论使用者把它设得多宽).你还能把它们设得很精确,使页面成为某种形状.选择权在你,由你
掌握.
不过今天,我们从基础开始.
能与不能
了解表格的第一步是知道你能用表格来作出什么形状.让我们从一个网格开始:
+--+--+
| | |
+--+--+
| | |
+--+--+
这在一个表格中是能作的.你还以开始撤去线条:
+--+--+ +--+--+
| | | | |
+--+--+ + +--+
| | | | | |
+--+--+ +--+--+
上面的网格也可以做.但下面这个不行:
+--+--+
| | |
+--+ +
| |
+--+--+
基本上,如果你能在一个网格中拖
移线条,并且线条不是L形,你就可
以把它放进表格中.如果你一开始
就知道可做什么不可做什么,你就
会在今后的长时期里省去许多麻
烦.
入门
任何表格都有三个基本要素:表格,格行和格子.这些要素的标签如:
Table: <table>
Table row: <tr>
Table cell: <td>
(题外话:为什么格子的标签是<td>?这个问题有两种解释.有的说它表示"表格数据(table data)",有的说是Netscape工程师神经错乱.)
这里需要记住的是<td>永远要用<tr>来结束,而<tr>又永远用<table>来结束.
讲的已经差不多了.让我们动手做做看:
好吧.我们制作一下上面草列的基本表格:
Cell 1 Cell 2
Cell 3 Cell 4
代码如下:
<table border>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
正如你所见,第一个格行包含格子1格子2;第二个格行包含格子3和格4.格行总是水平延伸的.那么各个子的的内容呢?在这个例子中,就"格子1"和"格子2"?原来它们是被夹在<td>和</td>标签中.
为了看见表格,我给表格标签加上边.这只不过是把边界加上了.你还以通过附加数字--例如<table border=5>--来规定边界的宽度.但要警惕,不要走得太远.
"列间隔"和"行间隔"
你可以还在一个行中作一个格而另一个行中作两个格.就象:
Cell 1
Cell 3 Cell 4
要完成这一步,你得使用列间隔修改令.只需对<td>加上列间隔=2.
<table border>
<tr>
<td colspan=2>Cell 1</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
也可以这样做:
Cell 1 Cell 2
Cell 3
只需在<td>加上行间隔=2,就象这样:
<table border>
<tr>
<td rowspan=2>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
</table>
表格
有
麻烦吗?
线条
记住:行是水平走的,而列是垂直走.因此,如果你想水平延长一个格,使用列间隔即可.垂直延长格子则用行间隔.
回复Comments
作者:
{commentrecontent}