网页制作如何学习（网页制作学习基础实用教程集锦）

火客 2022-12-21 13:44:44 637

网页制作如何学习（网页制作学习基础实用教程集锦）</head><TITLE>这里是标题</title>2.将下面代码复制好粘贴到记事本上，如图-1所示。（按鼠标右键选择粘贴就可以了！）<HTML><head>

学习网页制作基础入门教程网页编写
（如想学习更多的专业知识，网页设计等学习材料，请翻至文章末尾）

大千世界任君行更新日期：2017-10-12 15:56 感谢网页教学网

　　学习网页制作基础入门教程目录：学习网页制作基础入门教程

　　用记事本编写代码

1.首先打开“记事本”程序（方法是「开始」-「程序」-「附件」-「记事本」）

2.将下面代码复制好粘贴到记事本上，如图-1所示。（按鼠标右键选择粘贴就可以了！）

<HTML>

<head>

<TITLE>这里是标题</title>

</head>

<body>

这里是放置网页内容的文本区域

</body>

</html>

　　【图-1说明】利用鼠标右键的“粘贴”或者按 CTRL V 都可以将复制的内容粘贴上的。

　　【图-2说明】点击“文件”里的“保存”就可以文件保存了。将文件保存了，就大功告成了！（在硬盘下建立建一个子目录，我们就在E:盘下建立一个 myweb 的子目录，并将我们的网页保存为 myfirst.htm 就可以了。）

原始代码

显示结果

这是一个断行的例子 <BR> 看出来了吗？网页教学网

这是一个断行的例子

看出来了吗？网页教学网

这是一个分段的例子 <P> 看出来了吗？网页教学网

这是一个分段的例子

看出来了吗？网页教学网

　　文字置左、置中、置右

1.使用方法：老实说，刚刚我们学习过分段标签 <P> 再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：

2.标签解说：秘诀就在于「ALIGN=对齐位置」而已！ALIGN是分段标签 <P>的属性之一，这个属性将会常常在不同标签中看到，它的功能是专门在设定「水平对齐位置」，其常见的设定值有三个，也就是置左（ALIGN="LEFT"）、置中（ALIGN="CENTER"）、置右（ALIGN="RIGHT"）。

3. 使用范例：

原始代码	显示结果
<P>文字靠左</P>	文字靠左
<P>文字置中</P>	文字置中
<P>文字靠右</P>	文字靠右

置中标签

1. 使用方法：<CENTER>这是置中</CENTER>

2. 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的内容都可以置中！

3. 使用范例：

原始代码	显示结果
<CENTER>这是中间</CENTER>	这是中间

向右缩排标签

1. 使用方法：<BLOCKQUOTE> 要缩排的文字 </BLOCKQUOTE>

2. 标签解说：利用 <BLOCKQUOTE></BLOCKQUOTE> 这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两个单位，依此类推。

3. 使用范例：

原始代码	显示结果
<BLOCKQUOTE>缩排1单位</BLOCKQUOTE>	缩排1单位
<BLOCKQUOTE><BLOCKQUOTE>缩排2单位</BLOCKQUOTE></BLOCKQUOTE>	缩排2单位

　　保存原始格式标签

1. 使用方法：< PRE> 文字內容 </PRE>

2. 标签解说：利用 <PRE></PRE> 这个标签可以将其包起来的文字排版、格式，原封不动的显示出来。算是相当好用的标签之一。

3. 使用范例：

原始代码	显示结果
<PRE> 文字格式 </PRE>	文字格式

分隔线标签

1. 使用方法：上一段文字內容 <HR> 下一段文字內容

2. 标签解说：利用 <HR> 这个标签便可产生一条横分隔线。另外，其有些属性分別说明如下：

3. 使用范例：

一般用法	尚未加任何属性。
原始代码	普通分隔<HR>
显示结果	普通分隔线

颜色属性	用法： <HR COLOR="颜色代码或颜色名称">
原始代码	橘色分隔线<HR COLOR="#FF8000">
显示结果	橘色分隔线

宽度属性	用法：<HR WIDTH="宽度">，其单位为px（像素），宽度也可用百分比来作设定，如50%即意为宽度占屏幕的50%。
原始代码	宽度为300px的分隔线 <HR WIDTH="300">
显示结果	普通分隔线

厚度属性	用法：<HR SIZE="厚度">
原始代码	厚度为 10 的分隔线< HR SIZE="10">
显示结果	厚度为 10 的分隔线

位置属性	用法：<HR ALIGN="水平对齐位置">，其设定值有三个，也就是置左ALIGN="LEFT"、置中ALIGN="CENTER"、置右ALIGN="RIGHT"
原始代码	靠右的分隔线<HR>
显示结果	靠右的分隔线

阴影属性	用法：<HR NOSHADE>，无设定值，只要将 NOSHADE 加入即可，通常会配合颜色设定，效果较佳。
原始代码	实心分隔线（无阴影) <HR NOSHADE>
显示结果	实心分隔线（无阴影）

学习网页制作基础入门教程(3)字体标签

webjx 更新日期：2005-08-13 08:14 出处：网页教学网作者：闪电儿

　　相关文章：

学习网页制作基础入门教程(1)网页编写

