Java第一讲(HTML语法及应用).ppt

《Java第一讲(HTML语法及应用).ppt》由会员分享，可在线阅读，更多相关《Java第一讲(HTML语法及应用).ppt（92页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JAVAJAVA第一讲第一讲HTMLHTML本课程纲要1.HTML 基础语法2.文本标记3.图像和链接4.列表5.页面表格6.表单7.其他空间（表单）1.HTML 基础语法1.1.HTML 概述1.1.1.Web 的工作原理Web是基于Internet的一个多媒体信息服务系统，它基于B/S（Browser/Server）模式，整个系统由Web服务器、浏览器（Browser）和通信协议组成。Web服务器上存储文档文件，而浏览器通过特定的通信协议（HTTP协议）与服务器实现交互，从而实现浏览文档 的目的。在Web服务器上，主要以网页文档的形式来存储以及发布多媒体信息。为了使各种不同类型的 Web

2、服务器都能正确的识别和执行网页文档，这些文件要遵从一个严格的标准，这个标准就是超文本标识语言(HTML：HyperText Markup Language)。Web中的信息（以超文本的形式）是通过一种一问一答的方式进行交互的，即网络浏览器作为客户端提出访问某个网页的请求，Web服务器作为服务端做出应答并把这个网页发送给浏览器从一次点击（“click”）到浏览器获得一张网页的过程如下：1.浏览器用URL查询DNS，DNS返回IP地址；2.浏览器用这个IP地址建立与服务器的连接；3.浏览器通过该连接向服务器发送一个HTTP请求；4.基于该请求的内容，服务器找到相应的文件，并根据文件的扩展名，形成一

3、个MIME类型的HTTP回答消息，发送给浏览器，关闭本次连接；根据消息头，浏览器按某种方式显示该文件内容或者执行其他命令。web工作原理：1.浏览器在输入框中写入网址后按回车键做了什么事？发送请求（Request）给Server2.服务端接收请求-在服务端上查找资源-回发响应给浏览器3.浏览器接收到响应后-解析网页(编译-从头到尾读一行执行一行，后边有什么不管)服务器-网络中保存资源的主机服务器软件-接收请求，查找资源回发响应的软件一个真正访问的服务器=服务器硬件+服务器软件1.1.2.Web 的相关技术传统的Web被认为是“静态”的，因为，用户浏览的页面完全由设计者决定，用户只能浏览而没有交

4、互。因此，我们需要“动态”Web。动态Web是一些技术的总称，最初用来代表页面常见的动态效果，后来，则需要能够执行服务器端程序以及和数据库交互的技术。因此，动态Web通常分为两种：1.能够动态地安排Web页面元素的显示方式；2.具有动态交互性的Web页面。能够动态地安排Web页面元素的显示方式，通常使用客户端技术实现；而实现页的动态交互性，则通常使用服务器端技术实现。客户端技术：运行于客户端，由浏览器来解释执行(关注用户体验)如：HTML，CSS,JavaScript服务器端技术：运行于服务端，可以和数据库进行交互目前，主要的服务器端技术有ASP.NET、PHP和JSP。1.1.3.什么是 H

5、TMLHTML（HyperText Markup Language，超文本标记语言）是编写Web页面的语言。HTML语言使用带有尖括号的“标记”将网页中的内容逐一标识出来。它是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段，如：JavaScript等。因为网页文件本身是一种文本文件，通过在文本文件中添加标记符，以告诉浏览器如何显示其中的内容（如：文档的结构、文字的位置，画面的安排，图片的显示等）。浏览器得到网页文件后，则按顺序阅读网页文件，并一一解释那些标记中的内容，从而展现丰富的页面。比如：这就是一段纯文本，但是包含特殊的标记 ，这个标记只有交给专门的浏览器软件解释，才能显示出特定的页

6、面效果（会显示一个宽度为300的图片）。由此可见，网页的本质就是纯文本的 HTML。但是仅仅使用HTML只能创造出比较普通的页面，通过结合使用其他的Web技术（如：CSS、脚本语言、服务器端技术、组件等），可以创造出功能强大的网页。其中，CSS 用于为页面添加各种样式效果，而脚本语言可以为页面添加常见的页面交互，服务器端技术用于实现和服务器端数据的交互。因而，HTML、CSS 和脚本语言是Web编程的基础。1.1.4.Web 浏览器因为Web文档是包含特定标记的文本，所以需要特定的软件来翻译解释这些标记，以显示为页面，这种特定的Web客户软件，我们通常称为浏览器。它主要用于连接Web服务器、解

