ASP程序设计及实训指导

1、专业课,第2章 HTML语言基础 主讲:刘凤玲,内容简介：,本章主要讲授HTML语言的使用,内容包括: 文本编辑的基本方法 多媒体和超链接 制作表格 框架结构 使用CSS格式化网页,学习目的与要求：,掌握HTML语言的使用 掌握文本编辑的基本方法 了解多媒体和超链接 了解制作表格 了解框架结构 掌握使用CSS格式化网页,重点：,HTML语言的使用,难点：,HTML语言中的各标记的使用,第2章 HTML语言基础,2.1 HTML语言概述 2.2 文本编辑的基本方法 2.3 多媒体和超链接 2.4 制作表格 2.5 框架结构 2.6 使用CSS格式化网页 2.7 技能与实训 2.8 思考与练习,2

2、.1 HTML语言概述,2.1.1 HTML语言简介 HTML（Hyper Text Markup Language 超文本置标语言）是一种用来制作超文本文档的简单标记语言。一个html文件应具有下面的结构： html文件开始 文件头开始 文件头 文件头结束 文件体开始 文件体 文件体结束 html文件结束,2.2 文本编辑的基本方法,在大多数网页中，文本是网页的核心，只有适当地对文本进行编辑，才能够得到丰富多彩的网页，很好地突出网页主体。,2.2.1 网页体,作为网页的主体部分，可以设置很多的属性，这些属性用于定义网页的总体风格。例如，bgcolor属性用来指定网页背景颜色，backgrou

3、nd来指定网页背景图片，当设置了背景颜色时，背景图片被覆盖。,2.2.2 字体,元素的属性有color、size、face 等。color属性指定字体的颜色，其数值含义与网页背景颜色参数相同，不再赘述，如果不设置该属性，则默认字体颜色为黑色。Size属性指定字体大小，其值从1到7表示字体从小到大。Face属性设置字体格式，例如宋体。,2.2.3 标题,标题元素共有6种，为h1、h2、h3、h4、h5、h6，用于表示文章中各种题目，标题字号越小，字体越大。 Hn可以设置对齐属性，如align=left，align=center，align=right分别表示居左,居中，居右对齐方式，不设置该属性

4、时，默认为居左对齐。,2.2.4 分段,文本分段完全依赖于分段元素 。标签也可以有多种属性，例如align属性可以控制其对齐方式，clear属性可以控制图文混排方式，align属性同元素，而clear属性含义为： clear=left：下一段显示在左边界处的空白区域。 clear=right：下一段显示在右边界处的空白区域。 clear=all：下一段的左右两边都不许有别的内容。,2.2.5 列表,列表用于列举内容，常用的列表有如下三种格式：无序列表、有序列表和自定义列表 2.2.5.1无序列表 无序列表用开始，列表中的每一个条目都用引用。注意，列表条目不需要结尾标签，输出时每一个列表条目缩进

5、，并且以黑点表示。,2.2.5.2有序列表 有序列表用开始，列表中的每一个条目也都用引用。有序列表为数字方式。 2.2.5.3自定义列表 与上述两种列表不同的是，自定义列表用于对列表条目进行简单说明，用开始，列表条目以为引导，说明用。,2.2.6 预定格式 在编辑文档时，希望在浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，这时可以使用标记。使用标记时，默认使用2号字体（10磅）。,2.2.7 居中 很多元素都有对其方式属性align，例如段落、表格、标题、单元格等，其用法如下： 段落居中 表格居中 标题居中 单元格内容居中 也可以直接使用元素使所包含内容居中显示。,2.3 多媒体和超链

6、接,多媒体和超链接在网页中起着非常重要的作用。多媒体可以使网页更加丰富多彩，超链接使包含不同信息的网页连接在一起，这在资源共享的时代非常重要。,2.3.1插入多媒体,1. 插入图像 插入图像的格式为。含有的属性有：图像来源位置src 、图像宽度width、图像高度height、替代文字alt、图像边框border、对齐方式align等。 2.插入视频或动画 用插入视频或动画时。含有的属性有：多媒体来源位置dynsrc、播放次数loop、两次播放的时间间隔loopdelay、指定何时开始播放start等。其中，loop取值为-1或infinite时，表示无限次循环播放。,2.3.2 加入超链接,

