ASP.NET动态网站设计与实现以一个真实运行的网站为案例-第4章课件.ppt

《ASP.NET动态网站设计与实现以一个真实运行的网站为案例-第4章课件.ppt》由会员分享，可在线阅读，更多相关《ASP.NET动态网站设计与实现以一个真实运行的网站为案例-第4章课件.ppt（55页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1 HTML是Web技术的基础，整个Web从一定意义上来说就是构架在HTML技术之上的。在实际应用中，绝大多数网页的制作只靠ASP.NET中的各种控件是难以胜任的，还需要HTML技术的支持。因此，在学习HTML控件以及其它ASP.NET服务器控件之前，首先需要熟悉掌握HTML语言的基础知识。使用CSS（层叠样式表）可以定义网页相关组件的各种属性变化，也可以创建一个通用的样式表，让网站的相关网页直接套用，完全跳脱HTML语法及输出编排上的束缚。HTML控件是以HTML标记为基础衍生出来的控制元件。在ASP.NET 3.5中，默认情况下，HTML控件属于浏览器端控件，不能被服务器使用，但是，如果使

2、用了runat=server属性进行声明，HTML控件则变成了HTML服务器控件。本节主要介绍HTML语言基础、CSS以及浏览器端HTML控件。而HTML服务器控件以及其它ASP.NET3.5服务器控件将在第五章中介绍。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件在线教务辅导网：在线教务辅导网：http:/教材其余课件及动画素材请查阅在线教务辅导网教材其余课件及动画素材请查阅在线教务辅导网QQ:349134187 或者直接输入下面地址：或者直接输入下面地址：http:/3 4.1 HTML语言简介语言简介 HTML（Hyper Text Markup Languag

3、e，超文本标记语言）是创建网页的标记语言，它提供了精简而有力的文件定义，使我们可以设计出多姿多彩的超媒体文件（Hypermedia Document），通过HTTP（Hyper Text Transfer Protocol）通讯协议，使得HTML文件可以在全球互联网（World Wide Web，WWW）上进行跨平台文件交换。HTML文件为纯文本的文件格式，可以用任何文本编辑器（如记事本）或者用FrontPage、Dreamweaver、Visual Studio等Web开发工具来编辑。本网站我们选用Visual Studio 2008作为编写HTML文件的工具。至于文件中的文字字体、大小、段

4、落、图片、表格及超级链接，甚至是文件名称等都是以不同意义的标记（Tags）来描述，以此来定义文件的结构与文件间的逻辑关联。简而言之，HTML是以标记来描述文件中的多媒体信息。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件4 4.1.1 HTML文件的结构及基本组件文件的结构及基本组件 HTML文件的结构是由head和body两大部分所组成，如下图所示。为了让读者了解完整的HTML文件，我们还是以“Hello World!”为例，为您勾画出最基本的HTML文件。下面是编辑“Hello World!”范例的操作过程。在【解决方案资源管理器】中选择Chapter4，右键单击

5、，在弹出菜单中选择“添加新项”选项。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件5 4.1.1 HTML文件的结构及基本组件文件的结构及基本组件 在打开的“添加新项”对话框中，在模板列表中选择“HTML页”，在“名称”文本框中输入“Exam4_1.htm”，单击【添加】按钮，Exam4_1.htm便添加到Chapter4项目中，同时在文档窗口自动打开Exam4_1.htm文件。默认情况下，文件是在源视图中打开，如下图所示。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件6 4.1.1 HTML文件的结构及基本组件文件的结构及基本组件 从图中可

6、以看到，新创建的文档是空的，即文档窗口中没有内容（如图片或文本），但这并不意味着与之相对应的HTML文件也是空白的。实际上，文档内已存在HTML代码，也就是说，Visual Studio 2008已经自动将最基本的HTML文件框架写好，只是在与标签之间没有插入内容。说明：图中第1行代码是说所使用的XHTML1.0规范是WWW联合会为HTML制定的正式规范。编写“Hello World!”的完整HTML文件源代码（Exam4_1.htm）如下。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件7 4.1.1 HTML文件的结构及基本组件文件的结构及基本组件 HTML第一步第