7、释执行由HTML 编写的文档，并将执行结果显示在用户的屏幕上。一个软件能够作为浏览器软件使用，必须包含如下主要功能：代理访问者提交请求 作为HTML解释器和内嵌脚本程序执行器 用图形化的方式显示HTML文档 目前比较常见的Web浏览器产品有：Mozilla的Firefox、Microsoft公司的IE（Internet Explorer）、谷歌公司（Google）的 Chrome、苹果公司（Apple）的Safari、Netscape通信公司的Navigator、SUN公司的Hot Java等。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

8、1.2.HTML 基础语法1.2.1.标记HTML用于描述功能的符号称为“标记”，比如、等。标记在使用时必须使用尖括号括起来，有些标记还必须成对出现。如果一段文本并没有使用任何标记括起来，则在浏览器显示时会使用默认的样式设置。但是如果将这些文本用某些标记括起来，再使用浏览器显示，则会根据标记的使用显示出特定的效果。例如，如果书写如下代码：Sometexthere.Sometexthere.上述代码在浏览器种的显示效果如图所示。由此可见，两行文本之所以呈现出不同的显示效果，原因就在于标记的使用。因此，学习HTML其实就是在学习各种标记的使用。HTML的标记有两种表达方式，如下所示：封闭类型标记（

9、双标记）。由开始标记和结束标记组成，必须成对使用，开始和结束标记中间可以包含内容。开始标记告诉浏览器从此处开始执行某标记所特有的功能，而结束标记表示功能的结束，在标记前加一个正斜杠（/）表示。语法为：内容非封闭类型标记（单标记或者空标记）：只需要使用开始标记即可，语法为：绝大多数的标记都是封闭类型的标记，而最常用的单标记是，它表示换行。对于非封闭类型的标记，有两种书写方式：或者在旧的规范中，可以使用或者；而在新的规范中，要求必须使用。因此，为了保证兼容性，建议大家使用新规范，即使用，而不是。1.2.2.元素和属性每一对尖括号包围的部分，我们称为元素。比如由包围的部分就叫做body元素。元素就像

10、是小标签，用于标识网页文档的不同部分。所以我们经常在分析一个网页文档时会说：这是一个一号标题（h1）、这是一个段落（P）；在修改页面的时候会说：添加一个段落元素，或者P元素。元素可以包含文本内容和其他元素，也可以是空的，比如前面所述的空标记。元素可以设置书写，语法为：内容或者属性位于开始标记里，属性与属性之间、属性与标记之间用空格隔开。属性和属性的值之间用等号连接。属性必须包含在引号中。属性的定义没有先后顺序的严格区分，如果不定义属性，则使用默认设置；如果属性重复定义，则使用最后一次定义的值。一个元素可以包含另一个元素，我们称为元素嵌套，也称为父元素和子元素。外层的元素称为父元素，被包含的元素

11、称为子元素。图3中，body元素是p元素的父元素，而p元素是body元素的子元素。需要注意的是，如果元素中包含其他元素，则每个元素必须正确的嵌套，如下所示：abc正确abc错误1.2.3.通用属性每个元素都有自己所特有的属性，但是有些属性是绝大多数标签都支持的属性，我们称为标准属性或者通用属性。主要有：id属性：定义元素的唯一标识；title属性：定义提示标题信息；class属性：定义样式类；style属性：定义内联样式。1.2.4.注释可以在HTML文档中添加注释，这些注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示。为代码添加适当的注释是一种良好的编码习惯，特别是在复杂的文档中，适

12、当的注释可以向查看代码的人指示文档的各个部分以及其他注意事项，并帮助理解和维护代码。在(X)HTML文档中添加注释的语法如下：“”之间的任何内容都不会显示在浏览器中，但是可以在文档的源代码中看到。可以将注释放置在任何标签之间，甚至可以注释整段代码，但是注释不可以嵌套在其他注释中。例如：Welcometomyfloristwebsite!-ptext：被注释，则不会显示-注释尤其适合描述文档的整体结构，以及使用某个标记的原因和希望实现的效果。1.3.文档结构1.3.1.HTML 的文档结构编写网页文档时，首先需要在文档的开始添加版本声明。除了版本信息，剩下的就是整个页面的内容，而整个页面需要包含