学习网页制作基础入门教程(2)排版标签

　　标题标签

1. 使用方法：<H1>标题內容</H1>

2. 标签解释：标题的大小一共有六种，两个标签一组，也就是从 <H1> 到 <H6> ， <H1> 最大，<H6>最小。使用标题标签时，该标签会将字体变为粗体字，并会自成一行。

3. 使用范例：

原始碼	呈現結果
<H1>标题1</H1>	标题1
<H2>标题2</H2>	标题2
<H3>标题3</H3>	标题3
<H4>标题4</H4>	标题4
<H5>标题5</H5>	标题5
<H6>标题6</H6>	标题6

网页制作如何学习（网页制作学习基础实用教程集锦）(1)

　设定字体大小标签

1. 使用方法：<FONT SIZE="尺寸">文字內容</FONT>

2. 标签解释：标题的大小一共有七种，也就是<FONT SIZE=1>（最小）到 <FONT SIZE=7>（最大），另外，还有一种写法：<FONT SIZE= 1> 文字內容 </FONT>，其意思就是说：比预设字大一级。当然也可以 FONT SIZE= 2（比预设字大二级），或是 FONT SIZE=-1（比预设字小一级），以一般而言，预设字体多为 3。

3. 使用范例：本网页就是 <FONT SIZE = 9pt>

　　字型变化标签

1. 使用方法：<B>文字內容</B>

2. 标签解释：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如『强调』、『原始码』...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上『原始码』的标签。

3. 使用范例：

原始代码	显示结果
<B>粗体</B>	粗体
<I>斜体</I>	斜体
<U>底线</U>	底线
<SUP>上标</SUP>	上标
<SUB>下标</SUB>	下标
<TT>打字机</TT>	打字机
<BLINK>闪烁</BLINK>	闪烁
<EM>强调</EM>	强调
<STRONG>加强</STRONG>	加强
<SAMP>范例</SAMP>	范例
<CODE>原始码</CODE>	`原始码`
<VAR>参数</VAR>	参数
<DFN>定义</DFN>	定义
<CITE>引用</CITE>	引用
<ADDRESS>所在地址</ADDRESS>	所在地址

　　文字颜色设定

1. 使用方法：<FONT COLOR="#000000">文字颜色</FONT>

2. 标签解释：文字也可以设定颜色！

3. 使用范例：

原始代码	显示结果
<FONT COLOR="#ff0000">红色</FONT>	红色
<FONT COLOR="#ff8000">橙色</FONT>	橙色
<FONT COLOR="#ffff00">黃色</FONT>	黃色
<FONT COLOR="#00ff00">绿色</FONT>	绿色
<FONT COLOR="#0080ff">蓝色</FONT>	蓝色
<FONT COLOR="#8000ff">紫色</FONT>	紫色
<FONT COLOR="#000000">黑色</FONT>	黑色

　　文字字型设定

1. 使用方法： <FONT FACE="字型名称">文字</FONT>

2. 标签解释：网页上也可以使用字型！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是默认字体(默认字体为宋体)。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显示，不过这并没有关系，看不到特殊的字型时，浏览器仍会以默认字体显示，所以不用怕会一团乱。

3. 使用范例：

原始代码	显示结果
<FONT FACE="宋体">宋体</FONT>	宋体

　　特殊字元

1. 使用方法：试打 " "

2. 标签解释：很多特殊符号是需要特别处理的，比如说" < "、" > "这两个符号若想要显示在网页上是没有办法直接打" < "的，要显示" < "必须输入编码表示法。

3. 使用范例：

原始代码	显示结果
	( 代表一个不断行空白)
<	<
>	>
&	&
"	"

学习网页制作基础入门教程(4)图象标签

webjx 更新日期：2005-08-13 13:40 出处：网页教学网作者：闪电儿

学习网页制作基础入门教程(1)网页编写

学习网页制作基础入门教程(2)排版标签

学习网页制作基础入门教程(3)字体标签

　　图象标签

1. 使用方法：<IMG src="https://img.aigexing.comtest.gif" ALT="本站特约模特儿" BORDER=0 HSPACE=2 VSPACE=2 HEIGHT=56 WIDTH=32>

2. 标签解释：目前常见的网页图形式有两种就是 GIF 及 JPG 两种格式。GIF 格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而 JPG 格式的图象是全彩色失真压缩，比较适合一大堆颜色的图片，如照片就较适合用JPG格式来表现。

3. 使用范例：

网页制作如何学习（网页制作学习基础实用教程集锦）(2)

网页制作如何学习（网页制作学习基础实用教程集锦）(3)

　　网页图象的重要概念

1. 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻找到你的路径去到该有的图片，所以，我们来看看该如何正确使用路径。有些人并不喜欢将网页及图片通通放在同一个目录下，比如说有人将图片放在 c:\image 里，而网页文件放在 c:\demo 里，这样的话，我们该如何正确的写图片的路径呢？几种常见的情况整理成下表：