7、一步 Hello World!注意：上述代码中，只有加粗代码部分是我们输入的，其它均为Visual Studio 2008自动添加。从上述的源代码中我们可以看出，HTML文件是由开始，而以为文件的结束，其中小于（）符号之间所表示的字符串我们称之为标记（Tag）。在HTML的规则中，标记又分为“起始标记”和“结束标记”，例如文件中的代表HTML文件的开始，代表HTML文件的结束。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件8 4.1.1 HTML文件的结构及基本组件文件的结构及基本组件 对于制作网页的初学者而言，建议使用制作网页的软件包（例如Microsoft的Vis

8、ual Studio、FrontPage或Adobe的Dreamweaver等）来制作网页，因为这些软件提供相当具亲和力的可视化开发环境，使您在不知不觉中就学会了网页的制作。然而读者若能同时了解HTML文件中各标记所代表的含义，则在以后开发网站应用程序时，会有很大的帮助。在此把读者假设为程序设计员，因此我们将针对HTML语法做深入的探讨。该标记必须分别置于HTML文件的开头和结尾，其主要的功能是告诉浏览器（Browser）这是HTML文件，且文件是由起始标记开始，至结束标记结束。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件9 4.1.1 HTML文件的结构及基本组件

9、文件的结构及基本组件 紧接在后面的标记为文件的表头区，该部分的主要作用是用来描述有关网页的相关信息，例如编码方式、网页标题等。其中最常使用的标记是标识网页标题名称的，在此标记中的文字将出现在浏览器窗口左上方的标题区（Caption），如下图所示，其主要功能是用来显示当前网页的主题。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件10 4.1.1 HTML文件的结构及基本组件文件的结构及基本组件 网页输出编排的重头戏几乎全部放在之间，凡在网页上显示的各种文字或图片等，均必须置于这一标记的范围内。4.1.2 背景设置背景设置 网页设计美观与否直接影响用户的感受，为此网页制作

10、人员无不卯足全力写出更具吸引力的版面。在HTML规则中，我们可以自行定义网页的背景颜色或以某幅图片作为网页背景，而这些必须在的属性里设置，其用法如下：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件11 4.1.2 背景设置背景设置 body的相关属性说明见下表。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件12 4.1.3 文字属性变化文字属性变化 HTML允许我们对文件中的文字做各种的变化，这些变化就如同使用Word设置文字属性一样，可以设置文字的大小、颜色、使用的字体名称、样式等，详述如下。1 设置文字的字体、大小和颜色设置文字的字体、大

11、小和颜色 在HTML中，可以使用标记设置文字属性，语法如下：文字之美 HTML当初定义时，将字体由小到大排列，分为17个等级（字体的大小视浏览器的定义而异），若不设置字体大小，其默认值为3。此外，字体大小也可以以3为基准用相对大小来表示，例如：+1代表4；-2代表1；以此类推。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件13 2 文字的样式文字的样式 使用过Word编辑文档的人，应该知道Word提供的文字样式，有粗体字、斜体字、及加下划线等3种样式，HTML文件也具有这样的功能，且样式可混合指定使用，其使用方法如下：第第4 4章：章：HTML语言简介、语言简介、CS

12、S和和HTML控件控件14 3 空格符空格符 在HTML中，使用空格键并不能起到调整间距的功能（连续按多个空格键时，仅第一个空格键有效），若要正确的起到空格键的作用，请改用HTML中的空格符编码值（ ）。4 换行标记换行标记 HTML的文件编排，并非按照传统文字文件格式的方式输出，换行字符（CR,LF）在HTML中是无效的。在HTML中，换行必须使用标记。5 预先编排好的文字预先编排好的文字 有时候，利用HTML帮我们编排文字输出的格式，反而会给我们造成困扰，因为有些文字内容已事先编排好了，这时候您可以使用标记，将已编辑好的文件置于此标记之中，它就可以按照您所想要的格式输出。第第4

13、4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件15 5 预先编排好的文字预先编排好的文字 用法范例：用法范例：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件执行结果代码16 6 编号和项目符号编号和项目符号 编号编号 您使用过Word项目编号的功能吗?HTML也有提供，它必须使用标记并搭配标记使用。其中ol为order list的意思；li为list item的意思。请见书中项目编号的用法范例。项目符号项目符号 Word的项目符号与项目编号不同，项目符号是以特定的字符为编号，在HTML文件中是以标记表示，并须搭配.标记使用，其中ul为unorder