7、创建超链接就是在当前页面与其他页面间建立链接。创建超链接使用标记。含有的属性有：链接目标的位置href、显示链接目标的框架target等,2.4 制作表格,表格在网页中应用非常广泛一个表格由table开始，/table结束，表的内容由tr,th和td定义。tr说明表的一个行，表有多少行就有多少个tr；th说明表的列数和相应栏目的名称，有多少个栏就有多少个th；td则填充由tr和th组成的表格。是否用表格线分开为部分内容用border属性说明。,2.4.1 有通栏的表,1. 有横向通栏的表用th colspan=#属性说明。colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向

8、网格数的整数。 2. 有纵向通栏的表用rowspan=#属性说明。 rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用/tr明确给出一横向栏目结束,这是和表的基本形式不同的。,2.4.2 表的大小、边框宽度、表格间距,1. 表的大小用width=#和height=#属性说明。前者为表宽，后者为表高，#是以象素为单位的整数。 2. 边框宽度由border=#说明，#为宽度值，单位是象素。 3. 表格间距即划分表格的线的粗细用cellspacing=#表示，#的单位是象素。,2.4.3 表中文本的输出,1. 文本与表框的距离用cellpa

9、dding=#说明。 2. 表格的后度大于其中的文本后度时，文本在其中的输出位置与用align=#说明。 3. 表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。,2.4.4 浮动表格,所谓浮动表格是指表与文件中重中内容对齐时，若在现在位置上不能满足其对齐方式，表格含上下移动，即挤开一些内容，直到满足其对齐要求。浮动属性一般由align=left或right指定。,2.4.5 表格颜色,表格的颜色用bgcolor=#指定。#是16进制的6位数，格式为rrggbb，分别表示红、绿、蓝三色的分量。或者是16种已定义好的颜色名称，参见文本颜色。,2.5 框架结构,2.5.1

10、 框架结构的文件格式 框架将流览器的窗口分成多个区域，每个区域可以单独显示一个html文件，各个区域也可相关连地显示某一个内容，比如可以将索引放在一个区域，文件内容显示在另一个区域。 框架的基本结构如下: . . ,2.5.2 框架结构的标记使用,用来定义一个框架容器，中可以包含多个框架，主要属性如下表：,2.5.3 FRAME标记,2.5.4 TARGET属性的使用,三种常见的用法： 1用于A标记 2用于BASE标记 3用于FORM标记,2.6 使用CSS格式化网页,CSS（Cascading Style Sheets，层叠样式表），又称格式页。用户可以利用CSS精确地控制页面里每一个元素的

11、字体样式、背景、排列方式、区域尺寸等。,2.6.1 CSS样式表的定义 1通过HTML标记定义 2用id属性定义样式表 3使用class定义样式表 2.6.2 在html中加入css的方法 1嵌入式样式表 2内联式样式表 3外联式样式表 4输入式样式表,2.7 技能与实训,设计一张网页，要求： 在网页中添加一个表格。设置网页背景图片。并在相应单元格中添加相应文字和图片，设置文字字体为宋体，大小为4号字，加粗。 “新浪网”、“搜狐网”、“东方教育网” 分别添加链接。,如图所示 ：,2.8 思考与练习,1. 填空题 (1) HTML又称为_语言。 (2) 无序列表用_标记开始，列表中的每一个条目都

12、用_标记引用。 (3) 网页中插入图像时，设置图像来源位置使用属性_标记。 (4) 表格由_标记标识。,(5) _标记用来定义一个框架容器。 (6) 指定 form的方法为post，动作为login.asp 。 (7) 可以使用VBScript客户端的脚本_实现向页面输出“大家好！”。,2. 选择题 (1) ( )标记是文件头的开始。 A. B. C. D. (2) 设置图像的替代文字使用标记的( )属性。 A. src B. alt C. align D. width (3) 定义表格的行的标记为( )。 A. B. C. D. ,3. 判断题 (1) 标题元素共有6种，即h1、h2、h3、h4、h5、h6，用于表示网页中的各种题目，标题字号越小，字体越小。( ) (2) 使用标记可以在浏览网页时仍能保留在编辑工具中已经排好的形式显示内容。( ) (3) 用插入视频或动画时，loop取值为1或infinite时，表示无限次循环播放。(