13、在开始标记和结束标记之间。在元素中，包含两个主要的部分，文件头部分（元素）和主体部分（元素）。整体结构如图所示：1.3.2.文档类型声明HTML语言已经存在太久了，目前必然会有一些不同版本的文档存在。为了能够让浏览器清楚你的文档的版本、类型和风格，需要在文档的起始用DOCTYPE声明指定当前文档的版本和风格。目前有三种版本：过渡型、严格型和框架型。严格型的特点是它禁止使用那些废弃的标记，即严格遵守XHTML1.0的标准，其版本声明为：在尝试将结构和格式化分开的过程中，W3C标出了一些最终将从规范中删除的元素，而过渡型和框架型都认为废弃标记是有效的。该版本仍允许开发人员使用HTML4中不赞成使用

14、的标记。过渡版声明为：事实上，目前的很多页面都是使用过渡型。1.3.3.元素元素是所有其他头元素的容器，它紧跟在起始标签之后。在头部分中，我们可以为页面定义与当前页面相关的全局信息，比如定义页面的标题，为搜索引擎提供关于页面的信息，添加样式表或者编写脚本等。每个元素应当包含一个元素以指定文档的标题，还可以不限顺序的包含一些常用的元素，比如、等。1.3.4.文档头部内容-创建每个页面时，应该给页面指定一个标题。标题内容位于元素中，代码如下：我的第一个HTML页面在大多数浏览器上，页面标题出现在窗口的标题栏上。注意：标题不能包含格式化信息、图像或者链接，即其中只能包含文本而不能包含其他任何元素。1

15、.3.5.文档头部内容-元素可提供有关页面的元信息，比如页面编码、页面刷新频率、针对搜索引擎的描述和关键词等。它位于文档的头部，不包含任何内容。为空标记，使用属性来定义与文档相关联的名称/值对。在页面的头部分中，使用元素声明字符编码，代码如下：上述代码用于设置页面的编码格式，这样，在具有不同的默认编码的系统上，浏览器就可以根据编码的声明正确的选择，从而更容易正确查看页面中的字符。还可以使用元素定义页面的刷新频率，代码：上述代码用于设置页面每隔10秒则自动刷新，常用于浏览论坛等需要定时刷新页面的网页。2.文本标记2.1.文本标记概述2.1.1.文本标记的作用文本是网页上的基本成分，直接书写的文本

16、会用浏览器默认的样式显示出来，而被包含在标记中的文本则会被显示为标记所拥有的样式。需要注意的是，因为每种浏览器以其特定的方式显示每种元素，因此，不同的浏览器显示的同种标记的字体大小可能不同，同一块文本占用的空间也可能不同，甚至显示的字型都可能不同。至于如何控制文本的外观样式我们会在后面的CSS章节介绍。2.1.2.文本与特殊字符您可能会认为，如果在两个单词中间放置几个连续的空格，或者用Tab键缩进多个空白制表符，则在屏幕上这些空格将出现在这两个单词中间，但是实际情况并非如此。HTML会把多个的空格或制表符压缩成单个空格，即只显示一个空格，这种情况称为空格折叠。例如，如果书写如下代码：Somet

17、exthere.Sometexthere.Withsunshine,water,andcarefultending,roseswillbloomseveraltimesinaseason.上述代码在浏览器中的显示效果如图所示。由图可以看出，浏览器会将多个空格和多个回车处理为一个空格。同时，当浏览器显示文本时，如果到达某行的末尾，则会自动换行以继续显示文本。如果需要在HTML文档中使用一些具有特殊意义的字符（如尖括号）或者那些无法用键盘直接输入的字符（如版权符号），则需要使用一组不同的字符来表示，这组字符我们称之为字符实体，或者转义字符。比如，我们可以定义如下代码：The<p>ele

18、ment.©2011bytarena.上述代码在浏览器中的显示效果如图所示（字符实体被替换为对应的符号）。2.2.使用文本标记2.2.1.标题元素 我们经常会需要为文档添加某些形式的标题，比如，某段描述文本需要大字标题来创建类似于文档目录的结构。HTML允许在网页中建立最多6级标题，分别使用元素、和实现，即常说的标记。这里的n就是1-6的数字，使用哪个数字取决于要创建的标题级别。虽然浏览器可能会以不同的方式显示这些标题，但是标题是最大的标题，而为最小的标题。元素也有align属性，同样不建议使用这个废弃的属性，而建议使用CSS中的样式进行设置。2.2.2.段落元素 因为 HTML会忽

19、略文本编辑器中输入的回车和其他额外的空格，因此，如果想在页面上开始一个新段落，应该使用 元素。元素提供了结构化文本的一种方式，包含在起始标记 和结束标记 之间的文本会用单独的段落显示，即与前后的文本都换行分开，且会添加一段额外的垂直空白距离，作为段落间距。比如，查看如下代码：Some text here.The first paragraph.The second paragraph.Some text here.元素有align属性，用于对齐段落中的文本，比如：Thefirstparagraph.Thesecondparagraph.上述代码在浏览器中的显示效果如图所示。align属性的值可