基本用法	用法：<IMG src="https://img.aigexing.com图象名称、路径"> 显示图片最基本的方法（就是不加任何属性啦！）其中 test.gif 就是图片的文件名。
原始代码	<IMG src="https://img.aigexing.comtest.gif">我是网页教学网模特儿！
显示结果
我是网页教学网模特儿！
长宽设定	用法：<IMG src="https://img.aigexing.com图象名称、路径" HEIGHT="高度" WIDTH="宽度">设图片的大小，其实不用设也可以，但是设置了更好，可以加快浏览速度，因为浏览器就不用在那边花时间算你的图片有多大啦！此外你也可以自己随意设定图片大小。
原始代码	<IMG src="https://img.aigexing.comtest.gif" HEIGHT=30 WIDTH=30>
显示结果
加上说明	用法：<IMG src="https://img.aigexing.com图片" ALT="说明文字"> 鼠标移到图片上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段文字代替，让使用者知道这个未显示出来的图片究竟是干什么用的，web标准强烈建议大家加上这个说明。
原始代码	<IMG src="https://img.aigexing.comtest.gif" ALT="网页教学网">移到图上看看。
显示结果
移到图上看看。
图片位置	用法：<IMG src="https://img.aigexing.com图片" ALIGN="位置"> 图片位置设定！可以靠左放：ALIGN=LEFT、靠上ALIGN=TOP、靠下ALIGN=BOTTOM、垂直置中ALIGN=MIDDLE，其中靠左放可以造成“文绕图”的效果。
原始代码	<IMG src="https://img.aigexing.comtest.gif">我往右边靠！
显示结果
我往右边靠！
原始代码	<IMG src="https://img.aigexing.comtest.gif">我往右边靠！
显示结果
我往左边靠！
原始代码	<IMG src="https://img.aigexing.comtest.gif">文字对齐我头顶！
显示结果
文字对齐我头顶！
原始代码	<IMG src="https://img.aigexing.comtest.gif">文字对齐我脚底！
显示结果
文字对齐我脚底！
原始代码	<IMG src="https://img.aigexing.comtest.gif">文字对齐我中间！
显示结果
文字对齐我中间！
边框设定	用法：<IMG src="https://img.aigexing.com图片" BORDER="边框粗细"> 设定边框大小，通常都设成 0 感觉比较美观！因为內定的框框实在是不怎么漂亮....。尤其在加连接时，设边框简直就是...。
原始代码	<IMG src="https://img.aigexing.comtest.gif" BORDER="4">
显示结果
左右间距	用法：<IMG src="https://img.aigexing.com图片" HSPACE="离左右元素的距离"> 离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
原始代码	左边的字<IMG src="https://img.aigexing.comtest.gif" HSPACE="15">右边的字
显示结果
左边的字	右边的字
上下间距	用法：<IMG src="https://img.aigexing.com图片" VSPACE="离上下元素的距离"> 离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
原始代码	上面的字<BR><IMG src="https://img.aigexing.comtest.gif" VSPACE="15"><BR>下面的字
显示结果
上面的字	下面的字

HTML文件位置	图片的位置	写法	情形说明
c:\demo	c:\demo	<img src="https://img.aigexing.comtest.gif">	图文均在同一目录
c:\demo	c:\demo\image	<img src="https://img.aigexing.com../../images/test.gif">	图在网页下一层目录
c:\demo	c:\	<img src="https://img.aigexing.com ../test.gif">	图在网页上一层
c:\demo	c:\image	<img src="https://img.aigexing.com ../../images/test.gif">	图文在同一层但不同目录

　　或许有人看到不明白，先说明一下，「../」是回到上一层目录的意思。「image/」则是进入下一层目录image之意，而「../../image/」的意思就是，回到上一层目录，然后再进入目录image中。以上我们使用的均为“相对路径”的概念。

2. 图象单位：或许你常常看到px这个单位，没错，这是我们在制作网页时最常用的一个单位了。这个单位完整的写法是“Pixels”，我们称之为“像素”。像素，是屏幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，屏幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：「640 ×480」、「800 ×600」、「1024 ×768」等。举其中之一的 640 ×480 来说，其代表的就是在屏幕上有宽 640 个光点，高有 480 光点，若是我们将解析度调整为 800 ×600 其宽势必要从 640 变成 800 个光点。

3. 图象格式：网页用的图片目前只有 GIF 格式（即扩展名为gif的图片，如：bg.gif）以及JPG格式（即扩展名为jpg的图片，如：bg.jpg）为一般的浏览器所接受。其他如 bmp 格式或是 pcx 格式都是无法在网页上使用的，若非得要用，那就利用图象处理软件来制作格式的转换吧

学习网页制作基础入门教程(5)背景标签

webjx 更新日期：2005-08-14 11:21 出处：网页教学网作者：闪电儿

　　相关文章：

学习网页制作基础入门教程(1)网页编写

学习网页制作基础入门教程(2)排版标签

学习网页制作基础入门教程(3)字体标签

学习网页制作基础入门教程(4)图象标签

　　背景标签

1. 使用方法：<BODY BGCOLOR="#ffffff" BACKGROUND="bg.jpg">

2. 标签解释：这个标签其实应该老早就要讲了，毕竟它是制作网页不可或缺的基本要素之一，我们背景颜色或图片的设定以及连接字体的颜色，统统都放在 <BODY> 这个标签里面。解释：

背景颜色

