http://CrazyCoder.cn/HtmlJiaoCheng/Index.html 2010-08-01 CrazyCoder 1.0(beta) zh-cn Copyright 1996 - 2008 疯狂代码 All Rights Reserved. 2010-08-01 http://CrazyCoder.cn/HtmlJiaoCheng/Article23351.html 一、什么是表单
表单的作用是提供一个友好的界面，从用户方面收集信息，当用户填好表单上的信息并将表单交付处理后，服务器就可以得到表单中包含的信息，然后由服务器上的相应的程序进行处理。表单是互联网上最流行的交互特性之一，也是动态HTML技术的基础。
表单标记包括：
表单标签：<form></form>表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上。
二、<form>表单标记
功能：用于声明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器。
属性：
<form>…</form>产生一个表单，用来放置各种控件
<form action=“url”>指定要用来得处理表单内容的程序的位置与文件名
<form method=“get/post”>指定浏览器传送数据给后端程序的方式
<form enctype=cdata >指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"
application/x-www-form-urlencoded 窗体数据被编码为名称/值对。这是标准的编码格式。
multipart/form-data 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。上传文件时需要改为此值。
text/plain 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
例：
<form action=“URL” method=“GET|POST”>
<input type=submit> <input type=reset>
</form>
小知识：HTML表单form中get、post方法的差异
在B/S应用程序中，前台与后台的数据交互，都是通过HTML中Form表单完成的。Form提供了两种数据传输的方式——get和post。虽然它们都是数据的提交方式，但是在实际传输时确有很大的不同，并且可能会对数据产生严重的影响。虽然为了方便的得到变量值，Web容器已经屏蔽了二者的一些差异，但是了解二者的差异在以后的编程也会很有帮助的。
Form中的get和post方法，在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下：
1、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
2、Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
3、Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post。
4、Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
5、Get是Form的默认方法。
例：课外示例1：get&post.asp
三、<input>输入标记
（一）输入方式text(单行文本框)
功能：
文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
语法：
<input type=“Text” name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” size=n maxlength=n>
属性：
type="text"定义单行文本输入框；
　　name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　size属性定义文本框的宽度，单位是单个字符宽度；
　　maxlength属性定义最多输入的字符数。
　　value属性定义文本框的初始值
align属性不起任何作用
例：
呈现结果姓名： 原始码
<FORM>
姓名：<INPUT TYPE="TEXT" NAME="NAME" value="Tom" SIZE="20" align="middle" maxlength=255>
</FORM>
（二）输入方式Radio(单选按钮)
功能：
当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
语法：
<input type=Radio name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” checked>
属性：
type="radio"定义单选框；
　　name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
　　value属性定义单选框的值，在同一组中，它们的域值必须是不同的。
例：
呈现结果性别：男 女 原始码
<FORM>
性别：
男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="男" align=middle checked>
女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="女" align=middle>
</FORM>
（三）输入方式checkbox(多选按钮或复选框)
功能：
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
语法：
<input type=Checkbox name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” checked>
属性：
type="checkbox"定义复选框；
　　name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　value属性定义复选框的值
例：
呈现结果喜好： 电影 看书原始码
<FORM>喜好：
<INPUT TYPE="CHECKBOX" NAME="like" VALUE=1 align=middle checked>电影
<INPUT TYPE="CHECKBOX" NAME="like" VALUE=2 align=middle>看书
</FORM>
（四）输入方式Password(密码输入框)
功能：
是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
语法：
<input type=Password name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” size=n maxlength=n>
属性：
type="password"定义密码框；
　　name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　size属性定义密码框的宽度，单位是单个字符宽度；
　　maxlength属性定义最多输入的字符数。
例：
呈现结果请输入密码： 窗体底端原始码
<FORM>请输入密码：<INPUT TYPE="PASSWORD" NAME="pw" value=999 size=20 maxlength=9>
</FORM>
（五）输入方式Submit(确认键)及Reset(清除键)
功能：
提交按钮用来将输入的信息提交到服务器。
复位按钮用来重置表单。
语法：
<input type=Submit name=“×××” value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle”>
<input type=Reset value=“×××” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle”>
属性：
type="submit"定义提交按钮；type="reset"定义复位按钮；
　　name属性定义按钮的名称；
　　value属性定义按钮的显示文字；
例：
<form>
<input type=text size=20><br>
<input type ="submit" value="送出资料" size=10>
<input type ="reset" value="重新填写" size=10>
</form>
（六）输入方式Image(图片按键)
语法：
<input type=Image name=“submit|reset|…” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” src=“URL”>
属性：
src属性为按键图片来源，请加上绝对或相对路径
例：
<center>
<form>
这是一个图像按钮<br>
<input type=Image name=submit align=bottom src=arrow.ico>
</form>
</center>
（七）输入方式file
功能：
有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
　　注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签<form>中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。
语法：
<input type=File name=“upload” align=“top|middle|bottom|left|right|texttop|baseline|absmiddle” size=n maxlength=n accept=“text/html”>
属性：
type="file"定义文件上传框；
　　name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　size属性定义文件上传框的宽度，单位是单个字符宽度；
　　maxlength属性定义最多输入的字符数。
例：
<center>
<form>
添加附件：<br>
<input type="file" name="upload" align="bottom" size="20" maxlength="100" accept="text/html">
</form>
</center>
（八）输入方式Hidden(隐藏文本域)
功能：
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
语法：
<input type=Hidden name=“×××” value=“×××”>
属性：
type="hidden"定义隐藏域；
　　name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
　　value属性定义隐藏域的值
例：
<form>
学习隐藏域<br>
[ft=,3,]<input typ [查看PDF电子文档] ]]> 81381320 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23351.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23350.html
表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML，你能够自助地找到一些简单的教程，开发一个服务器端的程序使一个发送到Email的表单工作。

实际用在HTML中的标签有form、 input、 textarea、 select和option。

表单标签form定义的表单里头，必须有行为属性action，它告诉表单当提交的时候将内容发往何处。
可选的方法属性method告诉表单数据将怎样发送，有get（默认的）和post两个值。常用到的是设置post值，它可以隐藏信息（get的信息会暴露在URL中）。
所以一个表单元素看起来是这样子的：
<form action="processingscript.php" method="post"></form>


input标签是表单世界中的“老大”。有10种形式，概括如下：

<input type="text" />是标准的文本框。它可以有一个值属性value，用来设置文本框里的默认文本。

<input type="password" /> 像文本框一样，但是会以星号代替用户所输入的实际字符。

<input type="checkbox" />是复选框，用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked，像这样的格式:
<input type="checkbox" checked="checked" />.

<input type="radio" /> 与复选框相似，但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked，使用方法跟复选框一样。

<input type="file" /> 是展示你电脑上的文件的一个区域，就像你在一个软件中打开或者保存一个文档一样。

<input type="submit" /> 是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本（下面的button和reset类型也可以这样，稍后介绍），
如下： <input type="submit" value="Ooo. Look. Text on a button. Wow" />.

<input type="image" />以图像代替按钮文本，src属性是必须的，像img标签一样。

<input type="button" />是一个如果没有其他代码的话什么都不做的按钮。

<input type="reset" /> 是一个点击后会重置表单内容的按钮。

<input type="hidden" /> 不会显示任何东西，它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。 注意输入标签input也是用“/>”自关闭的。

多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows和列属性cols，用法像这样：
<textarea rows="5" cols="20">A big load of text here</textarea>
选定标签select与选项标签option一起可以制作一个下拉选框。是这样工作的：
<select>
<option value="first option">Option 1</option>
<option value="second option">Option 2</option>
<option value="third option">Option 3</option>
</select>

当表单被提交时，被选中选项的值将被发送。

与复选框和单选按钮的预选属性checked一样，选项标签option也有一个预选属性selected，它可以用在这样的格式中：<option value="mouse" selected="selected">Rodent</option>。
上述的标签中在网页中看起来都不错，但是，如果你有一个程序来处理这个表单，这些标签都不起作用。这是因为，表单字段需要名称。所以所有的字段中都需要增加名称属性name，比如 <input type="text" name="talkingsponge" />。

一个表单看起来应该像下面这样（注意：这个表单不会工作，除非有一个用来提交数据的“contactus.php”的文件，它位于表单标签form的行为属性action中。）
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p><p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
<p><input type="submit" /></p><p><input type="reset" /></p>
[ [查看PDF电子文档] ]]> 240936256 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23350.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23349.html 表单的基本语法<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form> *=GET, POST


表单中提供给用户的输入形式<input type=* name=**>*=text, password, checkbox, radio, image, hidden, submit, reset
**=Symbolic Name for CGI script


文字输入和密码输入*=text, password
<input type=*>
<input type=* value=**><form action=/cgi-bin/post-query method=POST>您的姓名: <input type=text name=姓名><br>您的主页的网址: <input type=text name=网址 value=http://><br>密码: <input type=password name=密码><br><input type=submit value="发送"><input type=reset value="重设"></form>
您的姓名:
您的主页的网址:
密码:



<input type=* size=**>
<input type=* maxlength=**><form action=/cgi-bin/post-query method=POST><input type=text name=a01 size=40><br><input type=text name=a02 maxlength=5><br><input type=submit><input type=reset></form>





复选框(Checkbox) 和 单选框(RadioButton)
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**><form action=/cgi-bin/post-query method=POST><input type=checkbox name=水果1> Banana<p><input type=checkbox name=水果2 checked> Apple<p><input type=checkbox name=水果3 value=橘子> Orange<p><input type=submit><input type=reset></form>
Banana
Apple
Orange



<input type=radio value=**>
<input type=radio value=** checked><form action=/cgi-bin/post-query method=POST><input type=radio name=水果> Banana<p><input type=radio name=水果 checked> Apple<p><input type=radio name=水果 value=橘子> Orange<p><input type=submit><input type=reset></form>
Banana
Apple
Orange



图象坐标 在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！ <input type=image src=url><form action=/cgi-bin/post-query method=POST><input type=image name=face src=f.gif><p><input type=radio name=zoom value=2 checked>x2<input type=radio name=zoom value=4>x4<input type=radio name=zoom value=6>x6<p><input type=reset></form>

x2 x4 x6



隐藏表单的元素 <input type=hidden value=*><form action=/cgi-bin/post-query method=POST><input type=hidden name=add value=hoge@hoge.jp>Here is a hidden element. <p><input type=submit><input type=reset></form>
Here is a hidden element.



列表框(Selectable Menu)
基本语法<select name=*>
<option> ...
</select>
<option selected>
<option value=**><form action=/cgi-bin/post-query method=POST><select name=fruits> <option>Banana <option selected>Apple <option value=My_Favorite>Orange</select><p><input type=submit><input type=reset></form>
BananaAppleOrange



<select size=**><form action=/cgi-bin/post-query method=POST><select name=fruits size=3> <option>Banana <option selected>Apple <option value=My_Favorite>Orange <option>Peach</select><p><input type=submit><input type=reset></form>
BananaAppleOrangePeach



<select size=** multiple>注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样) <form action=/cgi-bin/post-query method=POST><select name=fruits size=3 multiple> <option selected>Banana <option selected>Apple <option value=My_Favorite>Orange <option selected>Peach</select><p><input type=submit><input type=reset></form>
BananaAppleOrangePeach



文本区域<textarea name=* rows=** cols=**> ... <textarea><form action=/cgi-bin/post-query method=POST><textarea name=comment rows=5 cols=60></textarea><P><input type=submit><input type=reset></form>




对于很长的行是否进行换行的设置(Word Wrapping) <textarea wrap=off> ... </textarea>不换行，是缺省设置。
<textarea wrap=soft> ... </textarea>“软换行”，好象 MS－WORD 里的“软回车”。 <form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>



<textarea wrap=hard> ... </textarea>“硬换行”，好象 MS－WORD 里的“硬 [查看PDF电子文档] ]]> 273204413 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23349.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23348.html &&方法一：
****程序名随意，如myrunform.prg
****假设表单文件名为：查询表单.scx
****调用方法为： do myrunform.prg with "查询表单"
****张某2003年8月于佛山
parameters runformfilename
local formIndex,runformname,ifrunform
ifrunform=.f.
For m.formIndex = 1 To _Screen.FormCount
if juststem(SYS(1271,_Screen.Forms(m.formIndex)))==runformfilename
ifrunform=.t.
runformname=_Screen.Forms(m.formIndex).Name
if _Screen.Forms(m.formIndex).WindowState=1 &&窗口最小化
_Screen.Forms(m.formIndex).WindowState=0 &&窗口恢复为原样大小
endif
exit
endif
endfor
if ifrunform=.t.
Activate Windows (runformname)
else
do form &runformfilename
endif
return

************************
&&方法作者之修改
*表单重复运行的解决方法1还可简单些：
parameters runformfilename
local formIndex,ifrunform
ifrunform=.f.
For m.formIndex = 1 To _Screen.FormCount
if juststem(SYS(1271,_Screen.Forms(m.formIndex)))==runformfilename
ifrunform=.t.
Activate Windows (_Screen.Forms(m.formIndex).Name)
if _Screen.Forms(m.formIndex).WindowState=1 &&窗口最小化
_Screen.Forms(m.formIndex).WindowState=0 &&窗口恢复为原样大小
endif
exit
endif
endfor
if ifrunform=.f.
do form &runformfilename
endif
return
**********************************************

&&方法二:
设表单的标题（form.caption）为：查询窗口
DECLARE INTEGER FindWindow IN win32api STRING , STRING
IF FINDWINDOW(0,"查询窗口")=0 &&表单还没有运行
do form 查询表单
ENDIF

**************************
方法3：
****保证只运行表单的一个实例
****在表单的 init 事件中放入以下代码:
local i,windowname,retval
retval=.t.
i=0
windowname=wchild("",0) && 参见 wchild() 函的帮助
do while not empty(windowname)
if windowname=upper(this.name)
i=i+1
if i>1
retval=.f.
exit
endif
endif
windowname=wchild("",1)

************************************************************
*方法4：
****使用说明：do RunForm with "表单文件名","表单引用名（name）"
****如：do runform with "查询表单","Form1"
***************************************************
Function runform
Para cFormName,mFormName
*/以下两句为红飞狐加入，如缺少此两句，函数不能正常运行
cPublic="Public "+mFormName
&cPublic
If !(Type("&mFormName.")="O" and !Isnull(&mFormName.))
Do Form &cFormName Name &mFormName
Else
If &mFormName..WindowState=1
&mFormName..WindowState=0
Endif
&mFormName..Show
Endif
***********************
enddo
if retval=.f.
wait window "对不起 ,该表单已运行，不能多次运行该表单" nowait
endif
return retval &&在表单或对象的init事件中返回.f. 将取消该实例的建立