20、以取值为left、center和right，分别用于表示段落中的文本居左、居中和居右排列。但是，align属性已经逐渐被淘汰，因此，如果要设置文本排列，依然建议使用CSS中的样式进行控制。2.2.3.换行元素 浏览器会根据元素块或者窗口的宽度自动的对文本实现换行，如果我们需要在源文档编辑时创建换行，则可以使用元素在任何地方创建手工换行。当使用元素时，它后面跟随的内容将从下一行开始显示。元素是一种空元素，不需要内容，代码如：对于那些应该紧挨着出现的文本行（行与行之间不需要很大的距离），则非常适合使用标记。比如，查看如下代码：Tostartanewline,wecanusethe<br/&g

21、t;element.So,thenextwordwillappearonanewline.上述代码在浏览器中的显示效果如图所示。我们可以使用多个元素在行或者段落之间创建额外的空间。2.2.4.分区元素 和我们经常可能需要对页面的元素进行分区或者分组。比如，如果把页面分隔为多个区域，就可以对这些区域单独的进行样式设置，这非常有利于页面的布局。或者，我们可以将一些文本分在一个组里，然后对这个组进行样式的定义。分组元素有两种：和。元素可以把文档分割为独立的、不同的部分。比如，查看如下代码：Sometexthere.ThisisaheaderThisisaparagraph.Sometexthere.

22、上述代码在浏览器中的显示效果如图所示（元素前后的内容会换行，且其中的文本会显示为绿色）。另一方面，我们也可以使用元素来分组元素。元素自身对文档在浏览器中的显示外观没有任何影响，只有对它应用样式时，它才会产生视觉上的变化。因此，如果句子或者段落的某个部分组要分组，则可以使用元素。比如，查看如下代码：Thisisaparagraph.Thefollowingwordswouldbegreen.上述代码在浏览器中的显示效果如图所示（元素中的文本会显示为绿色）。注意：如果不对元素应用样式，那么元素中的文本与其他文本不会有任何视觉上的差异。元素用于为块元素分组，常用于实现页面布局，而元素用于为行内元素分

23、组，以实现一行内不同的样式设置。2.2.5.行内元素与块级元素在上一节讲述分区元素时，我们会发现，html元素分为两种：块级元素（比如）和行内元素（比如）。在屏幕上显示时，块级元素的前面和后面都会自动换行，如同存在换行符一样，也就是说，默认情况下，块级元素会独占一行。例如，、和都是块级元素。在显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。而内联元素往往出现在句子里，在浏览器中显示时不会换行。例如，、等。因此，如果元素是块级的，则总是在新行上显示，好比是书中的一个新段落；而元素如果是内联的，那么只能在当前行中显示，就像是段落中的一个单词。块级元素是网页上比较大的结构

24、，因此常包含其他块级元素、内联元素和文本；而内联元素一般只能包含其他内联元素和文本。3.图像和链接3.1.URL3.1.1.URLURL的全称为Uniform Resource Locator，即“统一资源定位器”，用来标识网络中的任何资源（文本、图片、音视频文件，段落，或其他页面文件）。URL的组成部分有：模式、主机地址、文件路径和其他部分。比如，这是一个标准的URL：，其中，http是模式（用:/分隔）；是主机名；/TR/CSS2/syndata.html是要链接的文件路径。3.1.2.相对路径和绝对路径URL用于定位Internet中的资源，每个资源都有一个唯一的URL，代表能够找到该文

25、件的特定地址。URL分为相对URL和绝对URL。绝对URL又称为完整URL，即包含URL的全部组成部分；相对URL是一种简写形式，用于链接同一个站点中不同位置中的文件。比如，假设我们正在查看如下页面：然后我们希望查看某个分部的链接，比如teacher或者beijing。如果不使用完整的URL，我们可以这么写URL：teacher/teacher.aspbeijing/students.asp而如果要使用完整的绝对URL，则需要这么写：因此，在同一个Web站点中，我们往往会使用相对的URL。但是，即使使用相对的URL，浏览器也会将它转换为完整的绝对地址，以保证路径的正确。3.2.图像3.2.1.