14、list。在“科技服务咨询管理系统”网站的menu.htm文件中就有项目符号的应用，请见第七章。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件17 4.1.4 图文并茂的文件图文并茂的文件 在HTML中，图形文件与HTML文件是分开存放的，通过HTML的标记，描述要显示的图形文件名称，即可在浏览器中显示图片。标记的语法如下：1 指定文件来源指定文件来源 在src=文件名中，文件的名称有两种表示方式，一种是明确的指出图形文件的完整路径，称为绝对路径；另一种是以当前网页所在的目录为基准（作为参考路径），称为相对路径。绝对路径绝对路径 以下是一个使用绝对路径显示图片范例的H

15、TML源代码：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件18 绝对路径绝对路径 第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件显示结果19 相对路径相对路径 相对路径是图形与目前的网页在同一个网站的目录下时使用，例如海河摄影艺术会的首页为index.htm，若首页显示logo图形的指定为，表示logo.gif这个图形与index.htm的首页在同一目录下，若则代表logo.gif是放在index.htm所在目录下的子目录images中，至于则是将logo.gif图形置于文档根目录（Document Root）下的Images子目录中。第第

16、4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件20 2 指定图形的宽度和高度指定图形的宽度和高度 在标记中，也可以指定图形的宽度和高度。通常来说，我们并不用特别设置这两个属性，因为浏览器会以图形的宽度和高度自动显示，除非为了版面编排的问题，才会利用宽、高两个属性来调整图形显示的大小。另外，图片的宽度和高度也可用百分比%来表示，例如：width=50%，height=50%等。说明：在Internet Explorer 6.0中宽度和高度，是指浏览器的宽度和高度的百分比。因此，width=50%在800600分辨率中，宽度相当于是400 pixel。3 图片边框图片边框 在

17、Internet Explorer中所显示图形文件，其默认值是没有边框的。若为了美观或显眼起见，您可以利用border属性为图形加上边框，并可指定边框的大小（粗细）。请见书中示例。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件21 4 图形或文字图形或文字 图形是网络带宽的杀手之一，为了节省网络的带宽，HTML的标记也可以设置为图形代替文字。当用户设置浏览器只显示文字时，图形的部分即会以这些文字来展现。注意：标记在HTML中是一个非常特殊的标记，因为它只有起始标记而没有结束标记。所以，请注意！在HTML文件中不要加入这个标记。同样的特殊标记还有、等。5 对象居中对象居

18、中 无论是文字对象或是图形对象，默认值都是靠左显示，但是HTML也提供对象居中的显示方式，其标记为，在与之间的任何对象均会被居中编排输出。例如：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件22 4.1.5 超级链接超级链接 所谓超级链接（Hyperlink），就是当用鼠标点击文字、图片时，可以链接到文字或图片所指向的其它网页（可跨网站链接）的功能，超级链接又可分为文字超级链接和图片超级链接。在网站制作中，超级链接几乎是每个网站都会使用的。例如，在“科技服务咨询管理系统”首页以及其他网页上都使用了超级链接。1 文字超级链接文字超级链接 如果要让网页中的某段文字成为超级

19、链接，只要在这段文字前后分别加入和两个标记就可以了。其中标记的意思是anchor，是轮船停泊在港口用以固定船身的锚，由于锚是用于链条固定船身，在此引申为链接网页的意思，也就是利用点击文字达到链接不同网页的功能，就如同用链条将两个网页链接起来一样。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件23 2 图片超级链接图片超级链接 图片超级链接的语法，大致上和文字超级链接相同，只是链接标题的部分改为图片，如此超级链接就可以变成很美的小图片。插入图片的方式是在和之间加入，这样就可以了。3 页内超级链接页内超级链接 除了文字和图片的链接以外，超级链接也可以发生在同一个网页之中，

20、也就是文件内部的自我链接，这种链接方式比较适合长篇幅的网页。通常网页设计师会在页首标明网页的主题（subject），通过点击主题的方式，让光标直接移到主题所指的内容部分，以减少用户拖动滚动条或点击滚动条的次数。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件24 4 超级链接电子邮件账号超级链接电子邮件账号 超级链接除了网页的链接以外，另外也可指定与用户计算机默认的电子邮件软件进行链接，以利于与电子邮件集成。例如在“科技服务咨询管理系统”网站的首页有一“处长信箱”链接文字，在“技术服务学校需求”页面摆放一张小图片（如下图所示），均是用于发送邮件的超级链接。第第4 4章：