***********************
&&方法五:
if wexist("表单NAME“)
activate window "表单NAME"
else
do form "查询表单.scx"
endif
***********************
&&方法六:
*第一次运行表单(查询表单.scx)前先执行代码
_screen.addproperty("requery",.t.)
在表单的Destroy写入如下的代码：
_screen.requery=.f.
*运行表单的代码：
if _screen.requery=.f.
do form 查询表单
else
wait window "查询窗口已打开，禁止再次打开"
endif

*说明:
*表单重复运行的解决方法5的补充说明：
*其中的_screen.addproperty("requery",.t.)
*可以这样: public requery
*requery=.t.
*但如在其它地方如果不慎使用release、clear等命令时
*可能把requery清除
***************************
*方法七
*--防止多次进入---------------------
If This._l不可重入 AND not gnGetkeystate(0x10)>100 && not shift press
For i=1 To _Screen.FormCount
o=_Screen.Forms(i)
IF not PEMSTATUS(o,'_c标识',5) OR o=this
LOOP
ENDIF
If o._c标识==this._c标识
If _Screen.Forms(i).WindowState=1
_Screen.Forms(i).WindowState=0
Endif
_Screen.Forms(i).Show
Return .F.
Endif
Next
Endif
*-EOF--防止多次进入---------------------
*******************************
*方法八
LOCAL nfrm
nfrm=0
FOR EACH fm IN _screen.forms
IF fm.caption=this.Caption
nfrm=nfrm+1
ENDIF
ENDFOR
RETURN (nfrm=1)
*-----------------------------------------------------
*将这段代码放到自己的form类的load()中即可,我是用Caption来标识form身份,你也可以用
*别的,如name,tag等等,我是不高兴用额外标识的. 自然,这种方法不能用于顶层表单. [查看PDF电子文档] ]]> 240718110 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23348.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23347.html 简单的表单限制
1.绕过必填表项
你会经常碰到一些页面需要你填满所有的表项才能提交,但是我们完全可能绕过这些限制.如果你仔细看一下页面的源代码,然后找到关于表单提交的那部分代码,你会发现form标签中有一个onsubmit属性.当你看到这个属性的时候,我们就很有希望尝试一下绕过这些限制.大家都知道的,javascript可以控制页面中的所有元素,包括表单元素.因此,我们可以利用javascript修改、删除以及添加任意元素到我们浏览的每一个页面.
因此,我们就可以利用javascript清除表单中的ousubmit属性,这么我们就可以不受限制的成功提交表单了.
onsubmit
属性通常指向了一个函数,这个函数是用来检查提交form表单数据的正确格式的.(译者注:我这里以国内某免费邮箱申请页面为例):
function fCheck(){
if( !form.readed.checked )
{
alert("您需要接受服务条款后才能注册！");
form.readed.focus();
return false;
}
...
<form action="reg2.jsp" method="post" name="form"
>
...
</form>
关于fcheck()函数的详细介绍不在本文的讨论范围之内,怎么编写还请大家自己去查相关资料.通过上面的代码大家可以看出来如果你有些表单项没有填写(比如一些单选了或者多选项等等)的话,表单是无法提交的.现在我们就要修改onsubmit属性,利用javascript让它直接返回true即可以采用下面两种方法:
document.forms[x].;
or
document.form.;
使用这两个
语句都可以使表单无限制的成功提交.但关键就在于我们如何执行上面javascript语句呢?其实我们可以直接把此语句输入到地址栏中,然后回车就可以执行了.语句如下:
javascript:document.form.;
但是仅仅是上面的语句是不会成功的,因为上面语句返回的值会被直接写入到页面中,我们无法继续填写表单了.所以我们必需避免值被写入到页面中,方法就是利用alert()函数:
javascript:alert(document.form.);

运行上面的语句会弹出一个对话框内容是"return
true;",而不会被写入到页面中了.现在你可以毫无限制的任意填写你的表单内容了.(译者注:以下测试是以某国内免费邮箱申请页面为例):
再没有解除限制前,如果密码你没有输入的话会弹出如下图的对话框:


这个时候我们按照上述俄方法先查看其源代码,找到提交form表单的那句代码如下:
<form action="reg2.jsp" method="post" name="form"
>
知道其name为form,下面我们在地址栏中输入如下语句:
javascript:alert(document.form.);
然后回车,如下图:
这个时候我们再重新注册以下,密码栏依然不输入,然后提交表单结果如下图:


呵呵..是不是绕过去了...继续发挥看大家伙自己的了.

2. 更改表项内容
当你成功尝试更改了表单的onsubmit属性可以做你想做的什么事情后,我们可以想想我们到底受到了什么限制?当然,你现在可以修改表单的onsubmit属性了,那么同样的,我们可以利用此方法修改页面中的任意对象.就像下面这样:
javascript:alert(document.spamform.fieldname.value="Dr_aMado
was here!");
or
javascript:alert(document.forms[x].fieldname.value="Dr_aMado
was here!");

呵呵,很简单的三?你可以修改你认为可以修改的任何东西了..just do it!

SQL注入
1.利用表单优势

SQL注入大家都很熟悉了,我这次主要跟大家解释一下漏洞表单是否会被正确的处理.
取得数据库信息
一个经常用的取得系统信息的方法是通过故意在sql查询中引发错误从而从网站数据库中取得特定的信息(译者注:就是我们俗称的"爆"什么社么)引发错误的方式可以通过搜索表单,动态链接以及session
cookies.大多数介绍sql注入的文章都是介绍如何利用动态链接和text
boxes执行sql查询语句的.但是我认为,这些漏洞在其它类型中更常见(select boxes, hidden
fields, checkboxes and radio buttons, and cookies!).
混和数据类型如果没有很好的编码很容易造成一个页面的崩溃.比如对"memberinfo.php?o_id=1"这样的链接,在其后添加一个双引号或者单引号,幸运的化你会得到一个包含部分sql查询语句的调试信息.当你得到了你需要的信息,你可以确定出下一步该如何去做.
更改表项的值
第一个应该考虑的表单就是用户资料页面.大多数用户资料页面都没有很好的过滤,比如select
boxes表单项.一中利用此漏洞的方法就是在这个表单项的值域中插入一个sql查询语句.在IE的地址栏中如下输入:
javascript:alert(document.profileform.user_sex.value="gay\',user_pasword=\'HACKED\'
WHERE user_id=1#");

我们假设服务端的查询语句像下面这样:
"UPDATE user_data SET
user_password='$user_password',user_email='$user_email',user_sex='$user_sex'
WHERE user_id=$user_id";
那么插入我们的sql语句后的查询语句就如下所示:
"UPDATE user_data SET
user_password='mypassword',user_email='myemail',user_sex='gay',user_password='HACKED'
WHERE
user_id=1 #' WHERE user_id=7382";
"#"这个是sql的注释符.

2.绕过session cookies
绕过基本的session cookie验证
很多情况下会话处理都是采用的cookie.如果页面没有正确处理session
cookie,一个攻击者可以利用此缺陷更改自己的用户身份为其它用户.
cookies保存在"window.document.cookie".使用javascript我们可以擦除,编辑,创建任意站点的cookies.这个要比一般的攻击方式复杂得多.这里我只简单的介绍一下"
查看cookies:
javascript:alert(unescape(document.cookie));
修改cookies数据:
javascript:alert(window.c=functiona(n,v,nv){c=document.cookie;c=c.substring(c.indexOf(n)+n.length,c.length);c=c.substring(1,(
(c.indexOf(";")>-1) ? c.indexOf(";") :
c.length));nc=unescape(c).replace(v,nv);document.cookie=n+"="+escape(nc);return

unescape(document.cookie);});alert(c(prompt("cookie
name:",""),prompt("replace this
value:",""),prompt("with::","")));

假设你在www.ima13370h4x0r.net以"John Doe"身份登录,你获得的cookie如下:
Sessi:3:{s:11:"SessionUser";s:5:"75959";s:9:"SessionID";i:70202768;s:9:"LastVisit";i:1078367189;}

我们只关心"75959"这个值,因为它是user_id的值.很多时候,你会发现有的站点把一些关键数据(比如user_id)保存在cookie中,这是个很严重的漏洞,因为任何用户都可以修改他们的user_id值为其它用户比如管理员用户的user_id值.
.
一旦你声明了window.c函数后,修改cookie的值就变得容易得多.首先把s:5:"75959"修改为s:x:"ADMINID",其中x是新值的长度.比如,你想把75959改为1,那么你必需把s:5:"75959"改成s:1:"1".有的时候一些站点会使用带WHERE子句的sql查询语句保持用户登录状态这个时候你需要把75959该为类似"13
or 1=1"这样的值.
注意:
嵌入的javascript声明可以加到你的浏览器的收藏里,这样可以轻轻一点即可.声明你自己的函数用下面的形式:
"alert(window.newfunction = function [查看PDF电子文档] ]]> 547974766 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23347.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23346.html Web 应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签（label），操作方式，以及周围的视觉元素都会或多或少影响用户的行为。
表单布局
考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的（比如姓名、地址、付费信息等），垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉，并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动：下。

在这种布局中，推荐使用加粗的标签，这可以增加它们视觉比重，提高其显著性。如果不加粗的话，从用户的角度讲，标签和输入框的文字几乎就一样了。
如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难（比如一个地址的多个组成部分），左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了，而不会被输入框打断思路。但这样一来，标签与其对应的输入框之间的距离通常会被更长的标签拉长，可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。

于是产生了一种替代的方案，标签右对齐布局，使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家，人们习惯于从左至右的书写，所以这种右对齐的布局就给用户造成了阅读障碍。

借助可视化元素
由于“标签左对齐布局”的优点（方便检索并且减少垂直高度），尝试纠正它的主要缺点（标签和输入框的分离）就很诱惑人。
一个方案 就是增加背景色和分割线，不同的背景色产生了一列垂直的标签和一列垂直的输入框，每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错，但是还是会存在问题。
对比之前的形态（用户主观的 视觉区分），这增加了15个视觉元素：中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线，让用户难以聚焦到一些重要的元素上，比如标签和输入框。 正如 Edward Tufte 指出的：“信息本身存在差异，必然产生感官上的不同。”换句话说，任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现，你的视线总是被打断，停下来想那些水平线、单元格和背景颜色。

当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色，都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。

主次操作
一个表单的主要操作（通常是“提交”或“保存”）需要一个比较强的视觉比重（在上面的例子里用了亮色调、粗字体、背景色等等）。这相当于给用户一个提示：您已/即将完成填写表单。
当一个表单有多个操作，比如“继续”和“返回”，那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。

虽然以上内容可以更好的让你设计表单，但是组合布局、可视化元素以及内容，仍然需要经过用户的测试以及数据分析（完成度评估、错误报告等）。
更多的细节和例子在 Web Application Form Design Expanded。
JunChen 翻译自 LukeW's Functioning Form


优秀的表单设计会让用户有一种填写的冲动，并且能够最大限度的降低用户的出错率
浏览网站时肯定遇到过这样的 Web 表单：一个包含 100 多个国家的下拉框（select）；一个有 31 个选项的日期下拉框；等等，经常使人饱受挫折。Web 表单除去文本信息（比如 label 和其他提示等）和提交按钮，还包括五种元素：下拉框（select）、单选按钮（radio）、复选框（checkbox）、输入框（input）和超链接。
下面以旅馆订房为例，来描述表单设计过程中合理选择表单元素的过程。
例子
在本文的例子当中，想从用户那里得到以下数据：
姓名
人数
旅馆名
房间类型（单人、双人）
信用卡类型
第一步：确定页面的主要目的
首先想想为什么要让用户去选择（使用 select）？是页面导航？还是收集信息？
作为导航的下拉框
使用下拉框来做导航、页面间的跳转可以节省很大一部分页面空间。并且在不改变视觉大小的情况下，增加信息量（选项的数量）。但是下拉框仍然是有不少局限的：
下拉框隐藏了选项；除非是高级用户或者在非用不可的情况下，他才会展开下拉框阅读，然后作决定；
超链接只需要点一下，而下拉框需要更多的操作；
良好设计过的超链接列表，比下拉框更容易阅读；
如果选项的数量巨大，用户必须拉动滚动条；
收集信息的下拉框
大部分情况下表单是被用来收集信息的。比如你向用户问一个问题，并且这个问题具有有限的答案（比如信用卡类型）。如何设计才能良好的呈现这些答案？并且减少用户的犯错几率？
第二步：解答 6 个问题
在选择用输入框还是下拉框之前，先解答以下 6 个问题：
1. 输入答案是否比选择答案更加自然？
个人信息，比如姓名、地址、生日等我们熟知的信息，使用输入的方式收集比使用选择的方式收集更加自然并且简单。对于姓名来说，也无法选择。本例中，姓名和人数就推荐使用输入框。
2. 答案是否容易输错？
容易输错的信息，就不能使用输入框来收集。比如本例中的旅馆名、房间类型，取而代之的可以使用超链接、单选按钮、复选框。
3. 用户是否需要浏览完所有的选项，才能理解问题？
比如本例中，“房间类型”这个问题，如果不先浏览所有选项，很难做出判断。在这种情况下，推荐根据情况使用单选按钮或复选框。
4. 有多少个选项？
滚动条是老大难问题了。如果下拉框的选项很多，很有可能导致页面需要滚动、下拉框选择也需要滚动。一般来说 4 个选项及 4 个以内选项的问题，使用单选按钮或复选框会比用下拉框好的多。
5. 用户是否可以同时选择多项？
一般如果用户可以同时选择多项，那么推荐使用复选框。为了避免用户不了解复选框或者不想另外说明，那么有时可以在单选按钮的基础上，增加一个“任意（any）”的选项。比如本例中的“房间类型”。
6. 各个选项是否看上去有区别？
比如“信用卡类型”，“Visa”、“MasterCard”等容易区分。但是对于“人数”来说，假设 01-10，总共两个字符长，使用下拉框不利于浏览（Scan）。而连锁旅馆通常有相似的名字，那么相似的部分可以使用缩写，并且用地名来区分。也可以使用超链接形式来避免此问题。
以上六个问题解决后，可以列出 一张表格（Link to flickr），然后平衡选择，决定哪些信息使用哪种形式表现。
第三步：表单的整体效果和局部调整
尽管按照上面 6 个方面进行了筛选，但是还需要针对表单整体和局部进行调整。主要是以下三方面：
避免太多种类的表单元素
根据第二步，我们得到了“最佳”的选择，如下：姓名：输入框 人数：输入框 旅馆名：超链接 房间类型（单人、双人）：带有“任意”选项的单选按钮 信用卡类型：下拉框
发现问题了？形式太多了，又是输入框又是超链接的。这时候可以回过头再看看有没有合理的替代方案。
使选项精简、易读
对于下拉框的原则就是使用户浏览选项的时候更加方便，不会费眼神，不会点错。对于单选、复选的选项，减少选项的数量，同时也可以使用短句来作为选项。
注意选项的顺序和默认值
给选项赋予一个合理的逻辑顺序，比如按首字母排列、按声母序。然后根据普遍情况确定默认值。
第四步：考虑易用性（Accessibility）
[url=http://www.junchenwu.com/WAI/wai-pageauth.html]可以参考Web内容可访问性指南 [查看PDF电子文档] ]]> 82768649 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23346.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23345.html HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：
<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名：
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>
演示示例
学习HTML表单(Form)最关键要掌握的有三个要点：
①表单控件(Form Controls)
②Action
③Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= "text"就是一个表单控件，表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp。
至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。
HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有：

表单控件(Form Control)：单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：
<input type="text" name="yourname">
演示示例
表单控件(Form Control)：复选框(input type="checkbox")
复选框允许用户在一组选项里，选择多个。示例代码：
<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
演示示例
用checked表示缺省已选的选项。
<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>
演示示例
表单控件(Form Control)：单选框(input type="radio")
使用单选框，让用户在一组选项里只能选择一个。示例代码：
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
演示示例
用checked表示缺省已选的选项。
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>
演示示例
表单控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：
<select name="fruit" >
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
演示示例
如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：
<select name="fruit" multiple>
演示示例
用户还可以用size属性来改变下拉框(Select)的大小。
演示示例
表单控件(Form Control)：多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的宽度，rows表示textarea的高度。
演示示例
表单控件(Form Control)：密码输入框(input type="password")[/ft][ [查看PDF电子文档] ]]> 281568397 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23345.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23344.html
一、表单概述

表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

1、表单的组成

一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用 表单按钮来控制其他定义了处理脚本的处理工作。 为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：

1.1 表单标签＜form＞＜/form＞

功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器或者电子邮件里。

语法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. . .＜/FORM＞

属性解释见下表：

action=url指定一来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.method=get或post指明提交表单的HTTP方法.可能的值为： post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的结果文档显示的位置： _blank ：在一个新的、无名浏览器窗口调入指定的文档； _self ：在指向这个目标的无素的相同的框架中调入文档； _parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self； _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.

例如：
＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
表示表单将向http://www.yesky.com/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式；
1.2 表单域

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据，下面分别讲述这些表单域的代码格式：

1.2.1 文本框

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞

属性解释：
type="text"定义单行文本输入框；
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文本框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值

样例1：

样例1代码：

＜input type="text" name="example1" size="20" maxlength="15"＞

1.2.2 多行文本框

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：＜TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"＞＜/TEXTAREA＞
属性解释：
name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：

默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行； Virtual，允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

样例2：






样例2代码：

＜TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"＞＜/TEXTAREA＞


1.2.3 密码框

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

代码格式：＜input type="password" name="..." size="..." maxlength="..."＞

属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义密码框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。

样例3：

样例3代码：

＜input type="password" name="example3" size="20" maxlength="15"＞


1.2.4 隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：＜input type="hidden" name="..." value="..."＞

属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值
例如：＜input type="hidden" name="ExPws" value="dd"＞


1.2.5 复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

代码格式：＜INPUT type="checkbox" name="..." value="..."＞

属性解释：
type="checkbox"定义复选框；
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值

样例4： yesky.com Chinabyte.com

样例4代码：
＜input type="checkbox" name="yesky" value="09"＞yesky.com
＜input type="checkbox" name="Chinabyte" value="08"＞Chinabyte.com

1.2.6 单选框

当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。

代码格式：＜input type="radio" name="..." value="..."＞

属性解释：
type="radio"定义单选框；
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。

样例5： yesky.com Chinabyte.com

样例5代码：
＜input type="radio" name="myFavor" value="1"＞yesky.com
＜input type="radio" name="myFavor" value="2"＞Chinabyte.com


1.2.7 文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。

代码格式：＜input type="file" name="..." size="15" maxlength="100"＞

属性解释：
type="file"定义文件上传框；
name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文件上传框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。

样例6：

样例6代码：

＜input type="file" name="myfile" size="15" maxlength="100"＞


1.2.8 下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。

代码格式：
＜select name="..." size="..." multiple＞
＜option value="..." selected＞...＜/option＞
...
＜/select＞

属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。

样例7： yesky.com chinabyte.com

样例7代码：
＜select name="mySel" size="1"＞
＜option value="1" selected＞yesky.com＜/option＞
＜option value="d2"＞chinabyte.com＜/option＞
＜/select＞

样例8：
yesky.com chinabyte.com internet.com 按Ctrl可以多选

样例8代码：
＜select name="mySelt" size="3" multiple＞
＜option value="1" selected＞yesky.com＜/option＞
＜option value="d2"＞chinabyte.com＜/option＞
＜option value="3"＞internet.com＜/option＞
＜/select＞

1.3 表单按钮

表单按钮控制表单的运作。

1.3.1 提交按钮

提交按钮用来将输入的信息提交到服务器。

代码格式：＜input type="submit" name="..." value="..."＞

属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；

样例9：

样例9代码：

＜input type="submit" name="mySent" value="发送"＞



1.3.2 复位按钮

复位按钮用来重置表单。

代码格式：＜input type="reset" name="..." value="..."＞

属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；

样例10：


样例10代码：

＜input type="reset" name="myCancle" value="取消"＞



1.3.3 一般按钮

一般按钮用来控制其他定义了处理脚本的处理工作。

代码格式：＜input type="button" name="..." value="..." ＞

属性解释：
type="button"定义一般按钮；
name属性定义一般按钮的名称；
value属性定义按钮的显示文字；
onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；

样例11：


样例11代码：
＜input type="button" name=" [查看PDF电子文档] ]]> 14404592 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23344.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23343.html 数据检验的函数如下： <script> function CheckDate(){ //取得输入的数据 userName = document.RedForm.userName.value; userEmail = document.RedForm.userEmail.value; //如果没有输入姓名 if (userName=="") { alert("请输入姓名"); document.RedForm.userName.focus(); return false; }else{ //如果没有输入Email，或者Email地址错误(不含@) if ((userEmail=="")(userEmail.indexOf("@")==-1)) { alert("请重新输入Email地址"); document.RedForm.userEmail.focus(); return false; }else return true; } } </script> 表单的分支提交 有的时候，表单需要根据用户的选择，提交到不同的程序，怎么做呢？通过脚本来检测用户的选择分支，从而向不同的程序提交表单，看看样例： 样例：分支提交功能实现分析：这里首先用到的是form的 然后根据选择的分支，来分别递交到不同的程序，TwoSubmit()函数如下： <script＞ function TwoSubmit(form){ if (form.Ref[0].checked){ form.action = "cop.ASP";//这里是分之一 }else{ form.action = "ind.asp";//这里是分之二 } form.submit(); } </script> 用任何元素提交表单 是不是只有按钮或者图片按钮才能提交表单呢？当然不是，实际上，任何页面元素都可以提交表单，不过嘛，都是通过脚本来完成的，下面我们就使用链接来代替Submit按钮： 样例：用链接来提交表单 功能实现分析：通过来提交表单；用来复位表单，这样一来，任何一个元素都可以实现提交表单了。 下拉跳转菜单 在Dreamweaver中，可以很方便地建立基于表单的下拉菜单，为了兼顾非Dreamweaver用户，这里讲述一下这种技巧。样例：基于表单的下拉跳转菜单 功能实现分析：实际上，这里用到了一个函数，用于向选择的地址跳转，<script language="javascript"> function FormMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; }</script>然后，给下拉选择框赋予一个事件，就可以了。 用Email提交表单(只适合Outlook用户，不适合FoxMail用户) 功能实现分析：看看我们的表单＜form＞标签就知道了，格式如下：＜form name="..." action="mailto:xxxxx@xxx.xxx?Subject=表单反馈" enctype="text/plain" method="post"＞...＜/form＞ 这里的mailto:后面加上要接受信息的地址，?Subject是设置默认的Email标题，enctype="text/plain"是必要的，表示信息以文本方式提交，没有任何加密，所以这种方法常用于没有Asp/PHP/cgi支持的空间，也只是一个代用的方法，用户必须安装Outlook，并且是默认的邮件程序，才能顺利执行提交。 [查看PDF电子文档] ]]> 764065176 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23343.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23342.html 　　*name属性，指定了用来存储该输入文本的变量名字。
　　*title属性，该输入框的名字，同样可被用来作为概要CARD页中的选项名。
　　*type属性，默认值为text，如选择password，则输入的数据显示为*。
　　*value属性，在语法和行为上等同于下面的default属性，
　　*default属性，指定输入框的默认值，即name属性指定变量的默认值，当用户输入新值时，该值无效，如果该值不符合以下format属性的规定，则手机也忽略该默认值。
　　*format 属性，用来格式化输入的数据，可用的标记如下，使用时可用“一位数字标记”和“*标记”的形式，前者代表N个标记型字符，如3X， 后者代表任意个(小于maxlength属性的值)标记型字符。
　　标记　　　描述
　　A 　　　　任何符号或者大写字母(不包括数字)
　　a 　　　　任何符号或者小写字母(不包括数字)
　　N 　　　　任何数字(不包括符号或者字母)
　　X 　　　　任何符号、数字或者大写字母(不可改变为小写字母)
　　x 　　　　任何符号、数字或者小写字母(不可改变为大写字母)
　　M 　　　　任何符号、数字或者大写字母(可改变为小写字母)或者多个字符，默认为首字大写
　　m 　　　　任何符号、数字或者小写字母(可改变为大写字母)或者多个字符，默认为首字小写
　　*maxlength属性，指定了用户可输入的最大字符长度，最大限制为256个字符。
　　*emptyok属性，表示用户可否不填输入框，默认为false，即要填。
　　*size属性，输入框显示长度，目前未被支持。
　　*tabindex属性，类似于在HTML表单中按TAB键后，焦点落在哪个选项上，该值决定了这个选择顺序，数字大的排在后面。目前未被支持。
test4.wml
---------------
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="card1" ordered="false">
<p>
USERNAME:<input name="userName" title="User Name" type="text" value="YourNameHere" format="*M" emptyok="false" maxlength="12" tabindex="1"/>
PASSWORD:<input name="password" title="Password" type="password" format="8x" emptyok="false" maxlength="8" tabindex="2"/>
COMMENTS:<input name="comments" title="comment" type="text" value="YourCommentsHere" format="*M" emptyok="true" maxlength="30" tabindex="3"/>
</p>
</card>
</wml>
　　将上例<card>中的odered的值改为"true"试试看，然后再在<p>和</p>内加入<fieldset title="field1">和</fieldset>试试看。
　　<select>选单类似于HTML表单中的<SELECT>，<select>和</select>间可包含<optgroup>和<option>标签，语法如下，所有属性都为可选：
　　<select title="label" multiple="false|true" name="variable" default="default" iname="index_var" ivalue="default" tabindex=" n">
　　<optgroup title="label">选单内容</optgroup>
　　<option title="label" value="value" >
　　事件或者文本
　　</option>
　　</select>
　　*title属性，如以上<input>的title属性。
　　*multiple属性，指定用户可否进行多项选择，默认值为false。
　　*name属性，用来存储用户选择项的变量名，其值为 <option>标签的value属性，若用户没有选择又没有用 default 属性指定默认值， 则手机将改变量赋值为空字符串""，对于多项选择，每个值用“;”分开。
　　*default属性，可为name属性指定的变量赋默认值。
　　*iname属性，用来记录用户选择项的位置，相应的值从 1 开始。 若没选，则该值为0。
　　*ivalue属性，用来记录默认值所在的位置。
　　<optgroup>可用来将多个<option>分组，<optgroup>和</optgroup>间还可包括<optgroup>和<option>，该标签目前尚未被支持。
　　<option>，类似于HTML中选单的<OPTION>，用来表示选单的可选项。<option>和</option>间可包括事件(见下节)和选单的显示文本。<option> 的属性为可选，其中value属性用来提供值，当选到该项后，将该值赋给<select> 的name属性所指定的变量。onpick属性，用来指定用户选到该项并按ACCEPT键后所打开页面的URL。
test5.wml
---------------
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="card0" ordered="false">
<p>
Please select a city...
<select title="Cities List" name="city">
<option title="Beijing" value="c1">Beijing</option>
<option title="Shanghai" value="c2">Shanghai</option>
<option title="Hongkong" value="c3">Hongkong</option>
</select>
Please select columns...
<select title="Column List" multiple="true" name="col">
<option title="Hot News" value="l1">News</option>
<option title="Cool Sports" value="l2">Sports</option>
<option title="Pop Enter,,," value="l3">Entertainment</option>
</select> [查看PDF电子文档] ]]> 838916444 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23342.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23341.html
　　XHTML里有很多的标签，但是经常用到的也就是那么几个，也只要掌握这几个也就可以了。下面我们一一列举：div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em

　　div 在我的脑子里我一直把他想作是一个瓶子或是箱子，我的感觉它挺硬的。这个div没有什么特性的意义，可以使用在很多地方，也就是说他可以装不同的东西。他的正确的写法是<div></div>必需要有封口。大家都用来做布局之用，也有用来作为存放文章形成段落，实际上，这个做法并不是很好，因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p>标签，不过用DIV来再整体的包住所有的段落。这是非常实用的。

　　p 这是一个有特定语义的标签，表示段落，是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进，因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P标签的时候如果需要可以针对P设定一下行首缩进，我是推荐在文章以外的地方不要使用P，因为P是有一定语义的，如果用在别的地方恐不合适。正确的写法是<p></p>

　　span 这也是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是他是一个级联元素，不是块级元素。我一直把它看作是一个袋子，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补。

　　ul,li 这是一个列表，在列表中，除了UL还OL，不过我觉得OL有点像是鸡肋。因为UL通过CSS定义一样可以有OL的数字排序效果。所以一般我不推荐使用OL，有UL就可以了。UL是块级的，他的子级li也是块级标签。正确的写法是<ul><li></li></ul> LI标签是被UL标签包裹的，在UL标签里可以有无数个LI标签，LI标签不能独立使用。并且LI标签一定要封口，这不光是美观问题，对于后期的维护也很有好处。很多程序员都不喜欢把这个LI封口。UL列表的用处主要是列举出一维的，同一类型的数据。具体的比如使用在菜单上，文章中列数的一些条例等等。在列表中有一种特别的形式与UL是不一样的。那就是下面的DL

　　dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT是指标题，DD是指内容。DL是包课他们的容器。正确的写法是<dl><dt></dt><dd></dd></dl>在DL里可以有很多组的DT，DD，当出现很多组的时候尽量是一个DT配一个DD，如果DD中内容很多，可以在DD里加P标签配合使用。DL列表是一个非常好的列表形式，可以多加利用。

　　a 这表示链接，是一个特定属性的，也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是：<a href="" title=""></a>其中的href是表示目标地址，TITLE是鼠标悬停提示文字，这是可有可无的。但是有必是利大于无。

　　img 这是图片标签，也是个特定属性的标签。正常写法是：<img src="" alt="" title=""/> 这里的src是目标地址，ALT与TITLE是替换文字，ALT是 IE特定的，TITLE是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。

　　H 这是一个系列的标签，从H1到H6，一共六个，有人说太少了，有人说正好用，有人说用不了这么多。反正我是觉得差不多。正确写法是：<h></h>主要是用来存放标题，也有一些朋友用来作它用，个人觉得这个标签还是让他安生一点，就让他做标题的作用。这六个标签之间最好不要出现什么相互包含的事。

　　strong 这个意思是着重，这是有语义的，作用也很简单。至于样工，是加粗着重，还是用色彩表明着重，那都是自行选择。正确的写法是<strong></strong>

　　em 这个与strong很像，是表示强调。一般浏览器的默认值是斜体。使用方式与strong一样。写法是：<em></em>

　　这里没有说表单，因为表单基本上没有什么变化，也没什么可特别说的。 [查看PDF电子文档] ]]> 736524081 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23341.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23340.html 在CSS布局中, 应该尽可能多地使用XHTML所支持的各种标签使网页具有良好的可读性. 每个标签都有自己的作用, 虽然可以完全使用DIV来构建布局, 但全部使用DIV组成的网页, 最终的可读性并不高. 正确的做法是, 选用符合需求的其他XHTML标签, 合理地替代DIV. 因此, 将所有XHTML标签列在下面, 以便查找使用.

[ 结构标签 ]
html html根元素
head html头部区域
body html主体区域
div 区块定义标签
span 行间区块定义标签

[ Meta信息 ]
DOCTYPE 文档类型指定
title 浏览器标题栏
link 链接到扩展资源
meta Meta信息
style 样式表区域

[ 列表 ]
ul 无序列表
ol 有序列表
li 列表项
dl 带描述的列表
dt 描述列表中的名词
dd 描述列表中的描述

[ 表格 ]
table 表格
tr 行
td 单元格
th 表头
tbody 表格主体
thead 表格头部
tfoot 表格底部
col 表格列
colgroup 表格列的集合
caption 表格标题

[ 表单 ]
form 表单区域
input 输入框
textarea 文本域
select 下拉列表
option 下拉列表项
optgroup 下拉列表项集合
button 按钮
label 标签
fieldset 标签页
legent 标签页的标题

[ 脚本 ]
script 脚本区域
noscript 无法执行脚本的替代

[ 链接 ]
a 链接
vbase 基础链接类

[ 文本控制 ]
p 段落
h1~h6 标题1~6级
strong 加重重点
em 重点/强调
abbr 定义文本的简写词
acronym 定义首字母简写词
address 标签联系信息
bdo 字母顺序左右反转
blockquote 块状引用内容
cite 行间引用内容
q 行间小型引用
code 源代码区
ins 编辑注解: 插入内容
del 编辑注解: 删除内容
dfn 文本术语注释
kdb 预格式化文本
samp 举例
var 文本是一个变量
br 回车

[ 图像 ]
img 插入图像
area 图像热区獊 [查看PDF电子文档] ]]> 155045486 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23340.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23339.html 来源:网页教学网
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：
　　CHINAZ
　　第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。CHINAZ
　　另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。
　　CHINAZ
　　结构化HTML CHINAZ
　　我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
　　CHINAZ
　　如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
　　CHINAZ
　　外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。CHINAZ
　　HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。CHINAZ
　　开始思考
　　CHINAZ
　　首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。CHINAZ
　　如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
　　CHINAZ
　　标志和站点名称
　　主页面内容
　　CHINAZ
　　站点导航(主菜单)
　　CHINAZ
　　子菜单
　　CHINAZ
　　搜索框CHINAZ
　　功能区(例如购物车、收银台)
　　页脚(版权和有关法律声明) CHINAZ
　　我们通常采用DIV元素来将这些结构定义出来，类似这样：CHINAZ
　　<div id="header"></div> <div id="content"></div> <div id="globalnav"></div> <div id="subnav"></div> <div id="search"></div> <div id="shop"></div> <div id="footer"></div> CHINAZ
　　这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。CHINAZ
　　根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。CHINAZ
　　使用选择器是件美妙的事CHINAZ
　　id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。
　　CHINAZ
　　另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者#subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。
　　CHINAZ
　　一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离.)
　　CHINAZ
　　良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码<table width="80%" cellpadding="3" border="2" align="left">，现在可以只在HTML中写<table>，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。CHINAZ
　　亲自实践一下结构化
　　CHINAZ
　　上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：CHINAZ
　　<div id="navcontainer"> <div id="globalnav"> <ul>a list</ul> </div> <div id="subnav"> <ul>another list</ul> </div> </div> CHINAZ
　　嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
　　CHINAZ
　　用CSS替换传统方法CHINAZ
　　下面的列表将帮助你用CSS替换传统方法：
　　CHINAZ
　　HTML属性以及相对应的CSS方法HTML属性CSS方法说明CHINAZ
　　align="left" align="right" float: left; CHINAZ
　　float: right;使用CSS可以浮动任何元素:图片、段落、div、标题、表格、列表等等
　　CHINAZ
　　当你使用float属性，必须给这个浮动元素定义一个宽度。CHINAZ
　　marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0;使用CSS, margin可以设置在任何元素上,不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。CHINAZ
　　vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; a:visited: #339; a:hover: #999; a:active: #00f;
　　CHINAZ
　　在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。CHINAZ
　　bgcolor="#FFFFFF" background-color: #fff;在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。CHINAZ
　　bordercolor="#FFFFFF" border-color: #fff;任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left border="3"
　　CHINAZ
　　cellspacing="3" border-width: 3px;用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。
　　CHINAZ
　　你可以使用table, td or th这些选择器. CHINAZ
　　如果你需要设置无边框效果，可以使用 [查看PDF电子文档] ]]> 909907012 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23339.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23338.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：
<div id="container">[color=#aaaaaa]<!--页面层容器-->[/color]
　　<div id="Header">[color=#aaaaaa]<!--页面头部-->[/color]
　　</div>
　　<div id="PageBody">[color=#aaaaaa]<!--页面主体-->[/color]
　　　　<div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]
　　　　</div>
　　　　<div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color]
　　　　</div>
　　</div>
　　<div id="Footer">[color=#aaaaaa]<!--页面底部-->[/color]
　　</div>
</div>
为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#container {width:100%}
/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。
关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：
1、请养成良好的注释习惯，这是非常重要的；
2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；
3、讲解一些常用的CSS代码的含义：
font:12px Tahoma；
这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；
margin:0px；
也使用了缩写，完整的应该是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px
顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
另外还有以下几种写法：
margin:0px auto；
说明上下边距为0px，左右为自动调整；
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
text-align:center
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF
设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：
background:#ccc url('bg.gif') top left no-repeat；
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
top left
表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用
background:url('bg.gif') 20px 100px;
表示X座标为20像素，Y座标为100像素的精确定位；
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
4、如何使页面居中？
大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
是因为我们在#container中使用了以下属性：
margin:0 auto;
按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。
5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。



[ft=#FFFFFF,,]此 [查看PDF电子文档] ]]> 362742165 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23338.html http://CrazyCoder.cn/HtmlJiaoCheng/Article23337.html 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：
　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
　　2、内容部分又可分为侧边栏、主体内容；
　　3、底部，包括一些版权信息。
　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

DIV结构如下：
　　│body {}　/*这是一个HTML元素，具体我就不说明了*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　│　├#Sidebar {}　/*侧边栏*/
　　　　　│　└#MainBody {}　/*主体内容*/
　　　　　└#Footer {}　/*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：
<div id="container">[color=#aaaaaa]<!--页面层容器-->[/color]
　　<div id="Header">[color=#aaaaaa]<!--页面头部-->[/color]
　　</div>
　　<div id="PageBody">[color=#aaaaaa]<!--页面主体-->[/color]
　　　　<div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]
　　　　</div>
　　　　<div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color]
　　　　</div>
　　</div>
　　<div id="Footer">[color=#aaaaaa]<!--页面底部-->[/color]
　　</div>
</div>
为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#container {width:100%}
/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。
关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：
1、请养成良好的注释习惯，这是非常重要的；
2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；
3、讲解一些常用的CSS代码的含义：
font:12px Tahoma ；
这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；
margin:0px ；
也使用了缩写，完整的应该是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px
顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
另外还有以下几种写法：
margin:0px auto；
说明上下边距为0px，左右为自动调整；
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
text-align:center
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF
设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：
background:#ccc url('bg.gif') top left no-repeat；
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
top left
表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用
background:url('bg.gif') 20px 100px;
表示X座标为20像素，Y座标为100像素的精确定位；
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
4、如何使页面居中？
大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
是因为我们在#container中使用了以下属性：
margin:0 auto;
按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。
5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册
当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。
在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container {width:800px;margin:10px auto}
样式说明：
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}
这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。
#container {width:800px;margin:10px auto}
指定整个页面的显示区域。
width:800px 指定宽度为800像素，这里根据实际所需设定。
margin:10px auto ，则是页面上、下边距为10个像素，并且居中显示。
上一章中我们讲过，[ft=#ff0000,,]对层的margin属性的左右边距设置为auto可以让层居中显示 。
接下来，我们开始制作TOP部分，TOP部分包括了 LOGO、菜单和Banner ，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片： [查看PDF电子文档] ]]> 26534772 Html教程 2008-11-18 http://CrazyCoder.cn/HtmlJiaoCheng/Article23337.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21578.html HTML 标记一览


HTML&gt; ； &lt;HEAD&gt; ； &lt;TITLE&gt; ； &lt;BODY&gt; ■ HTML 基本架构：
以下 HTML Source Code 便是一份 HTML 文件的基本架构 ： &lt;HTML&gt;
&lt;HEAD&gt; &lt;TITLE&gt; 网页的标题 &lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt; 网页的内容，很多标记都作用于此
&lt;/BODY&gt;
&lt;/HTML&gt; 特点解说： 整份文件处于标记&lt;HTML&gt;与&lt;/HTML&gt;之间。
&lt;HTML&gt;用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。 文件分两部分，由&lt;HEAD&gt;至&lt;/HEAD&gt;称为开头，&lt;BODY&gt;至&lt;/BODY&gt;称本文。
基本上两者各有适用的标记，如&lt;TITLE&gt;只可出现于开头部分。 开头部分用以存载重要资讯，而只有本文部分会被显示。
所以大部分标记会运用于本文部分。 &lt;TITLE&gt;所标示的是文件的标题。
会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的。 上述标记中只有&lt;BODY&gt;具参数设定。
■ &lt;BODY&gt; 之参数设定：
例子： &lt;BODY text=&quot;#000000&quot; link=&quot;#0000FF&quot; alink=&quot;#FF0000&quot; vlink=&quot;#0000FF&quot; background=&quot;bg1.gif&quot; bgcolor=&quot;#FFFFFF&quot; leftmargin=2 topmargin=2 bgproperties=&quot;fixed&quot;&gt; text=&quot;#000000&quot;
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=&quot;black&quot; 。各种颜色的值及名称可参考【调色原理】一节。 link=&quot;#0000FF&quot;
设定一般文字连结颜色。 alink=&quot;#FF0000&quot;
设定刚按下时文字连结颜色。 vlink=&quot;#0000FF&quot;
设定连结后的颜色。（被按过）。 [ft=#ff0000,,]back [查看PDF电子文档] ]]> 421461006 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21578.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21577.html 用法：　　　　　　包含了文档的内容
开始／结束标识：　可选／可选
属性：　　　　　　%conreattrs,%i18n,%events
　　　　　　　　　background="..."被反对。知名背景图像的URL
　　　　　　　　　bgcolor="..."被反对。设置背景颜色
　　　　　　　　　text="..."被反对。设置文本颜色
　　　　　　　　　link="..."被反对。设置链接的颜色
　　　　　　　　　vlink="..."被反对。设置链接被访问后的颜色
　　　　　　　　　alink="..."被反对。设置激活链接的颜色
　　　　　　　　　文档装载时的内部事件触发器
　　　　　　　　　文档卸载时的内部事件触发器
空：　　　　　　　不允许
注释：　　　　　　文当中只能有一个BODY，并且它只能跟在HEAD后面。BODY元素可以被FRAMESET元素替换。反对使用那些有关视觉
　　　　　　　　　的属性有利于在格式表中设置那些属性的值。 COMMENTS<！--...-->
用法：　　　　　　用来插入一些在浏览器中不显示的注释和解释性语言
开始／结束标识：　必须／必须
属性：　　　　　　没有
空：　　　　　　　允许
注释：　　　　　　其内容长度不用被限制在一行内，可以为任意长度。结束标识和开始标识可以不在一行上。
<DIR>...</DIR>
用法：　　　　　　这个标示分界的元素是用来在一大块文本中添加框架结构的
开始／结束标识：　必须／必须
属性：　　　　　　%coreattrs,%i18n,%events
　　　　　　　　　aling="..."被反对.用来控制对齐方式(left, right, center, justify)
空：　　　　　　　不允许
注释：　　　　　　不能在一个P元素中使用本元素。对齐属性被反对使用，这样会有利于通过样式表来控制对齐方式。
<！DOCTYPE...>
用法：　　　　　与其说这是一个元素，不如说是一种标准推广标记语言，它用来在HTML文档的第一行显示版本信息。　　　　　　
<HEAD>...</HEAD>
用法：　　　　　　用来说明这是文档的标题，并包含了向用户和搜索引擎提供信息的其他元素
开始／结束标识：　可选／可选
属性：　　　　　　%i18n
　　　　　　　　　progile="..."其中的URL指明了META文件的地址
空：　　　　　　　不允许
注释：　　　　　　每个文当中只能有一个标题。它必须位于打开的HTML标识后面和BODY前面
<HR>
用法：　　　　　　是一个水平分割线，用来把页面分成几个部分
开始／结束标识：　必须／非法
属性：　　　　　　%coreattrs，%events
　　　　　　　　　align="..."被反对。控制对齐方式(left, right, center, justify)
　　　　　　　　　noshade="..."显示一个实心的分界线
　　　　　　　　　size="..."被反对。控制分界线的尺寸大小
　　　　　　　　　width="..."被反对。控制分界线的宽度
空：　　　　　　　允许
<HTML>...<HTML/>
用法：　　　　　　本元素包含了整个文档
开始／结束标识：　可选／可选
属性：　　　　　　%i18n
　　　　　　　　　version="..."说明定义文档类型的URL，指明用来创建当前文档的HTML版本
空：　　　　　　　不允许
注释：　　　　　　其中的版本信息是从<!DOCTYPE>声明中复制过来的，因此这部分不是必不可少的。
<META>
用法：　　　　　　提供有关文档的信息
开始／结束标识：　必须／非法
属性：　　　　　　%i18n
　　　　　　　　　http-equiv="..."响应标题名称的HTTP
　　　　　　　　　name="..."元(meta)信息的名称
　　　　　　　　　c元(meta)信息的内容
　　　　　　　　　scheme="..."制定用来解释元(meta)信息的图解
空：　　　　　　　不允许
<SPAN>...</SPAN>
用法：　　　　　　通过定义文本之间的间隔组织文档结构
开始／结束标识：　必须／必须
属性：　　　　　　%coreattrs,%i18n,%events
空：　　　　　　　不允许
<TITLE>...</TITLE>
用法：　　　　　　指明自己Web页面的名字。这个元素放在HEAD元素之中，显示在浏览器窗口的标题栏中。
开始／结束标识：　必须／必须
属性：　　　　　　%i18n
空：　　　　　　　不允许
注释：　　　　　　每个文档只兊 [查看PDF电子文档] ]]> 371951774 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21577.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21576.html 文件格式 <HTML></HTML> (HTML文件的开头与结尾)
主题 <TITLE></TITLE> (必须放在文头区段)
文头区段 <HEAD></HEAD> (描述文件，如「主题」)
内文区段 <BODY></BODY> (内容所在)
下面是个简单例子：
<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>网页内容
</BODY>
</HTML>2、与结构相关的元素
标题 <H?></H?> (有六种：H1,H2,H3,H4,H5,H6)
例如：
<h1>H1 tag</h1>
<h2>H1 tag</h2>
<h3>H1 tag</h3>
<h4>H1 tag</h4>
<h5>H1 tag</h5>
<h6>H1 tag</h6>
标题对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?>
区段 <DIV></DIV>
区段对齐 <DIV ALIGN=LEFT|RIGHT|CENTER></DIV>
简短的引用 (Q)
<Q> 与 </Q> 是对於一些引用的文件，如果引用的部分不
长。那麽可以考虑使用这一个标签，这一个标签是HTML3.0
的新语法。
引文区段 <BLOCKQUOTE></BLOCKQUOTE> (显示时通常会内缩)
blockquote 是用来表示区域内的文件是引用某个人或是
某份文件内的资料的。通常引用的文字如果利用<BLOCKQUOTE>
与 </BLOCKQUOTE>来将它们标记起来的话。那麽大部份的
浏览器在读这些字的时候就会以另一种方式来表示它。这
样的表示只是在提醒读者们这是引用其他人的部分。　
强调 <EM></EM> (通常以斜体显示)
强烈强调 <STRONG></STRONG> (通常以黑体显示)
这一个特别加强语气的字元是 STRONG这个与 EM一样都是
加强语气的用法而已。大部份的浏览器都用粗黑体来表示
被 <STRONG> 与 </STRONG> 所标记的字。
引用语句 <CITE></CITE> (通常以斜体显示)
利用 <CITE> 与 </CITE> 将引用他人的话标记起来
程序原码 <CODE></CODE>
读者如果写的是一些电脑方面的东西，那麽可以利用CODE
这一个标签将一些相关的字眼标记起来，使用的方式也是
里用 <CODE> 与 </CODE> 将相关的字眼标记。
程序输出样本 <SAMP></SAMP>
不加修饰
在 HTML 里面，如果您想印出 HTML 的语法。那麽读者可
能需要利用一些特殊的技巧来印这些字元。而在这些字元
的外面，读者就可以利用SAMP 这一个符号将它们标记起
来喔。这一个标签的特色是被标记的文字都会用固定的宽
度来表示。
键盘输入 <KBD></KBD>
KBD 这一个标签通常是用来告知读者可以敲入哪些字，这
些被标记成 KBD的字通常都是以固定宽度的粗体字来表示。
但是有些浏览器只是以固定宽度的字元来表示而已。
程序变量 <VAR></VAR>
对於一些可能改变的字HTML里面提供了一个 VAR的标签来
展示它，这个标签的意思是对於那些可能容易改变的变数
或是字眼等等。可以使用<VAR> 及 <VAR>来标记它们。这
样可以提醒使用者这些变数可能会有所改变。
定义 <DFN></DFN> (有些浏览器无此功能)
如果读者在 HTML 里面所用到的是一些定义的字眼。那麽
读者可以考虑使用DFN这一个标签。如果读者使用Mosaic浏
览器。那麽被 <DFN> 与 </DFN>所标记起来的文字将会用
斜体字来表示。其它的浏览器则不一定。
作者地址 <ADDRESS></ADDRESS>
大字 <BIG></BIG>
小字 <SMALL></SMALL>
语言 (LANG)
在一篇文件中，如果使用两种以上的语言，那麽就可以使用
<LANG>与</LANG>来将它标记起来。这也是HTML3.0的新语法。
作者 (AU)
<AU>与</AU>并不是表示一般的AU档案，这一个标签是说如果
在读者的文章中。有提到某些作者的话，那麽就可以利用这
一个标签将作者给标记住。这也是 HTML 3.0特别为作者所设
计的一个标签喔。
个人 (PERSON)
在很多的索引程式中，程式有时候会将一些资讯页给展示出
来，而在展示这些资讯页的时候。如果有提到一些个人的名
字。那麽就可以利用 <PERSON> 与 </PERSON>来将这些名字
给标记住。这一个语法也是 HTML 3.0 中新加入的语法。
数个单字组成的单字 (ACRONYM)
在英文中，有一些单字是由好几个单字组合而成。如果读者
碰到这种单字，读者可以考虑利用<ACRONYM>与 </ACRONYM>
标签将它们给特别的括住。虽然这是 HTML3.0中新的语法。
但是对使用中文的我们来说，这样的一个语法并没有太大的
帮助。
缩写 (ABBREV)
与ACRONYM一样，在英文中也有许多缩写字HTML 3.0 也特别
为这些缩写字取了一个新的标签，这一个新的标签叫做
<ABBREV>当然它也有一个结束的符号叫做 </ABBREV>。
插入 (INS)
在HTML文件中，如果在原本旧有的文件中插入某个字，那麽
读者可以考虑使用 <INS> 与 </INS>来将这一些字给标记住。
这样可以方便读者在查阅的时候知道这一份文件是不是有修
正过。当然，这种语法也是 HTML 3.0 中新加入的语法。
删除 (DEL)
这一个语法是要来告诉读者将要删除某些字，或是一些关於
删除的部分。这种，新的标签也是HTML3.0中出现的喔。

3、与显示方式有关的TAG元素
粗体 <B></B>
斜体 <I></I>
画底线 <U></U> (有些浏览器无此功能)
删除线 <STRIKE></STRIKE> (有些浏览器无此功能)
删除线 <S></S> (有些浏览器无此功能)
下标字 <SUB></SUB>
上标字 <SUP></SUP>
打字机体 <TT></TT> (空白字元与其他文元之宽度相同的字体)
依据预定格式 <PRE></PRE> (保持文字间的相对位置)
预定格式的宽度 <PRE WIDTH=?></PRE> (以字元计)
对中 <CENTER></CENTER> (文字与图形都会对中)
闪烁 <BLINK></BLINK>
字体大小 <FONT SIZE=?></FONT> (由 1到 7)
改变字体大小 <FONT SIZE="+|-?"></FONT>
基本字体大小 <BASEFONT SIZE=?> (默认值为 3)
字体颜色 <FONT COLOR="#$$$$$$"></FONT>
指定字形 <FONT FACE="***"></FONT>
多栏位 <MULTICOL COLS=?></MULTICOL>
栏位内文与边缘间隔 <MULTICOL GUTTER=?></MULTICOL> (默认值为10象素)
栏位宽度 <MULTICOL WIDTH=?></MULTICOL>
留白 <SPACER>
留白型态 <SPACER TYPE=horizontal| vertical|block>
留白大小 <SPACER SIZE=?>
留白尺寸 <SPACER WIDTH=? HEIGHT=?>
留白位置 <SPACER ALIGN=left|right|center> [查看PDF电子文档] ]]> 260802648 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21576.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21575.html [ft=apar,,]（1）
[ft=,,]（游子编辑 供初学HTML代码的朋友参考）


