HTML笔记

HTML学习笔记

一、　cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。

二、cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。

三、form在网页中指的是表单的意思.

表单允许客户端的用户以标准格式向服务器提交数据。表单的创建者为了收集所需数据，使用了各种控件设计表单如 INPUT 或 SELECT。查看表单的用户只需填充数据并单击提交按钮即可向服务器发送数据。服务器上的脚本会处理这些数据。

如果数据要发送出去的话，那么必须定义每个控件元素的 NAME 标签属性。表单中的元素可使用 name 属性或 id 属性，或通过 elements 集合引用。 　　

如果焦点位于表单中的控件时用户按 Esc 键，该控件的值将会恢复到上次的值。如果用户再次按 Esc 键，整个表单都会重置。

 　如果表单仅包含一个文本框时用户按下回车键，onsubmit 事件将触发。如果表单有 INPUT type=submit 元素，该元素将会变为带有黑色边框，这意味着用户按下回车键即可提交表单。

属性

　　form物件之下，可使用的属性： 　　

length	表示该表单物件下的所有输入原件的总数
elements	表示该表单物件下的的所有数日原件阵列
encoding	表示该表单物件的ENCTYPE的属性值
action	表示该表单物件的ACTION属性值
method	表示该表单物件的METHOD属性值
target	表示该表单物件的TARGET属性值

方法

　　form物件之下，可使用的操作方法只有一种：submit（）。如果我们有一个myForm输入表单，则myForm.submit()方法就能将表单资料送出。

事件

　　form物件之下，可使用的驱动事件： 　　onSubmit 　　onReset

附属子物件

　　form物件之下，可能包含下列输入物件： 　　

button	使用者自动的按钮元件
hidden	隐藏式输入元件
text	文字输入栏
password	密码输入栏
textarea	多行式文字输入栏
checkbox	单选钮
radio	多选钮
select	列表选择元件
reset	清除表单钮
submit	送出表单钮

 

四、Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。
1，type=text
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。
参数name：同样是表示的该文本输入框名称。
参数size：输入框的长度大小。
参数maxlength：输入框中允许输入字符的最大数。
参数value：输入框中的默认值
特殊参数readonly：表示该框中只能显示，不能添加修改。
< form>
your name:
< input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br>
< input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改">
< /form>
2，type=password
不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。
参数和“type=text”相类似。
< form>
your password:
< input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15
< /form>
3，type=file
当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）
提供了一个文件目录输入的平台，参数有name，size。
< form>
your file:
< input type="file" name="yourfile" size="30">
< /form>
4，type=hidden
非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。
一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。

< form name="form1">
your hidden info here:
< input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
< /form>
< script>
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
< /script>
5，type=button
标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码
< form name="form1">
your button:
< input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open('http://www.cnbruce.com')">
< /form>
6，type=checkbox
多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择）其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）

<!-- < form name="form1">
a:< input type="checkbox" name="checkit" value="a" checked>< br>
b:< input type="checkbox" name="checkit" value="b">< br>
c:< input type="checkbox" name="checkit" value="c">< br>
< /form>
name值可以不一样，但不推荐< br>
< form name="form1">
a:< input type="checkbox" name="checkit1" value="a" checked>< br>
b:< input type="checkbox" name="checkit2" value="b">< br>
c:< input type="checkbox" name="checkit3" value="c">< br>
< /form>
7，type=radio
即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked.
不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。< form name="form1">
a:< input type="radio" name="checkit" value="a" checked>< br>
b:< input type="radio" name="checkit" value="b">< br>
c:< input type="radio" name="checkit" value="c">< br>
< /form>
下面是name值不同的一个例子，就不能实现多选一的效果了< br>
< form name="form1">
a:< input type="radio" name="checkit1" value="a" checked>< br>
b:< input type="radio" name="checkit2" value="b">< br>
c:< input type="radio" name="checkit3" value="c">< br>
< /form>

8，type=image
比较另类的一个，自己看看效果吧，可以作为提交式图片