26、图像元素 通常使用元素将图像添加到站点中，该元素必须附带src属性以指明图像的来源。元素是一种空元素，不需要内容，也不需要结束标签。比如，查看如下代码：Sometexthere.上述代码在浏览器中的显示效果如图所示。由此可见，src属性用于指定加载图像的URL，同样，可以是相对URL或者绝对URL。我们往往会在网站中创建单独的图像目录，这样可以方便管理我们的文件。元素除了src属性，还可以附带一些其他属性。由图12可以看出，默认情况下，图像的显示大小为图像原本的默认尺寸，这往往会出现令人难以接受的效果。因此，我们使用height和width属性来分别指定图像的高度和宽度。height和widt

27、h属性的值可以设置为以像素为单位的数值，或者设置为百分数（相对于浏览器窗口，而不是原始图像大小）。注意，如果同时设置height和width属性的值，必须考虑图像原有高度和宽度的比例，避免图像变形。因此，如果确实希望以和原始尺寸不同的大小来显示图像，则可以只设置height或者width属性中的一个，而忽略另一个。这样，浏览器按照原始图像的大小比例进行自动设置，以维护正确的高宽比（过度缩放可能会导致图像不清晰）。3.3.链接3.3.1.链接元素 可以使用元素创建一个超级链接。一个链接由三个部分组成：目的地、标签和显示目标。元素的语法如下：文本标签就是位于起始标记和结束标记之间的文本，是访问者可

28、以看到并且点击的部分，可以是文本或者图像。href属性的值代表目的地，用来指定访问者点击链接时会发生什么，比如显示图像、打开页面、发送电子邮件或者下载文件等。target属性的值代表显示目标，它通常被省略，表示在哪里显示访问的资源，比如新窗口或者框架窗口。默认情况下，链接会在包含这个链接的同一个窗口中打开，如果设置target属性的值为“_blank”，则会在全新的窗口中打开链接。查看如下代码：ListofLinksPageOnePageThree此代码在浏览器中的显示效果如图所示。在此页面中，当用户选择第一个链接时，将在当前窗口中打开目标页面；选择第二个链接时，则会在新窗口中打开目标页面。除

29、了可以使用 元素链接到网页外，还可以使用 元素链接到Email地址并自动打开用户的默认email编辑器，以便向相应的地址发送email。比如，查看如下代码：Mail to us该代码在浏览器中依然显示为超链接，但是当用户点击文本“Mail to us”时，会打开默认的email编辑器，如Outlook，并试图发送邮件。3.3.2.锚点如果Web页面很长，页面就无法完全显示在浏览器窗口中，用户必须滚动才能查找页面的相关部分，这时，我们可能需要使用链接以便能够方便地跳转到该页面的特定部分。锚点就是为了解决这类问题而存在的。锚点的作用就是可以在页面的不同特定位置添加源标记，以便使用链接可以链接到这些

30、特定的位置。可以使用 元素创建目的地锚点，它作为锚点时，必须附带一个name或者id属性作为锚点的唯一标识。注意：如果创建可以通过早期的浏览器查看的页面，最好使用name属性，因为，id属性是直到HTML4中才被使用。创建完目的地锚点后，我们就可以依然使用 元素来添加链接以跳转到目的地锚点，只是 元素的href属性的值需要设置为目的地锚点的name或者id属性的值，且值前面需要添加#。比如，查看如下代码：The page title Return to top我们在页面的一开始也就是页面的顶部定义了一个名为“top”的锚点，并在此代码中添加了多个换行符，目的是为了增加页面的长度，以便出现滚动条

31、。然后，在页面的最后添加了一个链接，并链接到前面所定义的锚点。此代码在浏览器中的显示效果如图所示。点击链接“Returntotop”后，将回到页面的顶部。使用锚点，我们还可以在链接到其他页面时，定位到目标页面的某个锚点。比如，查看如下代码：Tootherpage点击此链接，可以去往当前目录下的页面a.html，同时会定位到该页面上name或者id为“bottom”的锚点所指定的特定位置。如果只是需要使用链接返回到页面顶端，则可以不需要定义锚点，直接设置元素的href属性的值为#即可。代码如下所示：ReturntoTop4.列表4.1.列表的作用4.1.1.列表的作用列表是指将具有相似特征或者具

32、有先后顺序的几行文字进行对齐排列。所有的列表都由主要代码和包含代码组成。主要代码指定希望创建的列表的类型，如有序或者无序列表；而包含代码则指定列表中的列表项，用于指示具体的列表内容。4.2.使用列表4.2.1.有序列表 在有序列表中，列表中的每一项的前缀是有特定次序意义的，比如数字（1,2,3），或者字母（a,b,c）或者罗马数字（i,ii,iii）。有序列表非常适合于提供对完成某一任务的分布式说明，或者用来创建有特定次序的大纲。使用元素可以编写有序列表，同样，元素中只能包含元素，用来表示有序列表中的每一个列表项。比如，查看如下代码：onetwothreefour上述代码在浏览器中的显示效果如