[ft=,,] 在网上经常见到很多精彩漂亮的网页和贴图。这些佳作都是用各种代码和软件编辑出来的。很想学一点，可是看教材头就晕，入门难呵！后来采用从简入手，边学边测试，才学到一点点东东。 没有专业知识，如何启步呢？只要你会电脑系统操作和26个英文字母就可以了。先看一遍HTML语言教材，看不懂也无关系，以后回来再学习。学本领，读书还是要的。


[ft=,,] 简略认识一下HTML代码。HTML是一种用来制作超文本文档的简单标记语言，与普通文档不同，它可以加入文字、图片、声音、动画、影视等内容，可以从一个文件跳转到另一个文件，与世界各地主机的文件连接，通过WWW浏览器显示出效果。它的特点是用一对小尖括弧（“< 和 >"）作为标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。而且大部份是成对的双标签，即首标签和尾标签。

[ft=,,] 可以用实际例子来理解标签的含义。我们要在页面上显示“网络世界”四个红色隶书大字，就必须用下面文字设置代码。

[ft=,,]<font style=font:60pt face=隶书 color=ff0000>
[ft=,,]网络世界
[ft=,,]</font>

[ft=,,]显示结果：
[ft=,,][ft=#ff0000,,隶书]网络世界

[ft=,,] 这组文字设置代码在网络世界前面的是“始标签”，在网络世界后面的是“尾标签”。始标签有一个标签名字和三个属性内容。尾标签在标签名字前加一斜杆即可，不用标记属性内容。对照说明：

[ft=,,]<font style=font:60pt face=隶书 color=ff0000>
[ft=,,]网络世界
[ft=,,]</font>

[ft=,,]代码的第一行标签名 字号大小 什么字体 字的颜色
[ft=,,]代码的第二行 文字内容
[ft=,,]代码的第三行 尾标签

[ft=,,] 在“网络世界”4个字前面加一个移动始标签<marquee>，后面加一个尾标签</marquee>，这4个字就能移动了。
[ft=,,]移动标签代码：
[ft=,,]<marquee>网络世界</marquee>。
[ft=,,]只有名称，没有其他属性内容时，系统默认从右向左走。显示结果：


[ft=,,]网络世界

[ft=,,] 增加移动标签的属性内容和属值，就能实现其他移动的方向和速度。例如为上面“网络世界”四个大字从左向右走编一组代码：

[ft=,,]<marquee direction=right scrollamount=2>
[ft=,,]<font style=font:60pt face=隶书 color=ff0000>网络世界</font>
[ft=,,]</marquee>
[ft=,,][ft=#ff0000,,隶书]网络世界
[ft=,,] 代码的第一行是移动的始标签，内有标签名marquee和两个属性内容，即direction=right移动方向和scrollamount=2移动速度。
[ft=,,] 代码的第二行和第三行是一组有三个属性内容的文字设置标签。“始标签 ”和文字内容以及“尾标签”都套在移动标签内。
[ft=,,] 代码的第四行是移动标签的结尾标签。

[ft=,,] 记住：HTML标签是成对的，前面有一个始标签，后面必须有一个尾标签，不可多也不可少。 只有少数几个标签可以单独使用，如过行<br>代码就不用尾标签。

[ft=,,]启步学习代码先从三个内容入手：
[ft=,,]（一）文字设置或叫布局。
[ft=,,]（二）表格（图框）设置。
[ft=,,]（三）常用代码语句的应用。

[ft=,,]
[ft=,,][ft=#00ff00,,隶书]编辑：游子
[ft=,,][ft=,,]（待续）
[ft=,,] [查看PDF电子文档] ]]> 276997247 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21575.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21574.html 文件标记
<HTML> ● 文件声明 让浏览器知道这是 HTML 文件
<HEAD> ● 开头 提供文件整体资讯
<TITLE> ● 标题 定义文件标题，将显示于浏览顶端
<BODY> ● 本文 设计文件格式及内文所在
排版标记
<!--注解--> ○ 说明标记 为文件加上说明，但不被显示
<P> ○ 段落标记 为字、画、表格等之间留一空白行
<BR> ○ 换行标记 令字、画、表格等显示于下一行
<HR> ○ 水平线 插入一条水平线
<CENTER> ● 居中 令字、画、表格等显示于中间 反对
<PRE> ● 预设格式 令文件按照原始码的排列方式显示
<DIV> ● 区隔标记 设定字、画、表格等的摆放位置
<NOBR> ● 不折行 令文字不因太长而绕行
<WBR> ● 建议折行 预设折行部位
字体标记
<STRONG> ● 加重语气 产生字体加粗 Bold 的效果
<B> ● 粗体标记 产生字体加粗的效果
<EM> ● 强调标记 字体出现斜体效果
<I> ● 斜体标记 字体出现斜体效果
<TT> ● 打字字体 Courier字体，字母宽度相同
<U> ● 加上底线 加上底线 反对
<H1> ● 一级标题标记 变粗变大加宽，程度与级数反比
<H2> ● 二级标题标记 将字体变粗变大加宽
<H3> ● 三级标题标记 将字体变粗变大加宽
<H4> ● 四级标题标记 将字体变粗变大加宽
<H5> ● 五级标题标记 将字体变粗变大加宽
<H6> ● 六级标题标记 将字体变粗变大加宽
<FONT> ● 字形标记 设定字形、大小、颜色 反对
<BASEFONT> ○ 基准字形标记 设定所有字形、大小、颜色 反对
<BIG> ● 字体加大 令字体稍为加大
<SMALL> ● 字体缩细 令字体稍为缩细
<STRIKE> ● 画线删除 为字体加一删除线 反对
<CODE> ● 程式码 字体稍为加宽如<TT>
<KBD> ● 键盘字 字体稍为加宽，单一空白
<SAMP> ● 范例 字体稍为加宽如<TT>
<VAR> ● 变数 斜体效果
<CITE> ● 传记引述 斜体效果
<BLOCKQUOTE> ● 引述文字区块 缩排字体
<DFN> ● 述语定义 斜体效果
<ADDRESS> ● 地址标记 斜体效果
<SUB> ● 下标字 下标字
<SUP> ● 上标字 指数（平方、立方等）
清单标记
<OL> ● 顺序清单 清单项目将以数字、字母顺序排列
<UL> ● 无序清单 清单项目将以圆点排列
<LI> ○ 清单项目 每一标记标示一项清单项目
<MENU> ● 选单清单 清单项目将以圆点排列，如<UL> 反对
<DIR> ● 目录清单 清单项目将以圆点排列，如<UL> 反对
<DL> ● 定义清单 清单分两层出现
<DT> ○ 定义条目 标示该项定义的标题
<DD> ○ 定义内容 标示定义内容
表格标记
<TABLE> ● 表格标记 设定该表格的各项参数
<CAPTION> ● 表格标题 做成一打通列以填入表格标题
<TR> ● 表格列 设定该表格的列
<TD> ● 表格栏 设定该表格的栏
<TH> ● 表格标头 相等于<TD>，但其内之字体会变粗
表单标记
<FORM> ● 表单标记 决定单一表单的运作模式
<TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字
<INPUT> ○ 输入标记 决定输入形式
<SELECT> ● 选择标记 建立 pop-up 卷动清单
<OPTION> ○ 选项 每一标记标示一个选项
图形标记
<IMG> ○ 图形标记 用以插入图形及设定图形属性
连结标记
<A> ● 连结标记 加入连结
<BASE> ○ 基准标记 可将相对 URL 转绝对及指定连结目标
框架标记
<FRAMESET> ● 框架设定 设定框架
<FRAME> ○ 框窗设定 设定框窗
<IFRAME> ○ 页内框架 于网页中间插入框架 IE
<NOFRAMES> ● 不支援框架 设定当浏览器不支援框架时的提示
影像地图
<MAP> ● 影像地图名称 设定影像地图名称
<AREA> ○ 连结区域 设定各连结区域
多媒体
<BGSOUND> ○ 背景声音 于背景播放声音或音乐 IE
<EMBED> ○ 多媒体 加入声音、音乐或影像
其他标记
<MARQUEE> ● 走动文字 令文字左右走动 IE
<BLINK> ● 闪烁文字 闪烁文字 NC
<ISINDEX> ○ 页内寻找器 可输入关键字寻找于该一页 反对
<META> ○ 开头定义 让浏览器知道这是 HTML 文件
<LINK> ○ 关系定义 定义该文件与其他 URL 的关系
StyleSheet
<STYLE> ● 样式表 控制网页版面
<span> ● 自订标记 独立使用或与样式表同用

注：

● 表示该标记属围堵标记，即需要关闭标记如 </标记>。
○ 表示该标记属空标记，即不需要关闭标记。
IE 表示该标记只适用于 Internet Explorer。
NC 表示该标记只适用于 Netscape Communicator。
反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。
弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。
新 表示该标记是 HTML 4.0 中新增的。 [查看PDF电子文档] ]]> 137561644 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21574.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21573.html
[ft=,,]　　HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。

