“偷学”网页制作之真经(页 1) - 澳洲网页设计 -
2005-11-23 05:31
城市童话
“偷学”网页制作之真经
（一）网页制作为何要“偷学”
随着英特网的飞速发展，个人创办网站早已不是什么新鲜事了，可那
种看似天书般的HTML代码，却把众多初学者挡在了门外。其实如今制作网
页完全靠手工输入代码的几乎没有，像FrontPage Dreamweaver之类的主页
工具可成倍提高你的工作效率。这些软件学习起来并不难，不过想做出有
水准的东东也不太容易。请教一些成功者，他很可能会告诉你：“我是在
参考了N个别人的网页后，才琢磨出现在这种样子的！”网络的巨大魅力之
一在于资源共享，知识当然也是共享的财富，既已被别人探索出的技巧，
后来者没必要再去重复无用的劳动。说“参考”也好、说“剽窃”也好，
总之千万别感到自卑，只要不是出于商业营利目的，学习本身是无错的，
相信能得到“斑竹”们的谅解（网虫应是世上最无私的群体）。
看来所谓“偷学”不过是“实践出真知”这句话的“变种”而已！说
点大道理就是一种由感性认识得到理性认识的学习方法。它与利用教材学
习相比具有三大优势：
1、生动活泼，大家是先看到效果后学会原理，所以印象深刻；
2、高度灵活，学习者不受任何条条框框的约束，自选最感兴趣的内容
去学，变传统学习的被动接受为主动吸收；
3、以成就促进步，你最初可不必深入了解每个模块的细节，便能象搭
积木一样迅速做出精彩的网页，不断的成就感与日益浓厚的兴趣形成良性
循环，带你走向成功的彼岸！
采取“拿来主义”，虽是学作网页的一条捷径，但最忌讳全盘照抄，
否则既不能达到学习的目的；又会给人似曾相识的感觉，缺少新意，这一
点还需自己好好把握。我仅想在此介绍一些“偷学”的基本技巧，以及如
何靠学来的东西“组装”出理想网页的方法，供准备入门的朋友试试身手。
学习前大家应自行掌握一些HTML的基本知识：认识HTML常见标签、了
解一点脚本及样式表的作用和连接、嵌入方法，不然照抄都不知从何抄起
。学习离不开工具，初学者最佳配置首推Win98+FrontPage98+IE5。我不是
微软的信徒，可其产品的简单易用却是不容争辨的事实；版本都说是越高
越好，可MicroSoft（我看叫LargeSoft更合适）会让你消耗掉200%的资源
去换取20%的性能提升。选用IE5不仅因为众多DHTML、JavaScript新特性需
它的支持，更主要的是要用到它那强大的“另存为”功能。
安装过FrontPage98后它会成为HTML文档的默认编辑器，通过在硬盘中
HTML类文件右键菜单里选Edit；或用IE打开后在文件菜单中选编辑，都可
启动FrontPage98对网页进行修改。但不能对网上页面进行此种操作，而必
须用到IE的“另存为”功能，先存盘再打开。保存时请一定采取“Web页，
全部”方式（如：图一），这样IE便会智能的下载全部与该页面有关的所
有图片、脚本、CSS样式表等内容，并保存在与主HTML文件同路径下且名
为“网页标题.files”的文件夹中（这里面的文件，本文统称为外部文件
）。其实此时主HTML文件中所有下载过的嵌入文件相对路径也被IE做了修
改。这样保存还有一个好处是：即使当前网页是框架结构，IE也能自动把
所有相关祯页面同时保存，你不会再为只下载个空框架而懊恼了。
保存前还请注意几点：要有明确的学习目的，看到别人页面上的东西
正是自己需要的；或页面很新颖有趣，想弄清它是如何实现的,总之有目的
保存会提高自己的学习兴趣。
一定要等页面完全显示后再保存，不然有可能因服务器停止响应而造
成浏览器死锁，当然你采取离线后脱机浏览历史记录来保存，也是个很好
的办法。
一旦发现页面出现错误，多数是因网络传输不稳定引起的，可刷新一
次试试，若没见好转，还是暂不存为妙。或是等清除缓存后再试；或是待
“斑竹”修改后再图之也不迟。
一般由ASP、PHP、CGI程序产生的页面是可以保存的，但JavaScript、
VBScript等脚本语言生成的页面保存后是乱码（Unicode），不易还原，
况且这些页面多比较简单，没什么可学的，关键还是要学习用于生成它们的
脚本，所以遇到此类情况，我们可返回上一页面再保存，常能“窃取”回原
始脚本。
网页一经存盘，便可用FrontPage98打开编辑了……咦！为什么一片空
白，转到HTML区，只有<head></head>标签间的几行代码，<body></body>
标签间则是一无所有？不要泄气，这是极少数“吝啬”的“斑竹”为防初
学者“偷学”，而针对FrontPage施展的障掩法。正常情况下网页是不会加
密的，这种方法还不能算做加密，很容易对付。我们可关掉FrontPage，改
用记事本打开上述HTML文件，用查找命令找到所有“</meta>”（不分大小
写）标签，统统删除即可正常编辑了（如下图）。
顺便提一句：Internet临时文件对学习是很重要的，一些已看过却忘
了保存的内容，通过脱机浏览以前的网页，往往都能找到。所以在条件许
可的情况下，IE缓存空间设大点比较好（100M以上），历史记录天数也应
长一些（15天以上）。
（三）活学活用别人的网页
用FrontPage98打开由网上下载的网页（如下图），好学者定会油然而
生一种幸福感，天下没有哪类设计语言，能像HTML这样，随处可以得到如
此活生生的源程序实例！接下来问题又出现了，从哪学起呢？面对满天掉
下的“馅饼”，我们要做的事不妨分为模仿和引用两类。我想下面为朋友
们例数一、二，实战中还望大家能举一反三。
一、学习别人成功的页面布局
现在网页几乎都使用了表格排版方式，FrontPage98在表格功能上也继
承了微软办公系列软件的“传统”，即位置和大小的调整总是有些别扭，
难随人愿。当表格嵌套一多，在普通区编辑就有点无能为力了，此时若不
接触HTML代码则很难做到乘心如意。所以学习别人的布局方法，一定不要
错过对HTML原文件的分析，这样一来，无论多么复杂的效果，我们都将会
在编辑器里找到一些蛛丝马迹：
为什么有的页面版块边角能圆滑的过渡？啊！原来只是在版块交界处
贴了一张圆弧状图片……
为什么我的表格行或列总是不能错位对齐？噢！原来可用在单元格里
插入新表格的方法解决这种问题……
为什么同一张图片能够链接不同的内容？嗯！原来只需简单的划分图
片热区便达到了目的……
一个个问题相继在别人网页中找到了答案，得以迎刃而解，这一切都
该好好感谢英特网，和那些仍在前面摸索着的网虫们。
（一）网页制作为何要“偷学”
随着英特网的飞速发展，个人创办网站早已不是什么新鲜事了，可那
种看似天书般的HTML代码，却把众多初学者挡在了门外。其实如今制作网
页完全靠手工输入代码的几乎没有，像FrontPage Dreamweaver之类的主页
工具可成倍提高你的工作效率。这些软件学习起来并不难，不过想做出有
水准的东东也不太容易。请教一些成功者，他很可能会告诉你：“我是在
参考了N个别人的网页后，才琢磨出现在这种样子的！”网络的巨大魅力之
一在于资源共享，知识当然也是共享的财富，既已被别人探索出的技巧，
后来者没必要再去重复无用的劳动。说“参考”也好、说“剽窃”也好，
总之千万别感到自卑，只要不是出于商业营利目的，学习本身是无错的，
相信能得到“斑竹”们的谅解（网虫应是世上最无私的群体）。
看来所谓“偷学”不过是“实践出真知”这句话的“变种”而已！说
点大道理就是一种由感性认识得到理性认识的学习方法。它与利用教材学
习相比具有三大优势：
1、生动活泼，大家是先看到效果后学会原理，所以印象深刻；
2、高度灵活，学习者不受任何条条框框的约束，自选最感兴趣的内容
去学，变传统学习的被动接受为主动吸收；
3、以成就促进步，你最初可不必深入了解每个模块的细节，便能象搭
积木一样迅速做出精彩的网页，不断的成就感与日益浓厚的兴趣形成良性
循环，带你走向成功的彼岸！
采取“拿来主义”，虽是学作网页的一条捷径，但最忌讳全盘照抄，
否则既不能达到学习的目的；又会给人似曾相识的感觉，缺少新意，这一
点还需自己好好把握。我仅想在此介绍一些“偷学”的基本技巧，以及如
何靠学来的东西“组装”出理想网页的方法，供准备入门的朋友试试身手。
学习前大家应自行掌握一些HTML的基本知识：认识HTML常见标签、了
解一点脚本及样式表的作用和连接、嵌入方法，不然照抄都不知从何抄起
。学习离不开工具，初学者最佳配置首推Win98+FrontPage98+IE5。我不是
微软的信徒，可其产品的简单易用却是不容争辨的事实；版本都说是越高
越好，可MicroSoft（我看叫LargeSoft更合适）会让你消耗掉200%的资源
去换取20%的性能提升。选用IE5不仅因为众多DHTML、JavaScript新特性需
它的支持，更主要的是要用到它那强大的“另存为”功能。
安装过FrontPage98后它会成为HTML文档的默认编辑器，通过在硬盘中
HTML类文件右键菜单里选Edit；或用IE打开后在文件菜单中选编辑，都可
启动FrontPage98对网页进行修改。但不能对网上页面进行此种操作，而必
须用到IE的“另存为”功能，先存盘再打开。保存时请一定采取“Web页，
全部”方式（如：图一），这样IE便会智能的下载全部与该页面有关的所
有图片、脚本、CSS样式表等内容，并保存在与主HTML文件同路径下且名
为“网页标题.files”的文件夹中（这里面的文件，本文统称为外部文件
）。其实此时主HTML文件中所有下载过的嵌入文件相对路径也被IE做了修
改。这样保存还有一个好处是：即使当前网页是框架结构，IE也能自动把
所有相关祯页面同时保存，你不会再为只下载个空框架而懊恼了。
保存前还请注意几点：要有明确的学习目的，看到别人页面上的东西
正是自己需要的；或页面很新颖有趣，想弄清它是如何实现的,总之有目的
保存会提高自己的学习兴趣。
一定要等页面完全显示后再保存，不然有可能因服务器停止响应而造
成浏览器死锁，当然你采取离线后脱机浏览历史记录来保存，也是个很好
的办法。
一旦发现页面出现错误，多数是因网络传输不稳定引起的，可刷新一
次试试，若没见好转，还是暂不存为妙。或是等清除缓存后再试；或是待
“斑竹”修改后再图之也不迟。
一般由ASP、PHP、CGI程序产生的页面是可以保存的，但JavaScript、
VBScript等脚本语言生成的页面保存后是乱码（Unicode），不易还原，
况且这些页面多比较简单，没什么可学的，关键还是要学习用于生成它们的
脚本，所以遇到此类情况，我们可返回上一页面再保存，常能“窃取”回原
始脚本。
网页一经存盘，便可用FrontPage98打开编辑了……咦！为什么一片空
白，转到HTML区，只有<head></head>标签间的几行代码，<body></body>
标签间则是一无所有？不要泄气，这是极少数“吝啬”的“斑竹”为防初
学者“偷学”，而针对FrontPage施展的障掩法。正常情况下网页是不会加
密的，这种方法还不能算做加密，很容易对付。我们可关掉FrontPage，改
用记事本打开上述HTML文件，用查找命令找到所有“</meta>”（不分大小
写）标签，统统删除即可正常编辑了（如下图）。
顺便提一句：Internet临时文件对学习是很重要的，一些已看过却忘
了保存的内容，通过脱机浏览以前的网页，往往都能找到。所以在条件许
可的情况下，IE缓存空间设大点比较好（100M以上），历史记录天数也应
长一些（15天以上）。
（三）活学活用别人的网页
用FrontPage98打开由网上下载的网页（如下图），好学者定会油然而
生一种幸福感，天下没有哪类设计语言，能像HTML这样，随处可以得到如
此活生生的源程序实例！接下来问题又出现了，从哪学起呢？面对满天掉
下的“馅饼”，我们要做的事不妨分为模仿和引用两类。我想下面为朋友
们例数一、二，实战中还望大家能举一反三。
一、学习别人成功的页面布局
现在网页几乎都使用了表格排版方式，FrontPage98在表格功能上也继
承了微软办公系列软件的“传统”，即位置和大小的调整总是有些别扭，
难随人愿。当表格嵌套一多，在普通区编辑就有点无能为力了，此时若不
接触HTML代码则很难做到乘心如意。所以学习别人的布局方法，一定不要
错过对HTML原文件的分析，这样一来，无论多么复杂的效果，我们都将会
在编辑器里找到一些蛛丝马迹：
为什么有的页面版块边角能圆滑的过渡？啊！原来只是在版块交界处
贴了一张圆弧状图片……
为什么我的表格行或列总是不能错位对齐？噢！原来可用在单元格里
插入新表格的方法解决这种问题……
为什么同一张图片能够链接不同的内容？嗯！原来只需简单的划分图
片热区便达到了目的……
一个个问题相继在别人网页中找到了答案，得以迎刃而解，这一切都
该好好感谢英特网，和那些仍在前面摸索着的网虫们。
2005-11-23 05:32
城市童话
HTML指令 入门
從html開始.....本來想自己寫.呵呵.可在網上隨便說找到了一個很好的.算了.改改就貼上來吧.HTML入门虽然不难，可是要掌握技巧的奥妙，您仍须仰赖好的范例说明，并透过浏览器的Source功能阅读，技术很快会精進喲.
结构
＜html＞
＜head＞
＜title＞标题＜title＞
＜/head＞
＜body＞..........文件内容..........
＜/body＞
＜/html＞
----------------------------------------------
标题
1.文件标题
＜title＞..........＜/title＞
2.文件更新--＜meta＞
【1】10秒后自动更新一次
＜meta http-equiv="refresh" content=10＞
【2】10秒後自动连结到另一文件
＜meta http-equiv="refresh" content="10；URL=欲连结文件之URL"＞
3.查询用表单--＜isindex>
若欲设定查询栏位前的提示文字：
＜isindex prompt="提示文字"＞
4.预设的基准路径--＜base>
＜base href="放置文件的主机之URL"＞
版面
1.标题文字 ＜h#＞..........＜/h#＞ #=1~6；h1为最大字，h6为最小字
2.字体变化 ＜font＞..........＜/font＞
【1】字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大
【2】指定字型 ＜font face="字型名称"＞..........＜/font＞
【3】文字颜色 ＜font color=#rrggbb＞..........＜/font＞ rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码
3.显示小字体 ＜small＞..........＜/small＞
4.显示大字体 ＜big＞..........＜/big＞
5.粗体字 ＜b＞..........＜/b＞
6.斜体字 ＜i＞..........＜/i＞
7.打字机字体 ＜tt＞..........＜/tt＞
8.底线 ＜u＞..........＜/u＞
9.删除线 ＜strike＞..........＜/strike＞
10.下标字 ＜sub＞..........＜/sub＞
11.上标字 ＜sup>..........＜/sup＞
12.文字闪烁效果 ＜blink＞..........＜/blink＞
13.换行 ＜br＞
14.分段 ＜p＞
15.文字的对齐方向 ＜p align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.＜p align="#"＞之後的文字都会以所设的对齐方式显示， 直到出现另一个＜p align="#"＞改变其对齐方向，或遇到 ＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。
16.分隔线 ＜hr＞
【1】分隔线的粗细 ＜hr size=点数＞
【2】分隔线的宽度 ＜hr size=点数或百分比＞
【3】分隔线对齐方向 ＜hr align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
【4】分隔线的颜色 ＜hr color=#rrggbb＞
【5】实心分隔线 ＜hr noshade＞
17.向中对齐 ＜center＞..........＜/center＞
18.依原始样式显示 ＜pre＞..........＜/pre＞
19.＜body＞指令的属性
【1】背景颜色 -- bgcolor ＜body bgcolor=#rrggbb＞
【2】背景图案 -- background ＜body background="图形文件名"＞
【3】设定背景图案不会卷动 -- bgproperties ＜body bgproperties=fixed＞
【4】文件内容文字的颜色 -- text ＜body text=#rrggbb＞
【5】超连结文字颜色 -- link ＜body link=#rrggbb＞
【6】正被选取的超连结文字颜色 -- vlink ＜body vlink=#rrggbb＞
【7】已连结过的超连结文字颜色 -- alink ＜body alink=#rrggbb＞
图片
1.插入图片 ＜img src="图形文件名"＞
2.设定图框 -- border ＜img src="图形文件名" border=点数＞
3.设定图形大小 -- widthⅱheight ＜img src="图形文件名" width=宽度点数 height=高度点数＞
4.设定图形上下左右留空 -- vspaceⅱhspace ＜img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数＞
5.图形附注 ＜img src="图形文件名" alt="说明文字"＞
6.预载图片
＜img src="高解析度图形文件名" lowsrc="低解析度图形文件名"＞ P.S.两个图的图形大小最好一致
7.影像地图（Image Map） ＜img src="图形文件名" usemap="#图的名称"＞ ＜map name="图的名称"＞
＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞ ＜/map＞
【1】定义形状 -- shape
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形
【2】定义区域 -- coords
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：＜area shape=rect coords=100,50,200,75 href="URL"＞
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：＜area shape=circle coords=85,155,30 href="URL"＞
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：＜area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"
表格
1.定义表格 ＜table＞..........＜/table＞
【1】设定边框的厚度 -- border
＜table border=点数＞
【2】设定格线的宽度 -- cellspacing
＜table cellspacing=点数＞
【3】设定资料与格线的距离 -- cellpadding
＜table cellpadding=点数＞
【4】调整表格宽度 -- width
＜table width=点数或百分比＞
【5】调整表格高度 -- height
＜table height=点数或百分比＞
【6】设定表格背景色彩 -- bgcolor
＜table bgcolor=#rrggbb＞
【7】设定表格边框色彩 -- bordercolor
＜table bordercolor=#rrggbb＞
2.显示格线 ＜table border＞
3.表格标题
＜caption＞..........＜/caption＞
表格标题位置 -- align
＜caption align="#"＞ #号可为 top：表标题置于表格上方（预设值）
bottom：表标题置于表格下方
4.定义列 ＜tr＞
5.定义栏位 《1》＜td＞：靠左对齐
《2》＜th＞：靠中对齐ⅱ粗体
【1】水平位置 -- align ＜th align="#"＞
#号可为 left：向左对齐
center：向中对齐 right：向右对齐
【2】垂直位置 -- align ＜th align="#"＞ #号可为
top：向上对齐 middle：向中对齐
bottom：向下对齐
【3】栏位宽度 -- width
＜th width=点数或百分比＞
【4】栏位垂直合并 -- rowspan
＜th rowspan=欲合并栏位数＞
【5】栏位横向合并 -- colspan
＜th colspan=欲合并栏位数＞
清单
一、目录式清单
＜dir＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/dir＞ P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）
二、选项式清单 ＜menu＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/menu＞
三、有序号的清单 ＜ol＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ol＞
【1】序号形式 -- type ＜ol type=#＞或＜li type=#＞ #号可为 A：表以大写英文字母AⅱBⅱCⅱD...做为项目编号 a：表以小写英文字母aⅱbⅱcⅱd...做为项目编号 I：表以大写罗马数字做为项目编号 i：表以小写罗马数字做为项目编号 1：表以阿拉伯数字做为项目编号（预设值）
【2】起始数字 -- start ＜ol start=欲开始计数的序数＞
【3】指定编号 -- value ＜li value=欲指定的序数＞
四、无序号的清单 ＜ul＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ul＞
【1】项目符号形式 -- type ＜ul type=#＞或＜li type=#＞ #号可为 disc：实心圆点（预设值） circle：空心圆点 square：实心方块
【2】原始清单 -- plain ＜ul plain＞
【3】清单排列方式 -- warp 《1》清单垂直排列 ＜ul warp = vert＞ 《2》清单水平排列 ＜ul warp = horiz＞
五、定义式清单 ＜dl＞ ＜dt＞项目1 ＜dd＞项目1说明 ＜dt＞项目2 ＜dd＞项目2说明 ＜dt＞项目3 ＜dd＞项目3说明 ＜/dl＞
紧密排列 -- compact ＜dl compact＞ P.S.如此可使＜dt＞的内容与＜dd＞的内容在同一行，仅 以数格空白相隔而不换行，但若＜dt＞的文字超过一 定的长度后，compact的作用就消失了！
表单
一、基本架构 ＜form action="处理资料用的CGI程式之URL"或"mailt电子信箱的URL" method="get或post"＞ .......... .......... .......... ＜/form＞
二、输入文件型表单 ＜form action="URL" method="post"＞ ＜input＞ ＜input＞ .......... .......... ＜/form＞
【1】栏位类型 -- type ＜input type=#＞ #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位
【2】栏位名称 -- name ＜input name="资料栏名"＞ P.S.若type为submitⅱreset则name不必设定
【3】文件上的预设值 -- value ＜input value="预设之字串"＞
【4】设定栏位的宽度 -- size ＜input size=字元数＞
【5】限制最大输入字串的长度 -- maxlength ＜input maxlength=字元数＞
【6】预设checkbox或radio的初值 -- checked ＜input type=checkbox checked＞ ＜input type=radio checked＞
【7】指定图形的URL -- src ＜input type=image src="图档名"＞
【8】图文对齐 -- align ＜input type=image align="#"＞ #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部
三、选择式表单 ＜form action="URL" method="post"＞ ＜select＞ ＜option＞ ＜option＞ .......... .......... ＜/select＞ ＜/form＞
A、＜select＞的属性
【1】栏位名称 -- name ＜select name="资料栏位名"＞
【2】设定显示的选项数 -- size ＜select size=个数＞
【3】多重选项 -- multiple ＜select multiple＞
B、＜option＞的属性
【1】定义选项的传回值 -- value ＜option value="传回值"＞
【2】预先选取的选项 -- selected ＜option selected＞
四、多列输入文字区表单 ＜form action="URL" method="post"＞ ＜textarea＞ .......... .......... ＜/textarea＞ ＜/form＞
【1】文字区的变数名称 -- name ＜textarea name=变数名称＞
【2】设定文字输入区宽度 -- cols ＜textarea cols=字元数＞
【3】设定文字输入区高度 -- rows ＜textarea rows=列数＞
【4】输入区设定预设字串 ＜textarea＞ 预设文字 ＜/textarea＞
【5】自动换行与否 -- wrap ＜textarea wrap=#＞ #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行
链接
一、连结至其他文件 ＜a href="URL"＞说明文字或图片＜/a＞
二、连结至文件内之某一处（外部连结）
《1》起点
＜a href="档名#名称"＞..........＜/a＞
《2》终点 ＜a name="名称"＞
三、frame的超连结
【1】开启新的浏览器来显示连结文件 -- _blank ＜a href="URL" target=_blank＞
【2】显示连结文件於目前的frame -- _self ＜a href="URL" target=_self＞
【3】以上一层的分割视窗显示连结文件 -- _parent ＜a href="URL" target=_parent＞
【4】以全视窗显示连结文件 -- _top ＜a href="URL" target=_top＞
【5】以特定视窗显示连结文件 --＜a href="URL" target="特定视窗名称"＞
FRAME
一、分割视窗指令 ＜frameset＞..........＜/frameset＞
【1】垂直（上下）分割 -- rows
＜frameset rows=#＞ #号可为点数：如欲分割为100,200,300三个视窗，则
＜frameset rows=100,200,300＞；亦可以*号代表，如＜frameset rows=*,500,*＞
百分比：如＜frameset rows=30%,70%＞，各 项总和最好为100%
【2】水平（左右）分割 -- cols ＜frameset cols=点数或百分比＞
二ⅱ指定视窗内容 -- ＜frame＞
＜frameset cols=30%,70%＞ ＜frame＞ ＜frame＞ ＜/frameset＞
【1】指定视窗的文件名称 -- src ＜frame src=HTML档名＞
【2】定义视窗的名称 -- name
＜frame name=视窗名称＞
【3】设定文件与上下边框的距离 -- marginheight
＜frame marginheight=点数＞
【4】设定文件与左右边框的距离 -- marginwidth
＜frame marginwidth=点数＞
【5】设定分割视窗卷轴 -- scrolling
＜frame scrolling=#＞ #号可为 yes：固定出现卷轴
no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）
【6】锁住分割视窗的大小 -- noresize ＜frame noresize>
從html開始.....本來想自己寫.呵呵.可在網上隨便說找到了一個很好的.算了.改改就貼上來吧.HTML入门虽然不难，可是要掌握技巧的奥妙，您仍须仰赖好的范例说明，并透过浏览器的Source功能阅读，技术很快会精進喲.
结构
＜html＞
＜head＞
＜title＞标题＜title＞
＜/head＞
＜body＞..........文件内容..........
＜/body＞
＜/html＞
----------------------------------------------
标题
1.文件标题
＜title＞..........＜/title＞
2.文件更新--＜meta＞
【1】10秒后自动更新一次
＜meta http-equiv="refresh" content=10＞
【2】10秒後自动连结到另一文件
＜meta http-equiv="refresh" content="10；URL=欲连结文件之URL"＞
3.查询用表单--＜isindex>
若欲设定查询栏位前的提示文字：
＜isindex prompt="提示文字"＞
4.预设的基准路径--＜base>
＜base href="放置文件的主机之URL"＞
版面
1.标题文字 ＜h#＞..........＜/h#＞ #=1~6；h1为最大字，h6为最小字
2.字体变化 ＜font＞..........＜/font＞
【1】字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大
【2】指定字型 ＜font face="字型名称"＞..........＜/font＞
【3】文字颜色 ＜font color=#rrggbb＞..........＜/font＞ rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码
3.显示小字体 ＜small＞..........＜/small＞
4.显示大字体 ＜big＞..........＜/big＞
5.粗体字 ＜b＞..........＜/b＞
6.斜体字 ＜i＞..........＜/i＞
7.打字机字体 ＜tt＞..........＜/tt＞
8.底线 ＜u＞..........＜/u＞
9.删除线 ＜strike＞..........＜/strike＞
10.下标字 ＜sub＞..........＜/sub＞
11.上标字 ＜sup>..........＜/sup＞
12.文字闪烁效果 ＜blink＞..........＜/blink＞
13.换行 ＜br＞
14.分段 ＜p＞
15.文字的对齐方向 ＜p align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.＜p align="#"＞之後的文字都会以所设的对齐方式显示， 直到出现另一个＜p align="#"＞改变其对齐方向，或遇到 ＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。
16.分隔线 ＜hr＞
【1】分隔线的粗细 ＜hr size=点数＞
【2】分隔线的宽度 ＜hr size=点数或百分比＞
【3】分隔线对齐方向 ＜hr align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
【4】分隔线的颜色 ＜hr color=#rrggbb＞
【5】实心分隔线 ＜hr noshade＞
17.向中对齐 ＜center＞..........＜/center＞
18.依原始样式显示 ＜pre＞..........＜/pre＞
19.＜body＞指令的属性
【1】背景颜色 -- bgcolor ＜body bgcolor=#rrggbb＞
【2】背景图案 -- background ＜body background="图形文件名"＞
【3】设定背景图案不会卷动 -- bgproperties ＜body bgproperties=fixed＞
【4】文件内容文字的颜色 -- text ＜body text=#rrggbb＞
【5】超连结文字颜色 -- link ＜body link=#rrggbb＞
【6】正被选取的超连结文字颜色 -- vlink ＜body vlink=#rrggbb＞
【7】已连结过的超连结文字颜色 -- alink ＜body alink=#rrggbb＞
图片
1.插入图片 ＜img src="图形文件名"＞
2.设定图框 -- border ＜img src="图形文件名" border=点数＞
3.设定图形大小 -- widthⅱheight ＜img src="图形文件名" width=宽度点数 height=高度点数＞
4.设定图形上下左右留空 -- vspaceⅱhspace ＜img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数＞
5.图形附注 ＜img src="图形文件名" alt="说明文字"＞
6.预载图片
＜img src="高解析度图形文件名" lowsrc="低解析度图形文件名"＞ P.S.两个图的图形大小最好一致
7.影像地图（Image Map） ＜img src="图形文件名" usemap="#图的名称"＞ ＜map name="图的名称"＞
＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞
＜area shape=形状 coords=区域座标列表 href="连结点之URL"＞ ＜/map＞
【1】定义形状 -- shape
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形
【2】定义区域 -- coords
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：＜area shape=rect coords=100,50,200,75 href="URL"＞
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：＜area shape=circle coords=85,155,30 href="URL"＞
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：＜area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"
表格
1.定义表格 ＜table＞..........＜/table＞
【1】设定边框的厚度 -- border
＜table border=点数＞
【2】设定格线的宽度 -- cellspacing
＜table cellspacing=点数＞
【3】设定资料与格线的距离 -- cellpadding
＜table cellpadding=点数＞
【4】调整表格宽度 -- width
＜table width=点数或百分比＞
【5】调整表格高度 -- height
＜table height=点数或百分比＞
【6】设定表格背景色彩 -- bgcolor
＜table bgcolor=#rrggbb＞
【7】设定表格边框色彩 -- bordercolor
＜table bordercolor=#rrggbb＞
2.显示格线 ＜table border＞
3.表格标题
＜caption＞..........＜/caption＞
表格标题位置 -- align
＜caption align="#"＞ #号可为 top：表标题置于表格上方（预设值）
bottom：表标题置于表格下方
4.定义列 ＜tr＞
5.定义栏位 《1》＜td＞：靠左对齐
《2》＜th＞：靠中对齐ⅱ粗体
【1】水平位置 -- align ＜th align="#"＞
#号可为 left：向左对齐
center：向中对齐 right：向右对齐
【2】垂直位置 -- align ＜th align="#"＞ #号可为
top：向上对齐 middle：向中对齐
bottom：向下对齐
【3】栏位宽度 -- width
＜th width=点数或百分比＞
【4】栏位垂直合并 -- rowspan
＜th rowspan=欲合并栏位数＞
【5】栏位横向合并 -- colspan
＜th colspan=欲合并栏位数＞
清单
一、目录式清单
＜dir＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/dir＞ P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）
二、选项式清单 ＜menu＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/menu＞
三、有序号的清单 ＜ol＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ol＞
【1】序号形式 -- type ＜ol type=#＞或＜li type=#＞ #号可为 A：表以大写英文字母AⅱBⅱCⅱD...做为项目编号 a：表以小写英文字母aⅱbⅱcⅱd...做为项目编号 I：表以大写罗马数字做为项目编号 i：表以小写罗马数字做为项目编号 1：表以阿拉伯数字做为项目编号（预设值）
【2】起始数字 -- start ＜ol start=欲开始计数的序数＞
【3】指定编号 -- value ＜li value=欲指定的序数＞
四、无序号的清单 ＜ul＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ul＞
【1】项目符号形式 -- type ＜ul type=#＞或＜li type=#＞ #号可为 disc：实心圆点（预设值） circle：空心圆点 square：实心方块
【2】原始清单 -- plain ＜ul plain＞
【3】清单排列方式 -- warp 《1》清单垂直排列 ＜ul warp = vert＞ 《2》清单水平排列 ＜ul warp = horiz＞
五、定义式清单 ＜dl＞ ＜dt＞项目1 ＜dd＞项目1说明 ＜dt＞项目2 ＜dd＞项目2说明 ＜dt＞项目3 ＜dd＞项目3说明 ＜/dl＞
紧密排列 -- compact ＜dl compact＞ P.S.如此可使＜dt＞的内容与＜dd＞的内容在同一行，仅 以数格空白相隔而不换行，但若＜dt＞的文字超过一 定的长度后，compact的作用就消失了！
表单
一、基本架构 ＜form action="处理资料用的CGI程式之URL"或"mailt电子信箱的URL" method="get或post"＞ .......... .......... .......... ＜/form＞
二、输入文件型表单 ＜form action="URL" method="post"＞ ＜input＞ ＜input＞ .......... .......... ＜/form＞
【1】栏位类型 -- type ＜input type=#＞ #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位
【2】栏位名称 -- name ＜input name="资料栏名"＞ P.S.若type为submitⅱreset则name不必设定
【3】文件上的预设值 -- value ＜input value="预设之字串"＞
【4】设定栏位的宽度 -- size ＜input size=字元数＞
【5】限制最大输入字串的长度 -- maxlength ＜input maxlength=字元数＞
【6】预设checkbox或radio的初值 -- checked ＜input type=checkbox checked＞ ＜input type=radio checked＞
【7】指定图形的URL -- src ＜input type=image src="图档名"＞
【8】图文对齐 -- align ＜input type=image align="#"＞ #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部
三、选择式表单 ＜form action="URL" method="post"＞ ＜select＞ ＜option＞ ＜option＞ .......... .......... ＜/select＞ ＜/form＞
A、＜select＞的属性
【1】栏位名称 -- name ＜select name="资料栏位名"＞
【2】设定显示的选项数 -- size ＜select size=个数＞
【3】多重选项 -- multiple ＜select multiple＞
B、＜option＞的属性
【1】定义选项的传回值 -- value ＜option value="传回值"＞
【2】预先选取的选项 -- selected ＜option selected＞
四、多列输入文字区表单 ＜form action="URL" method="post"＞ ＜textarea＞ .......... .......... ＜/textarea＞ ＜/form＞
【1】文字区的变数名称 -- name ＜textarea name=变数名称＞
【2】设定文字输入区宽度 -- cols ＜textarea cols=字元数＞
【3】设定文字输入区高度 -- rows ＜textarea rows=列数＞
【4】输入区设定预设字串 ＜textarea＞ 预设文字 ＜/textarea＞
【5】自动换行与否 -- wrap ＜textarea wrap=#＞ #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行
链接
一、连结至其他文件 ＜a href="URL"＞说明文字或图片＜/a＞
二、连结至文件内之某一处（外部连结）
《1》起点
＜a href="档名#名称"＞..........＜/a＞
《2》终点 ＜a name="名称"＞
三、frame的超连结
【1】开启新的浏览器来显示连结文件 -- _blank ＜a href="URL" target=_blank＞
【2】显示连结文件於目前的frame -- _self ＜a href="URL" target=_self＞
【3】以上一层的分割视窗显示连结文件 -- _parent ＜a href="URL" target=_parent＞
【4】以全视窗显示连结文件 -- _top ＜a href="URL" target=_top＞
【5】以特定视窗显示连结文件 --＜a href="URL" target="特定视窗名称"＞
FRAME
一、分割视窗指令 ＜frameset＞..........＜/frameset＞
【1】垂直（上下）分割 -- rows
＜frameset rows=#＞ #号可为点数：如欲分割为100,200,300三个视窗，则
＜frameset rows=100,200,300＞；亦可以*号代表，如＜frameset rows=*,500,*＞
百分比：如＜frameset rows=30%,70%＞，各 项总和最好为100%
【2】水平（左右）分割 -- cols ＜frameset cols=点数或百分比＞
二ⅱ指定视窗内容 -- ＜frame＞
＜frameset cols=30%,70%＞ ＜frame＞ ＜frame＞ ＜/frameset＞
【1】指定视窗的文件名称 -- src ＜frame src=HTML档名＞
【2】定义视窗的名称 -- name
＜frame name=视窗名称＞
【3】设定文件与上下边框的距离 -- marginheight
＜frame marginheight=点数＞
【4】设定文件与左右边框的距离 -- marginwidth
＜frame marginwidth=点数＞
【5】设定分割视窗卷轴 -- scrolling
＜frame scrolling=#＞ #号可为 yes：固定出现卷轴
no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）
【6】锁住分割视窗的大小 -- noresize ＜frame noresize>
2006-3-5 01:50
1361109
支持!!!!!!!!!!!
2006-3-14 12:02
我是小老虎
嗯。。。。好多。。。。。。。。。。。。
2006-3-15 15:29
NitY
我很多都是通过“偷”别人的语法
才学会滴。。。
才学会滴。。。
2006-4-7 23:42
kreeny
ddddddddd
2006-4-8 01:30
kinggoal
顶一下，楼主辛苦了！！！
2006-4-8 01:33
kinggoal
看上去很清楚，很明白！！！谢谢！！！
2006-4-9 03:17
jiataokkkk
学习了 谢谢
页: [1]
查看完整版本: “偷学”网页制作之真经
Powered by 澳大利亚中文网 5.5.0 © 2005-2007 澳大利亚论坛