33、图所示。默认情况下，有序列表中的列表项用阿拉伯数字（1、2、3等）进行编号，且列表自动的缩进。创建有序列表时，也可以使用type属性选择列表项左边出现的编号。但是，type属性已经被标识为废弃属性，我们应该尽量避免如此使用，而是选择使用CSS样式属性来进行设置。4.2.2.无序列表无序列表可能是web网页上用的最多的一种列表，可以使用它列出页面上没有特定次序的任何项目。如果希望在页面上放置项目符号列表，则可以利用元素（代表无序列表）编写列表。元素只表示开始一个无序列表，其中只能包含具体的列表项元素。列表中包含的每一项都必须包含在起始标记和结束标记之间（li代表列表项listitem）。例如，如

34、果书写如下代码：onetwothree上述代码在浏览器中的显示效果如图所示。默认情况下，无序列表中的列表项自动的从左外边距缩进，且列表项前面显示实心的圆点符号，也可以使用type属性选择不同的符号。但是，需要注意的是，在不同的浏览器之间，符号显示的大小和外观会有差异。其次，在HTML4.1中，type属性已经被标识为废弃属性，建议使用CSS样式中的list-style-type来修改标志。4.2.3.列表嵌套列表中能够嵌套其他列表，即列表中会包含多个单独的列表，而每个列表对应于原列表中的一项。比如，查看如下代码：Web基础知识Web与InternetWeb的工作原理Web相关技术HTML快速入

35、门相关术语基础语法文档结构5.1.表格的作用5.1.1.表格的作用表格被设计的最初的目的是用来容纳表格式数据，如统计结果、数据报表等。我们可以将表格想象为网格，类似于电子数据表，表由行和列组成，如图所示。由图可以看出，表格就是一些矩形组成的网格，我们把每一个矩形称为一个单元格，而行或者列都由一些单元格集合组成。表格还可以用作页面的基础布局，并结合使用CSS进行文本格式化以及表格不能实现的许多布局格式化。这样做的原因主要有两点：一是表格在所有浏览器上的表现几乎完全一致；二是可以使用表格创建流式布局，即会随着浏览器窗口按比例扩大和缩小。但是，需要注意的是，过度用表格进行布局（尤其是复杂的表格嵌套）

36、会让页面变得复杂，导致页面难以维护。5.2.使用表格5.2.1.创建表格定义一个表格时，只需要使用成对的标记就可以完成，然后使用成对的标记来创建表行，并使用成对的标记创建单元格。在创建表格时，我们通过逐行的方式来创建表。比如，查看如下代码：第1行，第1列第1行，第2列第2行，第1列第2行，第2列上述代码在浏览器中的显示效果如图所示。由此可见，我们先创建一个元素来表示表格，然后逐行使用元素创建表行，并在元素里逐个使用元素来创建单元格，而具体的数据包含在元素中。这就构成了表格的基本结构。所有的表格都必须遵循这个基本结构，即使单元格中没有任何内容，也不能省略标记。5.2.2.表格的常用属性元素可以附

37、带很多属性以控制表格的外观，虽然这些属性大都逐渐被淘汰，但是目前仍然被大量使用且广泛支持。1、border属性默认情况下，表格并不会显示边框，这是因为如果表格被用作页面布局，往往是不需要显示边框的。如果我们需要它显示边框，则可以设置border属性。该属性的值表示边框的宽度，单位为像素，如果设置为0，或者不设置，则不显示边框。border属性会为表格和每个单元格应用边框，并用边框围绕表格。2、align属性（不赞成使用）align属性表示表格在页面当前行的对齐情况。可以取值为left（表格位于页面左边，为默认值）、right（表格位于右边）或者center（表格居中显示）。3、width属性表

38、格的宽度默认情况下是适应表格内容的，可以使用width属性来指定表格的宽度，单位是像素或者可用空间的百分比。当表格没有被包含在其他 元素中（比如 元素或者 元素）时，可用空间就是页面的宽度；否则可用空间就是包含它的元素的宽度。4、cellpadding属性默认情况下，单元格的内容紧挨着单元格的左边框，可以使用cellpadding属性用来定义单元格的边与其内容之间的间隔，单位为像素或者百分比（表格宽度的百分比）。设置该属性可以增加页面的可阅读性。5、cellspacing属性默认情况下，单元格和单元格之间有一些默认的间距，而cellspacing属性用于定义单元格和单元格之间的间隔。该属性的值