[ft=,,]　　2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。

[ft=,,]　　问:什么是XHTML?

[ft=,,]　　答:XHTML是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势，就出现了这样一个问题:如果我们有了XML，我们是否依然需要HTML?为了回答这个问题，1998年5月我们在旧金山开了两天的工作会议，会议的结论是:需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言，而且，已经有数以百万计的页面是采用HTML编写的。

[ft=,,]　　问:为什么XHTML 1.0相对HTML 4.0独立发展?

[ft=,,]　　答:并不是这样。XHTML恰恰就是HTML 4.0的重新组织，(确切的说它是HTML 4.01，是一个修正版本的HTML 4.0，只不过以XHTML 1.0命名发行。) 它们在XML里的解释会有一些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML 4.0基础上的延续。

[ft=,,]　　问:XHTML 1.0如何实现XML标准?

[ft=,,]　　答:XHTML就是一种XML应用。它采用XML的DTD文件格式定义，并运行在支持XML的系统上。这里要感谢XML的Namespaces功能，浏览器制造商不需要再创造新的私有标签(tags)，他们只需要在XHTML代码里包含XML代码片段，或者XML代码里包含XHTML代码片段。

[ft=,,]　　2、与HTML相比XHTML有什么特点?

[ft=,,]　　(1)XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点:不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML;由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML;数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。

[ft=,,]　　(2)XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。
[ft=,,]　　(3)使用XHTML的另一个优势是:它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。

[ft=,,]　　(4)XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。。

[ft=,,]　　(5)XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。

[ft=,,]　　(6)在网站设计方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯。/olor][/h1] [查看PDF电子文档] ]]> 313425156 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21573.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21572.html HTML相对路径(Relative Path)和绝对路径(Absolute Path)

HTML初学者会经常遇到这样一个问题 ，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？......
(相关教程：HTML超链接；HTML图片)
如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。
你的虚拟主机提供商会给你一个目录 ，比如www，这个www就是你网站的根目录！
为了避免这些错误 ，正确地引用文件 ，我们需要学习一下HTML路径。
HTML有2种路径的写法：相对路径和绝对路径。

HTML相对路径(Relative Path)

同一个目录的文件引用

如果源文件 和引用文件在同一个目录里，直接写引用文件名即可。
假设info.html路径 是：c:\Inetpub\wwwroot.
我们现在建一个源文件info.html ，在info.html里要引用index.html文件作为超链接。
假设info.html路径 是：c:\Inetpub\wwwroot\sites\blabla\info .html
假设index.html路径是：c :\Inetpub\wwwroot\sites\blabla\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "index.html">index.html</a >

如何表示上级目录