21、章：HTML语言简介、语言简介、CSS和和HTML控件控件25 4 超级链接电子邮件账号超级链接电子邮件账号 当用户单击该信箱时，会自动启动用户计算机内部默认的电子邮件软件（例如Outlook、Outlook Express等），并将其e-mail地址放在收件人位置，如下图所示。该HTML超级链接电子邮件的语法如下：链接图片(或文字)第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件26 4.1.6 表格表格 在HTML输出编排的标记当中，并没有指定显示位置的功能（例如文字要显示在x坐标等于5，y坐标等于100处），因此对于复杂的版面就无法精确地编辑，此时只好通过表格来定

22、位。在HTML中表格的起始标记为，结束标记为，完整的标记语法如下：表格包含行（row）和列（column）。横的称为row，竖的称为column。1 行与列行与列 行的标记.必须配合表格使用，与之间代表一行。一般在编写表格时，必须先写行，然后再写列于其中。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件27 1 行与列行与列 例如我们要制作一个3行3列（33）的表格，完整的HTML写法范例如下：浏览效果如下图所示。HTML的表格 第一行，第一列 第一行，第二列 第一行，第三列 第二行，第一列 第二行，第二列 第二行，第三列 第三行，第一列 第三行，第二列 第三行，第三列

23、 第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件说明：tr是table row的意思，td是table data的意思。28 2 行与列的背景颜色行与列的背景颜色 在IE浏览器中，和标记均可以指定背景颜色，使用的原则是同一行的背景相同则在中指定。例如：若每一列的颜色均不相同，则可以在中指定颜色。例如：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件29 3 表格边框颜色以及表格间距表格边框颜色以及表格间距 HTML表格的边框（border）若未指定，其默认值为0，也就是没有边框的意思。因此要显示出表格时，border的边框宽度值必须大于0，至于

24、边框的颜色可以使用bordercolor属性来指定，其语法如下：表格间距在HTML中有两个选项，cellspacing用于定义表格单元格间的距离，默认值为2；cellpadding用于定义表格单元格内的字符与表格单元格边界本身的距离，默认值为1。4 合并单元格合并单元格 虽然表格是由列和行所组成的，但却不一定是固定的个数，有时候我们必须使用合并表格的功能。合并表格可分为：行合并与列合并两种，而合并的原则为由上到下、由左到右。说明如下：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件30 4 合并单元格合并单元格 合并列 假如某一列横跨3个列（占3个列的空间），则我们可以

25、使用标记的colspan=n属性指定占用的列数。HTML范例代码如下：合并列 第一行，第一列 第一行，第二列 第一行，第三列 第一行，第四列 第二行，本列占3列 第二行，第四列 第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件利用IE来观看的结果31 4 合并单元格合并单元格 合并行 假如某一个列纵跨3行（占3行 的空间），则我们可以使用 标记的rowspan=n属性指定占用的 行数。HTML范例代码如右所示。结果 如下图所示。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件 合并行 第一行，本列纵跨3行 第一行，第二列 第一行，第三列 第二行，

26、第二列 第二行，第三列 第三行，第二列 第三行，第三列 第四行，第一列 第四行，第二列 第四行，第三列 32 4.1.7 段落段落 HTML是当初科学家们用来在网络上发表研究成果的工具，而研究成果不外乎是一些技术性的文件，因此HTML在设计之初即有段落标记的定义，段落标记是以开始，而以为结束标记。在段落中可以使用align属性指定段落的对齐方式，例如靠左（left）、靠右（right）以及居中（center）等，其用法如下：段落文字 说明：使用段落标记，浏览器会自动在段落后面插入一空白行，这就是段落的定义。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件33 4.1.8

27、 水平线水平线 标记是提供HTML画水平线的功能，并可指定水平线的宽度、线的粗细等。其语法如下：其中宽度可指定线条的点数，也可指定显示屏幕宽度的百分比。水平线的用途很多，通常可以使用水平线隔离上下两部分内容，使浏览者便于浏览。例如，通常我们会用水平线将网页的主体内容与网页页脚隔开，并在水平线下方显示版权声明或服务信箱等。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件34 4.1.9 插入多媒体插入多媒体 在网页设计中，经常需要在网页中插入一些多媒体文件，例如Flash动画文件、视频文件等。其语法如下：本标记可以用来在网页中嵌入多媒体文本，如电影（movie）、声音（s