39、可以是单元格之间的空间量，单位为像素或者百分比（表格宽度的百分比）。5.2.3.表格标题 可以使用元素为表格定义标题，默认情况下，标题将在表格上方居中显示。标签必须紧随标签之后，且只能对每个表格定义一个标题。5.3.表格的复杂应用5.3.1.行分组表格可以划分为3个部分：表头、表主体和表尾。表头和表尾与文档的页眉和页脚类似，而表主体则包含表的主要内容。对于表各部分的划分可以显示为更丰富的样式，比如，表格的第一行往往为标题，可能需要设置为特定的样式；而表的第2行到第5行可能需要统一设置为一种样式，其余的行需要统一设置为另外的一种样式。此时，如果可以将这些行进行分组，则可以很方便的统一设置样式。将

40、表划分为表头、表主体和表尾的3个元素为：元素：创建独立的表头元素：创建表主体元素：创建独立的表尾这三个元素只能在元素中使用，且它们只能包含一个或者多个元素，所以我们称它们为行分组元素。这三个元素往往结合起来使用。一个表格只能有一个表头和一个表尾，但是可能包含多个元素，以指示不同的数据组。5.3.2.不规则表格元素可以附带colspan和rowspan属性，以创建不规则表格。当我们创建复杂表格时，可能需要将多个单元格合并为一个单元格，以创建不规则的表格。单元格的合并分为两种情况：横向合并多个单元格，或者纵向合并多个单元格。比如，我们查看如图所示表格：由图可以看出，表格原有的网格结构被改变，第一行

41、的后两个单元格被合并为一个单元格（B单元格），而第一列的后两个单元格被合并为一个单元格（C单元格）。在HTML中，我们通过设置单元格的延伸跨越来实现单元格的合并。colspan属性：允许单元格跨越多列，即在水平方向上延伸，实现水平方向的单元格合并；rowspan属性：允许单元格跨越多行，即在垂直方向上延伸，实现垂直方向上的单元格合并。如果需要实现上图的表格结构，我们需要如下代码ABCDEFG由图可以看出，对于单元格跨越的每一个额外单元格，不需要再为其定义一个单元格。比如，第一行中只需要两个元素，是因为第三个单元格被前一个单元格的colspan属性跨越列，因此不再需要额外定义；而第三行中也只有两

42、个元素，是因为第三个单元格被前一个单元格的rowspan属性跨越行，因此也不需要再额外定义。5.3.3.表格的嵌套在网页制作过程中，尤其是设计复杂页面的布局时，常常会用到表格的嵌套，即在一个表格的单元格中嵌套一个或者多个表格。如果在表单元格元素中再包含元素，即意味着可以在单元格中放置另外一个表，我们就称之为嵌套表。比如，我们需要如图所示表格实现页面布局：由图可以看出，“导航链接”、“最新消息”、“广告图片”这三个单元格和“最新推荐商品”、“热卖商品”这两个单元格的高度都各不相同，因此不可能使用单元格的跨行来实现（同一行的单元格的高度必须相同）。因此，需要在单元格中嵌套一个表格来实现。实现图的表

43、格效果的代码如下：页面标题及logo导航链接最新推荐商品热卖商品最新消息广告图片页脚注意：使用嵌套表格时，必须注意嵌套的顺序，即只能在元素中嵌入其他表格，不能破坏表格原有的结构。6.表单6.1.表单概述6.1.1.表单的作用表单是网页中提供的一种交互式操作手段，在网页中的应用十分广泛。无论是提交搜索信息，还是网上登录注册等都需要使用表单。表单有两个基本部分：一是访问者在页面上看到并能够实现数据交互的界面元素，比如文本框、选择框或者按钮；二是提交后的表单处理，需要调用服务器端的脚本代码对客户端提交的信息作出回应。可以使用元素创建表单，并在元素中添加其他表单可以包含的控件元素，比如添加元素以创建文

44、本框或者按钮等。6.1.2.表单元素元素是块级元素，必须包含开始标记和结束标记。语法如下：元素用于为用户输入创建表单并向服务器传输数据，表单能够包含各种表单控件，也可以包含前面章节中讲述的文本、列表、图像、链接和表格等元素。但是，元素绝对不能包含其他元素。一个页面中可以包含多个元素，它们相互独立（任何元素都不包含其他元素），且数量不限。比如，一个页面上可以同时包含登录用的表单、搜索用的表单和提交数据用的表单等；但是无论页面上有多少个表单，用户一次只能向服务器发送一个表单中的数据。元素可以附带很多属性，其中必须附带的属性是action和method属性，用于向服务器提交表单上收集到的数据。act