../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info .html
假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html
在info .html加入index.html超链接的代码应该这样写：
<a href = "../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c :\Inetpub\wwwroot\index.html
在info.html加入index.html超链接的代码应该这样写 ：
<a href = "../../index.html">index.html </a >
假设info .html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../wowstory/index.html">index.html</a>

如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
在info .html加入index.html超链接的代码应该这样写：
<a href = "html/index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
怎样在一个HTML网页中引用另外一个HTML网页作为超链接。
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/tutorials/index .html">index.html</a>

HTML绝对路径(Absolute Path)

HTML绝对路径(absolute path )指带域名的文件的完整路径。
假设你注册了域名www .blabla .cn，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。
直接写引用文件名即可。blabla\html\index.
假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是： http://www.blabla.cn/index.html。
这个文件的绝对路径就是： http://www .blabla。
假设你在www根目录下建了一个目录叫html_tutorials，然后在该目录下放了一个文件index.html，这个文件的绝 [查看PDF电子文档] ]]> 623465207 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21572.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21571.html 1.1一般标记
　　一般标记是由一个起始标记(Opening Tag)和一个结束标记(Ending Tag)所组成，其语法为：<x>受控文字</x>
　　其中，x代表标记名称。<x>和</x>就如同一组开关：起始标记<x>为开启(ON)的某种功能，而结束标记</x>(通常为起始标记加上一个斜线/)为关(OFF)功能，受控制的文字信息便放在两标记之间。例如：<i>这是斜体字</i>。
　　标记之中还可以附加一些属性(Attribute)，用来完成某些特殊效果或功能。例如：<x a1="v1",a2="v2",...,an="vn">受控文字</x>
　　其中，a1,a2,...,an为属性名称，而v1,v2,...,vn则是其所对应的属性值，属性值加不加引号，目前所使用的浏览器都可接受，但依据W3C的新标准，属性值是要加引号的，所以最好养成加引号得习惯。
1.2 空标记
　　虽然大部分的标记是成双成对出现的，但也有一些是单独存在的。这些单独存在的标记称为空标记(Empty Tags)。其与法为：<x>
　　同样，空标记也可以附加一些属性(Attribute)，用来完成某些特殊效果或功能。如：<x a1="v1",a2="v2",...,an="vn">，例如：<hr>,<br>等。
　　W3C定义的新标准(XHTML1.0/HTML4.0)建议：空标记应以/结尾，即：<X />
　　如果附加属性则为：<x a1="v1",a2="v2",...,an="vn" />
　　目前所使用的浏览器对于空标记后面是否要加/并没有严格要求，即在空标记最后在/和没有加/，不影响其功能。但是如果希望你的文件能满足最新标准，那么最好加上/。

2. HTML标记分类
　　2.1文件结构标记(Document Structure Tags)
　　此类标记的目的是用来标示出文件的结构，主要的有：
　　<html>...</html>:标示html文件的起始和终止。
　　<head>...</head>:标示出文件标题区。
　　<body>...</body>:标示出文件主体区
　　2.2区段格式标记(Block Formatting Tags)
　　此类标记的主要用途是将HTML文件中得某个区段文字,以特定格式显示，增加文件的可看度。主要的有：
　　<title>...</title>:文件题目。
　　<hi>...</hi>:i=1,2,...,6,网页标题。
　　<hr>:产生水平线。
　　<br>:强迫换行。
　　<p>...</p>:文件段落。
　　<pre>...</pre>:以原始格式显示。
　　<address>...</address>：标注联络人姓名、电话、地址等信息。
　　<blockquote>...</blockquote>:区段引用标记。
　　2.3字符格式标记(Character Formatting Tags)
　　用来改变HTML文件文字的外观，增加文件的美观程度。主要有：
　　<b>...</b>:粗体字。
　　<i>...</i>:斜体字。
　　<tt>...</tt>:打字体。
　　<font>...</font>:改变字体设置。
　　<center>...</center>:居中对齐。
　　<blink>...</blink>:文字闪烁。
　　<big>...</big>:加大字号。
　　<small>...</small>:缩小字号。
　　<cite>...</cite>:参照。
　　2.4列表标记(List Tags)
　　<ul>...</ul>:无编号列表。
　　<ol>...</ol:有编号列表。
　　<li>...</li>:列表项目。
　　<dl>...</dl>:定义式列表。
　　<dd>...</dd>:定义项目。
　　<dt>...</dt>:定义项目。
　　<dir>...</dir>:目录式列表。
　　<menu>...</menu>:菜单式列表。
　　2.5链接标记(Anchor Tag)
　　链接可以说是html超文本文件的命脉，html通过链接标记来整合分散在世界各地的图、文、影、音等信息。此类标记的主要用途为标示超文本文件链接(Hypertext Link)，主要有：
<a>...</a>:建立超级链接。
　　2.6多媒体标记(Multimedia Tag)
　　此类标记用来显示图像数据。主要有：
　　<img>:嵌入图像。
　　<embed>:嵌入多媒体对象。
　　<bgsound>:背景音乐。
　　2.7表格标记(Table Tags)
　　此类标记用制作表格。主要有：
　　<table>...</table>:定义表格区段。
　　<caption>...</caption>:表格标题。
　　<th>...</th>:表头。
　　<tr>...</tr>:表格列。
　　<td>...</td>:表格单元格。
　　2.8表单标记(Form Tags)
　　此类标记用来制作交互式表单，主要的有：
　　<Form>...</form>:表明表单区段的开始与结束。
　　<input>:产生单行文本框、单选按钮、复选框等。
　　<textarea>...</textarea>:产生多行输入文本框。
　　<select>...</select>:标明下拉列表的开始与结束。
　　<option>...</option>:在下拉列表中产生一个选择项目。
　　HTML标记并没有大小写之分，即<BODY>和<body>是相同的。以下来分别介绍这些标记。