28、ound）、虚拟现实语言（vrml）等。例如“科技服务咨询管理系统”网站的网页页眉（banner.html）中使用如下代码插入了一个名为top.swf的Flash动画。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件35 4.1.10 图层图层 图层是网页制作不可或缺的元素，它给网页设计师提供了强大的网页控制能力，它比表格更灵活。图层是一个容器，在图层内可以放置各种类型的网页元素，如文本、图像、表格等，甚至还可以嵌套图层。每一个图层相当于一个独立的小屏幕。图层是一个可以任意移动的容器，甚至允许图层之间重叠放置，这就是图层的最大魅力所在。放置在图层上的元素，可以随图层被拖

29、放到任意位置，为元素的定位和网页布局带来了极大方便，同时也为控制动态元素奠定了基础。图层是通过标记来定义的。在定义一个图层时可通过ID参数设置图层的名称，同时可通过样式指定图层的位置、宽度、高度和顺序等参数。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件36 4.2 CSS简介简介 CSS是Cascading Style Sheet的缩写，中文译为“层叠样式表”，目前最新的版本为2.0版。IE和Netscape均支持CSS 1.0的规范，IE5及其以上版本充分支持CSS 2.0版规范。CSS样式表可以定义网页相关组件的各种属性变化，例如文字背景、字体、字体大小、对齐方

30、式等，它也可以创建一个通用的样式表，让网站的相关网页直接套用，完全跳脱HTML语法及输出编排上的束缚。让您的网页更具视觉效果，并可大幅节省维护的时间。在HTML4.0版以后，每一个HTML的标记（Tag）都有一个Class属性，Class的值需套用CSS的定义，方可做出各种精确的排版及样式指定的功能，令HTML输出的画面变得非常的精美和细致。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件37 4.2.1 CSS类型类型 在HTML网页中，CSS有下列3种不同的使用类型：内嵌CSS 将CSS的定义写在HTML源代码标记之间，样式表的有效范围仅为此HTML文件。局部套用C

31、SS 此类型的CSS与特定的HTML标记合并使用，它与内嵌CSS最大的不同是局部套用仅会影响套用该段的样式，而不会影响其它非套用的部分。外部链接CSS 外部链接CSS是将样式表以单独的文件存放，令网站的所有网页均可套用此样式，以降低维护的人力成本，并可让网站拥有一致性的风格。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件38 1 内嵌内嵌CSS 在网页制作之前，我们可以针对网页的输出预先制定样式表，然后将样式表套用在HTML文件的相关标记中，使套用同一样式的标记都具有相同的输出风格。另外，在样式改变时，只要改变样式的定义，引用相同样式的HTML标记，其输出也会同时跟着

32、改变，大幅度简化网页的维护工作。例如我们有一段文字“CSS让网页美丽、大方、又好维护！”，要让它在网页上以宋体字体、大小为11点、颜色为黑色显示，则我们可以在.间定义一个样式（本例为style1），使样式的定义符合前项的规则。则内嵌样式表的HTML文件源代码如下：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件39 1 内嵌内嵌CSS .style1 font-family:宋体;font-size:11pt;color:#000000;CSS范例-1 CSS让网页美丽、大方、又好维护！第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件浏览效果40

33、 2 局部套用局部套用CSS 不同的浏览器对HTML标记的输出编排格式均不相同，通过局部套用CSS的功能，可以重新定义HTML标记的输出样式。例如HTML的段落标记，利用“局部套用CSS”的定义，可以让标记按照CSS的定义输出。范例代码如下：p font-family:宋体;font-size:11pt;color:#0000ff;CSS范例-3 CSS让网页美丽、大方、又好维护！第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件41 3 外部链接外部链接CSS 对于上述的样式定义，我们也可以使用记事本来进行编辑，并另外以一个新的文件存放（例如common.css），则使

34、用到该样式表的HTML文件均可以外部链接的方式引用。其引用方式如下：CSS范例-5CSS让网页美丽、大方、又好维护！预先编排的输出格式，也可以套用外部的CSS文件，套用的方法请见源代码(CSS-5.htm)。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件42 4.2.2 CSS在超级链接的运用在超级链接的运用 CSS除可重新定义HTML标记以外，对于HTML的超级链接标记提供了更多的选项。例如：a:link color:#0000ff;font-style:normal;cursor:hand;text-decoration:normala:visited color

