网页设计与制作HTML.ppt_第1页
网页设计与制作HTML.ppt_第2页
网页设计与制作HTML.ppt_第3页
网页设计与制作HTML.ppt_第4页
网页设计与制作HTML.ppt_第5页
已阅读5页,还剩47页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

HTML的基本语法和语义是由HTML当前的最后版本4.01版定义的,HTML已经不再继续发展. 使用任何文本编辑器都可以编写HTML和XHTML 大多数标签都有一个开始标签和一个结束标签,标签影响的范围就是它们之间的内容. 在HTML中没有相应的结束标签的标签有: 、 、 、 但是对XHTML,结束标签是必需的 注释是另外一种文本内容,它出现在HTML源文档中,但浏览器并不显示它们。注释都放在特殊的“标记元素中间。浏览器将忽略这段注释文本。, 功能:界定一个完整的HTML或XHTML文档 属性: dir:dir属性指定了浏览器该用什么方向来显示包含在元素中的文本。将它用于标签中时,即决定了文本在整个文档中将以什么方向显示。当它用在其他标签中时,则只决定那个标签中的内容的显示方向。这个属性的默认值是ltr,意味着文本将会从左到右显示给用户。如果用rtl,则从右到左显示文本. Lang:如果包含在标签中,那么lang属性可以指定整个文档所使用的语言。如果用在其他标签中,则此属性将指出那个标签中内容所使用的语言。 Version: version属性定义了用于创作文档的HTML标淮的版本。对于HTML 4.01版本来说,它的值的确切表示应该如下所示: version=“-/W3C/DTD HTML 4.01/EN“ 结束标签:,标签, 功能:定义文档的头部 属性 dir、lang、profile Profile:profile属性提供了与当前文档相关联的配置文件的URL,这个属性主要是为将 来的开发而保留的占位符。 结束标签: -头部标签 功能:定义文档标题 属性 dir、lang 结束标签: 其他的头部标签: 和:定义了当前文档的基本位置,以及和其他文档的关系。 :提供其他标签都不提供的额外文档数据。 : 定义浏览器显示非标准对象的方法。 : 定义一个或者多个可以被文档中其他元素调用的脚本。 : 用来创建CSS属性,以控制整个文档主体内容的显示特性。,标签,:文档的主体 功能:定义文档主体 属性: alink background bgcolor bgproperties Class dir id lang link style text vlink title onClick onDblClick onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onUnload 结束标签: 在标签和其结束标签之间的所有部分都被称作主体内容(body content),最简单的文档可能仅仅在标签中有一系列文本段. 标签的各种属性大致可以分为三类:控制文档外观的属性,将文档自身和可编程功能关联起来的事件属性,以及标记和标识文档主体以供将来引用的属性。 text属性设置整个文档中所有无链接文本的颜色。 标签的link, vlink和alink属性控制着文档中超文本标签的颜色。所有这三种属性与text和bgcolor属性一样,都接受将颜色指定为一个RGB组合或颜色名的值。 link属性决定用户还没有单击过的所有超链接的颜色。vlink属性设置用户已经单击过的所有链接的颜色。alink属性则定义激活链接文本的颜色.,标签,标签,:文档的主体 background属性:可以通过设置body)标签的backgrouncd属性在文档背景中放置 一个图像. background属性需要的值是一个图像的URL,浏览器会自动在水平和垂直 方向上重复该图像(平铺)来填满整个窗口。 leftmargirn属性: lettmargin是Internet explorer专有的属性,body标签的leftmargin属性扩展允许 相对于浏览器窗日的左边边缘缩进至左边的边界,如一张纸的边界一样。 topmargin属性: 和lettmargin一样,目前topmargin属性扩展专属于Internet Explorer。 它包含在body标签中,用来设定文档顶部的边界。边界空间用文档的背景颜色或图像 填充的。,: 功能:定义一个文本块 属性: align Class id dir lang style title nowrap onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签: 标签可以将文档分割成独立的、不同的部分还可以和align属性结合起来,控制文档内容在显示时的对齐,还可以和许多编程属性结合起来实现用户交互。 align属性: 的align属性指定了标签中包含的文档内容在显示时是左对齐(left,默认设置)、右对齐(right),还是居中对齐(center)、两端对齐(justify)来把文本的左边和右边同时对齐。标签可以嵌套,嵌套的标签的排列优先于包含它的标签。 nowrap属性 仅受Internet Explorer支持的nowrap属性取消了在部分中对文本自动换行的功能。这样只有当源文档中有回车符时,才能显示出换行。,标签,title属性 可以使用这个附加的title属性和放在双引号中的值来向文档的部分中添加一个描述性短语。与id属性一样,title属性几乎可以和其他任何标签连在一起使用,而且其行为也大同小异。 id属性 如果要使文档的某部分可供以后的超链接、样式表、applet或者其他自动处理所引用,就可以用id属性来进行标记。任何一个用引号括起来并且可以惟一标识文档中某部分的字符串都可以用作id属性的值,以后可以使用该值来明确地引用文档的这个部分。尽管在标签中介绍该属性,实际上它几乎可以用于其他任何标签。 class和style属性 在标签中使用style属性可以创建这个标签所含内容的内联样式。使用class属性则可以把对标签预先定义好的类样式应用于这个部分所包含的内容。class属性的值应当是在某文档级定义的样式名称,或者是在外部定义的样式表。,标签,标签 功能:定义文本的段落 属性: align、 class、 dir、 lang style、 title id onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签 标题标签 HTML/XHTML的标题一共有6个级别,这6个标题标签分别是:, , , 和它们表示的是标题在文档中从最高()到最低)的优先顺序。 功能 定义六级标题中的一级 属性: align、 class、 dir、 lang style、 title id onClick onDblClick onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签:, , , 和,标签,物理样式标签 功能:为文本指定物理样式 属性: class、 dir、 lang id style、 title onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签:不能省略 物理样式标签包括: 标签明确地将包括在它和其结束标签之间的字符或者文本变成粗体。 标签 标签和其相应的标签之间的文字其字体比周围的文字要大一号。如果文字已经是最大号字体,这个标签将不起任何作用。 标签 标签和基于内容的样式标签类似。它和结束标签结合起来使用,告诉浏览器将包含其中的文本以斜体字字体显示 标签:标签和它所对应的标签一样,但它是缩小字体而不是放大。如果被包含的字体已经是字体模型所支持的最小字号,那么标签将不起任何作用。,标签,物理样式标签: 标签-下标 包含在标签和其结束标签中的内容将会以当前文本流中字符高度的一半来显示,无论是标签还是和它对应的标签,在数学等式、科学符号和化学公式中都非常有用。 标签-上标 标签和其结束标签可以把它们包含的内容变成上标,这个标签在向文档添加脚注以及表示方程中的指数值时非常有用。 标签 这个标签告诉浏览器要把包含在和相应的标签之间的文本加上下划线。在HTML 4和XHTML中,这个标签已经被废弃了,但是流行的浏览器仍然支持它。,标签,标签 功能:在文本流中插入一个换行 属性: Class、clear、id、style、tit1e 结束标签:在HTML中没有;在XHTML中为 标签将打断HTML或XHTML文档中正常段落的行间距和换行。在HTML中它没有结束标签。大多数浏览器会停止在本行中继续添加文字和图像,转移到下一行的开 始处继续添加间距和换行。 clear属性 通常情况下,标签会告诉浏览器立刻停止当前的文本流,并在下一行的左边,或者在左对齐内联图形或表格的右边开始继续输出文本流。有的时候,你可能希望当前的文本流在当前左边或者右边的表格或者图像的下面一行继续输出。HTML 4和XHTML通过标签的clear属性提供了这样的功能。它可以具有三个值:left, right或者all 标签 功能: 不带任何格式地输出一个文本块 在HTMLlXHTML标准中,标签和必需的相应结束标签定义了一段文本,浏览器将完全按照在源文档中写好的字间距和行间距来显示它们。正常的换行和段落间距将被禁用。,标签,标签 属性: class、 dir、 lang id style、 title width onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签: 标签有一个可选的属性width,它决定了在块中每一行应该有多少个字符。浏览器可以利用这个值来选择字体或者字体大小,以适合块里为每一行指定的字符数。,标签,标签 功能:定义一个块引用 属性: class、 dir、 lang id style、 title cite onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签 在和标签之间的所有文本都会从常规文档中分离出来,经常会在左、右两边进行缩进,实际的显示效果会因浏览器的不同而各不相同。 标签 标签及其必需的结束标签()告诉浏览器,二者之间包含的文本是一个普通邮件的地址。地址还可能包含其他联系信息。浏览器可能会以不同于普通文本的方式来处理这些文本,或者用特殊的方式使用地址。你还可以通过标签的class和style属性来控制显示特性.,标签,标签 属性: class、 dir、 lang id style、 title onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 标签 功能:定义文本的字体大小 属性: class、color、dir、face、id、lang、size、style、title 结束标签,标签,标签,标签 功能:打断文本流并插人一条分隔线 标签告诉浏览器要插入一个横跨整个显示窗口的水平分隔线。在HTML中,该标签没有相应的结束标签。而对于XHTML,则包括结束标签 属性: class、 dir、 lang id Size style、 title align Width noshade color onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp size属性:通过size属性可以加粗分隔 noshade属性:nashade属性加到hr标签中,就可以去掉3D效果。在HTML中并不要求为它赋值;而在XHTML中,则要用noshade=“ noshade “ width属性:默认的分隔线会横跨整个显示窗口.可以通过width属性来缩短或者加长分隔线的长度,从而创建以特定的像素数为宽度的分隔线,或者是当前文本流宽度的一定百分比的分隔线。,标签,标签 align属性: 水平分隔线的align属性可能会是下面三个值中的一个 、:left,center或者right. color属性:只被Internet Explorer支持的color属性可以为分隔线设置颜色。这个属性的值可以是颜色的名称,也可以是定义特定颜色的十六进制数字。 标签 功能:在文档中插入一个图像 class、 dir、 lang id size style、 title align src border alt height /width Hspace/vspace onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onAbort onError onMouseOut onMouseOver onMouseUp onLoad 标签允许在文档当前的文本流中引用或者插人图形图像。在标签的前后没有设定任何换行符或者段落分隔符,所以图像才可以真正地“内联(inline ) “在文本和其他内容当中。标签在HTML版本中没有结束标签。在XHTML中,则要在标签及其属性后面立即跟随,或者在标签最后一个字符的后面加上斜线标记:例如,标签,标签 src属性:标签的src属性是必需的,它的值是图像文件的URL,也就是引用该图像的文档的绝对地址或相对地址。常把图像文件存放在一个单独的文件夹中,将这些目录命名为pics或者“images”之类的名称. alt属性: alt属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。 align属性: 可以通过标签的align属性来控制带有文字包围的图像的对齐方式, HTM L和XHTML标准指定了5种图像对齐属性值:left., right, top、middle和bottom。left和right值会把图像周围与其相接的文本都转移到相应的边界中去;其余的三个值将图像一与其相邻的文字在垂直方向上对齐。 hspace属性和vspace属性 通过hspace,可以以像素为单位,指定图像左边和右边的文字与图像之间的间距,而vspace值则是上面和下面的文字与图像之间距离的像素数,标签,标签 功能:在文档背景中播放声音 使用标签可以设置背景音乐。这个标签只适用于Internet Explorer文档。其他浏览器会忽略这个标签。当用户第一次下载和显示主文档时,这个标签会下载并播放音频文件。当用户刷新浏览器显示时,还会重新播放背景声音文件。 属性:loop、src 结束标签:在HTML中没有 loop属性:loop属性允许将背景声音重新播放一定的次数.至少到用户转移到另一个页面或者关闭浏览器时才停止播放. src属性: src属性是标签必需的。它的值是指向相关声音文件的URL. ,标签,标签 标签定义了在Internet Explorer用户的显示屏幕中滚动的文字。标签只适用于Internet Explorer 功能:创建一个滚动文本框 属性: align behavior bgcolor class direction height hspace loop scrollamount scrolldelay style vspace width 结束标签 align属性:align属性接受以下三个值之一:top, middle和bottom,表示字幕上指定的点将与周围文字的相应点对齐。这行代码将把字幕区域的上侧与周围文字的上侧对齐。 behavior, direction和loop属性 这三种属性一起控制着字幕滚动的样式、方向和持续时间。 behavior属性接受下列三个值:scroll(默认值) Slide、alternate direction属性可以为字幕文字指定滚动方向,可接受的值是left(默认)或right。 loop属性:决定了字幕文字滚动的次数。,标签,标签 height和width属性 height和width属性决定了字幕区域的大小。如果没有指定大小,字幕区域的宽度将扩展到整个Internet Explorer的显示区域,而且高度足以放下字幕文字。这两个属性的值可以是数字,表示绝对像素大小,也可以是百分比,表示相对于浏览器窗口高度和宽度的百分比大小。 hspace和vspace属性 hspace和vspace属性可用来在字幕和周围文字之间留出间距。这样字幕可以相对于周围文字而体现出来。这两个属性都要求使用整数值,并用像素值来指定间距. hspace属性控制着字幕左右两侧的间距。 vspace属性控制着字幕上下两侧的间距。例如,要在字幕四周创建 10个像素的间距,可使用如下代码: scrollamount和scrolldelay属性:这些属性控制着滚动字幕的速度和平滑度。 scrollamount属性值是滚动过程中文字每次移动的像素数。较小的值表示滚动较为平滑但滚动速度很慢;大的数值则会创建快速的文字运动。 scrolldelay属性可用来设置滚动过程中文字相邻两次移动之间的时间间隔,以毫秒为单位。这个值越小,滚动得越快。,标签,标签 功能:定义文本流内的一个链接。 属性: accesskey、 charset、 class、 coords、 dir、 href、 hreflang、 id、 lang name、 rel、 rev、 shape、 style、tabindex、 target、 title、 type onBlur、 onClick、 onDblClick、 onFocus、 onKeyDown、 onKeyPress onKeyUp、 onMouseDown、onMouseOut、 onMouseOver onMouseMove、onMouseUP 结束标签: 不能省略 href属性: href属性可以用来指定超链接目标的URL, href属性的值可以是任何有效文档的相对或绝对url,包括片段标识符和JavaScript代码段。如果用户选择了标签中的内容,那么浏览器会尝试检索并显示href属性指定的url所表示的文档,或者执行JavaScript表达式、方法和函数的列表。 ,标签,头部标签 功能:提供有关文档的附加信息 属性: charset 、 content、 dir、 http_equiv Lang、 name、 schema 标签放置在文档头部, 标签的属性定义了与文档相关联的名称/值对。 name属性 name属性提供了由标签定义的名称/值对中的名称。HTML和XHTML标准都没有指定任何预先定义的名称。通常情况下,你可以自由使用对自己和源文档的读者来说富有意义的名称。如: content属性 content属性提供了名称/值对中的值。该值可以是任何有效的字符串。content属性始终要和name或http-equiv属性一起使用。 ,标签,头部标签 http-equiv属性 使用带有http-equiv属性的标签时,服务器将把名称/值对添加到发送给浏览器的内容头部中。 使用不同的文档刷新 上面给出的例子会让浏览器在显示完当前文档2秒后,打开 ,标签,无序列表标签 和之间的内容是一个无序的条目列表,此无序列表中的每个条目都由标签进行定义 功能:定义一个无序列表 属性: Class compact dir id Lang style title type onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签: type属性 为每个无序列表的条目添加项目符号。此属性的值包括:disc, circle和square Pickled Kumquats Quats andKraut (a holiday favorite!) Quatshakes ,标签,有序列表标签 功能:定义一个有序列表 属性: Class compact dir id lang style title type start onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签: Rinse 50 pounds of fresh kumquats Bring eight gallons white vinegar to rolling boil Add kumquats gradually, keeping vinegar boiling Boil for one hour, or until kumquats are tender Place in sealed jars and enjoy! ,标签,有序列表标签 start属性 通常情况厂浏览器会从阿拉伯数字1开始白动对有序列表的条目进行编号。标签的start属性允许你改变开始值。如果希望列表从5开始编号,可以使用 This is item number 5 This is number six! And so forth type属性 在标签中,type属性值A代表使用大写字母进行编号,a代表使用小写字母进行编号,I代表使用大写罗马数字进行编号,i代表使用小写罗马数字进行编号,1代表使用最普通的阿拉伯数字进行编号. This is the Roman number 8 The numerals increment And so forth 标签,标签,标签 标签既可以用于定义有序列表条目,也可以用于定义无序列表条目。 属性: Class dir id Lang style title type start value onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 结束标签: type属性 标签中type属性的值与相应列表类型的值相同:无序列表中条目的type值可以是circle, square或disc。 value属性 value属性会改变特定列表条目的编号,并影响其后所有条目的编号。由于有序列表是惟一带有顺序编号条目的列表类型,所以value属性只有在有序列表的标签中使用才有效. Item number And the seconda lice dump to number And continue with 10 ,标签,嵌套列表 A History of kumquats Early History The Fossil Record Missing Link? Mayan Use of Kumquats Ktunquats in the New Warld Future use of kumquats ,标签,定义列表标签 功能:定义一个定义列表 属性: Class dir id lang style title compact onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 定义列表由和标签所包围。在标签中,定义列表的每个条目都由两部分组成:术语及其随后的定义或解释。列表中每一项的名称不再使用标签,而是用标签用来标记,后面跟随着由标签标记的条目的定义或解释。定义列表是表现术语表、名次列表或其他名称/值型列表的理想方法。 标签:定义一个定义列表条目, 标签定义了组成定义列表的术语部分,此标签只在定义()列表中使用时才有效。 属性: Class dir id style title lang onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp,标签,标签 属性: Class dir id style title lang onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 标签用于标记定义列表中条目的定义部分的开始处。按照HTML和XHTML标准的规定,仅在定义()列表中使用,并紧跟着标签,其后是定义或解释。 无序列表可用于: 链接集合 简短且无序的文本组 文稿中需要强调的重点 有序列表可用于:目录、 文本的连续段落集合 定义列表可用于: 术语表 任何以名称/值对形式表示的列表,标签,标签 表单(form)是由一个或多个文本输入框、可单击的按钮、多选框组成的,下拉菜单和图像映射组成的,所有这些都放在标签中。一个文档中可以包含多个表单,而且在每个表单中可以放置通常的主体内容,包括文字和图像在内。文字可以为用户提供表单元素标记以及各种提示和指示,告诉他们该如何填写表单。这时候的文字非常有用。并且在不同的表单元素中,还可以用JavaScript事件处理器来实现多种效果,比如检验和证实表单内容及计算流量等。 用户首先要填写表单中的不同字段,然后单击特殊的“提交(Submit)”按钮(或者有时候可能是按Enter键)将表单提交给服务器。浏览器会将用户提供的数值和选项数据打包,将它们发送给某台服务器。服务器通常会将信息传递给一个能够处理这些信息的支持程序或应用程序,并产生一个HTML形式的回应. 功能:定义表单 属性: accept-charset action class dir encrypt lang Method name style target title onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onReset onSubmit,标签,标签 action属性 标签中必需的action(动作)属性说明了接收和处理表单数据的应用程序的URL。大多数表单处理应用程序放在Web服务器上某个特定的目录下,这个目录的名称通常为cgi-bin 其中的URL告诉浏览器要联系域中名为www的Web服务器,并把用户表单的值传递给cgi-bin目录中的update(更新)应用程序,从而进行处理。 method属性 除了action之外,标签中另一个必需的属性method可以设置方法,而浏览器则用这些方法将表单中的数据传送给服务器进行处理。共有两种方法;POST方法和GET方法。 如果采用POST方法,浏览器将会按下面两步来发送数据。首先,浏览器将与action属性中指定的表单处理服务器建立联系,一旦建立起连接之后,浏览器就会按分段传输的方法将数据发送给服务器。 另一种情况是采用GET方法,这时浏览器会先与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的action URL之后,这两者之间用问号来进行分隔。,标签,标签 可以采用GET方法来发送只有少数简短字段的小表单。 对那些有许多字段或是有很长的文本域的表单来说,就应该采用POST方法来发送。 明确传递参数 http:/www.kumquat .com/cgi-bin/update?x=27&y=33 标签 HTML 4.0和XHTML标准中引入了表单“控件”,对于大量通常的表单控件,可以使用标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。虽然标签中有许多属性,但是对每个元素来说,只有type和name属性是必需的(而提交或重置按钮只有type属性)。 属性: accept accesskey align alt border checked class dir disabled lang maxlength name size src style tabindex title type usemap value readonly,标签,标签-事件属性 onBlur onChange onClick onDbliClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onSelect 可以用标签中必需的type属性来选择控件的类型,用name属性来为字段命名(也就是在表单提交处理过程中使用的字段) 表单中的文本字段 将type属性的值设为password,就可以创建一个掩码文本控件。 表单中的复选框 复选框(checkbox)表单控件为用户提供了一种在表单中选择或取消选择某个条目的快捷方法。复选框也可以集中在一起而产生一组选择,用户可以选择或取消选择组中的每一个选项。 通过把每个标签中的type属性都设置为checkbox,就可以生成单独的复选框。其中要包括必需的name和value属性。如果用户选择了某项,在提交表单时,它就要给出一个值。如果用户没有选择该项,该元素就不会给出任何值。,标签,表单中的复选框 Dog cat bird 9 .J .3 表单中的单选按钮 单选按钮(radio button)表单控件问复选框的行为非常相似,但在一组单选按钮中只能选择其中一个,通过把的type属性设置为radio, 就可以创建一个单选按钮。如同复选框控件一样。每个单选按钮都需要一个name和value属性。具有相同名称的单选按钮会在同一个组中。如果在checked属性中设置了该组中的某个元素,就意味着该按钮在开始时处于选中状态。如果没有选中这一组中的元素,浏览器会自动选定这一组中的第一个元素。 cat bird dog,标签,表单中的提交按钮 顾名思义,提交按钮(submit button,)会启动将表单数据从浏览器发送给服务器上的提交过程。一个表单中可以有多个提交按钮。也可以利用设置name和value属性,浏览器会用标签的value属性中设置的文本来标记按钮。如果给出了一个name属性,当浏览器将表单信息发送给服务器时,也会将提交按钮的value属性的值添加到参数列表中。 第二个示例也是HTML格式的按钮,它有一个可以将按钮标记为“Order Kumquats“的value属性,表单的参数列表中不会包括按钮的值。 最后一个示例是XHTML格式的,它设置了按钮的标记,并使其成为表单参数列表的一部分。当用户单击该按钮后,该提交按钮会将ship_style=“ShipOvernight“作为参数添加到表单参数列表中。,标签,表单中的重里按钮 表单按钮的重置(reset)允许用户重置表单中的所有元素,也就是清除或设置某些默认值。与其他按钮不同,重置按钮不会激活表单处理程序。相反,浏览器将完成所有重置表单元素的工作。服务器永远不会知道用户是否或何时单击了重置按钮。 表单中的定制图像按钮 表单元素的image类型会创建一个定制按钮,这个按钮是个可单击的图像。这是一个用特定图像生成的特殊按钮,当用户单击该按钮后,浏览器会将表单提交给服务器,同时在表单的参数列表中包括鼠标指针所在位置的“x,y”坐标, 表单中的单击按钮 使用标签可以生成一个供用户单击的按钮,但这个按钮不能提交或重置表单。可以用value属性来设置按钮上的标记;如果指定了name属性,则会把提供的值传递给表单处理程序。,标签,表单中的单击按钮 表单中的隐藏字段 最后一种表单控件是从视觉上无法看到的: 表单中的标签 功能:在表单中创建一个按钮元素 属性: accesskey class dir disabled lang name style tabindex title type value onBlur onClick onDblClick onFoCus onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp type属性:可以设为submit, reset或button 可以对表单控件的充分利用标签的丰富属性,包括align和alt属性。 如果你想创建更漂亮、混杂更多内容的按钮,则需要采用标签,标签,表单中的多行文本区标签 作为表单的一部分,标签可在用户浏览器的显示中创建一个多行文本输入区域。在此文本输入区内,用户几乎可以输人无限行的文字。提交表单之后,浏览器将把所有行中的文字都收集起来,而且行间用(回车/换行)分隔,并将它们作为表单元素的值发送给服务器,这个值使用的是必需的name属性中指定的名称。 功能:在文本输入区创建多行文本 属性: Accesskey class cols dir disabled Id lang name readonly rows style tabindex title Wrap onBlur onChange onClick onDblClick onFocus onKeyDown onKeyPrese onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onSelect Your Name Here 1234 My Street Anytown, State Zipcode ,标签,表单中的多选标签 功能:创建单选或多选菜单 属性: class dir disabled Id lang name multiple style tabindex title onBlur onChange onClick onDblClick onFocus onKeyDown onKeyPrese onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp 与其他表单标签一样,name属性在这里也是必需的,在将选项提交给服务器时,浏览器将使用该属性。 multiple属性:如果一次允许选多个选项的话,可在标签中加入multiple属性。 size属性:size(大小)属性决定了用户一次可以看到多少个选项。 Dog Cat Bird Fish ,标签,表单中的option标签 功能:使用option标签可以定义一个表单控件中的每个条目 属性: class dir disabled id label lang selected style title value onClick onDblClick onKeyDown onKeyPrese onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp selected属性 selected属性的HTML版本没有值。其XHTML版本则有值,selected=selected,如果没有任何选项被预先显式选定,那么单选的标签会预先选中第一选项。 value属性 value属性可以为每个选项设置一个值,当用户选中该选项时,浏览器会将其发送给服务器。如果还没有指定value属性,选项的值将被设置为标签中的内容。 label属性 通常情况下,在将元素显示给用户时,会用标签中的内容来生成元素的标记。但是如果提供了label属性的话,就要用它的值来用作标记。,标签,表单中的标签 功能:为表单元素创建标记 属性: accesskey class dir for lang style title onBlur onClick onDblClick onFocus onKeyDown onKeyPress onKeyUp onMouseDovsn onMouseMove onMouseOut onMouseOver onMouseUp 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控制相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为标签下的for属性命名一个目标表单ID,这样的是显式形式。 Social Security Number: Date of birth: 第一个标记是以显式形式将文本“Social Security Number:“和表单的社会安全号码的文本输入控制(“SocSecNum“)联系起来,它的for属性的值和控件的id一样,都是SSN。 第二个标记(“Date of Birth“)不需要for属性,它的相关控件也不需要id属性,它们是通过在标签中放入标签来隐式地连接起来的。,标签,表单中的分组标签 除单独的标记外,也可以将一群表单控件形成一个组,并用和标签来标记这个组。 属性: class dir id lang style title onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseUp 标签 使用legend标签可为表单中的一个字段集合生成图标符号。 属性 Accesskey align class dir id lang style title Onclick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseUp Personal information Name: Address: Phone: ,标签,标签 功能:定义一个表格 属性: align background bgcolor border Bordercolor bordercolordark bordercolorlight Cellpadding cellspacing class cols Dir frame height hspace Id lang nowrap Rules style summary title Valign vspaced width onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp bgcolor和backgrounnd属性 可以在标签中用bgcolor属性来为表格背景设置一个与文档背景不同的颜色。bgcolor属性的颜色值必须是一个RGB颜色或是一个标准的颜色名称。 一般浏览器对表格中的每一个单元格(包括标题)都赋予这一背景色。也可以在行或单元格中用bgcolor属性来设置一个不同的行和单元格的颜色。 background属性是一个IE支持的非标准的扩展形式,它提供了一幅图的URL,这幅图会填充为表格的背景。如果表格比图像小的话,那么图像会被修剪。,标签,标签 border属性 标签的可选border属性,告诉浏览器在表格、表格里的行和单元格的周 围画线,默认状况是没有边框。可以为border指定一个值,对XHTML用border=“border“可获得同样的默认结果。 cellspacing属性 cellspacing属性控制表格中相邻单元格的间距以及单元格外边沿和表格边沿之间的间距。浏览器通常在单元格之间和表格外边沿之间留下两个像素的间距。如果在标签中包括border属性,内部单元格之间的间距会增加两个像素(总共4个像素),这样会给内部边框的镶嵌边沿一些空间。边沿的单元格的外边沿的宽度会增加border属性所设定的数值。通过包括cellspacing属性,可以扩大或缩小内部单元格的边框。例如在表格标签中用border和cellspacing=0,可使内部单元格的边框尽可能最细。 cellpadding属性 cellpadding属性控制单元格的边沿和它的内容之间的距离,它的默认值是一个像素.可以在表格标签中用cellpadding=0来让表格中的单元格内容和它们相对的单元格边沿挨在一起。也可以将它的值设为大于1,来增加cellpadding的距离。 valign和nowrap属性 valign属性为整个表格的单元格中的数据设置了默认的垂直对齐方式。valign属性可以接受的属性是top, bottom,middle,baseline,标签,标签 功能:在表格中定义一行 属性: align background bgcolor bordercolor bordercolordark bordercolorlight char charoff class dir Id lang Nowrap style title valign onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp colspan属性 可以将一行中的一个表格

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论