< form name="form1" action="xxx.asp">
your Imgsubmit:
< input type="image" src="../blog/images/face4.gif">
< /form>
9，type=submit and type=reset
分别是“提交”和“重置”两按钮
submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。

< form name="form1" action="xxx.asp">
< input type="text" name="yourname">
< input type="submit" value="提交">
< input type="reset" value="重置">
< /form>

五、<form name=" "  action=" .asp"  onSubmit=" ">

这里面的name，action，onsubmit是什么意思呢?

name 是这个表单的名称，当你这个页面中有多个表单，而又要对其中一个表单 进行一个操作时，用name就可以区分几个表单。

action 是接收这个表单使用的地址，如果action值为空时，有两种情况，一种是直接在本页接收值，别一种是就这个表单有多个转向不同的按钮，我们已经事先已经对每个按钮的action进行了设置，这个要用到javascript的知识。

onsubmit 是指当你点击提交时，在提交之前它要触发一个事件，这个事件可能是javascript函数，也可能是其它。。。

六、valign是HTML表格中tr 标签属性。

valign -- 代表行的垂直对齐方式(valign=top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))。valign可以通俗的理解为上中下。 而和align的区别是 align为左中右。

七、<table cellspacing=0  cellpadding=0 width="760"  align="center"  class="cardbg">

定义“Class="td"”说明当前表格将使用ID为“td”的CSS样式。

 

八、fieldset 元素可将表单内的相关元素分组。（相当于一个静态文本框）

如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.<legend> 标签为 fieldset 元素定义标题。

实例

<form>

  <fieldset>

    <legend>health information</legend>

    height: <input type="text" />

    weight: <input type="text" />

  </fieldset>

</form>

 

Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。

Select 对象集合

集合	描述
options[]	返回包含下拉列表中的所有选项的一个数组。

Select 对象属性

属性	描述
disabled	设置或返回是否应禁用下拉列表。
form	返回对包含下拉列表的表单的引用。
id	设置或返回下拉列表的 id。
length	返回下拉列表中的选项数目。
multiple	设置或返回是否选择多个项目。
name	设置或返回下拉列表的名称。
selectedIndex	设置或返回下拉列表中被选项目的索引号。
size	设置或返回下拉列表中的可见行数。
tabIndex	设置或返回下拉列表的 tab 键控制次序。
type	返回下拉列表的表单类型。

标准属性

属性	描述
className	设置或返回元素的 class 属性。
dir	设置或返回文本的方向。
lang	设置或返回元素的语言代码。
title	设置或返回元素的 title 属性。

Select 对象方法

方法	描述
add()	向下拉列表添加一个选项。
blur()	从下拉列表移开焦点。
focus()	在下拉列表上设置焦点。
remove()	从下拉列表中删除一个选项。

Select 对象事件句柄

onchange

当改变选择时调用的事件句柄。

实例程序：

<SELECT NAME="Cats" SIZE="1">

<OPTION VALUE="1">Calico

<OPTION VALUE="2">Tortie

<OPTION VALUE="3" SELECTED>Siamese

</SELECT>

运行结果：

 

 

1、带重号的列表

<ul>

<li>我有一个梦想！

</ul>

 

2、标号列表<ol>

<ol>

<li>我有一个梦想！

</ol>

 

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

表单的组成

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

表单标签

　　<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.xxx.com/test.asp" method="post" target="_blank">...</form> 　　表示表单将向http://www.xxx.com/test.asp以post的方式提交，提交的结果在新的页面显示，数据提交的媒体方式是默认的application/x-www-form-urlencoded方式； 　　

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

文本框

　　文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。 　　

代码格式：<input type="text" name="..." size="..." maxlength="..." value="..."> 　　

属性解释： 　　

type="text"定义单行文本输入框； 　　

name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称； 　　           size属性定义文本框的宽度，单位是单个字符宽度； 　　

maxlength属性定义最多输入的字符数。 　　

value属性定义文本框的初始值 　　

样例1代码： 　　<input type="text" name="example1" size="20" maxlength="15" />

多行文本框

