《P.NET动态网页设计教程（第二版） 教学课件 ppt 作者 丁桂芝 第3章》由会员分享，可在线阅读，更多相关《P.NET动态网页设计教程（第二版） 教学课件 ppt 作者 丁桂芝 第3章（44页珍藏版）》请在金锄头文库上搜索。
1、1,第三章 HTML语言简介和HTML控件,超文本标记语言HTML是Web技术的基础，整个Web从一定意义上来说就是构架在HTML技术之上的。在实际应用中，绝大多数网页的制作只靠ASP.NET中的各种控件是难以胜任的，还需要HTML技术的支持。因此，在学习HTML控件以及其它ASP.NET服务器控件之前，首先需要熟悉掌握HTML语言的基础知识。使用CSS（层叠样式表）可以定义网页相关组件的各种属性变化，也可以创建一个通用的样式表，让网站的相关网页直接套用，完全跳脱HTML语法及输出编排上的束缚。HTML控件是以HTML标记为基础衍生出来的控制元件。在ASP.NET 2.0中，默认情况下，HTM
2、L控件属于浏览器端控件，不能被服务器使用，但是，如果使用了runat=“server“属性进行声明，HTML控件则变成了HTML服务器控件。本章主要介绍HTML语言基础、CSS以及浏览器端HTML控件。,2,第三章 HTML语言简介和HTML控件,3.1 什么是HTML HTML（Hyper Text Markup Language），译作中文为超文本标记语言，是创建网页的脚本语言。它提供了精简而有力的文件定义，使我们可以设计出多姿多彩的超媒体文件（Hypermedia Document），通过HTTP（Hyper Text Transfer Protocol）通讯协议，使得HTML文件可以在
3、全球互联网（World Wide Web，WWW）上进行跨平台文件交换。 HTML文件为纯文本的文件格式，可以用任何文本编辑器（如记事本）或者用FrontPage、Dreamweaver、Visual Studio等Web开发制作工具来编辑。本书我们选用Visual Studio 2005作为编写HTML文件的工具。,3,第三章 HTML语言简介和HTML控件,3.1.1 HTML文件的结构 根据HTML规则中的定义，HTML文件的结构是由HEAD和BODY两大部分所组成，整个文件的结构如下图所示。,4,第三章 HTML语言简介和HTML控件,3.1.2 HTML组成的基本组件 该标记必须分别
4、置于HTML文件的开头和结尾，其主要的功能是告诉浏览器（Browser）这是HTML文件，并且文件是由起始标记开始，到结束标记结束。 紧接在后面的标记为文件的表头区，该部分的主要作用是用来描述关于网页的相关信息，例如编码方式、网页的标题等。其中最常使用的标记是标识网页标题名称的，在此标记中的文字将出现在浏览器窗口左上方的标题区（Caption），其主要功能是用以,5,第三章 HTML语言简介和HTML控件,显示目前打开网页的主题，如下图所示。 网页输出编排的重头戏几乎全部放在之间，凡在网页上显示的各种文字或图片等，均必须置于这一标记的范围内。,6,第三章 HTML语言简介和HTML控件,3.2
5、 背景设置 随着图形用户界面（Graphic User Interface，GUI）操作系统的盛行，网页设计美观与否将直接影响用户的感受，因此网页制作人员无不卯足全力写出更具吸引力的版面。在HTML的规则中，我们可以自行定义网页的背景颜色或以某张图片填满网页的背景，而这些必须在的属性里设置，其用法如下： Body的相关属性说明如表3.1所示。,7,第三章 HTML语言简介和HTML控件,表3.1 Body的相关属性说明,8,第三章 HTML语言简介和HTML控件,3.3 文字属性的变化 HTML允许我们对文件中的文字做各种的变化，这些变化就如同使用Word设置文字的属性一样，可以设置文字的大小
6、、颜色、使用的字体名称与字体样式等，详细的使用说明分述如下。 3.3.1 设置文字的字体、大小和颜色 在HTML中我们可以使用标记设置文字属性，它的语法如下： 显示的文字 其中，size=“n”。HTML当初定义时，将字体由小到大排列，分为17个等级，其默认值为3。,9,第三章 HTML语言简介和HTML控件,此外，字体大小也可以以3为基准用相对大小来表示，例如：+1代表4；-2代表1；以此类推。请看下面的范例(Exam3_2.htm)的源代码。 设置文字属性 文字之美 ,10,第三章 HTML语言简介和HTML控件,上述范例在Internet Explorer浏览器中输出的画面如下图所示。
7、设置文字的字体、大小及颜色,11,第三章 HTML语言简介和HTML控件,3.3.2 文字的样式 使用过Word编辑文件的人，应该知道Word提供的文字样式，有粗体字、斜体字及加下划线等3种样式，HTML文件也具有这样的功能，且样式可混合指定使用，其使用方法如下： 粗体字 粗体字 斜体字 斜体字 加下划线 加下划线,12,第三章 HTML语言简介和HTML控件,3.3.2 文字的样式 使用过Word编辑文件的人，应该知道Word提供的文字样式，有粗体字、斜体字及加下划线等3种样式，HTML文件也具有这样的功能，且样式可混合指定使用，其使用方法如下： 粗体字+斜体字 粗体字+斜体字 粗体字+加下
8、划线 粗体字+加下划线,13,第三章 HTML语言简介和HTML控件,3.3.3 空格符 在HTML中，空格符并不具有调整间距的功能（连续出现多个空格符时，仅第一个空格符有效），若要正确的使用空格符，请改用HTML空格符的编码值（ 则在结果中出现了5个空格。,14,第三章 HTML语言简介和HTML控件,3.3.4 换行 HTML的文件编排，并非按照传统文字文件格式的方式输出，换行字符（CR, LF）在HTML中是无效的。在HTML文件中，换行必须使用标记。 3.3.5 预先编排好的文字 有时候，利用HTML帮我们编排文字输出的格式，反而会造成我们的困扰，因为有些文字内容已事先编排好了，这时候
9、您可以使用标记，将已编辑好的文件置于该标记之中，它就可以按照您所想要的格式输出。,15,第三章 HTML语言简介和HTML控件,3.3.6 编号和项目符号 1. 编号 您使用过Word项目编号的功能吗? HTML也有提供，它必须使用标记并搭配标记使用。其中OL为Order List的意思；LI为List Item的意思。项目编号范例如下图所示。,16,第三章 HTML语言简介和HTML控件,3.3.6 编号和项目符号 1. 编号 标记还可以通过TYPE属性设置不同的项目编号，可用的TYPE属性值如表3.2所示。 表3.2 TYPE属性说明,17,第三章 HTML语言简介和HTML控件,3.3.
10、6 编号和项目符号 2. 项目符号 Word的项目符号与项目编号不同，项目符号是以特定的字符为编号，在HTML文件中是以标记表示，并须搭配.标记使用，其中UL为Unorder List的意思。项目符号范例如下图所示。,18,第三章 HTML语言简介和HTML控件,3.4 图文并茂的文件 在HTML文件中，图形文件与HTML文件是分开存放的，通过HTML的标记，描述要显示的图形文件名称，即可在浏览器中显示图片。标记的语法如下： 3.4.1 指定文件来源 在src=“文件名“中，文件的名称有两种表示方式，一种是明确的指出图形文件的完整路径，称为绝对路径；另一种是以目前网页所在的目录为基准（作为参考
11、路径），称为相对路径。,19,第三章 HTML语言简介和HTML控件,3.4.2 指定图形的宽度和高度 在标记中，也可以指定图形的宽度和高度。通常来说，我们并不用特别设置这两个属性，因为浏览器会以图形的宽度和高度自动显示，除非为了版面编排的问题，才会利用宽、高两个属性来调整图形显示的大小。另外，图片的宽度和高度也可用百分比“%”来表示，例如：width=“50%”，height=“50%”等。 说明：在Internet Explorer 6.0中宽度和高度，是指浏览器的宽度和高度的百分比。因此，width=“50%“在800600分辨率中，宽度相当于是400 pixel。,20,第三章 HTM
12、L语言简介和HTML控件,3.4.3 图片边框 在Internet Explorer中所显示图形文件，其默认值是没有边框的。若为了美观或显眼起见，您可以利用Border属性为图形加上边框，并可指定边框的大小（粗细）。 3.4.4 图形或文字 图形是网络带宽的杀手之一，为了节省网络的带宽，HTML的标记也可以设置为图形代替文字。当用户设置浏览器只显示文字时，图形的部分即会以这些文字来展现。设置文字的属性为alt。,21,第三章 HTML语言简介和HTML控件,3.4.5 对象居中 无论是文字对象或是图形对象，默认值都是靠左显示，但是HTML也提供对象居中的显示方式，其标记为，在与之间的任何对象均
13、会被居中编排输出。例如： 文字居中 或 ,22,第三章 HTML语言简介和HTML控件,3.5 超级链接 所谓超级链接（Hyperlink），就是当用鼠标点击文字或图片时，可以链接文字或图片到其它网页（可跨网站链接）的功能，而超级链接又可分为文字超级链接和图片超级链接。 3.5.1 文字超级链接 如果要让网页中的某段文字成为超级链接，只要在链接标题前后分别加入和两个标记就可以了。其中标记的意思是Anchor，是轮船停泊在港口用以固定船身的锚，由于锚是用链条固定船身，在此引申为链接网页的意思，也就是利用点选文字达到链接不同网页的功能，就如同用链条将两个网页链接起来一样。,23,第三章 HTML语
14、言简介和HTML控件,3.5.2 图片超级链接 图片超级链接的语法，大致上和文字超级链接相同，只是链接标题的部分改为图片，如此超级链接就可以变成很美的小图片。插入图片的方式是在和之间加入。 其中src指定的是图片的来源，alt是超级链接的文字说明（浏览器指定为纯文本显示时才有作用），border 用来指定图形显示时的边框大小（默认值为0）。,24,第三章 HTML语言简介和HTML控件,3.5.3 页内超级链接 除了文字和图形的链接以外，超级链接也可以发生在同一个网页之中，也就是文件内部的自我链接，这种链接方式比较适合长篇幅的网页。通常网页设计者会在页首标明网页的主题（Subject），通过点
15、击主题的方式，让光标直接移到主题所指的内容部分，以减少用户拖动滚动条或点击滚动条的次数。,25,第三章 HTML语言简介和HTML控件,3.5.4 超级链接电子邮件账号 超级链接除了网页的链接以外，另外也可指定与用户计算机默认的电子邮件软件进行链接，以利于与电子邮件集成。例如在网页的页尾通常会摆放网站的服务信箱，如下图所示。,26,第三章 HTML语言简介和HTML控件,3.6 表格 在HTML输出编排的标记当中，并没有指定显示位置的功能（例如文字要显示在x坐标等于5，y坐标等于100处），因此对于复杂的版面就无法精确地编辑，此时可以通过表格来定位。在HTML中表格的起始标记为，结束标记为，完
16、整的标记语法如下： ： 实际上，表格又可分为列(Column)和行(Row)。竖的称为Column，横的称为Row。,27,第三章 HTML语言简介和HTML控件,3.6.1 行与列 行的标记.必须配合表格使用，与之间代表一行。一般在编写表格时，必须先写行，然后再写列于其中。 3.6.2 行与列的背景颜色 在IE浏览器中，和标记均可以指定背景颜色，使用的原则是同一行的背景相同则在中指定。,28,第三章 HTML语言简介和HTML控件,3.6.3 表格边框的颜色 HTML表格的边框使用Border属性来指定，默认值为0，要显示出表格时，Border的值必须大于0。边框的颜色使用BorderColor属性来指定。 3.6.4 表格间距 表格间距在HTML中有两个选项，一个是定义表格单元格之间的距离(CellSpacing)，默认值为2；另一个是定义表格单元格内的字符与表格单元格边界的距离(CellPadding)，默认值为1。,29,第三章 HTML语言简介和HTML控件,3.6.5 合并单元格 虽然表格是由列和行所组成的，但却不一定是固定的个数，有时候我们
