ASP程序设计及实训指导

《ASP程序设计及实训指导》第2章HTML语言基础专业课第2章HTML语言基础主讲:刘凤玲《ASP程序设计及实训指导》第2章HTML语言基础内容简介：本章主要讲授HTML语言的使用,内容包括:文本编辑的基本方法多媒体和超链接制作表格框架结构使用CSS格式化网页《ASP程序设计及实训指导》第2章HTML语言基础学习目的与要求：掌握HTML语言的使用掌握文本编辑的基本方法了解多媒体和超链接了解制作表格了解框架结构掌握使用CSS格式化网页《ASP程序设计及实训指导》第2章HTML语言基础重点：HTML语言的使用难点：HTML语言中的各标记的使用《ASP程序设计及实训指导》第2章HTML语言基础第2章HTML语言基础2.1HTML语言概述2.2文本编辑的基本方法2.3多媒体和超链接2.4制作表格2.5框架结构2.6使用CSS格式化网页2.7技能与实训2.8思考与练习《ASP程序设计及实训指导》第2章HTML语言基础2.1HTML语言概述2.1.1HTML语言简介HTML（HyperTextMarkupLanguage超文本置标语言）是一种用来制作超文本文档的简单标记语言。一个html文件应具有下面的结构：htmlhtml文件开始head文件头开始文件头/head文件头结束body文件体开始文件体/body文件体结束/htmlhtml文件结束《ASP程序设计及实训指导》第2章HTML语言基础2.2文本编辑的基本方法在大多数网页中，文本是网页的核心，只有适当地对文本进行编辑，才能够得到丰富多彩的网页，很好地突出网页主体。《ASP程序设计及实训指导》第2章HTML语言基础2.2.1网页体bodybody…/body作为网页的主体部分，可以设置很多的属性，这些属性用于定义网页的总体风格。例如，bgcolor属性用来指定网页背景颜色，background来指定网页背景图片，当设置了背景颜色时，背景图片被覆盖。《ASP程序设计及实训指导》第2章HTML语言基础2.2.2字体fontfont元素的属性有color、size、face等。color属性指定字体的颜色，其数值含义与网页背景颜色参数相同，不再赘述，如果不设置该属性，则默认字体颜色为黑色。Size属性指定字体大小，其值从1到7表示字体从小到大。Face属性设置字体格式，例如宋体。《ASP程序设计及实训指导》第2章HTML语言基础2.2.3标题hn标题元素共有6种，为h1、h2、h3、h4、h5、h6，用于表示文章中各种题目，标题字号越小，字体越大。Hn可以设置对齐属性，如align=left，align=center，align=right分别表示居左,居中，居右对齐方式，不设置该属性时，默认为居左对齐。《ASP程序设计及实训指导》第2章HTML语言基础2.2.4分段p文本分段完全依赖于分段元素p。p标签也可以有多种属性，例如align属性可以控制其对齐方式，clear属性可以控制图文混排方式，align属性同hn元素，而clear属性含义为：clear=left：下一段显示在左边界处的空白区域。clear=right：下一段显示在右边界处的空白区域。clear=all：下一段的左右两边都不许有别的内容。《ASP程序设计及实训指导》第2章HTML语言基础2.2.5列表list列表用于列举内容，常用的列表有如下三种格式：无序列表、有序列表和自定义列表2.2.5.1无序列表无序列表用ul开始，列表中的每一个条目都用li引用。注意，列表条目不需要结尾标签/li，输出时每一个列表条目缩进，并且以黑点表示。《ASP程序设计及实训指导》第2章HTML语言基础2.2.5.2有序列表有序列表用ol开始，列表中的每一个条目也都用li引用。有序列表为数字方式。2.2.5.3自定义列表与上述两种列表不同的是，自定义列表用于对列表条目进行简单说明，用dl开始，列表条目以dt为引导，说明用dd。《ASP程序设计及实训指导》第2章HTML语言基础2.2.6预定格式pre在编辑文档时，希望在浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，这时可以使用pre标记。使用pre标记时，默认使用2号字体（10磅）。《ASP程序设计及实训指导》第2章HTML语言基础2.2.7居中center很多元素都有对其方式属性align，例如段落p、表格table、标题hn、单元格td等，其用法如下：palign=center段落居中tablealign=center表格居中h1align=center标题居中tdalign=center单元格内容居中也可以直接使用center/center元素使所包含内容居中显示。《ASP程序设计及实训指导》第2章HTML语言基础2.3多媒体和超链接多媒体和超链接在网页中起着非常重要的作用。多媒体可以使网页更加丰富多彩，超链接使包含不同信息的网页连接在一起，这在资源共享的时代非常重要。《ASP程序设计及实训指导》第2章HTML语言基础2.3.1插入多媒体1.插入图像插入图像的格式为img…/img。含有的属性有：图像来源位置src、图像宽度width、图像高度height、替代文字alt、图像边框border、对齐方式align等。2.插入视频或动画用img插入视频或动画时。含有的属性有：多媒体来源位置dynsrc、播放次数loop、两次播放的时间间隔loopdelay、指定何时开始播放start等。其中，loop取值为-1或infinite时，表示无限次循环播放。《ASP程序设计及实训指导》第2章HTML语言基础2.3.2加入超链接创建超链接就是在当前页面与其他页面间建立链接。创建超链接使用a…/a标记。含有的属性有：链接目标的位置href、显示链接目标的框架target等《ASP程序设计及实训指导》第2章HTML语言基础2.4制作表格表格在网页中应用非常广泛一个表格由〈table〉开始，〈/table〉结束，表的内容由〈tr〉,〈th〉和〈td〉定义。〈tr〉说明表的一个行，表有多少行就有多少个〈tr〉；〈th〉说明表的列数和相应栏目的名称，有多少个栏就有多少个〈th〉；〈td〉则填充由〈tr〉和〈th〉组成的表格。是否用表格线分开为部分内容用border属性说明。《ASP程序设计及实训指导》第2章HTML语言基础2.4.1有通栏的表1.有横向通栏的表用〈thcolspan=#〉属性说明。colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。2.有纵向通栏的表用rowspan=#属性说明。rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用〈/tr〉明确给出一横向栏目结束,这是和表的基本形式不同的。《ASP程序设计及实训指导》第2章HTML语言基础2.4.2表的大小、边框宽度、表格间距1.表的大小用width=#和height=#属性说明。前者为表宽，后者为表高，#是以象素为单位的整数。2.边框宽度由border=#说明，#为宽度值，单位是象素。3.表格间距即划分表格的线的粗细用cellspacing=#表示，#的单位是象素。《ASP程序设计及实训指导》第2章HTML语言基础2.4.3表中文本的输出1.文本与表框的距离用cellpadding=#说明。2.表格的后度大于其中的文本后度时，文本在其中的输出位置与用align=#说明。3.表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。《ASP程序设计及实训指导》第2章HTML语言基础2.4.4浮动表格所谓浮动表格是指表与文件中重中内容对齐时，若在现在位置上不能满足其对齐方式，表格含上下移动，即挤开一些内容，直到满足其对齐要求。浮动属性一般由align=left或right指定。《ASP程序设计及实训指导》第2章HTML语言基础2.4.5表格颜色表格的颜色用bgcolor=#指定。#是16进制的6位数，格式为rrggbb，分别表示红、绿、蓝三色的分量。或者是16种已定义好的颜色名称，参见文本颜色。《ASP程序设计及实训指导》第2章HTML语言基础2.5框架结构2.5.1框架结构的文件格式框架将流览器的窗口分成多个区域，每个区域可以单独显示一个html文件，各个区域也可相关连地显示某一个内容，比如可以将索引放在一个区域，文件内容显示在另一个区域。框架的基本结构如下:htmlheadtitle.../title/headnoframes.../noframesframesetframesrc=url/frameset/html《ASP程序设计及实训指导》第2章HTML语言基础2.5.2框架结构的标记使用frameset…/frameset用来定义一个框架容器，frameset中可以包含多个框架，主要属性如下表：标记属性功能rows=size设置多重框架的高度cols=size设置多重框架的宽度onload=script设置框架被载入的事件onunload=script设置框架被卸载的事件《ASP程序设计及实训指导》第2章HTML语言基础2.5.3FRAME标记标记属性功能src=URL设置要链接到的HTML文件name=framename表示子窗口的名字marginwidth=size用来控制显示内容和窗口左右边界的距离，默认为1marginheight=size用来控制显示内容和窗口上下边界的距离，默认为1scrolling=scrollingstyle指定子窗口是否使用滚动条，有YES/NO/AUTO三个值，默认AUTO，即根据窗口内容决定是否有滚动条noresize使用该属性后，指定窗口不能调整窗口大小《ASP程序设计及实训指导》第2章HTML语言基础2.5.4TARGET属性的使用三种常见的用法：1．用于A标记2．用于BASE标记3．用于FORM标记《ASP程序设计及实训指导》第2章HTML语言基础2.6使用CSS格式化网页CSS（CascadingStyleSheets，层叠样式表），又称格式页。用户可以利用CSS精确地控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸等。《ASP程序设计及实训指导》第2章HTML语言基础2.6.1CSS样式表的定义1．通过HTML标记定义2．用id属性定义样式表3．使用class定义样式表2.6.2在html中加入css的方法1．嵌入式样式表2．内联式样式表3．外联式样式表4．输入式样式表《ASP程序设计及实训指导》第2章HTML语言基础2.7技能与实训设计一张网页，要求：在网页中添加一个表格。设置网页背景图片。并在相应单元格中添加相应文字和图片，设置文字字体为宋体，大小为4号字，加粗。“新浪网”、“搜狐网”、“东方教育网”分别添加链接。《ASP程序设计及实训指导》第2章HTML语言基础如图所示：《ASP程序设计及实训指导》第2章HTML语言基础2.8思考与练习1.填空题(1)HTML又称为___________语言。(2)无序列表用___________标记开始，列表中的每一个条目都用__________标记引用。(3)网页中插入图像时，设置图像来源位置使用属性___________标记。(4)表格由___________标记标识。《ASP程序设计及实训指导》第2章HTML语言基础(5)___________标记用来定义一个框架容器。(6)指定form的方法为post，动作为login.aspformname=loginFormaction=___________method=___________/form。(7)可以使用VBScript客户端的脚本___________实现向页面输出“大家