ASP框架语言-HTML.ppt

第二章ASP框架语言-HTML,HTML语言结构HTML非正文标记HTMLHTML特殊标记HTML交互技术,返回本书首页,一、什么是HTMLHTML(HyperTextMarkupLanguage，超文本标记语言-就是标准的ASCII文本文件)是用于创建Web文档的编辑语言。在客户机上所能看到的以.htm或者.html等结尾的Web页面，基本上都由HTML语言编写而成。,1.1HTML语言结构,【例16页】,一个HTML页面在浏览器中显示前并不进行编译，浏览器按照HTML标记解释显示其表现的内容。,二、HTML语言结构一个标准HTML文档应具有下面的结构：标记一个HTML文件的升始HTML文件的文件头开始文件头部分内容文件头部分结束文件体部分开始文件体部分内容文件体部分结束标记该HTML文件结束,.HTML文档包括3个主要标记，文档标记、头部标记、体部标记。.内，称为文件头部，这部分信息不会在浏览器的窗口中显示出来。通常包括标题（）、头元素（）、代码（）等。.在内，称为文件体部，在浏览器中显示的内容和显示内容的格式标记都放在这里。.有些元素只能出现在头元素中，大多数元素只能出现在体元素中。在头元素中的元素书写的次序无关紧要，它只表明该HTML文件的属性值。而出现在体元素中的元素是次序敏感的。,【例】一个典型而简单的HTML例子first.htm如下：Helloworld这是一个一级标题我是蓝色，10号字体,1.开始和结束标记(标记)HTML文档的开始标记是，它告诉浏览器下面的内容是HTML文档，而标记告诉浏览器HTML文档结束了。所有其他标记都必须置于HTML标记中间，否则客户浏览器将忽略不在期间的标记。因此用开始Web页面，以结束。2.头部标记(标记)HTML文档的头部标记是，其作用在于初始化文档的信息(而其内容不会显示在浏览器的窗口中)，Head标记之内包含的标记有Title和Meta等。另外，一般也将控制页面的JavaScript程序和控制网页格式的CSS文件都放在Head之内。,2.2HTML非正文标记,标题标记(标记)标题文字会显示在Web浏览器的标题栏上。默认以该题作为文件名保存。默认以该标题为名称收藏。头元素(标记)注意：标记是单独使用的使用Meta标记可以包含自定义文本，用来指定文档作者、检索的关键字及创建日期等信息，这样在网上使用搜索引擎搜索时就可以显示出它的信息。Meta标记包括3个属性：HTTP-Equiv(绑定HTTP的响应元素)、Name(声明版权)、Content(为声明的版权赋一个值)。如：,代码：用于声明在间使用何种脚本语言。【例2-1】循环密码登录程序dimss=dowhiles123456s=prompt(请输入密码：)loop注释：中间括起来的为注释标记。在注释标记符号之间的内容一样也不会被浏览器显示出来。在使用时，也可将标记置于主体标记内。,3.主体标记(标记)是HTML文档最核心的部分。用户在浏览器中看到的任何信息都定义在这个标记之内，但使用框架Frames的页面除外。语法格式为：,(1)Link、Alink和Vlink属性这3个属性共同来格式化HTML页面上所有超级链接的颜色风格，它们分别定义超级链接一般颜色、激活颜色及已访问颜色。【例】将页面上的链接颜色设为蓝色，激活的链接设为红色，已经访问过且失去焦点的链接设为黑色,代码如下：(2)Background、Bgcolor和Bgproperties属性这3个属性共同来定义HTMIL页面的背景属性，包括：背景图片(Background)、背景颜色(Bgcolor)及背景图片的显示方式(Bgproperties)。【例】将一个HTML页面的背景颜色设为蓝色(blue)，而将其背景图片指定为blue.gif，并且该背景图片为水印形式显示在浏览器中(在水印显示方式下，内容超过一屏且拖动滚动条时页面背景并不随之滚动),代码如下：,(3)Leftmargin和Topmargin属性这两个属性用于设置Web页面在浏览器中显示时距浏览器窗口左方和上方的空白宽度。属性值是像素。【例】将页面左边距设为0，上边距设为5。(4)Text属性该属性设置页面显示文本的前景色(超级链接、CSS层叠样式表单除外)。另外，Body标记一些事件驱动属性，即该标记提供的一些因事件触发而驱动指定脚本程序运行的属性，见表如下：,上表中这些事件驱动属性使用的一般格式为：说明：Function()是在页面中其他位置定义的脚本处理函数过程，可能要为该函数传递参数。这些处理函数也可以在外部文件中，通过引用在页面中调用。【例】页面在加载时要触发一个init()函数，背景颜色为蓝色。则正确的书写格式为：,【例2-2】综合应用实例实例题这里是HTML中非正文标记的综合应用,标题字体标记()段落标记与换行标记(标记和标记)预格式化文本标记(标记)水平线标记(标记)列表标记文字属性标记(字符格式化标记)多媒体标记超级链接标记()表格标记(),2.3HTML正文标记,一标题字体标记()浏览器对各级标题标记Hx做如下解释:(1)hl：黑体，特大字体，居中，上下各有两行空行。(2)h2：黑体，大字体，上下各有一到两行空行。(3)h3：黑体(斜体)，大字体，左端稍缩进，上下各空一行。(4)h4：黑体，普通字体，比h3更多缩进，上空一行。(5)h5：黑体(斜体)，与h4缩进相同，上空一行。(6)h6：黑体，与正文缩进相同，上空一行。,标题字体标记的一般格式为：注释：x为l，2，6；标题标记的属性align表示标题文本的对齐方式(Left:左对齐，Right:右对齐，Center:居中对齐)。【例2-3】标题字体不同的标题字体清平调李白云想衣裳花想容,春风拂槛露华浓。若非群玉山头见,会向瑶台月下逢。,二段落标记与换行标记(标记和标记)1.段落标记(标记):-表示新的一段开始，不同段之间将产生一空白行。2.换行标记(标记)：-表示新的一行开始，与换段标记区别是，将不会产生空白行。注释：标记在使用时可省略。标记是单独使用的。【例2-4】这是清平调诗，以牡丹花比贵妃的美艳。(加段落标记)首句以云霞比衣服，以花比容貌；二句写花受春风露华润泽，犹如妃子受君主宠幸；三句以仙女比贵妃；四句以嫦娥比贵妃。(加换行标记)这样反复作比，塑造了艳丽有如牡丹的美人形象。,三预格式化文本标记(标记)由于浏览器不会识别普通文本中的缩进部分和空白(空格)，这时就要使用预格式化文本标记，控制其按原输入模式显示在浏览器上。【例2-5】1.清平调诗共有三首，是李白在长安为翰林时所作。有一次，唐明皇与杨贵妃在沉香亭观赏牡丹，因命李白作新乐章，李白奉旨作了三章。,2.清平调诗共有三首，是李白在长安为翰林时所作。有一次，唐明皇与杨贵妃在沉香亭观赏牡丹，因命李白作新乐章，李白奉旨作了三章。,四水平线标记(标记)注意：标记是单独使用的标记可以在浏览器中画出一条三维带有阴影的横线，可以通过设置其属性来格式化这条横线。它的语法格式为:,【例2-6】插入水平线。第一条水平线，厚度为5个像素。第二条水平线，厚度为200个像素，对齐方式为左对齐。第三条水平线，为实心线，厚度为10个像素。,五列表标记常用的列表有3种即为无序列表、有序列表和定义列表。1.无序列表标记()一个带有项目符号(圆点或正方形，依浏览器不同系统自定)的列表称之为无序列表。以标记开始,每一个列表的条目用列表条目标记配合引导,最后以结束。注意列表条目不需要结尾标记。,标记最常用的属性是改变列表条目项目符号的type属性，其中Disc为浏览器的默认值，详见下表:,2.有序列表标记()以标记开始,每一个列表的条目用列表条目标记配合引导,最后以结束。注意列表条目不需要结尾标记。标记的type属性值除一个“1”外，其他属性值与的type属性值及其表示的意义完全相同。浏览器对标记的默认type属性值为1，即用阿拉伯数字表示项目符号。【例】,有序列表的另一个有用属性是start属性，它用来定义使用列表条目中项目符号(有序的)从特定的值开始。例如将start属性设置为2，那么使用阿拉伯数字作为项目符号标记的列表将从编号2开始显示其列表条目。,【例】,3.定义列表标记()作为起止标记，列表条目用引导，列表条目的说明用来引导。与标记均不需要结尾标记。说明：定义列表标记没有type属性，而且定义列表的条目标记没有任何属性。【例】乔丹一个超级篮球巨星。贝克汉姆一个超级足球巨星。邓亚萍一个超级乒乓球巨星。,在浏览器中的输出效果如下图所示：,有序列表：第一章第二章无序列表：第一章第二章定义列表：第一章说明：第一章为自学内容，请认真学习第二章说明：第二章为授课内容，请提前做好预习,【例2-7】,在浏览器中的输出效果如下图所示：,六.文字属性标记(字符格式化标记)文字属性元素的标记有Font，BIG，I，U，B，Hl，H2，H6等，下面分别介绍其用法。.()标记:-用来格式化文本，使浏览器按照指定的字体类型、字体大小及字体颜色来显示文本。在一个HTML程序中，使用该元素标记的一般格式为：元素体主要参数说明：face:-指定相应字体，#为Arial，TimesNewRoman，宋体，隶书等。size:-指定字号大小，#为0，1，2或+#、-#。color:-指定字体颜色，#为red，blue，#000000(红绿蓝)等。:-以黑体显示文本。:-以斜体显示文本。:-带下划线的文本。,1.Color属性:-Color属性用于设置显示的文本的前景色，其属性值可以用以下3种方法来设置:用相应的颜色名。HTML中常用的颜色名如下。Black、olive、teal、red、blue、maroon、navy、gray、lime、fudrsia、white、green、purple、sliver、yellow、aqua、lightyellow和lightblue等。【例】这个字体的颜色是蓝色的。使用红、绿、蓝百分比的RGB值。【例】这个字体的颜色是红色的。使用16进制数值。对应RGB颜色的顺序,共6位16进制的数值,前2位表示红色所占比例,中间2位表示绿色所占比例,最后2位表示蓝色所占比例(红绿蓝)。【例】这个字体的颜色是绿色的。,2.Face属性:-Face属性设定字体类型，在程序中可以同时指定3种字体。若浏览器不支持第1种字体，则使用第2种；不能使用第2种，则使用第3种。如果3种均不支持，则浏览器将按照自身默认的字体来显示。其属性值是字体的名称。【例】这里是要显示的文本3.Id属性:-Id属性用于设置某段文本的一个标识性的属性值，当前页面上其他位置可以通过引用这个Id值来引用该段文本。【例】Jackyisthefirstuser.4.Size属性:-Size属性用于设置字体的相对大小，包括0,1,2,3,4,5,6,7,可以为正或负。【例】这里是要显示的文本,另外，Size属性可以通过设置一个相对变化量来设置字体的大小，该变化量相对于浏览器默认的字体大小或者通过Basefont属性设置字体大小的基值。【例】这里显示的文本比基值大1号。5.Font-size属性:-Font-size属性使用磅值作为字体大小的单位。【例】这里的文本是10磅的。说明：这个属性只能在NetscapeNavigator浏览器中使用。如果要实现同样的功能，IE中一般使用CSS技术控制字体控制。6.Weight属性:-用于设置文本字体的粗细程度，最小值为100。【例】这里的文本的粗细程度为100。说明：这个属性只能在NetscapeNavigator浏览器中使用，IE不支持。,.BIG、B、I和U标记:-这4个标记都需要开始标记和结尾标记相对应(这4个标记都必须使用结尾标记)，使用方法完全一致，而且都没有属性。1.标记:-BIG标记用于使浏览器将当前显示的文本字体增大一号，它只是一个简单的文本“容器”。【例】这里文本的字体被放大了一号。2.标记:-B标记用于使浏览器将当前显示文本变成粗体字，它只是一个简单的文本“容器”。【例】这里文本的字体是粗体的。3.标记:-I标记用于使浏览当前显示文本变为斜体字，它只是一个简单的文本“容器”。4.标记:-标记用于使浏览器当前显示文本变成带有下划线的式样，它是一个简单的文本“容器”。,标题标记Hx:-标题元素共有6种，标题号x越小，则表示的标题字体就越大。浏览器对各级”标题标记Hx”做如下解释:1.hl：黑体，特大字体，居中，上下各有两行空行。2.h2：黑体，大字体，上下各有一到两行空行。3.h3：黑体(斜体)，大字体，左端稍缩进，上下各空一行。4.h4：黑体，普通字体，比h3更多缩进，上空一行。5.h5：黑体(斜体)，与h4缩进相同，上空一行。6.h6：黑体，与正文缩进相同，上空一行。标题标记格式化文本的一般格式为：其中，x的取值为l到6。6个标题标记都必须使用结尾标记。关于标题标记的属性，只有一种是比较常用的，即”对齐属性align”属性共有3个值可以供选择：(1)LEFT：表示将所格式化的文本进行左对齐。(2)RIGHT：表示将所格式化的文本进行右对齐。(3)CENTER：表示将所格式化的文本进行居中对齐。,【例】标题一，左对齐标题三，居中对齐标题六，右对齐【例2-8】字体格式化的综合应用对清平调的评论诗人采用云、花、露、玉山、瑶台、月色，一色素淡字眼，赞美贵妃的丰满姿容，却不露痕迹。注释：为“段落标记”，标记在使用时可省略。,在浏览器中的输出效果如下图所示：,七.多媒体标记：-常用标记有IMG和EMBED。.图形标记IMG(IMG标记没有结尾标记)IMG使用的一般格式为：说明：IMG标记没有结尾标记；SRC属性是必须使用的，该属性指定目标图片的存放地址。,1.Align属性:-该属性设置图片与周围其他Web元素对齐的方式，可取值很多(top-顶、middle-中间、bottom-底、left-左、right-右)，两个常用值如下:left:-将图片与其他元素按左对齐。【例】right:-将图片与其他元素按右对齐。【例】2.Alt属性:-在页面上由于某种原因使得图片不能正常显示，则用该属性指定的文本值替换特定的图片。【例】3.Lowsrc属性:-当某个图片比较大时，为了节省用户下载Web页面的时间，可用这个属性来显示一个分辨率比较低的图片。【例】,4.Title属性:-Title属性的值用来附加给HTML页面中的图片元素，当用户把鼠标放在图片上一段时间之后，该段文本就会以淡黄底色、黑色前景色显示在一个小矩形方框之中。【例】.插入标记Embed:-常用来为使用浏览器的用户提供插入式程序，如动画和视频等。网页上常用的.SWF格式的矢量动画，就是用该标记插入到HTML程序中的。另外，视频剪辑(*.avi)也需要这个标记插入在程序中。【例】在页面中插入一个文件名为flash.SWf的矢量动画,八.超级链接标记().相对地址和绝对地址1.相对地址:-是链接对象与链接的主体文件在同一个机器的同一个硬盘分区中，这也是大多数Web页面的组织方式。链接引用的地址称为相对地址，分为3种情况:.链接对象和链接主体文档在同一个目录下。【例】链接主体为source.htm，链接对象为target.htm，二者在硬盘上存放的地址都是cAmyWebWebsite，那么超级链接的链接主体只需要引用对象的文件名(target.htm)即可。.链接对象与链接主体文档不在同一个目录下，但是链接对象在链接主体所在目录的下级目录的某个子目录中。【例】链接主体为source.htm，链接对象为target.htm，二者在硬盘上存放的地址分别为c:myWebWebsitesource.htm和c:myWebWebsiteHTMLtarget.htm，那么主体需要引用的对象名为HTMLtarget.htm。,.链接对象与链接主体文档不在同一个目录下，但是链接对象在链接主体所在目录的上级目录的某个子目录中。【例】链接主体为source.htm，链接对象为target.htm，二者在硬盘上存放的地址分别为c:myWebWebsitesource.htm和c:myWebWebpagestarget.htm，那么主体需要引用的对象的名为.Webpagestarget.htm。提示：符号.表示回到上一级目录。如果需要返回多级目录，则可叠加使用。【例】返回两级目录，可表示为.somedirsome.htm。2.绝对地址:-需要链接的对象在另外一个网站上，那么就需要把对象的地址全部写出。【例】引用某个站点的首页，则绝对地址为：,.超级链接标记()其基本格式为：链接主体,1.内部链接:-链接到本地计算机上的文件。【例】请点击1.htm文件内容2.外部链接：-链接到非本地计算机上的文件，可以是其他计算机上的文件或其他任何一个站点的某个文件。【例】欢迎光临中国爱心网站3.E_mail链接：-链接到一个电子油箱地址。【例】请给我发信4.锚点链接：-在某个Web页面中创建一个被称为“锚”的标识，让同页面上的另外一个位置引用。相当于在某个文件中重要处做上书签，需要该部分时直接查找书签就能找到此部分。【例】在某HTML文档中定义一个first的锚：这里是一个锚然后在该文档的另外一个位置使用href属性来指定它：指向同页中的一个锚,【例】当两个主题需要相互参考，即需要从一个链接点链接到另外一个锚，然后从该锚回到原来的链接点，可以采用下面的方法实现:我是第1个锚，指向第2个锚其他东西我是第2个锚，指向第1个锚5.用图片做链接:-格式为：【例】用硬盘上的home.gif图片作为链接指针指向某网站的首页。说明：border=0表示显示的图片无外框。,.在浏览器中打开新的链接地址时，往往是在同一窗口中显示的。如要改变打开窗口的方式，则必须设置Target参数。Target属性:-有如下4个属性值。blank：将链接对象显示在一个新打开的空白浏览器窗口中。Self：将链接对象显示在原网页所在的浏览器窗口中。为未指定Target属性值的默认值。Top：将链接对象显示到浏览器的整个窗口中，即填充到没有框架的全部浏览器窗口。如果原页面没有框架，则这个属性值与self的效果相同。parent：将链接对象显示在该浏览器窗口的父窗口中。如果页面由若干个框架组成，则可以为target属性赋予某个框架名，然后链接的对象就会在指定的框架中显示。,九.表格标记()通常将表格分解成以下5部分：1.表格标记，用来定义一个表格。2.表格标题，用来提供一个标题。3.表格行标记，用来指明表格中一行的开始和结束。4.字段名标记，在一列或一行中标识列名或行名。5.数据标记，表格内的数据。,【例2-9】,在浏览器中的输出效果如下图所示：,表中比较重要的table标记的属性如下：(1)Border和Bordercolor属性:-分别为表格边框设置边框宽度和边框颜色。【例】某个表格的边框宽度设置为1个像素，颜色为蓝色，其代码为：(2)Cellpadding属性:-设置单元格边框与内容之间的距离。默认为1个像素。(3)Cellspacing属性:-设置单元格之间的距离。默认为1个像素的距离。注意：一定要注意Cellspacing与Cellpadding属性的差异。Cellspacing表示表元之间的距离，而Cellpadding定义表元中元素与边框间的距离。,(4)Rules属性:-Rules属性及其表示的意义见下表：,(5)Frame属性:-设置表格外围边框的显示方式，详见下表：,在数据标记中有两个属性需要特别说明:Colspan属性:-表示此单元格横向跨越的列数。Rowspan属性:-表示此单元格纵向跨越的行数。【例】1234567,以上代码既有跨行，又有跨列的表格，效果如下图所示：,注意：在设置表格的宽度和高度时，,可为height和width赋予一个数值，当用户缩小窗口时，表格的长度和宽度按照比例缩小，表格中的元素看起来有一种被“挤压”的感觉(若表格的代码直接写在容器中，则其百分比参照系就是浏览窗口)。而用像素值表示，则不会产生变化。,一、表单标记()表单是实现与用户进行信息交流的主要方式，它分成以下两块：1.表单标记()：-用于指明处理数据的方法。2.表单域：-提供收集用户信息的方式，如产生文本框还是选择框等。表单的语法格式为：插入相应的表单域标记,2.4HTML特殊标记,参数说明：.name=名字：-给出该表单的名称。.action=“文件”：-是一个URL，说明当这个表单提交后，将传送给哪个文件处理。即它指向服务器端的某个ASP处理文件的地址。这个地址可以是相对地址，也可以是绝对地址。另外，这个URL也可以是一个“mailto:”语句。.method=“方式”：-指定表单的提交方式即服务器交换信息时所使用的方式，一般选择POST(以文件形式不限制长度提交)或GET(附加在URL地址后限制长度提交)。一般来说，如果需要传送的数据量比较大，那么建议采用POST方式传送数据；如果数据量相对较小，那么建议采用GET方法，好处是传递速度快，不易出错。.凡涉及给定表单名称或指定处理文件等，请使用英文或数字书写。切不可用中文！,另外，为了在客户端进行一些基本的数据检验处理等基础工作，标记提供了一些事件。最常用的是onsubmit事件发生在用户提交表单时，onreset事件发生在用户刷新所填写的表单时。二、表单控件:-常用的表单控件有文本输入框、按钮、单选框、复选框和下拉列表框，其中：创建单行文本框、按钮、单选框和复选框的用标记来完成(标记是单独使用的)；创建多行文本框是用标记来完成；创建下拉列表框用标记来完成。,标记可以定义的控件有以下几种:(标记是单独使用的)(1).Text：单行明码文本输入框。(2).Password：密码输入框。(3).Checkbox：复选框。(4).Radio：单选框。(5).Button：一般按钮。(6).Submit：表单提交按钮。(7).Reset：刷新表单按钮。(8).File：文件按钮。(9).Hidden：隐藏元素。(10).Image：图像控件元素。,1.文本域:-分为三类：.单行文本域，语法格式如下：.密码文本域，如法格式如下：.多行文本域，语法格式如下：2.选择域.单选域，语法格式如下：.复选域，如法格式如下：,3.按钮域.提交按钮，语法格式如下：.重置按钮，语法如下：4.菜单域，分为两类：.下拉菜单，语法格式如下：菜单中的第1个值菜单中的第2个值菜单中的第3个值.滚动菜单，语法格式如下(默认为不支持多选)：菜单中的第1个值菜单中的第2个值菜单中的第3个值,【例2-10】表单的综合应用请填写如下个人信息：姓名：性别：男女出生年月：所在城市：北京天津长沙,个人爱好：看书打球看电视泡网吧个人简介:注释：在程序中设置的男、女单选域名均为r1，其作用就是避免在网页中两者都可选。,三、框架标记()1.框架的基本格式利用框架可以将窗口横向或纵向分成多个部分，还可以混合框架。框架由指定，允许层次嵌套，各栏显示的页面用指定(标记是单独使用的)。语法格式如下：说明：的属性rows和cols用于指定横向还是纵向分割窗口，引号内可用3种数据表示方式：百分数、像素值、剩余值*。被分割成几个窗口就应