　　也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。 　　代码格式：

<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA> 　　   属性解释： 　　

name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称； 　　

cols属性定义多行文本框的宽度，单位是单个字符宽度； 　　

rows属性定义多行文本框的高度，单位是单个字符宽度； 　　

wrap属性定义输入内容大于文本域时显示的方式，可选值如下： 　　

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

样例2代码： 　　

<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>

密码框

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

代码格式：<input type="password" name="..." size="..." maxlength="..."> 　　

属性解释： 　　

type="password"定义密码框； 　　

name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称； 　　size属性定义密码框的宽度，单位是单个字符宽度； 　　

maxlength属性定义最多输入的字符数。 　　

样例3代码： 　　<input type="password" name="example3" size="20" maxlength="15">

隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。 　　代码格式：<input type="hidden" name="..." value="..."> 　　

属性解释： 　　

type="hidden"定义隐藏域； 　　

name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称； 　　value属性定义隐藏域的值 　　

例如：<input type="hidden" name="ExPws" value="dd">

复选框

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

代码格式：

<INPUT type="checkbox" name="..." value="..."> 　　

属性解释： 　　type="checkbox"定义复选框； 　　

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

样例4代码： 　　

<input type="checkbox" name="yesky" value="09">xxxcom 　　

<input type="checkbox" name="Chinabyte" value="08">xxx.com

单选框

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

代码格式：<input type="radio" name="..." value="..."> 　　

属性解释： 　　

type="radio"定义单选框； 　　

name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称； 　

　value属性定义单选框的值，在同一组中，它们的域值必须是不同的。 　　

样例5代码： 　　

<input type="radio" name="myFavor" value="1">xxx.com 　　

<input type="radio" name="myFavor" value="2">xxx.com

文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。 　　

注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。 　　

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

属性解释： 　　

type="file"定义文件上传框； 　　

name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称； 　　

size属性定义文件上传框的宽度，单位是单个字符宽度； 　　

maxlength属性定义最多输入的字符数。 　　

样例6代码： 　　

<input type="file" name="myfile" size="15" maxlength="100">

下拉选择框

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

代码格式： 　　

<select name="..." size="..." multiple> 　　

<option value="..." selected>...</option> 　　... 　　</select> 　　

属性解释： 　　

size属性定义下拉选择框的行数； 　　

name属性定义下拉选择框的名称； 　　

multiple属性表示可以多选，如果不设置本属性，那么只能单选； 　　

value属性定义选择项的值； 　　

selected属性表示默认已经选择本选项。 　　

样例7代码： 　　

<select name="mySel" size="1"> 　　

<option value="1" selected>xxx.com</option> 　　

<option value="d2">xxx.com</option> 　　

</select> 　　

     样例8代码： 　　

<select name="mySelt" size="3" multiple> 　　

<option value="1" selected>xxx.com</option> 　　

<option value="d2">xxx.com</option> 　　

<option value="3">internet.com</option> 　　

</select>

表单按钮

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

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

代码格式：<input type="submit" name="..." value="..."> 　　

属性解释： 　　

type="submit"定义提交按钮； 　　

name属性定义提交按钮的名称； 　　

value属性定义按钮的显示文字； 　　

样例9代码： 　　

<input type="submit" name="mySent" value="发送"> 　　

1.3.2 复位按钮 　　复位按钮用来重置表单。 　　

代码格式：<input type="reset" name="..." value="..."> 　　

属性解释： 　　

type="reset"定义复位按钮； 　　

name属性定义复位按钮的名称； 　　

value属性定义按钮的显示文字； 　　

样例10代码： 　　<input type="reset" name="myCancle" value="取消"> 　　

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

代码格式：<input type="button" name="..." value="..." onClick="..."> 　　

属性解释： 　　

type="button"定义一般按钮； 　　

name属性定义一般按钮的名称； 　　

value属性定义按钮的显示文字； 　　

onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为； 　

样例11代码： 　　

<input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')"> 　　

二．表单 　　

表单是用来提交资料、意见，规范流程执行过程的格式。