用法：<BODY BGCOLOR="颜色代码">设定背景颜色。有人会说：“我已经设定了背景图片，那背景颜色还有用吗？”当然有用！当使用者连接到贵站时，若背景图象还没有显示全，就会先显示背景颜色，您说，是不是比一片灰灰的好看多了呢！

原始代码

<HTML>

<HEAD>

</HEAD>

这里是本文区域

</BODY>

</HTML>

显示结果

单击这里查看演示效果

背景图象

用法：<BODY BACKGROUND="图片名称、路径"> 设定背景图象。图片可以是 JPG 或 GIF 格式的图片，强烈建议：图象不要太大，否则网页加载时会很慢的。

原始代码

<HTML>

<HEAD>

</HEAD>

这里是本文区域

</BODY>

</HTML>

显示结果

单击这里查看演示效果

　　网页内容、连接文字颜色设定

1. 使用方法：<BODY TEXT="#000000" LINK="#0000ff" VLINK="#ff00ff" ALINK="#ff0000>

2. 标签解释：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色內定值该如何修改，这个<BODY>标签中，便有设定网页内容、连接等文字的颜色內定值功能。用法如下：

网页内容颜色

用法：<BODY TEXT="颜色代码"> 设定一般文字颜色，也就是说，若没有特別去设定文字颜色的话，浏览器就会显示你所设定的颜色。

原始代码

<HTML>

<HEAD>

</HEAD>

这里是本文区域

</BODY>

</HTML>

显示结果

单击这里查看演示效果

连接颜色

用法：<BODY LINK="颜色代码"> 设定“连接”的颜色。只要是有连接的地方就会出现你指定的颜色，当然，如果点击连接后，那又会变成另一种颜色了，下面会说明。

原始代码

<HTML>

<HEAD>

</HEAD>

</BODY>

</HTML>

显示结果

单击这里查看演示效果（设定连接为橘色）

连接时颜色

用法：<BODY ALINK="颜色代码"> 设定“点击连接”的颜色，也就是当你鼠标点击那个连接的瞬间所显示的颜色。

原始代码

<HTML>

<HEAD>

</HEAD>

</BODY>

</HTML>

显示结果

单击这里查看演示效果（鼠标点击连接瞬间才会出现我们现在设定的蓝色）

已连接颜色

用法：<BODY VLINK="颜色代码"> 设定“点击连接后”的颜色，也就是如果该连接已经被点击过了，那么就显示的颜色。如此的做法，是要让使用者容易识别到底哪些连接已经去过了，哪些连接没有点击过。

原始代码

<HTML>

<HEAD>

</HEAD>

</BODY>

</HTML>

显示结果

单击这里查看演示效果（设定已点击过的连接以红色显示）

学习网页制作基础入门教程(6)连接标签

webjx 更新日期：2005-08-15 07:57 出处：网页教学网作者：闪电儿

　　相关文章：

学习网页制作基础入门教程(1)网页编写

学习网页制作基础入门教程(2)排版标签

学习网页制作基础入门教程(3)字体标签

学习网页制作基础入门教程(4)图象标签

学习网页制作基础入门教程(5)图象标签

　　网页内部的连接

1. 使用方法：

1.先在欲连接处作记号：<A NAME="here"> 这里是你想连接的点 </A>

2.设定连接：<A HREF="#here"> 连接 </A>

2. 标签解释：有时候，当某页的内容很多时，我们可以利用网页的内部连接，来使使用者快速的找到资料。其原理不过是：在欲连接处做个记号，然后，连接时就寻找这记号，就可以快速找到资料。很简单吧！

3. 使用范例：

范例	第一步骤	第二步骤
网页内部的连接	<A NAME="1">连接的位置</A>	<A HREF="#1">网页内部的连接</A>
网页外部的连接	<A NAME="2">连接的位置</A>	<A HREF="#2">网页外部的连接</A>

网页外部的连接

1. 标签解释：连接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了WWW五彩缤纷的世界。由于网络上的服务五花八门，所以不同的服务有不同的连接方法。

　　2. 使用范例：

网站连接	新浪网	<A HREF="sina">新浪网</A>
电子邮件连接	写情书给朋友	<A HREF="mailto:web@webjx">写情书给朋友</A>
FTP连接	下载档案	<A HREF="ftp://ftp.ntu.edu.tw">下载档案</A>
News连接	网上行 News	<A HREF="news:newsvigator">网上行 News </A>
Gopher连接	SEEDNET Gopher	<A HREF="gopher://gopher.seed/">SEEDNET Gopher</A>
BBS连接	论坛	<A HREF="telnet://bbs.webjx/">论坛</A>

　　连接标签的参数

1. 使用方法：在连接后面加入 target=_参数

2. 标签解释：连接的参数并不多，常见的大概就属 target 这参数了，target 的意思是『目标』，也就是网页连接的指向目标，这参数在框架（Frame）里尤为重要！

3. 使用范例：

标签代码	target=框架名称
效果	这在“框架标签”中也有提到，而且也只有在框架（框窗 or Frame）中才用得到。正常而言，框架有各自的名称，因此，我们可以利用此标签，来指定连接的内容显示到哪一个框架中。

标签代码	target=_blank
效果	将连接的页面内容，开在新的浏览器窗口中。

标签代码	target=_parent
效果	将连接的页面内容，当成文件的上一个页面。

