1、网页架构
<HTML>
<HEAD>
<TITLE>网页制作教学</TITLE>
<Meta>
</HEAD>
<BODY>
BODY之间则为主要语法所在,也是网页的主要呈现部分。
</BODY>
</HTML>
2、分隔标签
1)换行 <br>
2) 段落 <p> </p>
3) 分割线标签 <hr color="颜色" width="宽度" sise="厚度" align="水平对齐位置" >
利用分割标签可以产生一条横分割线。
3、排版标签
1)<center>这是置中</center>
除了文字,对于图片、表格, 任何可以在显示在网页中的东西都可以置中。
2)向右缩排标签 <blockquote>要缩排的文字</blockquote>
将包围的文字,全部往右缩排。加一组标签,缩排一单位,加两组标签,缩排两单位
3)保存原始格式标签 <pre> 文字内容 </pre>
将包围起来的文字排版、格式,原封不动的呈现出来。
4、标题标签
1)标题标签
<h1>标题一</h1>
;
;
<h6>标题六</h6>
2)字体大小标签
<font size=1>字体一</font>
:
:
<font size=1>字体七</font>
3)字型变化标签
(1)粗体 <b>粗体</b>
(2)斜体 <i>斜体</i>
(3)底线 <u>底线</u>
(4)上标 <sup>上标</sup>
(5)下标 <sub>下标</sub>
(6)打字机 <tt>打字机</tt>
(7)闪烁 <blink>闪烁</blink>(ie没效果)
(8)强调 <em>强调</em>
(9)加强 <strong>加强</strong>
(10)范例 <samp>范例</samp>
(11)原始码 <code>原始码</code>
(12)变数 <var>变数</var>
(13)定义 <dfn>定义</dfn>
(14)引用 <cite>引用</cite>
(15)所在地址 <address>所在地址</address>
4) 文字颜色
<font color="文字颜色">文字</font>
5) 文字字型设定
<font face="字型名称">文字</font>
eg:<font face="楷体_GB2312">楷体_GB2312</font>
6)对齐方式
align="对齐方式"
right 右对齐
left 左对齐
top 上对齐
bottom 下对齐
middle 中间
absmiddle 绝对中间
7)常用符号
(1)不可拆分的空格  
(2)小于 < <
(3)大于 > >;
(4)and & &
(5)英镑 ₤ £
(6)欧元 € €
(7)注册 ® ®
(8)版权 © ©
(9)引号 " "
(10) 人民币 ¥ ¥
5、影像标签
<img src="boy.gif" alt="说明文字" align="对齐方式"
border="边框大小" height= "高度" width="宽度" >
6、背景标签
<body bgcolor="背景色" background="背景图片">
7、内文、连接文字颜色
<body text="颜色码" link="颜色码" vlink="颜色码" alink="颜色码">
text="颜色码" 若没有特别去设定文字颜色的话,浏览器会自动显现您所设定的颜色
link="颜色码" 没按下链接之前,只要有链接的地方就会出现制定的颜色码
alink="颜色码" 按下链接是瞬间所呈现的颜色
vlink="颜色码" 已经被按过的链接所呈现的颜色
8、超链接
<a href="" target="参数">
框窗名称 只有在框架或frame中采用。
利用此标签,来指定连接的内容显示到哪一个框窗中。
_blank 将连结的画面内容,开在新的浏览视窗中。
_parent 将连结的画面内容,当成文件的上一个画面。
_self 将连结的画面内容,显示在目前的视窗中。
_top 会将整个画面重新显示成连结的画面内容。
9、表格
<table width="宽度" height="高度" border="线条粗细"
BORDERCOLORLIGHT="亮面颜色设定F" BORDERCOLORDARK="暗面颜色设定"
CELLPADDING="表格内文距离格线的距离" CELLSPACING="表格栏位格线之间的距离" >
<tr bgcolor="背景色">
<td align="对齐方式">
</td>
</tr>
</table>
10、序列标签
1)无序列表
(1)
<UL>
<LI>姓名:杰克升
<LI>生日:1974/11/21
<LI>星座:天蝎座
</UL>
(2)
<UL TYPE="CIRCLE">
<LI>姓名:杰克升
<LI>生日:1974/11/21
<LI>星座:天蝎座
</UL>
TYPE="形状名称"属性来改变其符号形状,一共有三个选择:
DISK(实心圆)、SQUARE(小正方形)、CIRCLE(空心圆)
2)有序列表
(1)
<OL>
<LI>姓名:杰克升
<LI>生日:1974/11/21
<LI>星座:天蝎座
</OL>
从1开始
(2)
<OL TYPE="A" START="H">
<LI>姓名:杰克升
<LI>生日:1974/11/21
<LI>星座:天蝎座
</OL>
从H开始
11、表单的标签
1)单行文字输入
<FORM>
姓名:<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称,程式中常会用到。
SIZE="数值",是设定此一栏位显现的宽度。
VALUE="预设内容",是设定此一栏位的预设内容。
ALIGN="对齐方式",是设定此一栏位的对齐方式,
TOP(向上对齐)、MIDDLE(向中对齐)、BOTTOM(向下对齐)
RIGHT(向右对齐)、LEFT(向左对齐)、TEXTTOP(向文字顶部对齐)
BASELINE(向文字底部对齐)、ABSMIDDLE(绝对置中)、ABSBOTTOM(绝对置下)
MAXLENGTH="数值",是设定此一栏位可设定输入的最大长度。
2)单选核取表单
<FORM>
性别:
<INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">男
<INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">女
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称,程式中常会用到。
VALUE="内容",是设定此一栏位的内容、值或是意义。
ALIGN="对齐方式",是设定此一栏位的对齐方式
CHECKED,是设定此一栏位为预设选取值。
3)复选核取表单
<FORM>
喜好:
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称,程式中常会用到。
VALUE="内容",是设定此一栏位的内容、值或是意义。
ALIGN="对齐方式",是设定此一栏位的对齐方式
CHECKED,是设定此一栏位为预设选取值。
4)密码表单
<FORM>
请输入密码:<INPUT TYPE="PASSWORD" NAME="INPUT">
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称,程式中常会用到。
SIZE="数值",是设定此一栏位显现的宽度。
VALUE="预设内容",是设定此一栏位的预设内容,不过呈现出来仍是星号。
ALIGN="对齐方式",是设定此一栏位的对齐方式
MAXLENGTH="数值",是设定此一栏位可设定输入的最大长度。
5)按钮
<FORM>
<INPUT TYPE="SUBMIT" VALUE="送出资料">
<INPUT TYPE="RESET" VALUE="重新填写">
<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一按钮的名称。
VALUE="文字",是设定此一按钮上要呈现的文字。
ALIGN="对齐方式",是设定此一栏位的对齐方式
6)多行文字输入
<FORM>
请输入您的意见:<BR>
<TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称。
WRAP="设定值",是设定此一栏位的换行模式。设定值有三种:
OFF(输入文字不会自动换行)
VIRTUAL(输入文字在萤幕上会自动换行,不过若是使用者没有自行按下ENTER换行,
送出资料时,也视为没有换行)
PHYSICAL(输入文字会自动换行,送出资料时,会将萤幕上的自动换行,视为换行效
果送出)。
COLS="数值",是设定此一栏位的行数(横向字数)。
ROWS="数值",是设定此一栏位的列数(垂直字数)。
7)下拉列表框
<FORM>
您喜欢看书吗?:
<SELECT NAME="LIKE">
<OPTION VALUE="非常喜欢">非常喜欢
<OPTION VALUE="还算喜欢">还算喜欢
<OPTION VALUE="不太喜欢">不太喜欢
<OPTION VALUE="非常讨厌">非常讨厌
</SELECT>
</FORM>
其有下列可设定之属性:
SIZE="数值",是设定此一栏位的大小,预设值为1,若是您的选项有四个,然后您将
SIZE设成4,那么,下拉式选单便会变成选项方块,将四个选项一起呈现在方块中。
MULTIPLE,是设定此一栏位为复选,可以一次选好几个选项。
12、框架标签
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="a.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="b.htm" NAME="2">
<FRAME SRC="c.htm" NAME="3">
</FRAMESET>
</FRAMESET>
</HTML>
其它参数说明:
<FRAMESET COLS="120,*" frameborder=0 framespacing=5>
1) COLS="120,*"
就是垂直切割画面啦!你可以一次切成左右两个画面,当然也可以切成三个,很
简单只要写成 COLS="30,*,50" (数字随便您自己调整啦!),依此类推,四个
以上当然就是四组数字啦!
2) ROWS="120,*"
就是横向切割画面,也就是将画面上下分开,切法同上。
3) frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 就是不要边框, 1 就是要显示边框。
边框是无法调整粗细的。
4) framespacing=5
表示框架与框架间的保留空白的距离,以免看起来太挤。
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize
marginhight=2 marginwidth=2>
1) SRC="a.htm"
设定此框架中要显示的网页名称,每个框架一定要对应一个网页,否则就会产生
错误,这里就是要您填入对应网页的名称。(如果该网页在不同目录,记得路
径要写清楚)
2) NAME="1"
设定这个框架的名称,这样才能指定框架来作连结,所以一定要设定喔!当然名
称随你高兴取名。
3) scrolling="no"
设定是否要显示卷轴,YES是要显示卷轴,NO是无论如何都不要显示,AUTO是视情
况显示。
4) noresize
设定不让使用者可以改变这个框框的大小,如果没有设定这个参数,使用者可以
很容易的拉动框架,改变其大小。
5) marginhight=2
表示框架高度部份边缘所保留的空间。
6) marginwidth=2
表示框架宽度部份边缘所保留的空间。
target=框窗名称
eg:<A HREF="d1-1.htm" target=3>显示内容</A>
13、背景音乐
<bgsound src="music.mid">
可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid">
14、Meta Tag 的简介
1)<Title>All Products Online</title>
这虽说不是meta的一部份,但是也不可忽略,总长度不要超过85个Character (约10
个字)。
2)<meta http-quive="content-type" content="text/html; charset=iso-8859-1">
说明网站的格式及编码方式,另外这个功能也可以拿来说明网站的名称。
3)<meta name="keyword" contents="关键字一, 关键字二, 关键字三, …..">
铲明整个网站的关键字,关键字间用逗点隔开,总长度最好不要超过1000个
Character (约44个字)。
4)<meta name="description" contents="整个网站的描述….">
铲明整个网站为何吸引人的地方,可用逗点隔开,总长度最好不要超过200个
Character (约15个字),若文章真的太长,可以切割成两个部分,较不重要的部分
置入下一个Description。
5)<meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW">
此功能是要给搜寻引擎使用的,是要用来告诉Spider哪些网页是要去撷取的或不用
去撷取的,一般都设定成All(内定值)。
<HTML>
<HEAD>
<TITLE>网页制作教学</TITLE>
<Meta>
</HEAD>
<BODY>
BODY之间则为主要语法所在,也是网页的主要呈现部分。
</BODY>
</HTML>
2、分隔标签
1)换行 <br>
2) 段落 <p> </p>
3) 分割线标签 <hr color="颜色" width="宽度" sise="厚度" align="水平对齐位置" >
利用分割标签可以产生一条横分割线。
3、排版标签
1)<center>这是置中</center>
除了文字,对于图片、表格, 任何可以在显示在网页中的东西都可以置中。
2)向右缩排标签 <blockquote>要缩排的文字</blockquote>
将包围的文字,全部往右缩排。加一组标签,缩排一单位,加两组标签,缩排两单位
3)保存原始格式标签 <pre> 文字内容 </pre>
将包围起来的文字排版、格式,原封不动的呈现出来。
4、标题标签
1)标题标签
<h1>标题一</h1>
;
;
<h6>标题六</h6>
2)字体大小标签
<font size=1>字体一</font>
:
:
<font size=1>字体七</font>
3)字型变化标签
(1)粗体 <b>粗体</b>
(2)斜体 <i>斜体</i>
(3)底线 <u>底线</u>
(4)上标 <sup>上标</sup>
(5)下标 <sub>下标</sub>
(6)打字机 <tt>打字机</tt>
(7)闪烁 <blink>闪烁</blink>(ie没效果)
(8)强调 <em>强调</em>
(9)加强 <strong>加强</strong>
(10)范例 <samp>范例</samp>
(11)原始码 <code>原始码</code>
(12)变数 <var>变数</var>
(13)定义 <dfn>定义</dfn>
(14)引用 <cite>引用</cite>
(15)所在地址 <address>所在地址</address>
4) 文字颜色
<font color="文字颜色">文字</font>
5) 文字字型设定
<font face="字型名称">文字</font>
eg:<font face="楷体_GB2312">楷体_GB2312</font>
6)对齐方式
align="对齐方式"
right 右对齐
left 左对齐
top 上对齐
bottom 下对齐
middle 中间
absmiddle 绝对中间
7)常用符号
(1)不可拆分的空格  
(2)小于 < <
(3)大于 > >;
(4)and & &
(5)英镑 ₤ £
(6)欧元 € €
(7)注册 ® ®
(8)版权 © ©
(9)引号 " "
(10) 人民币 ¥ ¥
5、影像标签
<img src="boy.gif" alt="说明文字" align="对齐方式"
border="边框大小" height= "高度" width="宽度" >
6、背景标签
<body bgcolor="背景色" background="背景图片">
7、内文、连接文字颜色
<body text="颜色码" link="颜色码" vlink="颜色码" alink="颜色码">
text="颜色码" 若没有特别去设定文字颜色的话,浏览器会自动显现您所设定的颜色
link="颜色码" 没按下链接之前,只要有链接的地方就会出现制定的颜色码
alink="颜色码" 按下链接是瞬间所呈现的颜色
vlink="颜色码" 已经被按过的链接所呈现的颜色
8、超链接
<a href="" target="参数">
框窗名称 只有在框架或frame中采用。
利用此标签,来指定连接的内容显示到哪一个框窗中。
_blank 将连结的画面内容,开在新的浏览视窗中。
_parent 将连结的画面内容,当成文件的上一个画面。
_self 将连结的画面内容,显示在目前的视窗中。
_top 会将整个画面重新显示成连结的画面内容。
9、表格
<table width="宽度" height="高度" border="线条粗细"
BORDERCOLORLIGHT="亮面颜色设定F" BORDERCOLORDARK="暗面颜色设定"
CELLPADDING="表格内文距离格线的距离" CELLSPACING="表格栏位格线之间的距离" >
<tr bgcolor="背景色">
<td align="对齐方式">
</td>
</tr>
</table>
10、序列标签
1)无序列表
(1)
<UL>
<LI>姓名:杰克升
<LI>生日:1974/11/21
<LI>星座:天蝎座
</UL>
(2)
<UL TYPE="CIRCLE">
<LI>姓名:杰克升
<LI>生日:1974/11/21
<LI>星座:天蝎座
</UL>
TYPE="形状名称"属性来改变其符号形状,一共有三个选择:
DISK(实心圆)、SQUARE(小正方形)、CIRCLE(空心圆)
2)有序列表
(1)
<OL>
<LI>姓名:杰克升
<LI>生日:1974/11/21
<LI>星座:天蝎座
</OL>
从1开始
(2)
<OL TYPE="A" START="H">
<LI>姓名:杰克升
<LI>生日:1974/11/21
<LI>星座:天蝎座
</OL>
从H开始
11、表单的标签
1)单行文字输入
<FORM>
姓名:<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称,程式中常会用到。
SIZE="数值",是设定此一栏位显现的宽度。
VALUE="预设内容",是设定此一栏位的预设内容。
ALIGN="对齐方式",是设定此一栏位的对齐方式,
TOP(向上对齐)、MIDDLE(向中对齐)、BOTTOM(向下对齐)
RIGHT(向右对齐)、LEFT(向左对齐)、TEXTTOP(向文字顶部对齐)
BASELINE(向文字底部对齐)、ABSMIDDLE(绝对置中)、ABSBOTTOM(绝对置下)
MAXLENGTH="数值",是设定此一栏位可设定输入的最大长度。
2)单选核取表单
<FORM>
性别:
<INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">男
<INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">女
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称,程式中常会用到。
VALUE="内容",是设定此一栏位的内容、值或是意义。
ALIGN="对齐方式",是设定此一栏位的对齐方式
CHECKED,是设定此一栏位为预设选取值。
3)复选核取表单
<FORM>
喜好:
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称,程式中常会用到。
VALUE="内容",是设定此一栏位的内容、值或是意义。
ALIGN="对齐方式",是设定此一栏位的对齐方式
CHECKED,是设定此一栏位为预设选取值。
4)密码表单
<FORM>
请输入密码:<INPUT TYPE="PASSWORD" NAME="INPUT">
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称,程式中常会用到。
SIZE="数值",是设定此一栏位显现的宽度。
VALUE="预设内容",是设定此一栏位的预设内容,不过呈现出来仍是星号。
ALIGN="对齐方式",是设定此一栏位的对齐方式
MAXLENGTH="数值",是设定此一栏位可设定输入的最大长度。
5)按钮
<FORM>
<INPUT TYPE="SUBMIT" VALUE="送出资料">
<INPUT TYPE="RESET" VALUE="重新填写">
<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一按钮的名称。
VALUE="文字",是设定此一按钮上要呈现的文字。
ALIGN="对齐方式",是设定此一栏位的对齐方式
6)多行文字输入
<FORM>
请输入您的意见:<BR>
<TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
</FORM>
其有下列可设定之属性:
NAME="名称",是设定此一栏位的名称。
WRAP="设定值",是设定此一栏位的换行模式。设定值有三种:
OFF(输入文字不会自动换行)
VIRTUAL(输入文字在萤幕上会自动换行,不过若是使用者没有自行按下ENTER换行,
送出资料时,也视为没有换行)
PHYSICAL(输入文字会自动换行,送出资料时,会将萤幕上的自动换行,视为换行效
果送出)。
COLS="数值",是设定此一栏位的行数(横向字数)。
ROWS="数值",是设定此一栏位的列数(垂直字数)。
7)下拉列表框
<FORM>
您喜欢看书吗?:
<SELECT NAME="LIKE">
<OPTION VALUE="非常喜欢">非常喜欢
<OPTION VALUE="还算喜欢">还算喜欢
<OPTION VALUE="不太喜欢">不太喜欢
<OPTION VALUE="非常讨厌">非常讨厌
</SELECT>
</FORM>
其有下列可设定之属性:
SIZE="数值",是设定此一栏位的大小,预设值为1,若是您的选项有四个,然后您将
SIZE设成4,那么,下拉式选单便会变成选项方块,将四个选项一起呈现在方块中。
MULTIPLE,是设定此一栏位为复选,可以一次选好几个选项。
12、框架标签
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="a.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="b.htm" NAME="2">
<FRAME SRC="c.htm" NAME="3">
</FRAMESET>
</FRAMESET>
</HTML>
其它参数说明:
<FRAMESET COLS="120,*" frameborder=0 framespacing=5>
1) COLS="120,*"
就是垂直切割画面啦!你可以一次切成左右两个画面,当然也可以切成三个,很
简单只要写成 COLS="30,*,50" (数字随便您自己调整啦!),依此类推,四个
以上当然就是四组数字啦!
2) ROWS="120,*"
就是横向切割画面,也就是将画面上下分开,切法同上。
3) frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 就是不要边框, 1 就是要显示边框。
边框是无法调整粗细的。
4) framespacing=5
表示框架与框架间的保留空白的距离,以免看起来太挤。
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize
marginhight=2 marginwidth=2>
1) SRC="a.htm"
设定此框架中要显示的网页名称,每个框架一定要对应一个网页,否则就会产生
错误,这里就是要您填入对应网页的名称。(如果该网页在不同目录,记得路
径要写清楚)
2) NAME="1"
设定这个框架的名称,这样才能指定框架来作连结,所以一定要设定喔!当然名
称随你高兴取名。
3) scrolling="no"
设定是否要显示卷轴,YES是要显示卷轴,NO是无论如何都不要显示,AUTO是视情
况显示。
4) noresize
设定不让使用者可以改变这个框框的大小,如果没有设定这个参数,使用者可以
很容易的拉动框架,改变其大小。
5) marginhight=2
表示框架高度部份边缘所保留的空间。
6) marginwidth=2
表示框架宽度部份边缘所保留的空间。
target=框窗名称
eg:<A HREF="d1-1.htm" target=3>显示内容</A>
13、背景音乐
<bgsound src="music.mid">
可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid">
14、Meta Tag 的简介
1)<Title>All Products Online</title>
这虽说不是meta的一部份,但是也不可忽略,总长度不要超过85个Character (约10
个字)。
2)<meta http-quive="content-type" content="text/html; charset=iso-8859-1">
说明网站的格式及编码方式,另外这个功能也可以拿来说明网站的名称。
3)<meta name="keyword" contents="关键字一, 关键字二, 关键字三, …..">
铲明整个网站的关键字,关键字间用逗点隔开,总长度最好不要超过1000个
Character (约44个字)。
4)<meta name="description" contents="整个网站的描述….">
铲明整个网站为何吸引人的地方,可用逗点隔开,总长度最好不要超过200个
Character (约15个字),若文章真的太长,可以切割成两个部分,较不重要的部分
置入下一个Description。
5)<meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW">
此功能是要给搜寻引擎使用的,是要用来告诉Spider哪些网页是要去撷取的或不用
去撷取的,一般都设定成All(内定值)。