45、ion属性action属性指定提交表单时将如何处理数据，即当提交表单时，向何处发送表单数据。该属性的值是Web服务器中的一个页面或者一个程序，当用户点击提交按钮后，该页面或者程序将接收表单中的信息。如果由页面处理提交的数据，则该属性的值是一个URL，可以是绝对URL或者相对URL。代码如：如果省略了action属性，表单将会被提交到当前的URL。method属性method属性规定如何发送表单数据，即使用什么方式将表单数据发送到action属性所规定的页面。6.1.3.表单控件中可以包含各种用于实现输入的元素，比如文本框、选择框等，这些元素统称为表单控件。常用的表单控件有:元素（比如文本字段、

46、复选框、单选框、提交按钮等等）、元素、元素和元素等。6.2.元素6.2.1.元素元素用于收集用户信息，该元素是一个空标记，语法如下：根据该元素不同的type属性值，可以创建各种类型的输入字段，比如文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。元素可以附带很多属性，其中，id属性是每种控件都有的属性，用于提供控件标识；其次，有些属性是所有控件都有的通用属性，比如disabled、readonly等。6.2.2.文本框与密码框文本框通过设置元素的type属性值为text，则可以创建单行文本输入控件。比如，查看如下代码：上述代码会在浏览器中显示一个单行文本框。元素作为单行文本框时，常附带的

47、属性如下：value属性：为文本输入控件提供一个初始值，在表单初次加载时会显示该属性的值；maxlength属性：用于规定输入字段的最大长度，以字符个数计；disabled属性：禁用控件，该属性的值为“disabled”；readonly属性：规定文本框为只读，该属性的值为“readonly”。密码框表单上可能需要收集一些敏感数据，比如密码和信用卡信息，这些信息最好不要以明文的方式显示在页面上，而使用掩码来显示（使用圆点或者星号替换这些明文字符）。以掩码显示数据的文本框，我们称为密码框，只需要设置元素的type属性的值为password即可。比如，查看如下代码：上述代码会在浏览器中显示一个密码

48、输入控件。元素作为密码框时，常附带的属性与单行文本框相同，也可以使用value、maxlength、disabled和readonly等属性。注意：虽然密码在屏幕上是隐蔽的，但是并不会对文本内容进行加密。在发送数据到服务器时，依然用纯文本的方式发送。6.2.3.单选框和复选框单选框创建单选按钮控件，只需要设置元素的type属性的值为radio即可。上述代码会在浏览器中显示一个小圆形。比如，查看如下代码：选择您的性别：男女保密上述代码在浏览器中的显示效果如图所示。注意：单选按钮的name和value属性是必须设置的。只有将多个单选按钮的name属性的值设置为相同的值，才可能实现一组单选按钮的互斥

49、选中；而value属性的值用于提交数据给服务器。myeclipse8.5如果不设置name属性，单选框可能选不了复选框复选框会显示为一个小方框，用于勾选或者取消勾选。复选框可以单独出现，也可以成组的出现。创建复选框控件，只需要设置元素的type属性的值为checkbox即可。比如，查看如下代码：注意：必须为复选框设置value属性，因为选中的数据将以“名/值”对的形式发送给处理应用程序，没有value则不会发送该控件的数据。而如果作为一组选择出现，必须设置各个复选框的name属性为相同的值，这样，虽然会有多个“名/值”对发送给服务器，但是它们共享相同的名称，以便于服务器处理这些数据。6.2.4

50、.按钮提交按钮提交按钮的作用是自动提交表单，以将用户录入的数据发送给服务器。创建提交按钮控件，只需要设置元素的type属性的值为submit即可。比如，查看如下代码：上述代码在浏览器中会显示一个按钮，该按钮的文本默认显示为“提交查询“（不同的浏览器会有不同的显示），点击该按钮，页面会有刷新动作，即会试图提交数据给服务器。可以使用value属性用于设置按钮显示的文本，name属性用于设置按钮的名称。点击了提交按钮后，页面会自动提交，也不需要发送“名/值”对到服务器端。因此，往往不需要设置提交按钮的name属性。只有当页面有多个提交按钮时，需要设置name属性以便对多个提交做不同的处理。重置按钮重