标签代码	target=_self
效果	将连接的书面内容，显示在当前的窗口中。

标签代码	target=_top
效果	这个参数可以解决新连接的页面内容，被框架包围的困扰，使用这参数，会将整个页面重新显示成连接的页面内容。

学习网页制作基础入门教程(7)表格标签

webjx 更新日期：2005-08-16 07:46 出处：网页教学网作者：闪电儿

　　相关文章：

　　学习网页制作基础入门教程(1)网页编写

　　学习网页制作基础入门教程(2)排版标签

　　学习网页制作基础入门教程(3)字体标签

　　学习网页制作基础入门教程(4)图象标签

　　学习网页制作基础入门教程(5)图象标签

　　学习网页制作基础入门教程(6)连接标签

　　表格单元格对齐位置设定

1. 首先我们来看一个最简单的表格：

原始代码

显示结果

</TABLE>

2. 利用<TABLE>这个标签来告诉浏览器，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组 <TR></TR> 是设定一行的开始位置。一组 <TD></TD> 则是设定一个单元格。当然，文字就是要放在这里面。

3. 现在我们再来增加两个单元格：

原始代码

显示结果

</TABLE>

123

4. 看见了吧，<TR></TR>没有增加，<TD></TD>却增加了两组。那如果我要再加上一列呢？很简单，就像这样：

原始代码

显示结果

</TABLE>

123456

合并表格单元格

1. 并非所有的表格都是规规矩矩的只有几行、几列而已，有时候，我们还会希望能够“合并单元格”，让表格更美观、更实用一点，而谈到“合并单元格”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是行列间的合并），一种是左右合并（也就是行间的合并），这两种合并方式各有不同的属性设定方法。

2. 左右合并：基本上，你的表格已经学会了！接下来，咱们就来看看，如何将 1、2、3 单元格合并为一个大格：

原始代码

显示结果

</TABLE>

1456

　　你应该会发现，怎么2、3都消失了？只剩下1，而且该行的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右合并”的属性，COLSPAN="3"的意思就是“这个行左右横跨了3个单元格”，也正因如此，本来的两个<TD>都可以省掉了，因为都被合并掉了！

3. 上下合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4单元格通通合并成一个大格：

原始代码

显示结果

</TABLE>

12356

　　有了上一次的经验后，我们就知道，要合并单元格就一定有些单元格的属性“牺牲”掉（也就是那些被合并的单元格！），这次我们要“上下合并”，我们将1与4合并为一个单元格，那么就要牺牲哪一个单元格呢？没错就是下面那一个倒霉的4，我们看看上图，果然4已经被刪掉了，而在1的 <TD> 标签中则多了个生面孔ROWSPAN，这就是“上下单元格合并”的属性，ROWSPAN=2 的意思就是“这个单元格上下连跨2个单元格”，其结果如上所士。

　　表格单元格对齐位置设定

1. 我可以自己设定表格的大小吗？当然可以，你可以自由设定表格的“宽”及“高”！我们来制作一个宽100、高60的表格，做法如下：

原始代码

显示结果

</TABLE>

2. 哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入这参数即可：

原始代码

显示结果

</TABLE>

　　此外，利用可以让表格中元素置右、利用 ALIGN=LEFT可以让表格中元素置左（默认值），至于为什么要加在<TD>中呢？因为，<TD>是一个单元格的意思，我们要指定在这个单元格中的元素要置中或置左置右，就必须将ALIGN加在<TD>中。

3. 既然可以置中，那么也可以控制表格內文字靠上、靠下吗？可以的，只要利用 VALIGN=TOP 这个属性即可让表格內元素靠上方对齐。

原始代码

显示结果

</TABLE>

　　利用VALIGN=MIDDLE可以让表格中元素垂直置中（默认值），VALIGN=BOTTOM可以让表格中元素靠下方。

　　表格背景、底色设定

1. 表格可以设定底色吗？可以的不但表格可以，你也可以指定某行或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色代码"就行了。下面是指定整个表格背景颜色的方法：

原始代码

显示结果

</TABLE>

1234

　　将BGCOLOR="颜色代码"加在<TR>中，可以指定“一行”的背景颜色：

原始代码

显示结果

</TABLE>

1234

　　将BGCOLOR="颜色代码"加在<TD>中，可以指定“一个单元格”的背景颜色：

原始代码

显示结果

</TABLE>

1234

2. 表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要將BACKGROUND="图片名称" 加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，你也可以指定某行或某列的背景图片：

原始代码

显示结果

</TABLE>

1234

　　表格边框线的设定

1. 如何设定表格粗细？只要利用BORDER="粗细值"就行了。

原始代码

显示结果

</TABLE>

2. 如何设定表格颜色？只要利用BORDERCOLOR="颜色代码"就行了。

原始代码

显示结果

</TABLE>

3. 另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感！只要利用 BORDERCOLORLIGHT="#颜色代码"（亮面设定） BORDERCOLORDARK="颜色代码"（暗面设定）就行了。

原始代码

显示结果

</TABLE>

　　表格间距设定

1. 我们可以利用CELLPADDING属性自由设定表格内容距离边线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言內定值为2，不过建议设定为4比较漂亮。

原始代码