35、:#ff0000;font-style:normal;text-decoration:normala:active color:#0000ff;font-style:normal;text-decoration:normala:hover color:#cc0000;font-style:normal;text-decoration:none CSS范例-6 超级链接测试第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件43 4.2.3 实际范例实际范例 该实际范例 是一个有关铁道出版社出版图书的HTML网页，其HTML范例代码及解释详见书。第第4 4章：章：HTML语言

36、简介、语言简介、CSS和和HTML控件控件44 4.3 浏览器端浏览器端HTML控件控件 在Visual Studio 2008的工具箱中，有一组HTML控件，它们既可以用于.htm页面中，又可以用于.aspx页面。在.htm页面中添加HTML控件，只需在工具箱中，双击所需的HTML控件或将所需的HTML控件拖放到页面中的适当位置即可。所添加的每个HTML控件都有一个HTML标记与之对应。在.aspx页面中添加HTML控件，同样只需在工具箱中选择HTML控件组（此时工具箱中包含HTML、标准、数据等多组控件），双击所需的HTML控件或将所需的HTML控件拖放到页面中的适当位置即可。默认情况下，

37、HTML控件属于浏览器端控件，不能被服务器使用。如果要想使HTML控件变为能够在服务器上运行的HTML服务器控件，只需在源视图中，在HTML标记中加入属性runat=server，就可以将HTML标记转化为HTML服务器控件。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件45 4.3.1 在页面中添加在页面中添加HTML控件控件 前面讲到，在页面（.htm或.aspx）中添加HTML控件，只需在工具箱中选择“HTML”选项卡，双击所需的控件或将所需的控件拖放到页面中的适当位置即可。每个HTML控件都有一个HTML标记与之对应。例如，我们沿用前面所创建的网站“HLFWe

38、bSite”，在Chapter4文件夹中，添加一个Exam4_1.aspx文件。在文档窗口中添加一个Image控件，初始时显示的控件代码为，通过src属性设置要显示图像的路径及文件名，alt属性指定说明文字。语法格式如下：注意：XHTML1.0要求“img”等HTML标记，必须以“/”结束。而HTML语法规则要求“img”等HTML标记，以“”结束。XHTML比HTML语法规则更加严格。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件46 4.3.2 常用的常用的HTML控件控件 ASP.NET3.5提供了很多客户端HTML控件，常用的客户端HTML控件包括Input（

39、Button）、Input（Reset）、Input（Submit）、Input（Text）、Input（File）、Input（Password）、Input（Checkbox）、Input（Radio）、Input（Hidden）、Textarea、Table、Image、Select、Horizontal Rule和Div控件。下面分别进行介绍。1 Input（Button）控件）控件 该控件的主要功能是创建一个按钮，单击该按钮将执行命令或动作。在Visual Studio 2008中，选择“工具箱”中的HTML选项卡，双击Input（Button）选项，便可将Input（Button）

40、控件加入到页面中。初始时显示的控件代码为，通过value属性设置要显示在该按钮上的文字。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件47 2 Input（Reset）控件）控件 该控件的主要功能是创建一个复位按钮，用来将页面重置为初始状态。初始时显示的控件代码为，通过value属性设置要显示在该按钮上的文字。3 Input（Submit）控件）控件 该控件用于创建一个提交按钮。通常情况下，Input（Submit）控件与Input（Reset）控件要和其它数据输入控件一起使用。Input（Submit）控件的语法格式如下：通常只设置该控件的value属性。第第4 4

41、章：章：HTML语言简介、语言简介、CSS和和HTML控件控件48 4 Input（Text）控件）控件 Input（Text）控件是一个单行文本控件。用于输入数据，所输入的字符串会如实地显示在文本框中。当添加一个Input（Text）控件后，该控件的代码为，在实际应用中，可以在Input（Text）控件的属性窗口中设置相关属性，如MaxLength、Size属性。MaxLength属性用于设定最大的字符串长度，Size属性用于设定文本框的宽度。5 Input（File）控件）控件 该控件用于创建一个文件输入框。其用户界面有两个，一个是输入框，另一个为【浏览】按钮。用户可通过单击【浏览】按钮，

42、打开“选择文件”对话框，从中选择所需文件，所选文件路径及文件名即可出现在输入框中，然后单击【提交】或【确定】按钮，便将文件上传到Server中处理。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件49 6 Input（Password）控件）控件 Input（Password）控件用于创建一个密码输入框。用于输入密码，所输入的字符串会显示为“”。它的主要属性有MaxLength、Size属性。MaxLength属性用于设定最大的字符串长度，Size属性用于设定输入框的宽度。该控件的语法格式如下：7 Input（Checkbox）控件）控件 该控件是一个复选框控件，可提供