3. 文件结构标记
　　一个html文件的结构基本上可以分为两部分，一部分称为标题区(Head Section)；另一部分称为主体区(Body Section)。文件结构标记就是用来标示出何处属于标题，何处属于主体。
[ft=,,] [查看PDF电子文档] ]]> 329956670 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21571.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21570.html [ft=#000000,,]什么是 HTML ?
[ft=#000000,,]HTML是Hypertext Marked Language的英文缩写,即 超文本标记语言 ,是一种用来制作超文本文档的简单标记语言( 就是制作网页的最基本的语言 ).
[ft=#000000,,]HTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
[ft=#000000,,]在标准网页设计中HTML负责填充网页的内容.
[ft=#000000,,]HTML文件也可以说是一个文本文件,它包含了一些HTML元素,标签等.HTML文件必须使用 *.html 或 *.htm 为文件名后缀.
[ft=#000000,,]HTML编写的 超文本文档 (文件)称为 HTML文档 (网页),它能独立于各种操作系统平台,如 UNIX,WINDOWS 等,并且可以通知浏览器显示什么.自1990年以来HTML就一直被用作互联网的信息表示语言,用于描述网页的格式设计和它与互联网上其它网页的连结信息.
[ft=#000000,,]HTML语言描述的文件(网页),需要通过 浏览器 显示出效果,如 FireFox, IE .
HTML是大小写不敏感的,HTML与html是一样的.
[ft=#000000,,]对于每个希望制作网页的朋友,学习HTML语言,是你们迈出的第一步,也是网页设计基础中的基础!

[ft=#000000,,] ---2
[ft=#000000,,]什么是 XHTML ?

[ft=#000000,,]XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.
[ft=#000000,,]XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
[ft=#000000,,]XHTML是用来代替HTML的, 是2000年w3c公布发行的.
[ft=#000000,,]XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.
[ft=#000000,,]XHTML是基于XML的应用.
[ft=#000000,,]XHTML更简洁更严紧.
[ft=#000000,,]XHTML也可以说就是HTML一个升级版本.(w3c描述它为'HTML 4.01')
XHTML是大小写敏感的,HTML与html是不一样的.标准的XHTML标签应该使用小写.
[ft=#000000,,]除此之外XHTML和HTML基本相同.

---3
[ft=#000000,,]什么叫 标准网页设计 ?

[ft=#000000,,]我们必须知道的! 每个网页都是由'内容'与'表现'组织起来的.
[ft=#000000,,]内容:就是我要显示什么.(使用HTML)
[ft=#000000,,]表现:怎么显示的更好.(使用CSS,学习CSS教程)
[ft=#000000,,]作为一个负责的网页设计者,你要牢记,标准网页设计中,HTML只是负责显示内容的,具体怎么显示,怎么排版是CSS的事.

[ft=#000000,,] ---4
[ft=#000000,,]何为 W3c组织 ?

[ft=#000000,,]答:是一个国际性的非赢利组织,目的就是推动web的标准.官方网站为 [ft=#000000,,].

[ft=#000000,,] ---5
[ft=#000000,,]何为 超文本 ？

[ft=#000000,,]答:就是网页.可以加入图片、声音、动画、影视等内容,可以从一个文件(网页)跳转到另一个文件(网页),与世界各地主机的文件连接. [查看PDF电子文档] ]]> 215836033 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21570.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21569.html HTML
以下所有代码全是在<head>...</head>之间，具体内容有：
1.<title>…</title>
标题元素，帮助用户更好识别文件，有且只有一个。当作为首页或收藏时做文件名。
2.<link>…</link>
显示本文档和其它文档之间的关系：<link rel=“stylesheet” href=“s.css”> 和外部样式表的连接。
rel说明html文件和url两文档之间的关系，href说明文档名。
3.<style>…</style>
可以在文档中包含风格页。文档本身的内部样式。
4.<base>…</base>
为相对路径定义绝对路径url，读者下载你的文档后，也可知道从哪下的url格式：通信协议：//主机名/路径/文件名
5.<script>…</script>
用于包含脚本（一系列脚本语言写的命令）可以是 Javascript 或 VbScript。
6.<meta>…</meta>
meta标签的常见功能：
１、帮助主页被各大搜索引擎登录
２、定义页面的使用语言
３、自动刷新并指向新的页面
４、实现网页转换时的动画效果
５、网页定级评价
６、控制页面缓冲
７、控制网页显示的窗口。
meta是用来在HTML文档中模拟HTTP协议的响应头报文。
meta 的属性有两种：name和http-equiv。
name 属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta 值。
name 属性

1、<meta name="Generator" c>用以说明生成工具（如Microsoft FrontPage 4.0）等；
2、<meta name="KEYWords" c>向搜索引擎说明你的网页的关键词；
3、<meta name="Description" c>告诉搜索引擎你的站点的主要内容；
4、<meta name="Author" c>告诉搜索引擎你的站点的制作的作者；
5、<meta name="Robots" c>
其中的属性说明如下：
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性
1、<meta http-equiv="Content-Type" c;charset=gb_2312-80">和 <meta http-equiv="Content-Language" c>用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；
2、<meta http-equiv="Refresh" c> 定时让网页在指定的时间n秒内，跳转到页面http;//yourlink；
3、<meta http-equiv="Expires" c>可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
4、<meta http-equiv="Pragma" c>是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
5、<meta http-equiv="set-cookie" c>cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
6、<meta http-equiv="Pics-label" c>网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
7、<meta http-equiv="windows-Target" c>强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
8、<meta http-equiv="Page-Enter" c>和<meta http-equiv="Page-Exit" c>设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。
Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：
0 盒状收缩 1 盒状放射
2 圆形收缩 3 圆形放射
4 由下往上 5 由上往下
6 从左至右 7 从右至左
8 垂直百叶窗 9 水平百叶窗
10 水平格状百叶窗 11垂直格状百叶窗
12 随意溶解 13从左右两端向中间展开
14从中间向左右两端展开 15从上下两端向中间展开
16从中间向上下两端展开 17 从右上角向左下角展开
18 从右下角向左上角展开 19 从左上角向右下角展开
20 从左下角向右上角展开 21 水平线状展开
22 垂直线状展开 23 随机产生一种过渡方式

ASP.NET
动态加样式表： HtmlLink link = new HtmlLink();
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("href", "~/newstyle.css");
this.Header.Controls.Add(link);
动态加meta tags ：
// Render: <meta name="keywords" c />
HtmlMeta meta = new HtmlMeta();
meta.Name = "keywords";
meta.Content = "Some words listed here";
this.Header.Controls.Add(meta);
// Render: <meta name="date" c scheme="YYYY-MM-DD" />
meta = new HtmlMeta();
meta.Name = "date";
meta.Content = DateTime.Now.ToString("yyyy-MM-dd");
meta.Scheme = " [查看PDF电子文档] ]]> 66464120 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21569.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21568.html [ft=,2,] 1，标题字体的设置：
HTML中共有6中型号的标题字体：
从大到小为<h1>...<h1>，<h2>...<h2>,……<h6>...<h6>，“...”为标题内容。
[ft=,2,] 2，设置字号：
文字的大小是通过字号来设置的，HTNL中共有7中不同的字号：
设置方法：<font size=#>...</font>。“#”从小到大取值为1，2，3，4，5，6，7.
[ft=,2,] 3，段落的控制：
段落的控制有两种方式：
一种是换行：使用<br>，那如果不换行呢？没错，就是<nobr>，使用<nobr>后，不论这段文字多长，它都不会换行，在后面的例子中，就可以看到。
一种是开始新的一段：<p></p>其中</p>可省略。用<p></p>后，新的一段与上一段有一定的距离，而使用了<br>后就没有距离，只有行距。
[ft=,2,] 4，设置物理字体和逻辑字体：
物理字体是指文字的粗体（<b></b>），斜体（<i></i>），下划线（<u></u>），等，后面的例子可以看到。
逻辑字体是指文字的大号字体（<big></big>），小号字体（<small></small>），强调（<em></em>），着重（<strong></strong>与粗体类似），引用（<cite></cite>），闪烁（<blink></blink>blink只适用与网景的Netscape浏览器，IE不支持）等形式，具体见后面例子。
[ft=,2,] 5，字模： 即中文中的楷体、隶书及其它字体，或英文文字的Arial、Times New Roman等字体。格式如下：
<font face="#,#,……#">...</font>
[ft=,2,] 6，设置字体颜色：
<font color=#>...</font>，其中“#”取值可为#RRGGBB，及16进制的RGB颜色值（可参考第二天附件RGB相关），也可以是颜色的英文名字，具体见后面的例子。
最后说一下标识符的组合使用，组合使用时，只需要一一成对匹配即可。如：
<b><u>又加粗有加下划线</u></b>
例：
<html>
<head>
<title>设置字体例子</title>
</head>
<h1>这是一号标题</h1>
<h2>这是二号标题</h2>
<h3>这是三号标题</h3>
<h4>这是四号标题</h4>
<h5>这是五号标题</h5>
<h6>这是六号标题</h6>
<font size=1>这是一号字体</font>
<font size=2>这是二号字体</font>
<font size=3>这是三号字体</font>
<font size=4>这是四号字体</font>
<font size=5>这是五号字体</font>
<font size=6>这是六号字体</font>
<font size=7>这是七号字体</font>
<nobr>请改变浏览器宽度，使之小于这一行的宽度，看看这个nobr标记的作用</nobr>
<p><b>这是粗体</b>
<p><i>这是斜体</i>
<p><tt>这是等宽字体</tt>
<p>Z_{这是下标体}
<p>Z^{这是上标体}
<p><s>这是删除划线</s>
<p><strike>这是删除线</strike>
<p><big>这是大号字体</big>
<p><small>这是小号字体</small>
<p><blink>这是闪烁字体</blink>
<p><em>这是强调字体</em>
<p><strong>这是着重字体</strong>
<p><cite>这是引用字体</cite>
<font size=#ff0000>这是红色字体</font>
<font size=red>这也是红色字体</font>
</html> [查看PDF电子文档] ]]> 348319058 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21568.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21567.html [ft=,1,]教程一、基本标志 [ft=,1,]1.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
[ft=,1,] Html是英文 [ft=#8000ff,,]HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用[ft=#8000ff,,]记事本 、[ft=#8000ff,,]写字板 或 [ft=#8000ff,,]FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用[ft=#ff0000,,]<标志名></标志名> 来表示标志的开始和结束(例如<html></html>标志对)，因此在Html文档中这样的标志对都[ft=#ff0000,,]必须是成对使用 的。在此教程中，我先讲一下Html的基本标志：
1.<html></html>
<html>标志用于Html文档的最前边，用来标识Html文档的开始。而</html>标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。
2.<head></head>
<head>和</head>构成Html文档的开头部分，在此标志对之间可以使用<title></title>、<script></script>等等标志对，这些标志对都是描述Html文档相关信息的标志对，<head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。
3.<body></body>
<body></body>是Html文档的主体部分，在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性： [ft=#008000,1,]属性 [ft=#008000,1,]用途 [ft=#008000,1,]示例 [ft=,1,]<body [ft=#008000,,]bgcolor="#rrggbb" > [ft=,1,]设置背景颜色。 [ft=,1,]<body bgcolor="red">红色背景 [ft=,1,]<body [ft=#008000,,]text="#rrggbb" > [ft=,1,]设置文本颜色。 [ft=,1,]<body text="#0000ff">蓝色文本 [ft=,1,]<body [ft=#008000,,]link="#rrggbb" > [ft=,1,]设置链接颜色。 [ft=,1,]<body link="blue">链接为蓝色 [ft=,1,]<body [ft=#008000,,]vlink="#rrggbb" > [ft=,1,]设置已使用的链接的颜色。 [ft=,1,]<body vlink="#ff0000"> [ft=,1,]<body [ft=#008000,,]alink="#rrggbb" > [ft=,1,]设置正在被击中的链接的颜色。 [ft=,1,]<body alink="yellow"> [ft=,1,] [ft=#0000ff,,]说明: 以上各个属性可以结合使用，如<body bgcolor="red" text="#0000ff">。引号内的[ft=#008000,,]rrggbb 是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如<body text="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。 [ft=,1,]4.<title></title>
[ft=,1,] 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入您要显示的文本即可。注意：<title></title>标志对只能放在<head></head>标志对之间。
[ft=,1,] 下面是一个综合的例子，仔细阅读，您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。
[ft=,1,]例1 Html文档中基本标志的使用
[ft=,1,]<html>
[ft=,1,]<head>
[ft=,1,]<title>显示在浏览器最上边蓝色条中的文本</title>
[ft=,1,]</head>
[ft=,1,]<body bgcolor="red" text="blue">
[ft=,1,]<p>红色背景、蓝色文本</p>
[ft=,1,]</body>
[ft=,1,]</html>
[ft=#ffffff,,][ft=,1,] 教 程 >> [ft=,,Arial]HTML >> [ft=,1,]格式标志 [ft=,1,]教程二、格式标志 [ft=,1,]1.<p></p>
2.<br>
3.<blockquote></blockquote>
4.<dl></dl><dt></dt><dd></dd>
5.<ol></ol><ul></ul><li></li>
6.<div></div> [ft=,1,] 上一个教程中我们讲了Html文档的基本标志，但我们还不知道怎样在浏览器中显示文本之类的东西，这正是我们在教程二中将要谈到的。在学习之前，必须强调一下，我们这个教程中所讲的格式标志统统都是用于<body></body>标志对之间的。
[ft=,1,]1.<p></p>
[ft=,1,] <p></p>标志对是用来创建一个段落，在此标志对之间加入的文本将按照[ft=#ff0000,,]段落 的格式显示在浏览器上。另外，<p>标志还可以使用align属性，它用来说明对齐方式，语法是：<p align=""></p>。align可以是[ft=#008000,,]Left (左对齐)、[ft=#008000,,]Center (居中)和[ft=#008000,,]Right (右对齐)三个值中的任何一个。如<p align="Center"></p>表示标志对中的文本使用居中的对齐方式。
[ft=,1,]2.<br>
[ft=,1,] <br>是一个很简单的标志，它没有结束标志，因为它用来创建一个[ft=#ff0000,,]回车换行 ，这么一说我想您该会使用了吧。在<br>的使用上还有一定的技巧，如果您把<br>加在<p></p>标志对的[ft=#008000,,]外边 ，将创建一个大的回车换行，即<br>前边和后边的文本的行与行之间的距离比较大，若放在<p></p>的[ft=#008000,,]里边 则<br>前边和后边的文本的行与行之间的距离将比较小，您不妨试试看。
[ft=,1,]3.<blockquote></blockquote>
[ft=,1,] 在<blockquote></blockquote>标志对之间加入的文本将会在浏览器中按[ft=#ff0000,,]两边缩进 的方式显示出来。
[ft=,1,]4.<dl></dl><dt></dt><dd></dd>
[ft=,1,] <dl></dl>用来创建一个[ft=#ff0000,,]普通的列表 ，<dt></dt>用来创建列表中的[ft=#ff0000,,]上层项目 ，<dd></dd>用来创建列表中[ft=#ff0000,,]最下层项目 ，<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。看一下下边的例子您就会明白了：
[ft=,1,]例2 创建一个普通列表
[ft=,1,]<html>
[ft=,1,]<head>
[ft=,1,]<title>一个普通列表</title>
[ft=,1,]</head>
[ft=,1,]<body text="blue">
[ft=,1,]<dl>
[ft=,1,] <dt>中国城市</dt>
[ft=,1,] <dd>北京 </dd>
[ft=,1,] <dd>上海 </dd>
[ft=,1,] <dd>广州 </dd>
[ft=,1,] <dt>美国城市</dt>
[ft=,1,] <dd>华盛顿 </dd>
[ft=,1,] <dd>芝加哥 </dd>
[ft=,1,] <dd>纽约 </dd>
[ft=,1,]</dl>
[ft=,1,]</body>
[ft=,1,]</html>
[ft=,1,] 此例在浏览器中的显示如下: 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约
[ft=,1,]5.<ol></ol><ul></ul><li></li>
[ft=,1,] <ol></ol>标志对用来创建一个[ft=#ff0000,,]标有数字的列表 ；<ul></ul>标志对用来创建一个[ft=#ff0000,,]标有圆点的列表 ；<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用，此标志对用来创建一个[ft=#ff0000,,]列表项 ，若<li></li>放在<ol></ol>之间则每个列表项加上一个数字，若在<ul></ul>之间则每个列表项加上一个圆点。请看下边的例子：
[ft=,1,]例3 标有数字或圆点的列表
[ft=,1,]<html>
[ft=,1,]<head>
[ft=,1,]<title></title>
[ft=,1,]</head>
[ft=,1,]<body text="blue">
[ft=,1,]<ol>
[ft=,1,]<p>中国城市 </p>
[ft=,1,]<li>北京 </li>
[ft=,1,]<li>上海 </li>
[ft=,1,]<li>广州 </li>
[ft=,1,]</ol>
[ft=,1,]<ul>
[ft=,1,]<p>美国城市 </p>
[ft=,1,]<li>华盛顿 </li>
[ft=,1,]<li>芝加哥 </li>
[ft=,1,]<li>纽约 </li>
[ft=,1,]</ul>
[ft=,1,]</body>
[ft=,1,]</html>
[ft=,1,] 此例在浏览器中的显示如下: [ft=,1,]中国城市
[ft=,1,]北京 [ft=,1,]上海 [ft=,1,]广州 [ft=,1,]美国城市
[ft=,1,]华盛顿 [ft=,1,]芝加哥 [ft=,1,]纽约 [ft=,1,]6.<div></div>
<div></div>标志对用来排版[ft=#ff0000,,]大块Html段落 ，也用于[ft=#ff0000,,]格式化表 ，此标志对的用法与<p></p>标志对非常相似，同样有align对齐方式属性，读者可以自己试试看。
[ft=,1,] [查看PDF电子文档] ]]> 147110762 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21567.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21566.html HTML 语法大全


这里收集了 HTML 的所有语法〈当然并不是全部，但也差不多是这样了〉。希望对网友查询时比较方便。 注：按英文字母顺序排列
卷标 , 属性名称 简介

　　<! - - ... - -> 批注

　　<A HREF TARGET> 指定超级链接的分割窗口

　　<A HREF=#锚的名称> 指定锚名称的超级链接

　　<A HREF> 指定超级链接

　　<A NAME=锚的名称> 被连结点的名称

　　<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址

　　<B> 粗体字

　　<BASE TARGET> 指定超级链接的分割窗口

　　<BASEFONT SIZE> 更改预设字形大小

　　<BGSOUND SRC> 加入背景音乐

　　<BIG> 显示大字体

　　<BLINK> 闪烁的文字

　　<BODY TEXT LINK VLINK> 设定文字颜色

　　<BODY> 显示本文

　　<BR> 换行



　　<CAPTION ALIGN> 设定表格标题位置

　　<CAPTION>...</CAPTION> 为表格加上标题

　　<CENTER> 向中对齐

　　<CITE>...<CITE> 用于引经据典的文字

　　<CODE>...</CODE> 用于列出一段程序代码

　　<COMMENT>...</COMMENT> 加上批注



　　<DD> 设定定义列表的项目解说

　　<DFN>...</DFN> 显示"定义"文字

　　<DIR>...</DIR> 列表文字卷标

　　<DL>...</DL> 设定定义列表的卷标

　　<DT> 设定定义列表的项目



　　<EM> 强调之用



　　<FONT FACE> 任意指定所用的字形

　　<FONT SIZE> 设定字体大小

　　<FORM ACTION> 设定户动式窗体的处理方式

　　<FORM METHOD> 设定户动式窗体之资料传送方式

　　<FRAME MARGINHEIGHT> 设定窗口的上下边界

　　<FRAME MARGINWIDTH> 设定窗口的左右边界

　　<FRAME NAME> 为分割窗口命名

　　<FRAME NORESIZE> 锁住分割窗口的大小

　　<FRAME SCROLLING> 设定分割窗口的滚动条

　　<FRAME SRC> 将HTML文件加入窗口

　　<FRAMESET COLS> 将窗口分割成左右的子窗口

　　<FRAMESET ROWS> 将窗口分割成上下的子窗口

　　<FRAMESET>...</FRAMESET> 划分分割窗口



　　<H1>~<H6> 设定文字大小

　　<HEAD> 标示文件信息

　　<HR> 加上分网格线

　　<HTML> 文件的开始与结束



　　<I> 斜体字

　　<IMG ALIGN> 调整图形影像的位置

　　<IMG ALT> 为你的图形影像加注

　　<IMG DYNSRC LOOP> 加入影片

　　<IMG HEIGHT WIDTH> 插入图片并预设图形大小

　　<IMG HSPACE> 插入图片并预设图形的左右边界

　　<IMG LOWSRC> 预载图片功能

　　<IMG SRC BORDER> 设定图片边界

　　<IMG SRC> 插入图片

　　<IMG VSPACE> 插入图片并预设图形的上下边界

　　<INPUT TYPE NAME VALUE> 在窗体中加入输入字段

　　<ISINDEX> 定义查询用窗体


<KBD>...</KBD> 表示使用者输入文字

　　<LI TYPE>...</LI> 列表的项目 ( 可指定符号 )



　　<MARQUEE> 跑马灯效果

　　<MENU>...</MENU> 条列文字卷标

　　<META NAME="REFRESH" CONTENT URL> 自动更新文件内容

　　<MULTIPLE> 可同时选择多项的列表栏



　　<NOFRAME> 定义不出现分割窗口的文字



　　<OL>...</OL> 有序号的列表

　　<OPTION> 定义窗体中列表栏的项目



　　<P ALIGN> 设定对齐方向

　　<P> 分段

　　<PERSON>...</PERSON> 显示人名

　　<PRE> 使用原有排列



　　<SAMP>...</SAMP> 用于引用字

　　<SELECT>...</SELECT> 在窗体中定义列表栏

　　<SMALL> 显示小字体

　　<STRIKE> 文字加横线

　　<STRONG> 用于加强语气

　　<SUB> 下标字

　　<SUP> 上标字



　　<TABLE BORDER=n> 调整表格的宽线高度

　　<TABLE CELLPADDING> 调整数据域位之边界

　　<TABLE CELLSPACING> 调整表格线的宽度

　　<TABLE HEIGHT> 调整表格的高度

　　<TABLE WIDTH> 调整表格的宽度

　　<TABLE>...</TABLE> 产生表格的卷标

　　<TD ALIGN> 调整表格字段之左右对齐

　　<TD BGCOLOR> 设定表格字段之背景颜色

　　<TD COLSPAN ROWSPAN> 表格字段的合并

　　<TD NOWRAP> 设定表格字段不换行

　　<TD VALIGN> 调整表格字段之上下对齐

　　<TD WIDTH> 调整表格字段宽度

　　<TD>...</TD> 定义表格的数据域位

　　<TEXTAREA NAME ROWS COLS> 窗体中加入多少列的文字输入栏

　　<TEXTAREA WRAP> 决定文字输入栏是自动否换行

　　<TH>...</TH> 定义表格的标头字段

　　<TITLE> 文件标题

　　<TR>...</TR> 定义表格美一行

　　<TT> 打字机字体



　　<U> 文字加底线

　　<UL TYPE>...</UL> 无序号的列表 ( 可指定符号 )



　　<VAR>...</VAR> 用于显示变量 [查看PDF电子文档] ]]> 444357880 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21566.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21564.html 怎样制作HTML滚动的字幕

　　
　　 我们在浏览网页的时候，有时会看到网页中有些文字会循环往复的移动。这种动画效果是如何制作的呢？这里我们就来看一看,当然,我们可以利用flash或者采用Gif动画来实现，但是这种方式往往占用的空间比较大，而且不如HTML标记来得那么简单。这个标记就是Marque标记，中文翻译为“跑马灯”。IE3.0以上版本的浏览器中支持这个HTML标记，而NetScape则不支持。因此我们在设计网页的时候需要考虑这个问题。
　　Marque标记的基本语法结构如下所示 ：
　　<MARQUE ALIGN=〃alignment〃 BEHAVIOR=〃type〃 BGCOLOR=〃color〃 DIRECTI ON=〃direction〃 SCROLLAMOUNT=〃n〃 SCROLLDELAY=〃n〃 LOOP=〃n〃 WIDTH=〃x〃 HEIGHT=〃y〃 HSPACE=〃x〃 VSPACE=〃y〃>洪恩在线，12亿中国人的网上大学</MARQUEE>
　　其中ALIGN可以用来指定滚动字幕与左右文字的对齐方式，它的值可以有top、middle、bottom等；
　　 BEHAVIOR用来指定滚动字幕的滚动方式，它的属性值有scroll、slide和alternate三个，scroll表示滚动字幕内容向同一方向重复滚动，slide表示滚动字幕内容从一端向另一端滚动并在另一端停止，alternate表示滚动字幕内容在两端之间来回往复滚动；
　　 DIRECTION指定滚动字幕的滚动方向，它的属性值有left和right两个，分别表示滚 动字幕由右向左和由左向右滚动；SCROLLAMOUNT用来设置多次滚动之间的间隔距离，其 单位是pixels（像素）；
　　 SCROLLING用来指定滚动字幕滚动一次所需要的时间，单位是ms（千分之一秒）， 其值的大小将直接影响滚动字幕的滚动速度；
　　LOOP属性是用来指定滚动字幕的滚动次数 的，当它的值为“－1”时，滚动字幕将连续滚动直到浏览器载入下一个页面；
　　HSPACE和 VSPACE则分别用来指定滚动字幕与其上一级页面在水平方向和竖直方向上的距离。
　　下面我们看一看跑马灯的效果。
人生自古有情痴 此恨不关风和月 总想为亲爱的人做一些什么 总想给未知的世界一些力量 未知的世界 总会令人害怕 未来有多久 世界有多大 我最亲爱的朋友 幸福就是你在我的身边 曾经受的伤 不再令人害怕 走过的每一步 不曾有遗憾 世界有了你 永远不会孤单 一双手 一个梦 生命因你而独特 许下承诺 让我一生陪你走 我的笑 我的泪 都想要与你分享 有你让我的生命更加坚强 最珍惜 最在乎 你烙印在我心上 一句承诺和一生的朋友 送给你我最亲爱的朋友 幸福就是你在我的身边 曾经受的伤 不再令人害怕 走过的每一步 曾有遗憾 世界有了你 永远不会孤单 人生自古有情痴 此恨不关风和月 从零开始学习HTML语言音画制作
HTML的英语全称为Hyper Text Markup Language，中文意思是超文本标识语言（简称为：超文本语言）。


它是计算机语言的最基础、最简单的部分。我们知道计算机最基本的识别文字（也叫语言）就是26个英文字母+10个阿拉伯数字+部分标点符号。论坛上的HTML音画制做是不借助任何软件的，所以就必须使用HTML语言（部分网站及专业论坛是不开放HTML设置的）。

初学者（包括偶）一打开HTML制式，看到的往往是一堆代码，即便不晕也是丈二和尚，往往会在这个时期放弃学习，实际上你只要摸上规律，找到窍门，它是很简单的，因为它的组成是有定律的、是固定的（不象爱情那么没有规律、那么复杂，嘿嘿）。


下面我就从最基本的、最基础东西开始，和大家共切磋（高手勿看，否则俺就紧张、害羞啦）

HTML语言音画最基本的构成就是四个部分：
边框
图片（内容）
音乐
FLASH

下面先讲边框：

边框可以设置任意N层，你想要几层就几层，网上很协调美观的边框大部分都是专业人士制做（有些网站可以专门下载），你不要一看见一个漂亮边框就认为楼主高不可攀，实际上大部分会员用的协调美观的边框都是共享的（当然，也有很大一部分高手是原创，例如大家比较熟悉的夜色迷离、白山岫水等高手），所以我在这里可以这样说：网上的边框是共享的，大家完全可以心安理得地去借用和复制，不用脸红（但本坛支持原创）！哈哈，我是借用别人的边框从来不脸红的人。

下面是一个七层边框的实例介绍，图片可以任意换，只要你觉着好看就行：

<TABLE cellSpacing=0 borderColorDark=#001a1a cellPadding=10 width=500 borderColorLight=#055b56 background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 borderColorDark=#001a1a cellPadding=15 width=500 borderColorLight=#055b56 background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=3 width="100%" background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=15 width="100%" background= 图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=3 width="100%" background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=15 width="100%" background=图片地址 border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=10 borderColorDark=#001a1a cellPadding=0 width="100%" borderColorLight=#055b56 background=图片地址 border=0>
<TBODY>
<TR>

<TD>（此处插入主文）</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
蓝色部分是结尾，

（我偷偷的告诉你一个小窍门：做完边框和内容后，结尾部分不用自己写，在Design格式[也就是第一个格式 Design]与HTML格式[ HTML]之间来回打几次，系统就自动给你写好了，别泄密哦）

其中：border =边框粗细 width= 边框宽度 height =边框高度 cellspacing=单元格间距 cellpadding=边框间距 borderColor=边框颜色 background =插入的背景 （这几个格式你可要背过了啊，如果也和我一样记忆力不好，可以复制到你的文件夹里）

下面是帖子内容的基本格式（这些您可要记住了，如记忆力不好，可复制到文件夹里）


1、贴图片格式（支持jpg、gif等格式），红色代码是图片居中命令：

<P align=center> <IMG src="内容图片地址"></P>

2、贴普通字体格式，蓝色代码为字的颜色、红色代码为字的大小（最大为了7，最小为1），其他运动字体的格式，另行讲解：

<CENTER><FONT face=宋体 color=#e4dc9b size=4>皮尔卡丹时尚论坛</FONT></CENTER>

3、贴FLASH格式（红色代码分别是宽度与高度）：

<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=FLASH地址 width=380 height=270 type=application/x-shockwave-flash quality="high" wmode="transparent"></EMBED>

另外为大家介绍三种flash 的代码

代码1（普通的flash的插入代码）


<EMBED height=170 pluginspage=http://www.macromedia.com/go/getflashplayer src=地址 type=application/x-shockwave-flash width=330 quality="high"></EMBED>
代码2（无限制的flash的代码）


<EMBED style="LEFT: 250px; WIDTH: 400px; POSITION: absolute; TOP: 900px; HEIGHT: 300px" align=right src=地址 width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

代码3（大型flash )

<TR><TD><EMBED style="LEFT: 50px; WIDTH: 850px; POSITION: absolute; TOP: 10px; HEIGHT: 1500px" align=right src=地址 width=500 height=1500 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED></TD>

代码4（双层flash的代码）


<EMBED align=right src=地址 width=420 height=350 type=application/octet-stream wmode="transparent" quality="high"><EMBED align=right src=地址 width=420 height=350 type=application/octet-stream wmode="transparent" quality="high">

常用特效
1。透明


style="FILTER: Alpha(opacity=100,style=2)"
2。倒影


<P align=center><FONT style="FONT-SIZE: 27pt; WIDTH: 220px; COLOR: #00ff00; HEIGHT: 10px"><IMG src="图片地址"><FONT id=ew style="FONT-SIZE: 27pt; FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv(); WIDTH: 220px; COLOR: #3333ff; HEIGHT: 10px"><IMG src="图片地址"></P></FONT></FONT>
3蝴蝶飞舞


<MARQUEE behavior=alternate direction=up height=300 width=110><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=orange><MARQUEE behavior=alternate direction=up height=250 width=110><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=Fuchsia><MARQUEE behavior=alternate direction=up height=300 width=110><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=olive><MARQUEE behavior=alternate direction=up height=250 width=110><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE>
发贴前别忘了把自动修正的小勾除掉自动修正

图片加透明FDLASH格式：

<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片><TBODY><TD><EMBED src=透明网址 width=500 height=375 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>

发贴前别忘了把自动修正的小勾除掉自动修正

贴音乐格式（红色部分为播放器的大小，设置为0就隐藏了播放器）：

1.背景音乐（适合　mid wma等格式）
<bgsound src=音乐网址 Loop=-1>

2.音频（适合MP3 WMA RM等很多格式）
<embed src=网址 AutoStart=true Loop=true width=400 height=40

3.视频
<embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400>

说明：AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true

Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。


为让大家有个直观的认识，就我自己的一个成品帖子，做一下实例演示：

（帖子地址：http://www.maoge.com.cn/bbs/dispbbs.asp?boardID=2&ID=32&page=1）

1、红色部分是边框；

2、 [查看PDF电子文档] ]]> 289628189 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21562.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21561.html 关于<html:link>标签在URI后面传参数的问题 [ft=#cc7033,,]※ 在struts标签<html:link>的page属性指定的URI后面传递参数可以有几种方式： 1.若明确参数名和参数值则直接在URI后输出，
如：<html:link page="/test.do?action=add">add</html:link>
2.对于参数值不确定的，paramName和paramProperty来输出，用paramId属性指定参数名。
对于paramName指定的对象应该存在于page、request、session、application其中之一。一般来说，是从Action类传过来的，作为request的属性之一（requst.setAttribute("name",object)）。
如果paramName指定的对象是action的ActionForm，则无需使用request.setAttribute方法。
例：<html:link page="/test.do" paramId="userid" paramName="uid">uname</html:link>
若参数值是一个bean对象的属性值（比如ActionForm,或者集合中存放的对象）则：
<html:link page="/test.do" paramId="userid" paramName="user" paramProperty="uid">uname</html:link>
3.若两个参数，一个确定一个不确定，则是以上两种方法的结合，即：
<html:link page="/test.do?action=modify" paramId="userid" paramName="uid">modify</html:link>
4.对于多个参数的问题，可以使用一个HashMap集合对象来存放所有的参数名及对应的参数值的方式，paramName属性值指定为该HashMap集合对象即可。
举例：
<%
//代码理想的位置应该是在action中
//可以在jsp页面测试
java.util.HashMap pms = new java.util.HashMap();
pms.put("code", "001002");
pms.put("name", "tester");
pms.put("alias", new String[]{"matin","jack"});
request.setAttribute("params", pms);
%>
<html:link action="/test.do" name="params" >test</html:link>
编译后的结果：<a href="/test.do?code=001002&name=tester&alias=matin&alias=jack">test</a>
这种方式虽然可以解决传多参数的问题，但是实现起来也比较麻烦，特别是对记录集中的数据逐条列出的时候
5.针对有的网友在<html:link>标签中嵌入使用jsp脚本(scriptlet)的问题，
例如:
<html:link page="/test.do?code=<%=varible%>">add</html:link>，这种写法是错误的，是无法编译的。
有的网友认为在struts标签内是不允许使用jsp脚本的，这种说法也不准确。如果前面的写法改成:
<html:link page="<%="/test.do?code="+varible%>">add</html:link>，就可以被执行，但是要注意URL相对路径的问题。
虽然在struts标签中嵌入jsp脚本不是真正意义上的struts应用，但是有时在委曲求全的情况下也只能如此了，除非使用自定义标签。比如在form表单中可能需要根据具体数据让某个字段是只读的，就可以用嵌入jsp脚本来实现：
<%
boolean rd;
if(2==2) rd;
%>
<html:text property="userid" read />

6.另外一种比较变态的方法，既不是真正意义上的struts，也不符合xml规范。那就是在<a>标签中用<bean:write>标签输出参数值。
如：<a href="test.do?uid=<bean:write name="user" property="userid"/>&name=<bean:write name="user" property="username"/>">test</a> [查看PDF电子文档] ]]> 23289594 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21561.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21560.html HTML基础什么是HTML
HTML 是表示网页的一种规范，它通过标记符定义了网页内容的显示。

HTML的工作原理
如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择“查看源文件”命令（或者选择“查看”菜单中的“源文件”命令），则系统会启动“记事本”，其中包含一些文本信息。这些文本其实就是网页的本质－－HTML 源代码。HTML（HyperText Markup Language，超文本标记语言）是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。例如，用 <table> 标记符可以在网页上定义一个表格。

标记符基础
如前所述，HTML 语言是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果。
基本的HTML语法
　　 HTML 的语法比较简单，即便没有任何计算机语言（如 C 语言、BASIC 语言等）的基础也很容易学。在 HTML 中，所有的标记符都用尖括号括起来。例如，<HTML> 表示 HTML 标记符。某些标记符，例如换行符 <BR>，只要求单一标记符号。但绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。开始标记符和相应的结束标记符定义了所影响的范围。结束标记符与开始标记符的区别是有一个斜线。例如，<H1> 这里是标题 </H1>，将以“标题1”格式显示文字“这里是标题”，而不影响开始标记符和结束标记符以外的其他文字。
　　说明：HTML 标记符是不区分大小写，但通常约定使用大写标记符，这有利于 HTML 文档的维护。 标记符的属性
　　对于许多标记符，还包括一些属性，以便对标记符作用的内容进行更详细的控制。实际上，有关 HTML 语法的讲解主要就是对各种标记符属性的讲解。在 HTML 中，所有的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔；属性的值放在相应属性之后，用等号分隔；而不同的属性之间用空格分隔。
Web页的基本结构
一个 Web 页实际上对应一个 HTML 文件，通常以 .htm 或 .html 为扩展名。任何 HTML 文档都包含的基本标记符包括：HTML 标记 <HTML> 和 </HTML>、首部标记 <HEAD> 和 </HEAD> 以及正文标记 <BODY> 和 </BODY>。
HTML标记
　　<HTML> 和 </HTML> 是 Web 页的第一个和最后一个标记符，Web 页的其他所有内容都位于这两个标记符之间。这两个标记告诉浏览器或其他浏览器或其他阅读该页的程序，此文件是一个 Web 页。虽然 HTML 标记符的开始标记符和结束标记符都可以省略(因为.htm 或 .html 扩展名已经告诉浏览器该文档为 HTML 文档)，但为了保持完整的网页结构，建议包含该标记。另外，HTML 标记符通常不包含任何属性。
　　说明：在 HTML 文档中，某些标记符的开始标记符和结束标记符都可以省略，某些标记符的结束标记符可以省略，而有些标记符则既不能省略开始标记符也不能省略结束标记符。首部标记
　　首部标记 <HEAD> 和 </HEAD> 位于 Web 页的开头，其中不包括 Web 页的任何实际内容，而是提供一些与 Web 页有关的特定信息。例如，可以在首部标记中设置网页的标题、定义样式表、插入脚本等。
　　首部标记中的内容也用相应的标记符括起来。样式表 (CSS) 定义位于 <STYLE> 和 </STYLE> 之间；脚本定义位于 <SCRIPT> 和 </SCRIPT> 之间。 TITLE 标记符
在首部标记符中，最基本、最常用的标记符是标题标记符<TITLE>和</TITLE>，用于定义网页的标题。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。 META 标记符
在首部标记符中另外一个比较常用的标记符是 META，它用于说明与 Web 页有关的信息，例如可以说明文件创作工具、文件作者等信息。
META 标记符的常用属性包括：name、http-equiv 以及 content。其中，name 属性给出特性名，而 content 属性给出特性值，http-equiv 属性指定 HTTP 响应名称，通常用于替换 name 属性，HTTP 服务器使用该属性值为 HTTP 响应消息头收集信息。
例如：
<META http-equiv="Content-Script-Type" c>
设置客户端行内程序的语言是 JavaScript；
<META http-equiv="Content-Style-Type" C>
设置行内样式的样式语言为 CSS。
META 标记符的一个常用功能是设置自动转址功能，即使浏览器自动从一个地址跳转到另一个地址，例：
<META http-equiv="Refresh" c>　
在这个例子中，完成当前文档加载30秒后将自动加载另一个文档(即 "URL=#" 后指定的 HTML 文档)。要实现以上效果，必须使 "URL=#" 后指定的 HTML 文档存在。 BGSOUND 标记符
BGSOUND 标记符只有开始标记符，没有结束标记符。它的基本属性是 src，用于指定背景音乐的源文件。另外一个常用属性是 loop，用于指定背景音乐重复的次数，如不指定该属性，则背景音乐无限循环。正文标记
　　正文标记符 <BODY> 和 </BODY> 包含 Web 页的具体内容，包括文字、图形、超链接以及其他各种 HTML 对象。
设置页面属性
正文标记符包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色。
设置页面背景色
　　在 <BODY> 标记符中使用 bgcolor 属性可以为网页设置背景颜色。例：
<BODY bgcolor="black"> 设置页面背景图像
　　 网页设计者可选择特定图案作为页面的背景－－使用 BODY 标记符的 background 属性即可。HTML 语句为：
<BODY background="网页背景图案的地址">。 设置北景图像水印效果
　　如果使用以下代码，则背景图案将具有水印效果：
<BODY background="background.jpg" bgproperties="fixed"> [ft=,3,]设置文字和超链 [查看PDF电子文档] ]]> 78971419 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21560.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21559.html 总类（所有HTML文件都有的）
文件类型 <HTML></HTML> （放在档案的开头与结尾）
文件主题 <TITLE></TITLE> （必须放在「文头」区块内）
文头 <HEAD></HEAD> （描述性资料，像是「主题」）
文体 <BODY></BODY> （文件本体）

结构性定义（由浏览器控制的显示风格）
标题 <H?></H?> （从1到6，有六层选择）
3.0 标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?>
3.0 区分 <DIV></DIV>
3.0 区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文区块 <BLOCKQUOTE></BLOCKQUOTE> （通常会内缩）
强调 <EM></EM> （通常会以斜体显示）
特别强调 <STRONG></STRONG> （通常会以加粗显示）
引文 <CITE></CITE> （通常会以斜体显示）
码 <CODE></CODE> （显示原始码之用）
样本 <SAMP></SAMP>
键盘输入 <KBD></KBD>
变数 <VAR></VAR>
定义 <DFN></DFN> （有些浏览器不提供）
地址 <ADDRESS></ADDRESS>
3.0 大字 <BIG></BIG>
3.0 小字 <SMALL></SMALL>

与外观相关的标签（作者自订的表现方式）
加粗 <B></B>
斜体 <I></I>
3.0 底线 <U></U> （尚有些浏览器不提供）
3.0 删除线 <S></S> （尚有些浏览器不提供）
3.0 下标 <SUB></SUB>
3.0 上标 <SUP></SUP>
打字机体 <TT></TT> （用单空格字型显示）
预定格式 <PRE></PRE> （保留文件中空格的大小）
预定格式的宽度 <PRE WIDTH=?></PRE>（以字元计算）
N1.0+ 向中看齐 <CENTER></CENTER> （文字与图片都可以）
N1.0 闪耀 <BLINK></BLINK> （有史以来最被嘲弄的标签）
N1.0 字体大小 <FONT SIZE=?></FONT>（从1到7）
N1.0 改变字体大小 <FONT SIZE=+|-?></FONT>
N1.0 基本字体大小 <BASEFONT SIZE=?> （从1到7; 内定为3）
N2.0 字体颜色 <FONT COLOR="#$$$$$$"></FONT>

连结与图形
链接 <A HREF="URL"></A>
链接到锚点 <A HREF="URL#***"></A>（如果锚点在另一个档案）
<A HREF="#***"></A> （如果锚点目前的档案）
N2.0 链接到目的视框 <A HREF="URL" TARGET="***"></A>
设定锚点 <A NAME="***"></A>
图形 <IMG SRC="URL">
图形看齐方式 <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>
N1.0 图形看齐方式 <IMG SRC="URL"
ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
取代文字 <IMG SRC="URL" ALT="***"> （如果没有办法显示图形则显示此文字）
点选图 <IMG SRC="URL" ISMAP> （需要CGI程式）
N2.0 点选图 <IMG SRC="URL" USEMAP="URL">
N2.0 地图 <MAP NAME="***"></MAP>（描述地图）
N2.0 段落 <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
3.0 大小 <IMG SRC="URL" WIDTH="?" HEIGHT="?">（以pixels为单位）
N1.0 图形边缘 <IMG SRC="URL" BORDER=?> （以pixels为单位）
N1.0 图形边缘空间 <IMG SRC="URL" HSPACE=? VSPACE=?> （以pixels为单位）
N1.0 低解析度图形 <IMG SRC="URL" LOWSRC="URL">
N1.1 用户端拉 <META HTTP-EQUIV="Refresh" C>（使用端自动更新 ）
N2.0 内嵌物件 <EMBED SRC="URL"> （将物件插入页面）
N2.0 内嵌物件大小 <EMBED SRC="URL" WIDTH="?" HEIGHT="?">

分隔
段落 <P> （通常是两个return）
3.0 段落 <P></P> （新定义成容器型标签）
3.0 文字看齐方式 <P ALIGN=LEFT|CENTER|RIGHT></P>
换行 <BR> （一个return）
N1.0 文字部份看齐方式<BR CLEAR=LEFT|RIGHT|ALL>（与图形合用时）
横线 <HR>
N1.0 横线对齐 <HR ALIGN=LEFT|RIGHT|CENTER>
N1.0 横线厚度 <HR SIZE=?> （以pixels为单位）
N1.0 横线宽度 <HR WIDTH=?> （以pixels为单位）
N1.0 横线比率宽度 <HR WIDTH=%> （以页宽为100%）
N1.0 实线 <HR NOSHADE> （没有立体效果）
N1.0 不可换行 <NOBR></NOBR> （不换行）
N1.0 可换行处 <WBR> （如果需要，可在此断行）

列举（可以巢状列举）
无次序式列举 <UL><LI></UL> （<LI> 放在每一项前）
N1.0 公布式列举 <UL TYPE=DISC|CIRCLE|SQUARE>（定义全部的列举项）
<LI TYPE=DISC|CIRCLE|SQUARE>（定义这个及其后的列举项）
有次序式列举 <OL><LI></OL> （<LI> 放在每一项前）
N1.0 数标型态 <OL TYPE=A|a|I|i|1> （定义全部的列举项）
<LI TYPE=A|a|I|i|1> （定义这个及其后的列举项）
N1.0 起始数字 <OL value=?> （定义全部的列举项）
<LI value=?> （定义这个及其后的列举项）
定义式列举 <DL><DT><DD></DL>（<DT>项目, <DD>定义）
表单式列举 <MENU><LI></MENU>（<LI> 放在每一项前）
目录式列举 <DIR><LI></DIR> （<LI> 放在每一项前）

背景与颜色
3.0 重复排列的背景 <BODY BACKGROUND="URL">
N1.1+ 背景颜色 <BODY BGCOLOR="#$$$$$$"> （依序为红、绿、蓝）
N1.1+ 文字颜色 <BODY TEXT="#$$$$$$">
N1.1+ 连结颜色 <BODY LINK="#$$$$$$">
N1.1+ 看过的连结 <BODY VLINK="#$$$$$$">
N1.1 使用中的连结 <BODY ALINK="#$$$$$$">

特殊字元（以下标签需用小写）
特别符号 &#?; （其中 ? 代表 ISO 8859-1 的编码）
< < > > & lt;& gt;
注册商标TM & reg;
N1.0+ 注册商标TM & reg;
著作权符号 & copy;
N1.0+ 著作权符号 & copy;

表单（通常需要与CGI程式配合）
定义表单 <FORM ACTION="URL" METHOD=GET|POST></FORM>
N2.0 上传档案 <FORM ENCTYPE="multipart/form-data></FORM>
输入栏位 <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">
栏位名称 <INPUT NAME="***">
栏位内定值 <INPUT value="***">
已选定 <INPUT CHECKED> （适用於checkboxes与 radio boxes）
栏位宽度 <INPUT SIZE=?> （以字元数为单位）
最长字数 <INPUT MAXLENGTH=?> （以字元数为单位）
下拉式选单 <Select></Select>
下拉式选单名称 <Select NAME="***"></Select>
选单项目数量 <Select SIZE=?></Select>
多选式选单 <Select MULTIPLE> （多选）
选项 <OPTION>
内定选项 <OPTION SelectED>
文字输入区 <TEXTAREA ROWS=? COLS=?></textarea>
输入区名称 <TEXTAREA NAME="***"></textarea>
N2.0 输入区换行方式 <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></textarea>

表格
3.0 定义表格 <TABLE></TABLE>
3.0 表格框线 <TABLE BORDER></TABLE> （有或没有）
N1.1 表格框线 <TABLE BORDER=?></TABLE>（可以设定数值）
N1.1 储存格左右留白 <TABLE CELLSPACING=?>
N1.1 储存格上下留白 <TABLE CELLPADDING=?>
N1.1 表格宽度 <TABLE WIDTH=?> （以pixels为单位）
N1.1 宽度比率 <TABLE WIDTH=%> （页宽为100%）
3.0 表格列 <TR></TR>
3.0 表格列内容看齐 <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 储存格 <TD></TD> （须与列并用）
3.0 储存格内容看齐 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 不换行 <TD NOWRAP>
N3.0 储存格背景颜色 <TD BGCOLOR=#$$$$$$>
3.0 储存格横向连接 <TD COLSPAN=?>
3.0 储存格纵向连接 <TD ROWSPAN=?>
N1.1 储存格宽度 <TD WIDTH=?> （以pixels为单位）
N1.1 储存格宽度比率 <TD WIDTH=%> （页宽为100%）
3.0 表格标题 <TH></TH> （跟<TD>一样，不过会对中并加粗）
3.0 表格标题对齐 <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
3.0 表格标题不换行 <TH NOWRAP>
3.0 表格标题占几栏 <TH COLSPAN=?>
3.0 表格标题占几列 <TH ROWSPAN=?>
N1.1 表格标题宽度 <TH WIDTH=?> （以pixels为单位）
N1.1 表格标题比率宽度<TH WIDTH=%> （页宽为100%）
3.0 表格抬头 <CAPTION></CAPTION>
3.0 表格抬头看齐 <CAPTION ALIGN=TOP|BOTTOM>（在表格之上/之下）

视框（定义与控制萤幕上的特定区域）
N2.0 视框格式总定义 <FRAMESET></FRAMESET> （取代<BODY>）
N2.0 视框行长度分配 <FRAMESET ROWS=,,,></FRAMESET>（pixels 或 %）
N2.0 视框行长度分配 <FRAMESET ROWS=*></FRAMESET> （* = 相对大小）
N2.0 视框栏宽度分配 <FRAMESET COLS=,,,></FRAMESET>（pixels 或 %）
N2.0 视框栏宽度分配 <FRAMESET COLS=*></FRAMESET> （* =相对大小）
N2.0 定义个别视框 <FRAME> （定义个别视框）
N2.0 个别视框内容 <FRAME SRC="URL">
N2.0 个别视框名称 <FRAME NAME="***"|_blank|_self|_parent|_top>
N2.0 边缘宽度 <FRAME MARGINWIDTH=?> （「左」与「右」边界）
N2.0 边缘高度 <FRAME MARGINHEIGHT=?> （「天顶」与「地底」边界）
N2.0 卷动条 <FRAME SCROLLING="YES|NO|AUTO">
N2.0 不可改变大小 <FRAME NORESIZE>
N2.0 无视框时的内容 <NOFRAMES></NOFRAMES>（如果浏览器不提供视框功能的话）

杂项
说明 （浏览器不会显示）
档案型态声明 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
3.0 档案型态声明 <!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.0//EN">
可搜寻 <ISINDEX> （指示可搜寻的索引项）
N1.0 提示 <ISINDEX PROMPT="***"> （要求输入的提示文字）
送出搜寻条件 <A HREF="URL?***"></a> （其中的问号不是数字，而是「问号」）
基本档案的URL <BASE HREF="URL"> （必须放在「文头」区段内）
N2.0 基本视窗名称 <BASE TARGET="***"> （必须放在「文头」区段内）
相关性 <LINK REV="***" REL="***" HREF="URL"> （必须放在「文头」区段内）
背景资讯 <META> （必须放在「文头」区段内） [查看PDF电子文档] ]]> 673048170 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21559.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21558.html HTML代码，我们在这里将图片+音乐+背景或再加上FLASH组成的帖简称为“代码帖”。这些帖以她的独特魅力，吸引了众多网友。但很多人没有去揭开她那美丽的面纱，总是在门外徘徊。我编制这些教学帖，就是希望大家都去了解她，去实践，制作出自己的心情、精彩和美丽。
一般来说你是不需要了解那些大多HTML代码的实际意义，但是，对一些HTML代码是需要理解的，对制作、调试效果有帮助。在这里我准备分几讲来对代码的编写规则加以解释。实际上我在这领域的探索时间也不长，难免有不足或不当之处，还请大家补充完善。谢谢！
在这里，我将不定期地编制些资料提供给大家。
常用HTML代码汇编：
一、文字
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）色码
rrggbb也可用6位颜色代码数字
3.显示小字体 <small>..........</small>
4.显示大字体 <big>..........</big>
5.粗体字 <b>..........</b>
6.斜体字 <i>..........</i>
7.打字机字体 <tt>..........</tt>
8.底线 <u>..........</u>
9.删除线 <strike>..........</strike>
10.下标字 _..........
11.上标字 ^..........
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>
20.文字移动指令<MARQUEE>..........</MARQUEE>
移动速度指令是:scrollAmount=# #最小为1，速度为最慢；数字越大移动的越快。
移动方向指令是：direction=# up向上、down向下、left向左、right向右。
指令举例：<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>
二、图片
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.表格标题
<caption>..........</caption>
表格标题位置 -- align
<caption align="#"> #号可为 top：表标题置于表格上方（预设值）
bottom：表标题置于表格下方
2.定义列 <tr>
3.定义栏位《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=欲合并栏位数>
四、表格的主要属性
1. <table>标记的主要属性
align定义表格的对齐方式，有三个属性值center，left，right
background定义表格的背景图案，属性值为图片的地址
bgcolor定义表格的背景颜色，属性值是各种颜色代码
border定义表格的边框宽度，属性值是数字
bordercolor定义表格边框的颜色，属性值是各种颜色代码
cellpadding定义单元格内容与单元格边框之间的距离，属性值是数字
cellspacing定义表格中单元格之间的距离
height定义表格的高度，属性值是数字
width定义表格的宽度，属性值是数字
2. <tr>标记，表格是由多行与多列组成的，<tr>标记用来定义表格的一行，他的属性极其属性值定义的是表格中的该行，其主要属性与属性值如下：
align定义对齐方式，属性值与上同
background定义背景图案 bgcolor定义背景色
3. <td>标记。用<td>标记概况起来的内容表示表格的单元。其主要属性与属性值和<table>标记的一样，补充两个合并列和行的代码：
colspan定义合并表格的列数，属性值是数字
rowspan定义合并表格的行数，属性值是数字
五、FRAME
1、分割视窗指令 <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=点数或百分比> [查看PDF电子文档] ]]> 303014466 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21558.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21557.html [img,80,14]http://www.gzsums.edu.cn/webclass/html/ie.gif[/img]
[img,20,20]http://www.gzsums.edu.cn/webclass/html/br20t.gif[/img] 基本语法
<marquee> ... </marquee><marquee>啦啦啦，我会移动耶！</marquee> 啦啦啦，我会移动耶！


[img,20,20]http://www.gzsums.edu.cn/webclass/html/br20t.gif[/img]文字移动属性的设置
方向 <direction=#> #=left, right<marquee direction=left>啦啦啦，我从右向左移！</marquee> <P>
<marquee direction=right>啦啦啦，我从左向右移！</marquee> 啦啦啦，我从右向左移！
啦啦啦，我从左向右移！


方式 <bihavior=#> #=scroll, slide, alternate<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <P>
<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <P>
<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee> 啦啦啦，我一圈一圈绕着走！
啦啦啦，我只走一次就歇了！
啦啦啦，我来回走耶！


循环 <loop=#> #=次数；若未指定则循环不止(infinite)<marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟哟！</marquee> <P>
<marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟哟！</marquee> <P>
<marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟哟！</marquee> 啦啦啦，我只走 3 趟哟！
啦啦啦，我只走 3 趟哟！
啦啦啦，我只走 3 趟哟！


速度 <scrollamount=#><marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee> 啦啦啦，我走得好快哟！


延时 <scrolldelay=#><marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee> 啦啦啦，我走一步，停一停！


[img,20,20]http://www.gzsums.edu.cn/webclass/html/br20t.gif[/img] 外观(Layout)设置
对齐方式(Align) <align=#> #=top, middle, bottom<font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
对齐上沿、中间、下沿。 [ft=,6,]啦啦啦，我会移动耶！ [ft=,3,]对齐上沿。
[ft=,6,]啦啦啦，我会移动耶！ [ft=,3,]对齐中间。
[ft=,6,]啦啦啦，我会移动耶！ [ft=,3,]对齐下沿。


底色 <bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
[ft=#000000,,]Black , [ft=#808000,,]Olive , [ft=#008080,,]Teal , [ft=#ff0000,,]Red , [ft=#0000ff,,]Blue , [ft=#800000,,]Maroon , [ft=#000080,,]Navy , [ft=#808080,,]Gray , [ft=#00ff00,,]Lime ,
[ft=#ff00ff,,]Fuchsia , [ft=#ffffff,,]White , [ft=#008000,,]Green , [ft=#800080,,]Purple , [ft=#c0c0c0,,]Silver , [ft=#ffff00,,]Yellow , [ft=#00ffff,,]Aqua <marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee> 啦啦啦，我会移动耶！


面积 <height=# width=#><marquee height=40 width=50% bgcolor=aaeeaa>
啦啦啦，我会移动耶！
</marquee> 啦啦啦，我会移动耶！


空白(Margins)<hspace=# vspace=#>********************************************<br>
嗨,
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦，我会移动耶！</marquee>
大家好！<br>
******************************************** ********************************************
嗨, 啦啦啦，我会移动耶！大家好！
********************************************

HTML Design Guide Main Page
[ft=,,][ft=,,] || || || || || || ||
[ft=,,]|| || ||
[ft=,,] ||
Network Communication Design
http://ncdesign.kyushu-id.ac.jp/
C&P 1994-1996 Yuriko Ienaga [ft=,,] [查看PDF电子文档] ]]> 352512237 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21557.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21556.html HTML里建立文字输入框。用户可以在里面写文字？
源代码：
<html>
<body>
<form>
姓名：
<input type="text" name="Name">
<br>
年龄：
<input type="text" name="Age">
</form>
</body>
</html>
显示效果


2、如何在HTML页面里建立密码输入框？
源代码：
<html>
<body>
<form>
用户名：
<input type="text" name="user">
<br>
密码：
<input type="password" name="password">
</form>
<p>
注意：在密码框中输入时，所输入的字符会显示为*
</p>
</body>
</html>
显示效果


3、如何在HTML页面里建立复选框。用户可以选择或不选择 ？
源代码：
<html>
<body>
<form>
POP
<input type="checkbox" name="pop">
<br>
Google
<input type="checkbox" name="google">
</form>
</body>
</html>
显示效果



4、如何在HTML中建立单选按钮？
源代码：
<html>
<body>
<form>
男：
<input type="radio" checked="checked"
name="Sex" value="男">
<br>
女：
<input type="radio"
name="Sex" value="女">
</form>
<p>
当访问者点击了一个单选按钮时，该按钮被选中，同时与之同组的其他按钮处于未选中状态。
</p>
</body>
</html>
显示效果



5、怎样为页面加上一个表单。里面包括两个输入框和一个提交按钮？
源代码：
<html>
<body>
<form name="input" action="Result.asp" method="get">
POP
<input type="checkbox" name="pop" checked="checked"><br>
Google
<input type="checkbox" name="google">
<br>
<input type="submit" value="提交">
</form>
<p>
表单提交后，会转到一个先的页面 Result.asp
</p>
</body>
</html>
显示效果



6、 如何建立按钮。按钮的文字可以自己定义？
源代码：
<html>
<body>
<form>
<input type="button" value="欢迎来到POP">
</form>
</body>
</html>
显示效果



8、这个表单里有两个复选框，以及一个提交按钮？
源代码：
<html>
<body>
<form name="input" action="Result.asp" method="get">
POP
<input type="checkbox" name="pop" checked="checked"><br>
Google
<input type="checkbox" name="google">
<br>
<input type="submit" value="提交">
</form>
<p>
表单提交后，会转到一个先的页面 Result.asp
</p>
</body>
</html>
显示效果



9、这个表单包含两个单选按钮，以及一个提交按钮
源代码：
<html>
<body>
<form name="input" action="Result.asp" method="get">
男：
<input type="radio" name="Sex" value="男" checked="checked">
<br>
女：
<input type="radio" name="Sex" value="女">
<br>
<input type ="submit" value ="提交">
</form>
<p>
表单发送后会转到新的窗口Result.asp
</p>
</body>
</html>
显示效果
<!--index.htm------------------------------------------------------------------------------->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" ">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" c>
</head>
<body>
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><form name="form1" method="post" action="send.asp">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCFFFF">
<tr>
<td height="20"><div align="center">发送消息</div></td>
</tr>
<tr>
<td><div align="center">
<textarea name="msg" cols="100" rows="6"></textarea>
</div></td>
</tr>
<tr>
<td><div align="center">
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Submit2" value="Reset">
</div></td>
</tr>
</table>
</form></td>
</tr>
</table>
</body>
</html>
'//send.asp
<%
function chan_time(shijian)'转换日期时间函数
s_year=year(shijian)
if len(s_year)=2 then s_year="20"&s_year
s_m(shijian)
if s_month<10 then s_m&s_month
s_day=day(shijian)
if s_day<10 then s_day="0"&s_day
s_hour=hour(shijian)
if s_hour<10 then s_hour="0"&s_hour
s_minute=minute(shijian)
if s_minute<10 then s_minute="0"&s_minute
chan_time=s_year & s_month & s_day & s_hour & s_minute
end function
function chan_data(shijian) '转换日期时间函数
s_year=year(shijian)
if len(s_year)=2 then s_year="20"&s_year
s_m(shijian)
if s_month<10 then s_m&s_month
s_day=day(shijian)
if s_day<10 then s_day="0"&s_day
chan_data=s_year & s_month & s_day
end function
function chan_file(shijian)'转换日期时间函数
s_m(shijian)
if s_month<10 then s_m&s_month
s_day=day(shijian)
if s_day<10 then s_day="0"&s_day
s_hour=hour(shijian)
if s_hour<10 then s_hour="0"&s_hour
s_minute=minute(shijian)
if s_minute<10 then s_minute="0"&s_minute
s_ss=second(shijian)
if s_ss<10 then s_ss="0"&s_ss
chan_file = s_month & s_day & s_hour & s_minute & s_ss
end function
top="<html><head><title>news</title></head><body>"
botom="</body></html>"
msg=request.Form("msg")
msg=replace(msg,vbcrlf,"")
msg=replace(msg,chr(9),"")
msg=replace(msg," ","&nbsp;")
msg=replace(msg,"\r\n","<br>")
msg=replace(msg,"\n","<br>")
msg=top&msg&botom
Set fs=Server.CreateObject("Scripting.FileSystemObject")
all_tree2=server.mappath("news")&"\"&chan_data(now)
if (fs.FolderExists(all_tree2)) then'判断今天的文件夹是否存在
else
fs.CreateFolder(all_tree2)
end if
pass=chan_file(now)
randomize '使用系统计时器来初始化乱数产生器
pass=rnd(pass)
pass=get_pass(pass)
pass=left(pass,10)
file1=pass
files=file1&".txt"
filez=all_tree2&"\"&files
set ts = fs.createtextfile(filez,true) '写文件
for z=1 to len(msg)
write_now=mid(msg,z,1)
ts.write(write_now)
next
' ts.writeline(all_msg)
ts.close
set ts=nothing '文件生成
if err.number<>0 or err then%>
<script language="javascript">
alert("不能完成")
</script>
<%else%>
<script language="javascript">
alert("已完成")
history.back();
</script>
<%end if
Set MyFile = fs.GetFile(filez)
all_tree2=server.mappath("news")&"\"&chan_data(now)
if (fs.FolderExists(all_tree2)) then
else
fs.CreateFolder(all_tree2)
end if
MyFile.name= left(MyFile.name,len(MyFile.name)-4)&".htm"
set MyFile=nothing
set fs=nothing
set fdir=nothing
function get_pass(pass)
pass=cstr(pass)
pass=replace(pass," ","")
pass=replace(pass," ","")
pass=replace(pass,"-","")
pass=replace(pass," ","")
pass=replace(pass,":","")
pass=replace(pass,".","")
pass=replace(pass,"+","")
pass=replace(pass,"_","")
pass=replace(pass,"<","")
pass=replace(pass,">","")
pass=replace(pass,"!","")
pass=replace(pass,"@","")
pass=replace(pass,"#","")
pass=replace(pass,"$","")
pass=replace(pass,"%","")
pass=replace(pass,"^","")
pass=replace(pass,"&","")
pass=replace(pass,"*","")
pass=replace(pass,"(","")
pass=replace(pass,")","")
pass=replace(pass,"=","")
pass=replace(pass,"\","")
pass=replace(pass,"/","")
pass=replace(pass,"|","")
get_pass=pass
end function

%> [查看PDF电子文档] ]]> 277249193 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21554.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21553.html html

HTML简介
Hypertext Markup Language，中文也就是超文本链接标示语言。HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.

也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord\记事本\写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。

HTML只不过是组合成一个文本文件的一系列标签。它们像乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂.

HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是<p>,块引用标签是<blockquote>。有些标签说明页面如何被格式化（例如，<p>开始一个新段落），其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。

关于标签，需要记住的是，它们是成双出现的。每当使用一个标签－－如<blockquote>,则必须以另一个标签</blockquote>将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。但是也有一些标签例外。比如，<input>标签就不需要。

基本HTML页面以<html>标签开始，以</html>结束。在它们之间，整个页面有两部分－－标题和正文。

标题词－－夹在<head>和</head>标签之间－－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在<body>和</body>之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。

那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文)
扩展名也可是HTM

然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。

学习HTML


HTML/XHTML教程

HTML/XHTML基础教程http://www.cainiao8.com/web/xhtml.html是最适合新手入门的。由于教程的目标是浅显易懂，有一些知识是没有介绍到的。下面的教程里，你一定可以找到所有缺少的内容：

Blabla的HTML教程http://www.blabla.cn/html_tutorials/index.html不错。而其他们有一个HTML参考http://www.blabla.cn/html_tag_ref/050_html_elements_ref.html。

W3POP的HTML教程http://www.w3pop.com/learn/index/f/1/c/7/也很好，非常的全。XHMTL则作为另一个独立的教程http://www.w3pop.com/learn/index/f/1/c/8/。

英文HTML教程

首先是W3Schools的HTML教程http://www.w3schools.com/html/default.asp。这个网站的教程很不错，而且还有一个HTML参考http://www.w3schools.com/tags/default.asp。

HTMLDOG的教程专区也有很好的HTML教程。分为:
HTML入门教程http://www.htmldog.com/guides/htmlbeginner/
HTML中级教程http://www.htmldog.com/guides/htmlintermediate/
HTML高级教程http://www.htmldog.com/guides/htmladvanced/
外加一个HTML标签参考http://www.htmldog.com/reference/htmltags/
学习中遇到HTML相关的问题怎么办？

教程里的某一节看不明白？我遇到了教程里没有提到的情况？哪里可以解决我的问题呢？

教程网论坛的建站杂谈板块http://bbs.jcwcn.com/forum-44-1.html
版主很热心地解答问题。

经典论坛的Web标准化专栏http://bbs.blueidea.com/forum-5-1.html
这里高手云集，几乎没有解决不了的问题。


HTML标准的版本历史

超文本置****言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）.
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1996年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化****和国际电工******的标准
XHTML 1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。
XHTML 1.1, 于2001年5月31日发布
(XHTML 2.0, W3C工作草案)
HTML没有1.0版本是因为当时有很多不同的版本。有些人认为蒂姆·伯纳斯-李的版本应该算初版，这个版本没有IMG元素。当时被称为HTML+的后续版的开发工作于1993年开始，最初是被设计成为“HTML的一个超集”。第一个正式规范在为了和当时的各种HTML标准区分开来，使用了2.0作为其版本号。HTML+的发展继续下去，但是它从未成为标准。

HTML3.0规范是由当时刚成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字绕排和复杂数学元素的显示。虽然它是被设计用来兼容2.0版本的，但是实现这个标准的工作在当时过于复杂? [查看PDF电子文档] ]]> 616016127 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21553.html http://CrazyCoder.cn/HtmlJiaoCheng/Article21552.html [ft=,6,]
[ft=,6,]
[ft=#ffff00,,]长话短说,下面是把你上传好的flash地址格式转换成html网页格式加滚动字体效果代码!
[ft=#ffff00,,]警告:如果要在flash里添加滚动字体必需要转换成网页格式才行的!
[ft=#ffff00,,]代码如下:
</HEAD>
<BODY scroll=no><EMBED style="LEFT: 0px; POSITION: absolute; TOP: 0px" align=right src=[ft=#ff0000,,]http://wangwei240.go3.icpcn.com/13.swf width=1024 height=600 type=application/x- wmode="opaque" quality="high" ; shockwave-flash></EMBED>
<SCRIPT language=javascript>
title_tmp1=document.title
if (title_tmp1.indexOf(">>")!=-1){
title_tmp2=title_tmp1.split(">>");
title_last=" —> "+title_tmp2[1];
title_last=title_last + " —> " + title_tmp2[2];
}else{
if (title_tmp1.indexOf("——")!=-1){
title_tmp2=title_tmp1.split("——");
title_last=" —> "+title_tmp2[1];
if (title_last==" —> "){title_last=" —> "};
if (title_last==" —> "){title_last=" —> "};
}
else { title_last="QQ:381553866"}
}
title_new="｝﹊｝￣小伟"+title_last+""
step=0
function flash_title()
{
step++
if (step==7) {step=1}
if (step==1) {document.title='欢迎光临ジェあ小丑鱼个性空间， 记的帮我踩踩哒！★☆☆☆'+title_new+'☆☆☆★'}
if (step==2) {document.title='欢迎光临ジェあ小丑鱼个性空间， 记的帮我踩踩哒！☆★☆☆'+title_new+'☆☆★☆'}
if (step==3) {document.title='欢迎光临ジェあ小丑鱼个性空间， 记的帮我踩踩哒！☆☆★☆'+title_new+'☆★☆☆'}
if (step==4) {document.title='欢迎光临ジェあ小丑鱼个性空间， 记的帮我踩踩哒！☆☆☆★'+title_new+'★☆☆☆'}
if (step==5) {document.title='欢迎光临ジェあ小丑鱼个性空间， 记的帮我踩踩哒！☆☆★☆'+title_new+'☆★☆☆'}
if (step==6) {document.title='欢迎光临ジェあ小丑鱼个性空间， 记的帮我踩踩哒！☆★☆☆'+title_new+'☆☆★☆'}
setTimeout("flash_title()",180);
}
flash_title()
</SCRIPT>
效
<SCRIPT>
<!--
function Helpor_net(seed)
{ var m1 = "欢迎光临ジェあ小丑鱼个性空间， 有空常来坐坐,记的帮我踩踩哒！" ;
var m2 = "" ;
var msg=m1+m2;
var out = " ";
var c = 1;
var speed = 120;
if (seed > 100)
{ seed-=2;
var cmd="Helpor_net(" + seed + ")";
timerTwo=window.setTimeout(cmd,speed);}
else if (seed <= 100 && seed > 0)
{ for (c=0 ; c < seed ; c++)
{ out+=" ";}
out+=msg; seed-=2;
var cmd="Helpor_net(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,speed); }
else if (seed <= 0)
{ if (-seed < msg.length)
{
out+=msg.substring(-seed,msg.length);
seed-=2;
var cmd="Helpor_net(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,speed);}
else { window.status=" ";
timerTwo=window.setTimeout("Helpor_net(100)",speed);
}
}
}
Helpor_net(100);
-->
</SCRIPT>
[ft=#ffff00,,]现在就开始教大家做法,首先把你要添加滚动字体的flash地址找到以后,然后再新建个文本,再把上面的代码全部复制进去 代码红颜色部分的地址改成你的flash地址,在把名字和QQ改成你自己的,呵呵,就这么简单.改好以后在另存为 格式"html"　然后到 [ft=#ffff00,,]自己先去注册个帐号,再传你保存的flash　如果你自己有地方上传也可以.
[ft=#ffff00,,]你自己去试试看,就按照我的方法去做,一定没问题
[ft=#ffff00,,]话我就先说到这里了,还有什么不懂的请给我留言,希望大家能多多支持! [查看PDF电子文档] ]]> 348978528 Html教程 2008-10-22 http://CrazyCoder.cn/HtmlJiaoCheng/Article21552.html