显示结果

</TABLE>

2. 我们可以利用CELLSPACING属性设定表格单元格边线之间的距离。一般而言默认值为2，不过建议设置为 0 。

原始代码

显示结果

</TABLE>

学习网页制作基础入门教程(8)框架标签

webjx 更新日期：2005-08-17 12:07 出处：网页教学网作者：闪电儿

　　相关文章：

　　学习网页制作基础入门教程(1)网页编写

　　学习网页制作基础入门教程(2)排版标签

　　学习网页制作基础入门教程(3)字体标签

　　学习网页制作基础入门教程(4)图象标签

　　学习网页制作基础入门教程(5)图象标签

　　学习网页制作基础入门教程(6)连接标签

　　学习网页制作基础入门教程(7)表格标签

　　框架概念

1. 首先，各位先看看右边这张图片，将利用这张图来做解释，这样子，讲起来可能会清楚一些。我们可以看见，右边的这个图片，一共分为 1 、 2 、 3 三个框架，每一个框架，各有其显示的內容分别是 a.htm、b.htm、c.htm 三个文件。然而左下角的那个 index.htm 是做什么用的呢？

2. 原来，左下角的这个文件 index.htm，就是要告诉浏览器，我们要将页面分割成这样，也就是说，所有Frame的标签，其实都只放在 index.htm 这个文件里。

3. 这样明白了吧！总之，你要分割几个框，就一定会有几个对应的html 文件。

　　开始分割

1. 分割窗口可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想像页面是一个蛋糕，你要怎么割，才能割成那样呢？

原始代码

显示结果

<HTML>

<HEAD>

</HEAD>

</HTML>

2. 各位会发现，奇怪，在上面的语法中，怎么没看到 <BODY></BODY> 标签呢？呵呵...没错，它已经被将要加进去的 <FRAMESET></FRAMESET> 标签給取代了！也就是说，如果我们要分割页面，就要先用<FRAMESET>标签告诉浏览器：＂我要开始分割了！＂此时，<BODY> 是派不上用场的，所以躲到一旁凉快去了！

3. 现在开似乎动手分割看吧！我们先将页面分成左右两边，如下图：

原始代码

显示结果

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

4. 在<FRAMESET>中，我们要告诉浏览器到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESET COLS="120 *"。COLS="120 *" 就是说，左边那一栏强制定为 120 px，右边则随浏览器大小而变。除了直接写px数外，我们也可以用百分比来表示，例如COLS="20% 80%"也是可以的。

5. 然后，再将右边的框窗再分割成上下两个页面。如下图：

原始代码

显示结果

<HTML>

<HEAD>

</HEAD>

　</FRAMESET>

</HTML>

6. 看见了没？原本的 <FRAME src="https://img.aigexing.comb.htm" NAME="2">在第 3 点的语法中）被另一组<FRAMESET ROWS="100 *">取代了！所以要注意！第二组<FRAMESET ROWS="100 *">是被第一组<FRAMESET COLS="120 *"> 包围起来的！

7. 不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个文件 a.htm 、b.htm 、c.htm 那么就完工了！当然，这是一个最好的分割法，再将一些进阶的标签在下面一一说明。

　　其他标签参数说明：

　　例子 : <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="https://img.aigexing.coma.htm" NAME="1" FRAMEBORDERr=0 SCROLLING="no" noresize marginhight=2 marginwidth=2>

　　1. src="https://img.aigexing.coma.htm" 设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）

　　2. NAME="1" 设定这个框架的名称，这样才能指定框架来作连接，所以一定要设定啊！当然名称随你高兴取名。

　　3. FRAMEBORDERr=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。

　　4. SCROLLING="no" 设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情況显示。 noresize

　　5. noresize 设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。

　　6. marginhight=2 表示框架高度部份边缘所保留的空间。

　　7. marginwidth=2 表示框架宽度部分边缘所保留的空间。

　　其他标签

1. <noframe>

　　使用方法：<noframe>请换有支持Frame功能的浏览器<noframe>

　　标签解释：有些浏览器版本较低，无法显示Frame的功能，因此，就要使用此标签，让这些人知道，该换换浏览器了。或者，你也可以在这标签中，写上沒有Frame语法的网页标签，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。

　　2. target=框架名称

　　使用方法： <A HREF="d1-1.htm" target=3>显示內容</A>

　　标签解释：常常有一个情況是，我想在框窗 1 的地方按下连接，但是希望他的内容出现在框架 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框架名称就行啦！

　　3. target=_top

　　使用方法：< A HREF="webjx" target=_top>网页教学网</A>

　　标签解释：有时候，在框架里面连接到别的站，却发现，新连接的这个站，竟然被框架包住了，不但难看，而且可能会吃上官司！所以，这时候你必需加入 target=_top这个参数，那么，这个新连接到的网站，就会重新占据整个浏览器了！

学习网页制作基础入门教程(9)序列标签

webjx 更新日期：2005-08-18 09:30 出处：网页教学网作者：闪电儿

　　相关文章：

学习网页制作基础入门教程(1)网页编写

学习网页制作基础入门教程(2)排版标签

学习网页制作基础入门教程(3)字体标签

学习网页制作基础入门教程(4)图象标签