43、多条件选项的复选功能。主要的设计理念是提供多重条件供用户选择，用户可选择0个或多个选项，因此像问卷调查之类的表单经常使用。它的语法格式如下：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件50 8 Input（Radio）控件）控件 该控件是一个单选按钮控件。单选按钮通常适用于多选一的条件，例如，在性别选项中用到两个单选按钮，且为二选一。单选按钮控件的语法格式如下：其关键属性是name，在多选一的选项中，控件的name属性必须一致，才能产生正确的结果。例如，在性别选项中两个单选按钮的语法格式：女男 说明：Checked属性用来设置单选按钮的默认选项。第第4 4章：章：H

44、TML语言简介、语言简介、CSS和和HTML控件控件51 9 Input（Hidden）控件）控件 Input（Hidden）控件是一个隐藏式控件。该控件的内容不会显示在网页上，主要是提供标记内字段的常数值。当用户单击【提交】按钮时，该数值在传送所输入数据的同时也会被提交到Server端进行处理。例如，我们将每一个动态网页均赋予一个编号，称为PageNo，则网页中的隐藏字段可使用Input（Hidden）控件写成如下的代码：初始时显示的控件代码如下：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件52 10 Textarea控件控件 Textarea控件用于创建多行文本

45、输入框，便于输入大量数据时使用。默认情况下，该控件的语法格式如下：所创建的多行文本输入框可通过在设计视图或拆分视图中用鼠标单击选中该控件，然后拖动控件边框的调节柄，即可设置输入区的大小（宽和高）。同样，我们也可直接在源视图中编写Textarea控件的大小样式。在浏览器中，当在Textarea中输入的数据超过行的长度时，数据会自动换行，数据长度大于输入区的高度时，控件右边滚动条（ScrollBar）的功能会自动启动。说明：rows属性用于指定文本框可显示的行数，cols属性则是指定每行可输入的最大字符数。当输入字符超过cols的设置值时，文字会自动换行（自动跳至下一行）。第第4 4章：章：HTM

46、L语言简介、语言简介、CSS和和HTML控件控件53 11 Table控件控件 Table控件是一个表格控件，用于创建表格。从工具箱拖放一个Table控件到页面中，默认情况下，将创建一个三行三列的表格。表格的起始标记为，结束标记为。使用Table控件创建表格十分便捷。12 Image控件控件 Image控件是一个图片控件，用来显示图片。该控件已在4.1.4小节中介绍过，这里不再赘述。13 Select控件控件 使用Select控件，既可以创建下拉列表框（ComboBox），也可以创建项目列表框（ListBox）。当Size属性=1时，为下拉列表框，当设置Size属性1时，则为项目列表框。第第4

47、 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件54 14 Horizontal Rule控件控件 Horizontal Rule控件用于创建水平线。该控件的代码为，默认情况下，水平线的宽度为屏幕宽度的100%，对齐方式为居中。可以指定显示屏幕宽度的百分比。另外还可以通过属性窗口设置的样式。15 Div控件控件 Div控件用于创建标签，使用标签可以创建图层，插入标签后，可以对该图层进行操作或者在其中添加内容。在实际应用中，通常使用图层进行布局。当向网页中添加一个Div控件时，其默认代码如下：第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件55 4.4

48、本章小结本章小结 本章主要介绍了HTML语言的基础知识，简要介绍了CSS以及浏览器端HTML控件。HTML是Web技术的基础，是学习Web技术的必修课，因此建议读者要熟悉掌握HTML语言的基础知识并能加以运用。使用CSS可以定义网页相关组件的各种属性变化，也可以创建一个通用的样式表，让网站的相关网页直接套用，完全跳脱HTML语法及输出编排上的束缚，所以读者也要了解并掌握CSS的基础知识并学会运用。HTML控件是以HTML标记为基础衍生出来的控制元件，HTML控件的使用对于设计制作网页能起到事半功倍的作用，读者同样需要熟悉掌握常用HTML控件的使用方法。本章的所有范例程序均可以从网站上下载的源文件中HLFWebSiteChapter4目录下找到。第第4 4章：章：HTML语言简介、语言简介、CSS和和HTML控件控件