1、本章导读由于ASP程序一般是内嵌在HTML标记中的，而且ASP程序在服务器解析之后，将结果也是以HTML源码形式传送给客户端，所以正确认识和理解HTML标记语言是学习和制作ASP网页的客观要求。知识要点：HTML概述文本格式排版布局列表图片和视频超链接和热点链接表格表单框架多媒体n2.1.1 HTML语言标记n2.1.2 HTML文档的结构文档的结构 2.1 HTML概述概述 HTMLHTML语言标记是由英文单词或其缩略字母和一对定界符（语言标记是由英文单词或其缩略字母和一对定界符（）共同组成，如共同组成，如和和、和和等。每一等。每一个标记有一系列属性。标记约定、描述、标识了信息内容，个标记有
2、一系列属性。标记约定、描述、标识了信息内容，属性控制了信息内容显示效果。标记和属性共同控制网页内属性控制了信息内容显示效果。标记和属性共同控制网页内容及其效果，语法格式如下：容及其效果，语法格式如下：格式：格式：信息信息内容内容/说明：说明：标记名、属性名和属性值不区分字母大小写；标记名、属性名和属性值不区分字母大小写；标记名和属性名之间，属性名和属性名之间要适当空格；标记名和属性名之间，属性名和属性名之间要适当空格；属性使用的个数是没有限制的，使用多个属性时，属性之间属性使用的个数是没有限制的，使用多个属性时，属性之间没有先后顺序；没有先后顺序；绝大数标记都是成对出现的，也绝大数标记都是成对
3、出现的，也有标记是单标记，没有结束有标记是单标记，没有结束标记。标记。2.1.1 HTML语言标记语言标记 HTML语言标记内容丰富，从功能上大体可分为：文本结构设置、文本格式标记、排版布局、列表、图片和视频标记、超链接和热点链接、表格、表单、框架和多媒体。虽然内容丰富，但HTML文档结构简单，通常包括html、head、body三部分，基本结构如下：标题部分 正文部分 2.1.2 HTML文档的结构文档的结构 说明：文档标记，处于最外层，一般来说html文件总是以开头，又以结束，整个html文件的所有内容都包括在这对标记之中。：文件头标记，位列文档开始部分，一般包括，等文件头元素，这些元素不
4、属于文件本体。下面简要介绍head部分所包含标记元素的功能及用法:2.1.2 HTML文档的结构文档的结构：定义网页标题，其中包含的文字或符号，将会显示在浏览器窗口的标题栏。第二章HTML语言：定义网页相关说明信息，其中定义的信息是不显示的，包括以下几种。l 定义搜索关键字，提供给搜索引擎使用，常见的两种用法：l 控制页面缓存，设置打开的网页是否总是最新版本：l 设定网页字符编码的解码方式，如简体中文：l 设定自动刷新页面时间(聊天室常用)：2.1.2 HTML文档的结构文档的结构：指定当前文档和其它文档之间的联接关系。注释：rel说明两个文档之间的关系；href说明链接目标文档名，.css说
5、明文档是层叠样式表，有关CSS详细信息请参照有关CSS书籍。：定义超链接的基准地址目录。：用来在页面中加入脚本程序。：指定当前文档的css层叠样式表。css对于网页的字体样式 背景 边界等都有很大的应用。有关css详细内容请参阅相关书籍。2.1.2 HTML文档的结构文档的结构：文件主体标记，是Html文档的主体部分，页面内容其它标记一般都位列其中，标记有很多属性，用于定义网页总体风格，常见属性如表2-1所示：注意：颜色有三种表示方法，分别如下：16进制颜色代码格式：#RRGGBB；10进制RGB码格式：RGB(RRR，GGG，BBB)；直接写出颜色英文名称，如Black White Gree
6、n Maroon Olive Navy Purple Gray Yellow Lime Agua Fuchsia Silver Red Blue和Teal。长度表示方法有两种，即绝对长度和相对长度。它们的单位分别是像素(pixel)和百分比(%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户端浏览器的多少。link，alink，vlink属性的用法已经不使用了，多数是在文件头中加入相应的CSS代码，以达到需要的效果。2.1.2 HTML文档的结构文档的结构 2.2 文本格式标记文本格式标记 n2.2.1 标题标记标题标记(Header)n2.2.2 字体标记字体标记 n2.2.3 字
7、形变化标记字形变化标记 n2.2.4 特殊字符特殊字符 2.2.1 标题标记标题标记(Header)n格式：n说明：标题字体的大小一共有六级（#=1，2，3，4，5，6），从到依次减小，标记中h后面的数字越大标题文本就越小。使用标题标记时，字体变成粗体字，并且会自成一行。align属性用来设置标题的对齐方式，其中left表示左对齐，center表示居中对齐，right表示右对齐。2.2.2 字体标记字体标记 n格式：n或者：n说明：face指定网页的字体名称；color指定文字颜色；size指定文字大小。也可以写成：文字内容，表示比预设字大（小）一级。n改变文字大小的预设值，直接加在标记之后就
8、行了。一般而言，若是没有特别预设，文字大小预设值默认为3。2.2.3 字形变化标记n文字的字形也有相当多的变化，如粗体、斜体等，HTML定义了许多特殊的字形或字体来强调、突出、区别以达到提示的效果。2.2.4 特殊字符特殊字符 n很多特殊的符号无法直接显示在网页上，比如说需要特别处理才能显示。常用的特殊符号如表2-3所示：特殊或专用字符字符代码特殊或专用字符字符代码>×&®"空格 2.3 排版布局排版布局 n2.3.1 段落标记段落标记 n2.3.2 段中分行和禁止分行标记段中分行和禁止分行标记n2.3.3 段落向右缩进标记段落向右缩进标记
9、n2.3.4 块置中标记块置中标记 n2.3.5 分区显示标记分区显示标记n2.3.6 水平分隔线标记水平分隔线标记n2.3.7 注释标记注释标记n2.3.8 预定格式标记预定格式标记 2.3.1 段落标记段落标记格式：或者：说明：强制段中换行，clear属性用来控制文字和图片的位置，取值及含义如下：l none：文字换行后，直接排列在之前的下一行；l left：换行文字移至图片下方，靠左对齐；l right：换行文字移至图片下方，靠右对齐；l all：换行文字移至图片下方对齐；：不换行。2.3.2 段中分行和禁止分行标记段中分行和禁止分行标记格式：n说明：加入的文字，全部往右缩进一单位。而且
10、每加一组标记，往右缩进一单位，如加两组标记，往右缩进两单位，依此类推。2.3.4 块置中标记块置中标记 n格式：n说明：最常用到的标记之一，将文字 图片 表格等任何可以显现在网页上的对象置中对齐。2.3.6 水平分隔线标记n格式：n说明：插入水平线，常见属性说明如表2-4所示：2.3.7 注释标记格式：n说明：注释内容不会在浏览器中显示出来，仅用于对网页有关内容说明。2.3.8 预定格式标记格式：n说明：将其中包含的文字排版和字体格式，原样展现在网页上。2.4 列表标记列表标记 n2.4.1 无序列表无序列表 n2.4.2 有序列表有序列表 n2.4.3 自定义列表自定义列表 2.4.1 无序
11、列表无序列表格式：说明：无序列表是指没有进行项目编号的列表。type属性用来指定列表的项目符号，可取值circle（空心园），square（小方块），disc（实心园，默认值）。注意书写时必须小写。2.4.2 有序列表有序列表格式：说明：有序列表是指带有先后顺序编号的列表，如果插入和删除一个项目，编号会自动进行调整。type属性用来指定列表的项目编号类型，其中1表示列表的项目编号用数字标号(1，2，3)表示；A表示列表的项目编号用大写字母标号(A，B，C)表示；a表示列表的项目编号用小写字母标号(a，b，c)表示；I表示列表的项目编号用大写罗马数字标号(，)表示；i表示列表的项目编号用小写罗马
12、数字标号(i，ii，iii)表示。2.4.3 自定义列表自定义列表 格式：第1项 注释1第2项 注释2第3项 注释3说明：自定义列表的标记也叫描述性项目列表，这种方式很少用。定义列表默认为两个层次，第一层为列表项标记，第二层为注释项标记，注释项默认显示在另一行中。和标记通常是成对使用的，一个列表项标记也可以对应几个注释项标记。2.5 图片和视频标记图片和视频标记 n2.5.1 图片标记n2.5.2 视频标记视频标记 2.5.1 图片标记n格式：n说明：插入一个行内图像，常见属性如下：nsrc=：指定图像的文件名和路径；nalt=：指定鼠标指向图像时的提示文字；nalign=：指定图像和文字之间
13、的排列属性，可选值及含义如表2-5所示 2.5.1 图片标记nborder=：指定图像边框宽度；nhspace=：指定图像离左右文字的水平距离；nvspace=：指定图像离上下文字的垂直距离；nheight=：指定图像高度大小；nwidth=：指定图像宽度大小；nlowsrc=：指定显示设定低分辨率图片。2.5.2 视频标记视频标记 n格式：n说明：插入一个视频文件，常见属性如下：ndynsrc=avi文件地址：指定视频的文件名和路径；nloop=：指定avi文件循环播放次数，取值-1时始终播放；nloopdelay=：指定avi文件循环播放延迟时间；nstart=：指定avi文件播放方式，可
14、取值fileopen或mouseover。2.6 超链接和热点链接超链接和热点链接 n超链接可以说是网页中最具活跃的标记，通过它可以轻易地在不同网站之间，不同网页之间跳来跳去，构画出丰富多采的WWW世界。超级链接除了可链接文本外，也可链接各种媒体，如声音、图像、动画等。n按照目标页面的特征，可以将超链接分为以下两种形式：n(1)文件链接：这种链接的目标页面是一个文件，它可以是当前站点的网页，也可以是其它站点的页面，或者E-mail链接等。n(2)锚点链接：这种链接的目标是网页中的一个位置，通过这种链接可以从当前网页当前位置跳转到当前页面或其它页面中的另一个位置。2.6.1 文件链接文件链接 格
15、式：超链接文本(1)href：必选属性，指定目标页面的URL地址，URL地址由协议、域名路径、文件名构成；说明：(2)target：可选属性，指定目标文档的窗口打开模式，可取值既可以是窗口或框架的名称，也可以选值为_blank，_parent，_self，_top；有关target取值及其含义请参阅2.9节；(3)title：可选属性，用于指定鼠标指向超链接时所显示的提示文字。文件链接的链接方法根据具体应用不同而有所不同，主要有如下几种：l 网页文件链接 合肥学院l 电子邮件链接 写信给我 ftp链接 FTP服务 2.6.2 锚点链接锚点链接 格式：文本提示文本说明：创建一个指定名称的书签(记
16、号)，名称由name属性指定；建立锚点链接关系，href属性值由“#”号引导且必须与name属性值一致；可以在不同页面中建立锚点链接，例如在test.htm页面中建立一个top记号，在其它页面跳转到该锚点，代码如下：跳转到test.htm页的top位置 2.6.3 热点链接热点链接 图像的链接和文字的链接方法是一样的，都是用标记来完成，只要将标记放在和之间就可以了。在HTML中还可以把一幅图片划分成不同的热点区域，分别链接到不同网页资源，这就是热点链接，又称为影像地图。热点链接基本结构如下：说明：在标记中一定要设置usemap参数值来自定义“图像地图名称”，且必须与标记中的name参数值相同；
17、在标记中定义热点区域，同一“图像地图”中的所有热点区域都要在图像地图的范围内，即所有标记均要在与之间；shape属性定义热点区域形状，取值可以是矩形rect，圆形circle，多边形poly；coords属性定义热点区域的坐标列表，coords 属性设定的坐标格式要与shape属性设定的作用区域形状匹配；shape属性和coords属性相匹配语法格式示例如下：a）矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标。例：b）圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度。例：c）任意图形(多边形)：将图形之每一转折点坐标依序填入。例：2.7 表格表格
18、表格在网页应用中非常广泛，表格不但可以固定文本或图像的输出位置，而且也可以辅助设置背景和前景的颜色。大型网站一般借助于表格来布局和排版，把相互关联的信息元素集中定位和管理。n2.7.1 2.7.1 表格结构表格结构 n2.7.2 2.7.2 表格标题表格标题 2.7.1 2.7.1 表格结构表格结构表格的所有标记都必须完整地放入标记对之中，一个表格一般是通过，标记来共同完成的，基本结构如下：说明：定义一个表格，标记有很多属性，用来设置表格整体风格，最常用的属性如表2-6所示：定义一行，行标记内可以建立多组由或标记所定义的单元格。标记除了有与标记一样的属性，还有valign(垂直对齐)属性，取值
19、为top、middle、bottom，这些属性设置只影响标记对内的内容。：定义表格表头单元格，通常是黑体居中文字显示，基本类似标记，表格中也可以不用此标记，标记须放在标记内。：定义单元格，一组标记建立一个单元格，标记必须放在标记内，标记除了有与标记一样的属性，还有colspan(向右合并单元格数)，rowspan(向下合并单元格数)，nowrap(禁止单元格内的内容自动断行)，这些属性设置只影响标记对内的内容。2.7.2 表格标题表格标题 n格式：n说明：应紧跟在标记之后，在表格行标记标记之前。align和valign分别用来设置标题的水平和垂直位置，缺省时，标题位于表格的上方中间位置。2.8
20、 表单n表单的功能是给访问者输入信息，从而实现系统与用户交互。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作后，表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html标记来设计表单。n2.8.1 表单结构表单结构 n2.8.2 表单控件表单控件 n2.8.3 表单控件分组表单控件分组 2.8.2 表单控件表单控件 表单控件多种多样，按照功能和形式大致分为三种：输入型控件，文本域，下拉式列表框。1.输入型控件格式：说明：该标记是单标记，没
21、有结束标记；type属性指定输入型控件的类型，控件类型不一样，附加属性也不相同，常见的控件类型及附加属性如表2-7所示：2.8.2 表单控件表单控件 value=：设定控件的预设内容或标签值；name=：设定控件的名称，单选按钮，要求name属性值相同，asp程序中会用到；size=：设定控件的输入区在页面占位的字符宽度；maxlength=：设定控件可输入的最大字符长度；align=：设定控件的对齐方式，其值有：top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对
22、齐)、absmiddle(绝对置中)、absbottom(绝对置下)等；checked：设定控件是否默认被选；src=：指定图像按钮控件的图像url地址。2.8.3 表单控件分组表单控件分组 n在html语言中，可以使用标记对表单控件进行分组，从而将表单分为更小 更易于管理的部分。标记必须包含标记，以提供控件组的标题，在之后可以跟其他表单控件，也可以嵌套。使用标记对表单控件进行分组时，语法格式如下：nn控件组标题n组内表单控件n2.9 框架n框架就是把一个浏览器窗口划分为若干个子窗口，每个子窗口可以显示不同的URL网页。在浏览器中使用框架，可以非常方便地同时浏览不同的页面，也可以非常方便的完成
23、网页导航工作，基本结构如下：n nnnnnnnn提示文本或图像nnn说明：html页面的文档标记被框架集标记所取代；标记有很多属性，用于设定框架的总体风格，常见属性如表2-9所示：标记定义子窗口，标记必须放在框架集之中，分割了几个子窗口就必须对应几个标记，而且每一个标记内还必须设定一个事先编辑好的网页文件(src=*.html)，其常用属性如表2-10所示：标记对也是放在标记对之间，用来在那些不支持框架的浏览器中定义“提示文本或图像信息”。在此标记对之间先紧跟标记对，然后才可以使用任何其它HTML标记符号。target=指定目标文档的窗口打开模式，取值及意义如下：_blank：空白窗口，在未命
24、名的新窗口中打开目标文档；_parent：父级窗口，当框架有嵌套时，在当前文档窗口的父窗口中打开目标文档；_self：当前窗口，在当前的框架窗口中打开目标文档；_top：顶层窗口，载入整个浏览器窗口。2.10 多媒体多媒体 n2.10.1 背景音乐标记背景音乐标记 n2.10.2 滚动字幕滚动字幕 n2.10.3 嵌入式多媒体标记嵌入式多媒体标记 2.10.1 背景音乐标记背景音乐标记 格式：说明：该标记只能适用于IE，常见属性如表2-11所示。属 性 名功 能src=指定文件名和路径balance=指定左右声道平衡取值(-10001000)loop=指定音乐播放次数，取值-1反复播放volume=设置音乐的音量delay=重复播放音乐之间的间隔时间2.10.2 滚动字幕滚动字幕格式：说明：实现元素在网页中移动的视觉效果。常见属性如表2-12所示 2.10.3 嵌入式多媒体标记格式：说明：单标记，插入嵌入式多媒体文件，常用属性如表2-13所示。