学习网页制作基础入门教程(5)图象标签

学习网页制作基础入门教程(6)连接标签

学习网页制作基础入门教程(7)表格标签

学习网页制作基础入门教程(8)框架标签

　　无序标签

1. 序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并没有顺序关系，纯粹只是利用条列式方法来显示资料而已，此种无序标签，在各条列前面均有一符号以示分隔。至于“有序条列”就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。

2. 我们先来看看“无序列表标签”如何使用：

原始代码

显示结果

<UL>

<LI>靓仔

<LI>靓女

<LI>靓世界

</UL>

靓仔
靓女
靓世界

其中 <UL>标签即为“无序列表标签”，每增加一列內容，就必须加一个<LI> 。

3. 前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种

原始代码

显示结果

<LI>靓仔

<LI>靓女

<LI>靓世界

</UL>

靓仔
靓女
靓世界

有序标签

1. 接下来，我们来看看“有序列表标签”如何使用：

原始代码

显示结果

<OL>

<LI>靓仔

<LI>靓女

<LI>靓世界

</OL>

靓仔
靓女
靓世界

　　其中 <OL>标签即为“有序标签”，每增加一列內容，就必须加一个<LI> 。

2. 和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种：

原始代码

显示结果

<LI>靓仔

<LI>靓女

<LI>靓世界

</OL>

靓仔
靓女
靓世界

3. 另外，我们也可指定序列起始的数目，其方法如下：

原始代码

显示结果

<LI>靓仔

<LI>靓女

<LI>靓世界

</OL>

靓仔
靓女
靓世

学习网页制作基础入门教程(10)表单标签

webjx 更新日期：2005-08-18 14:06 出处：网页教学网作者：闪电儿

　　各种输入类型

1. 文字输入列：每个表单之所以会有不同的类型，原因就在于TYPE="表单类型"设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的类型就是TYPE="TEXT"，其使用方法如下：

原始代码

<FORM>

姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">

</FORM>

显示结果

姓名：

　　其有下列可设定之属性：

NAME="名称"，是设定此文字输入列的名称，程序中常会用到。
SIZE="数值"，是设定此文字输入列显示的宽度。
VALUE="预设内容"，是设定此文字输入列的预设内容。
ALIGN="对齐方式"，是设定此文字输入列的对齐方式，其值有：TOP（向上对齐）、MIDDLE（中间对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对居中）、ABSBOTTOM（绝对置下）等。
MAXLENGTH="数值"，是设定此文字输入列可设定输入的最大长度。

2. 单选表单：利用TYPE="RADIO" 就会产生单选表单，单选表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选表单。

原始代码

<FORM>

姓名：

男<INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">

女<INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">

</FORM>

显示结果

性別：男女

　　其有下列可设定之属性：

NAME="名称"，是设定此一栏的名称，程序中常会用到。
VALUE="内容"，是设定此一栏的内容、值或是意义。
ALIGN="对齐方式"，是设定此一栏的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对居中）、ABSBOTTOM（绝对置下）等。
CHECKED，是设定此一栏为预设选取值。

3. 复选表单：利用TYPE=" CHECKBOX "就会产生复选表单，复选表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选表单。

原始代码

<FORM>

喜好：

<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影

<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书

</FORM>

显示结果

喜好：电影看书

　　其有下列可设定之属性：

NAME="名称"，是设定此一栏的名称，程序中常会用到。
VALUE="内容"，是设定此一栏的内容、值或是意义。
ALIGN="对齐方式"，是设定此一栏的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对居中）、ABSBOTTOM（绝对置下）等。
CHECKED，是设定此一栏为预设选取值。

4. 密码表单：利用TYPE=" PASSWORD "就会产生一个密码表单，密码表单和文字输入表单长得几乎一样，差別就在于密码表单在输入时全部会以星号来取代输入的文字，以防他人偷窥。

原始代码

<FORM>

请输入密码：<INPUT TYPE="PASSWORD" NAME="INPUT">

</FORM>

显示结果

请输入入密码：

　　其有下列可设定之属性：

NAME="名称"，是设定此一栏的名称，程序中常会用到。
SIZE="数值"，是设定此一栏显示的宽度。
VALUE="预设内容"，是设定此一栏的预设内容。
ALIGN="对齐方式"，是设定此一栏的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对居中）、ABSBOTTOM（绝对置下）等。
MAXLENGTH="数值"，是设定此一栏可设定输入的最大长度。

5. 送出按钮：通常我们表单填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用TYPE=" SUBMIT "及TYPE=" RESET "来产生，相当的简单易用。

原始代码

<FORM>

</FORM>

显示结果

　　其有下列可设定之属性：

NAME="名称"，是设定此一按钮的名称。
VALUE="文字"，是设定此一按钮上要显示的文字，若是没有设定，浏览器也会自动替您加上“提交”、“重置”等字样。
ALIGN="对齐方式"，是设定此一栏的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对居中）、ABSBOTTOM（绝对置下）等。

6. 按钮元件：表单中或是JAVA SCRIPT常会用到按钮来作一些效果，因此，我们可以利用TYPE=" BUTTON "来产生一个按钮，相当简单。

原始代码

<FORM>

请按下按钮：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">

</FORM>

显示结果

