《HTML语言与网页设计.ppt》由会员分享，可在线阅读，更多相关《HTML语言与网页设计.ppt（97页珍藏版）》请在三一办公上搜索。
1、2.HTML语言与网页设计,复习要点：HTML通用标记结构、HTML文档的基本结构、meta标记、超链接标记、字符实体、各种表单标记什么是CSS样式表定义语法、CSS选择符样式引用的基本方式样式的优先级html与xhtml的主要区别,2.HTML语言与网页设计,2.1 HTML语言简介HTML，即超文本标记语言，是英文HyperText Markup Language的缩写，是一种独立于操作系统的网页编写语言。HTML的最大特点就是用标记描述和表现信息的显示格式和内容。所谓标记就是采用一系列的指令符号来控制输出的效果，通用标记结构为：内容 元素名即预定义的标记（签）属性：用来指定标记的行为确定
2、元素内容的显示方式，如果标记有属性，则将跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出现的顺序。：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用小写（有的操作系统大小敏感，如unix）HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应用.htm或.html。,2.2 HTML文档的基本结构,HTML文档包含定义文档内容的文本和定义文档结构及外观的标记，基本结构如下：容器标记 头标记，用于定义文档标题及其它可能会用于控制文档显示或访问的参数，如、等 正文，包括要显示
3、的文本和文档的控制标记：容器结束标记,2.3 HTML的常用元素和标记,2.3.1 HTML结构标记（1）标记 功能：界定一个完整的HTML文档 属性：dir,lang,version 结束标记：包含:head_tag,body_tag,frames dir属性：内容的显示方式，用于本标记用于决定整个文档的显示方向，默认为”ltr”，用于其它标记则用于决定该标记内的内容的显示方向 lang属性：文档或文本的显示语言 version属性：说明支持的html标准的版本，在HTML4中已弃用，并用标记来代替.例：,如yahoo,（2）标记,功能：定义文档头区属性：dir,lang,profile结束
4、标记：包含:head_content，如base、object、link、style、script、meta使用范围：html_tag,（3）标记,功能：定义文档标题属性：dir,lang结束标记：包含:plain_text使用范围：head_content说明：此标记只能在head标记内出现.title的内容通常在浏览器的标题栏中显示.浏览器中收藏夹内书签的名称是title的内容.title的内容可以方便搜索引擎索引页面.从搜索引擎搜索到的内容的标题往往是网页title的内容.示例：当当,标记,功能：提供用户不可见信息，为其它应用程序和搜索引擎访问提供可用信息属性：meta属性主要分为两组n
5、ame属性与content属性 name属性用于是以名称/值形式的名称描述网页,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description,keywords和robots.http-equiv属性与content属性 http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头),它是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重要的是content-type charset 提供编码信息,refresh刷新与跳转页
6、面,no-cache 页面缓存,expires网页缓存过期时间.结束标记：无使用范围：head_content,标记应用：name属性与content属性组合,定义网页关键词 阿里巴巴定义网页简短描述 定义搜索引擎索引要求 robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。sciencedirect,标记应用：http-equiv属性与content属性组合,定义文件内容类型及编码信息 type的常见取值为application,audio,image,message,multipart,text
7、,video 示例：阿里巴巴Alibaba,设置网页缓存过期时间 用法：说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新加载。注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。,定义页面缓存 说明:为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过上面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.重定向:刷新与跳转页面,标记,功能:定义基URL用于页面的链接与引用 属性:href,target结束标记:单独出现使用范围:head区href属性:当前文档的完整URLtarget属性:指定目标窗口或框架 网易说明:当使用相对路径定义链接时，可以使
8、用base标记定义基URL解析所有文档中定义的相对路径的URL。,Our Products Have you seen our Bird Cages?,其它常用head区标记,:在文档中声明使用外部资源 阿里巴巴:声明样式,用来创建CSS属性，以控制整个文档主体内容的显示特性:在文档中使用脚本:定义浏览器输出非标准对象的方法,在网页中嵌入除图片外的多媒体,标记,功能：定义文档主体属性：控制文档外观的属性；将文档自身与其它可编程功能相联系的属性；标记和说明文档主体以供将来参考的属性结束标记：包含:body_content使用范围：html_tag,注释标记:,描述文档的各个部分要做什么解释为什么
9、要这样编写某段代码包含不想在文件中显示的信息标示文件的禁用部分,2.3.2 字符实体,用于标识特殊字符：不可见字符和特殊用途字符格式：&#,2.3.3 对象与多媒体标记,标记标记,object标记,object标记是成对出现的,以开始，结束 使用object标记可以在网页中嵌入各种多媒体或复杂外部应用即对象，例如Flash,Java Applets,MP3,QuickTime Movies等 object标记通常配合param 标记一同使用,后者用于对象初始化 在网页中嵌入图像，一般使用img标记 object可以完全代替标准不赞成使用的applet,embed,bgsound标记,Objec
10、t标记的属性 一般属性 archive-包含多个使用逗号(,)分割的Java类或外部资源，用于增强applet的功能，定义applet代码 border-边框 classid-关联一个应用程序，执行嵌入内容的应用程序在windows系统中的唯一id(不能改变此id，否则程序将出现异常)，例如 clsid:D27CDB6E-AE6D-11cf-96B8-444553540000-Flash codebase-为相对路径提供基URL，IE浏览器通常将此属性中的内容定义为运行嵌入内容所要加载的插件，例如 http:/-Flash codetype-嵌入内容的MIME类型，例如 application
11、/java-Java application/x-shockwave-flash-Flash declare-声明没有实例化的嵌入对象，此对象通常在加载后，或者当嵌入对象的某些参数将使用其它嵌入对象时可以使用,即实例化以后使用.此时对象需指定iddata-嵌入内容(实例对象)的URL，可以是基于codebase属性的相对路径 height-嵌入内容的高度，单位像素 hspace-嵌入内容水平方向的空白，应使用CSS margin代替 standby-文档加载时显示的文本信息 tabindex-使用Tab键的遍历顺序 usemap-定义图像点击区域 vspace-嵌入内容垂直方向的空白，应使用C
12、SS margin代替 width-嵌入内容的宽度，单位像素,param 标签:初始化对象,为object标签提供嵌入内容的运行时参数的name与value对 param标签是单独出现的param标签用于定义网页中嵌入内容的运行时参数 param标签应使用在object或applet标签内 属性 id-唯一标识符 name-名称，name与value属性组成一对type-嵌入内容的MIME类型 value-name的对应值 valuetype-指定参数类型 data-参数是一个简单的字符串，默认值 ref-参数是URL object-参数是另一个嵌入式对象声明的id,示例:嵌入MediaPla
13、yer播放器,示例:嵌入flash,广东商学院,标记,导入图像 img标签是单独出现的.属性:一般属性 alt-代表图像的替代文字 src 说明图像源(就是图像的保存地点)height-图像的高度 width-图像的宽度 usemap:定义图像点击区域语法:,2.3.4 超链接标记,显示的文本或图像内容 常用属性name=cdata:指定锚点(目标链接)的名称id=name:指定锚点的元素标识符class=classname:指定锚点的类名href=uri:指定超链接的目标地址rel=link-types:指定前向链接类型rev=link-types:指定后向链接类型target=frame-
14、target:指定目标窗口或框架:_blank,_self,_parent,_toptabindex=number:遍历链接焦点title=text:显示提示信息,(2)图像地图标记,功能:用于热区超链接语法:map基本属性:name,idarea基本属性:shape:指定热区形状 coords:指定热区坐标,其值个数取决于shape属性 href:指定热区链接目标地址 target:指定热区链接显示窗口或框架,示例:指定位置链接,链接到页面下部 链接到页面上部,.more document.,示例2:打开指定邮件链接,示例3:打开图像链接,示例4:热区链接,This is a navigat
15、ion bar.,2.3.5 版式控制标记：页面布局设计,列表表格框架,列表,1.无序列表:项目符号.列表项列表项 列表项.例:当当 新浪,2.有序列表:连续标号.列表项列表项 列表项.,如何设计列表样式？CSS list-style-type、list-style-image、list-style-position 属性,表格：数据表、控制网页布局,属性：align：页面对齐方式，left,right,centerwidth:整个表格的宽度，可以是像素值或百分比height：整个表格的高度，可以是像素值或百分比，通常可省略，浏览器会自动调整border:边框的宽度，以像素为单位，缺省值为0，
16、用于排版时通常取0值。cellpadding:单元格与边框之间的距离，以像素为单位，缺省值为0cellspacing:单元格之间的距离，以像素为单位，缺省值为2,、,:嵌在 内，表示表格体:嵌在 内，表示表格的一行属性：对齐方式，left,right,centeralign:行内单元格水平对齐方式，left,right,centervalign：行内单元格垂直对齐方式，top,middle,bottom:嵌在 内，表示在当前行内增加一个单元格属性：align:行内单元格水平对齐方式，left,right,centervalign：行内单元格垂直对齐方式，top,middle,bottomnow
17、rap:表示单元格内的文本段只有出现显式换行标记时才中断rowspan:指定该单元格所跨的行数colspan:指定该单元格所跨的列数:用法同标记，惟一区别在于这个元素是用来标记“头单元格”的，所谓头单元格是指表格中位于第一行或第一列用来指示其余各行或各列内容的单元格,表格应用例:佳能报价单,佳能 Canon型号像素/变焦/屏幕/存储介质本周报价IXUS 60600万3X2.5SD2150IXUS 65600万3X3SD2350IXUS I ZOOM500万2.4X2.5SD1570EOS 30D(套)800万EFS17-852.5CF13400,表作为版式工具示例,Listing 3-6 Pa
18、ge Using Tables Listings Listing 3-1 Listing 3-2 Listing 3-3 Listing 3-4 This page demonstrates using a table for page layout.It is organized with local links on the left,external links on the right,content in the center,and a header at the top.Organizations Microsoft Microsoft Press W3C Useful Site
19、s SBN Workshop MSDN WebR WebR,表作为版式工具示例,表作为版式工具示例,卓越亚马逊yahoo,框架,它是一个标准的HTML文件，只包括如何分割网页和文件在每个区域如何显示的信息Listing 3-8/定义框架页面/定义一个框架/对不支持框架的设备进行提示,或相关操作 浏览器不支持框架!,框架示例,嵌套框架：多级版式,Listing 3-9,嵌套框架示例,跨框架定位,增加导航框架（包括其它框架的链接，目标框架的定位属性）Listing 3-10 导航栏（框架）：Go to Frame 1Go to Frame 2Go to Frame 3,导航框架示例,2.3.6 表
20、单：互动,表单是网页上的一个特定区域。这个区域是由一对元素定义的。其间是各种接受用户输入的控件 HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。什么时候用到表单？搜索、注册、登陆、论坛、交易、调查,2.3.6.1表单的基本语法结构,.action属性：用来定义表单处理程序（ASP、JSP或CGI程序）的位置(相对地址或绝对地址)。method属性定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。示例1，示例2，3,2.3.6.2 简单文本
21、输入标记,type=*决定控件类型，分为输入型,选择型,点击型。每个控件都应该包含type和name属性，并且大多数都包括value属性。1)按钮：激活某个操作普通按钮提交按钮重置按钮,2)复选框(Checkbox)：选择多个项目在一个表单里的所有多选框可以有一个或多个被选中。,3)单选按钮(RadioButton)：只能选择一项一个表单里的所有变量名相同的单选框只能够有一个被选中。各个选项的name必须一样,4)文本输入框：输入单行文本?文本框的名字*text或password*默认值或为空*长度?最大输入字符数,5)图象域：图像按钮6)文件域：上传文件7)隐藏域 示例,2.3.6.3 文本
22、域:多行多列的文本输入框,.*文本域的名字*行数或列数*off,soft,hard：不换行、自动换行、强制换行,2.3.6.4 下拉列表：从列表中选择一个或多个选项,基本语法 说明 说明2 multiple：有该项说明可以选择多项示例,表单示例：代码,Listing 4-2/由网站http:/的jsp目录下的prc.jsp程序处理。/控件类型This text is next to check box 1.This text is next to check box 2./name值必须一致This text is next to the first radio button.This tex
23、t is next to the second radio button./自动换行的文本域 This text is inside TEXTAREA 1.Note how lines of code are automatically wrapped and how line breaks in the code cause breaks.,表单示例：图示,文本输入框：普通文本,文本输入框：密码,复选框,单选按钮,普通按钮,文件域,重置按钮,提交按钮,图像域,文本域示例：代码,Listing 4-3 This text is inside TEXTAREA 1.Note how lines
24、of code are automatically wrapped and how line breaks in the code cause breaks.This text is inside TEXTAREA 2.Note how lines of code are not automatically wrapped and how line breaks in the code cause breaks.,文本域示例：图示,自动换行的文本域,不自动换行的文本域,下拉列表示例：代码,Listing 4-4Select one item:Text of option 1 Text of o
25、ption 2 Text of option 3 Text of option 4 Text of option 5Select one item:Text of option 1 Text of option 2 Text of option 3 Text of option 4 Text of option 5Select multiple items:Text of option 1 Text of option 2 Text of option 3 Text of option 4 Text of option 5,下拉列表示例：图示,显示选中选项，由用户打开列表,定位反显选中选项且自
26、动打开列表，用滚动条上下移动,定位反显选中选项且自动打开列表，用滚动条上下移动，且可选择多个目标选项：连续选择：按shift键并连续选择目标选项不连续选择：按Ctrl键单击目标选项,2.4 CSS技术：数据与表现分离,CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。CSS是一种分离web文档内容与格式的技术，可以控制web文档的外观和版式，使用CSS可以改变：文本的大小、格式、颜色、字间距、边框、元素周围的补白，乃至网页上对象的精确位置。共享样式设定个性化的标准网页：CSS+DI
27、V=web标准？,两个简单例子,使用HTML方式 一级标题.其他正文.一级标题,H1text-align:center;font-family:楷体_GB2312使用CSS方式 一级标题.其他正文.一级标题,2.4.1 样式表定义语法,样式表：也称样式定义，或样式规则，可包含于文档中，也可保存于.css文件中。基本结构为：Selectorproperty1:value1;property2:value2;property3:value3;Selector定义样式作用的对象，称为选择器，花括号中为样式声明块，其中property为CSS属性，value为属性对应的值，各样式声明之间用分号隔开。示
28、例,常用Selector类型,HTML标记符用户定义的类用户定义的ID伪类,HTML Selector,不带尖括号的标记名作选择符HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如：H1text-align:center;color:red 使所有用H1标记符修饰的内容都居中和用红色显示body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,divmargin:0;padding:0;border:0;ul,ollist-style-type:none;,选择符应用示例基本清单,New Port
29、 Richey*font-family:Verdana The New Port Richey Dog Show Show Date:7/31/2001 New Port Richey,FL Best In Show:CH Sarahs Razzle Dazzle(Yorkshire Terrier)Complete results,Herding Group:German Shepherd Dog CH Sabre Dawn Toy Group:Yorkshire Terrier CH Sarahs Razzle Dazzle Sporting Group:Golden Retriever
30、CH Chases Golden Chance Non-Sporting Group:Tibetan Terrier CH Winston of Sunny Brook Lane,选择符应用示例基本清单代码运行页面,标记选择符应用示例清单,.*font-family:Verdana td font-size:10pt.,标记选择符应用示例运行结果,Selector:用户定义类,.classnameproperty:value 表示任何class属性为classname的标记符都采用所定义的样式。类选择符的语法是在类名前面加一个点号（.）类是一种增强页面可管理性的出色方法，因为只需定义和修改样式
31、表，就可以对站点的外观进行全面定义和修改。,类选择符应用示例清单,.font-family:Verdana td font-size:10pt.category font-weight:bold;td.category font-style:italic.,类选择符应用示例运行结果,Selector:用户定义的ID,#idnameproperty:value 表示任何ID属性为idname的标记符都采用所定义的样式。ID选择符的语法是在类名前面加一个#号（#）用户定义ID与class的作用完全相同，但ID 在一个文档中应该是惟一的。,ID选择符应用示例,.font-family:Verdana
32、 td font-size:10pt.category font-weight:bold;td.category font-style:italic#bestinshow color:red.,ID选择符应用示例运行结果,Selector:伪类,伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class property:value（选择符:伪类 属性:值）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。常用的伪类:link 未访问过的超链接:visi
33、ted 访问过的超链接:hover 悬停状态的超链接:active 活动超链接,伪类选择符应用示例清单,.*font-family:Verdana td font-size:10pt.category font-weight:bold;td.category font-style:italic#bestinshow color:red:hover background-color:red.,伪类选择符应用示例运行结果,Selector:后代、子、同胞,CSS 不但允许根据元素名应用规则，还允许根据元素在整个文档中的位置应用规则。例如，一个规则可以只选择段落标记内的链接。继承：嵌套的子对象（嵌套
34、元素）继承外部元素或父元素的格式，除非子对象另有格式定义后代：空格连接子：大于号连接同胞：加号连接,层次结构关系选择符应用示例清单,.font-family:Verdana td font-size:10pt.category font-weight:bold;td.category font-style:italic#bestinshow color:red p a text-decoration:none h4+h4 font-style:italic:hover background-color:red.,后代,同胞,2.4.2 样式引用,嵌入式样式：内联引用样式表 全局样式表：内部引用
35、 链接的格式页：外部引用,嵌入式样式,使用style属性将样式应用于单个元素上，实现对特定元素的精确控制，优先于样式表控制，可以应用于任何标记，并且只影响所应用的标记style=”单个或以分号分隔的若干样式声明（声明块）”样式声明:属性：属性值Listing 11-2This text is in a SPAN.This text is not in a SPAN.,全局样式表,通过将样式表嵌入标记内的标记对内实现，控制文档中相应标记的样式标记的格式样式表,Listing 11-7 H1 font-size:16pt;font-weight:bold;color:red H2 font-sty
36、le:italic;font-size:24pt;color:green SPAN font-weight:bold;font-style:italic.adivheight:52px;width:145px:hoverbackground-color:red/本文档悬停状态的超接链的背景色为红色This text is in a SPAN.This text is in an H1.This text is in an H2./本块的高度为52px,宽度为145pxHerding Group:Toy Group:This is modified H2 text./本块的高度为52px，宽度为
37、145px,全局样式表示例,链接的样式表,以.css为扩展名的包含格式定义的文本文件，可用来控制若干个网页或整web站点的样式。使用方法为在文档的区使用标记引用：H1 font-size:16pt;font-weight:bold;color:red（styles.css）H2 font-style:italic;font-size:24pt;color:greenSPAN font-weight:bold;font-style:italicListing 11-8This text is in a SPAN.This text is in an H1.This text is in an H
38、2.This is modified H2 text.import命令:格式页包含命令，即在格式页中加载其它格式页,链接的样式表示例,2.4.3 样式的优先级,样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。,2.4.4 CSS+DIV：模块化、结构化设计,模块化设计要求相对封闭独立性、可重复性、可修改性、统一性等 结构化设计的意思是你需要分析网站的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。仔细分析和规划你的页面结构，你可能得到类似这样的几块：标志和站
39、点名称主页面内容站点导航(主菜单)子菜单搜索框功能区(例如购物车、收银台)页脚(版权和有关法律声明),我们通常采用DIV元素来将这些结构定义出来，例如：divid=“header”/divdivid=“content”/divdivid=“globalnav”/divdivid=“subnav”/divdivid=“search”/divdivid=“shop”/divdivid=“footer”/div起类似作用的还有span,通常与类选择符、ID选择符一起使用例：新浪,新浪DIV示例,新浪样式表部分规则:导航栏(主莱单),.logonav BORDER-RIGHT:#e0e0e0 1px
40、solid;BORDER-TOP:#e0e0e0 1px;BACKGROUND:url(http:/#f9f9f9 repeat-x 0px-400px;MARGIN-BOTTOM:8px;OVERFLOW:hidden;BORDER-LEFT:#e0e0e0 1px solid;BORDER-BOTTOM:#e0e0e0 1px solid;POSITION:relative;HEIGHT:85px.logo LEFT:10px;WIDTH:145px;POSITION:absolute;TOP:0px;HEIGHT:52px.logo H1 LEFT:13px;OVERFLOW:hidde
41、n;WIDTH:117px;POSITION:absolute;TOP:10px;HEIGHT:42px.weather Z-INDEX:98;LEFT:6px;OVERFLOW:hidden;POSITION:absolute;TOP:57px;HEIGHT:20px.nav RIGHT:0px;OVERFLOW:hidden;WIDTH:790px;POSITION:absolute;TOP:0px;HEIGHT:85px.nav_2 FLOAT:left;OVERFLOW:hidden;PADDING-TOP:13px;_display:inline-block,.nav_3 FLOAT
42、:left;OVERFLOW:hidden;PADDING-TOP:13px;_display:inline-block.nav_2 DISPLAY:inline;BACKGROUND:url(http:/no-repeat 106px-287px;MARGIN-LEFT:3px;WIDTH:107px.nav_3 WIDTH:125px.nav UL CLEAR:both;HEIGHT:23px.nav LI PADDING-RIGHT:6px;PADDING-LEFT:6px;BACKGROUND:url(http:/no-repeat 0px-250px;FLOAT:left;PADDI
43、NG-BOTTOM:0px;MARGIN-LEFT:-1px;LINE-HEIGHT:14px;PADDING-TOP:0px;TEXT-ALIGN:center.nav A COLOR:#000;TEXT-DECORATION:none.nav A:visited COLOR:#000;TEXT-DECORATION:none.nav A:hover COLOR:#c00;TEXT-DECORATION:none.nav A:active COLOR:#c00;TEXT-DECORATION:none,新浪导航莱单DIV,2.4.5 CSS属性,CSS盒模式CSS视觉格式模型CSS视觉效果C
44、SS列表CSS背景CSS字体CSS文本CSS颜色CSS听觉样式CSS表格CSS翻页(打印)UI(用户接口)CSS内容CSS自动计数CSS引号,CSS list-style-type属性值,disc:点 circle:圆圈 square:正方形 decimal:数字 decimal-leading-zero:以一个0开头的数字e.g.,01,02,03,.,98,99 lower-roman:小写罗马文字i,ii,iii,iv,v,etc.upper-roman:大写罗马文字I,II,III,IV,V,etc.lower-greek:小写希腊文字,.lower-latin:小写拉丁文a,b,c,
45、.z upper-latin:大写拉丁文A,B,C,.Z armenian:亚美尼亚数字 georgian:乔治亚数字an,ban,gan,.,he,tan,in,in-an,.lower-alpha:小写拉丁文a,b,c,.z upper-alpha:大写拉丁文A,B,C,.Z none:无(取消所有的list样式)inherit:继承,type 属性取值:,text-文字输入域(输入型)password-也是文字输入域,但是输入的文字以密码符号*显示(输入型)file-可以输入一个文件路径(输入型)checkbox-复选框.可以选择零个或多个(选择型)radio-单选框.只可以选择一个而且
46、必须选择一个(选择型)hidden-代表隐藏域,可以传送一些隐藏的信息到服务器 button-按钮(点击型)image-使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)submit-提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)reset-重置按钮,可以把表单中的信息清空(点击型),2.5 html与xhtml,2.5.1什么是xhtml？XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言。XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。XHTML是用来代替HTML的,是2000年w3c公布发行的。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。XHTML是基于XML的应用.。XHTML更简洁更严紧。,2.5.2 html与xhtml的主要区别,xhtml元素要正确嵌套；xhtml元素大小写敏感，标记名应小写；xhtml元素要关闭，独立标记也要用/结束。xhtml文档首部应有说明文档类型,