请按下按钮：

　　其有下列可设定之属性：

NAME="名称"，是设定此一按钮的名称。
VALUE="文字"，是设定此一按钮上要显示的文字。
ALIGN="对齐方式"，是设定此一栏的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对居中）、ABSBOTTOM（绝对置下）等。

7. 大量文字输入元件：有时候我们会希望让使用者输入比较多的文字，此时，文字输入列就显得不能使用，因此我们就可以利用<TEXTAREA></TEXTAREA> 来产生一个可以输入大量文字的元件，在两个标签中的文字会出现在框框中，可作为预设文字。

原始代码

<FORM>

请输入你的意见：<BR>

</FORM>

显示结果

请输入你的意见：

　其有下列可设定之属性：

NAME="名称"，是设定此一栏的名称。
WRAP="设定值"，是设定此一栏的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在屏幕上自动换行，不过若是使用者没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将屏幕上的内容自动换行，视为换行效果送出）。
COLS="数值"，是设定此一栏的行数（横向字数）。
ROWS="数值"，是设定此一栏的列数（垂直字数）。

8. 下拉式选单：令整个网页看起来有很专业的感觉，我们只要利用<SELECT NAME="名称">便可以产生一个下拉式选单，另外，还需要配合<OPTION>标签来产生选项，这样才算完整！

原始代码

<FORM>

你喜欢看书吗？：

<OPTION VALUE="非常喜欢">非常喜欢

<OPTION VALUE="还算喜欢">还算喜欢

<OPTION VALUE="不太喜欢">不太喜欢

<OPTION VALUE="非常讨厌">非常讨厌

</SELECT>

</FORM>

显示结果

你喜欢看书吗？：

　　其有下列可设定之属性：

SIZE="数值"，是设定此一栏的大小，预设值为1，若是您的选项有四个，然后你将SIZE设成4，那么，下拉式选单便会变成选项方快了，将四个选项一起显示在方快中。
MULTIPLE，是设定此一栏为复选，可以一次选好几个选项。

学习网页制作基础入门教程(11)注意的问题

webjx 更新日期：2005-08-18 15:24 出处：网页教学网作者：闪电儿

　　注意屏幕的分辨率

　　电脑的分辨率设定不可能每台完全一样，一般个人用大多是800*600，而拥有大尺寸屏幕者不来个 1024*768 似乎太对不起显示器了，然而，这和网页设计有关系，在不同的分辨率下设计网页，会造成的结果可大不相同，甚至你会发现，为什么换了个分辨率后，这个文字图片或者表格均来个乾坤大挪移，甚至有些东西看不到，尤其是使用框架时更容易有这些问题！最简单的检查方法就是更改你的显示器的分辨率，来实际试看看，看网页有没有变形。设定显示器分辨率的方法如下：【开始】【设置】【控制面板】【显示】选取【设置】选项，然后你就会看到【屏幕分辨率】，上面有个指针，用鼠标去移动他就行了！在各种分辨率下看一看你的网页后，你就会发现...光是三种分辨率也会造成不小的困扰。怎么解决呢？看你了！建议你可以多利用表格来排版，并且设定表格的具体宽度！

　　两种浏览器的兼容性

　　这是最讨厌的问题了！明明有html4.0明确的规格书出炉，这浏览器的两大厂商却仍我行我素，各自开创一片天，叫我们这些百姓真是无所适从，例如Netscape开发出JAVA Script，IE不甘示弱便弄个VB Script...别说其他的語言了，光是基本标签两者的差异性就很大了！遇到这种问题，解決的方式不少，有人利用 CGI 或是 JAVA Script 写个半别浏览器的程序，然后再为这两大浏览器各自打造网页，也有人干脆就用最简单的语法来写，求得两者皆通，另外更性格者，在网页上大笔一挥“本网页只适用于IE4.0以上版本浏览”这样也算交差了事。

　　文件名的问题

　　为什么要注意这个呢？在这儿就要稍微解释一下了。一般我们个人使用的电脑多是用windows作为操作系统，因为他简单好用（虽然有时不稳定），因简单好用，所以他的一些使用规定就少了，例如win.gif 和 win.GIF在 windows 的环境下，他都把他们两个当作是同一个文件，所以在写网页时，不论你大小写怎么改，windows 环境下都能正确无误的秀给你看，但是，一但上船到网络主机上时，你就会发现事情大调了！因为在网络上的主机系统很多都是采用 UNIX 的相关平台如 LINUX 或是 FreeBSD 等，他们的使用规定是很严格的，win.gif、Win.gif、win.GIF 对他而言是三个不同的文件，所以常常会发生“我在电脑上看没事，一上传后却说找不到文件”的情形。所以建议...没事的话，文件名尽量用英文小写的吧！中文文件名就尽量避免...以免出什么状况。

文件篇幅有限，将会每天定期更新数篇网页学习、网页制作、C 、C语言学习等等各种内部资料。请持续关注我：大千世界任君行。相信不会让各位失望。谢谢

同时，请将您需要的文章、想学习的编程内容留言，我会根据大家喜好定期编写大量文稿。谢谢。

网站首页

返回栏目

网页制作如何学习（网页制作学习基础实用教程集锦）

猜您喜欢：

相关文章