《ASP程序设计课件第2章 ASP框架语言---HTML》由会员分享，可在线阅读，更多相关《ASP程序设计课件第2章 ASP框架语言---HTML（41页珍藏版）》请在金锄头文库上搜索。
1、第2章 HTML基础课堂内容： nHTML概述 nHTML标记 nHTML表单的设计 n使用CSS格式化网页 n实用案例1 用户注册表单页面的设计1ASP程序设计重点： n HTML标记 n HTML表单的设计难点： n HTML表单的设计 n 使用CSS格式化网页2ASP程序设计课堂性质：n 由于HTML语言是ASP程序语言的一个前导 课程，而且根据ASP的特点：需将ASP代码嵌 套在HTML代码中，一起来实现动态网页的设 计，因此在进行ASP程序设计时必然经常用到 HTML的相关知识，在此对其知识点进行系统 复习。3ASP程序设计2.1 HTML概述n HTML语言，又称超文本标记语言，英
2、文 全称是Hypertext Markup Language。 它是一种标识性的语言，由一些特定符号组成 ，语法简单，其目的在于运用标记使文件达到 预期的显示效果。 n 用HTML编写的超文本文件称为HTML文件 ，扩展名可以是htm、html、shtm或 shtml。4ASP程序设计2.1 HTML概述2.1.1 HTML的基本概念HTML语言独立于操作系统平台（如Unix， Linux，Windows等）。自1990年以来， HTML就一直被用作Word Wide Web，即万 维网WWW的信息表示语言。5ASP程序设计2.1 HTML概述WWW有3个基本内容组成，分别是URL、 HTTP
3、和HTML。 1)URL（Uniform Resource Locators） ：统一资源定位符 2）HTTP（Hypertext Transfer Protocol）：超文本传输协议 3)HTML语言(Hypertext Markup Language)：HTML文档是一个放置了标记（ Tags）的ASCII文本文件6ASP程序设计2.1 HTML概述2.1.2 HTML特点 HTML语言与其它编程语言（如C和Java）不同 ，具有以下特点： （1）超文本性 ；（2）标记性 ；（3）简单性； （4）可扩展性 ；（5）平台无关性7ASP程序设计2.1 HTML概述2.1.3 HTML基本结构
4、1）HTML基本语法HTML文件表现力十分丰富，语法结构却比较 简单。HTML文件是由标记和内容组成，形式如下：文 本或超文本内容 2) HTML文件基本结构HTML文档结构可以划分为两个基本部分：文件 头(head)和文件体(body)。一个典型的HTML文 档结构如图2-2所示。8ASP程序设计图2-1 HTML文档结构9ASP程序设计2.1 HTML概述2.1.4 HTML文档的编写HTML文档的编写是非常容易的，可以使 用任何文本编辑工具来编写，保存时的文件扩 展名可以是htm、html、shtm或shtml。10ASP程序设计2.2 HTML标记标记(Tags)，通常又叫着标签，它是
5、 HTML文档的重要组成部分。可以说没有标记就 没有形式多样化的Web页面效果。 2.2.1 基本标记 1）标记放在HTML文档的最前面，用 来表示HTML文档的开始，而标记放 在HTML文档的最后，用来表示HTML文档的结 束，这两个标记必须一起使用。 11ASP程序设计2.2 HTML标记2） 和是HTML文档头部标记，在此 标记对之间可以使用、 等标记 。 3) 是HTML文档的主体部分，在此 标记对之间可包含、 、等众多的标记 4） 是标题标记，这一对标记包含的内 容将显示在浏览器的标题栏上。 12ASP程序设计2.2 HTML标记2.2.2 格式标记格式标记主要用于修饰如何显示文本之
6、类的信 息，这些标记都被用于标记 对之间。 1） 标记对是用来创建一个段落，在此标 记对之间加入的文本将按照段落的格式显示在浏 览器上。标记也可以没有结束标记，可单独 使用。13ASP程序设计2.2 HTML标记2） 是在显示内容中产生一个换行的标记， 它没有结束标记。 3） 标记对用来排版大块Html段 落，也用于格式化表。14ASP程序设计2.2 HTML标记2.2.3 文本标记文本字体格式如斜体、黑体字、下划线等由文 本标记控制。 1） 此标志对用来对文本进行预处理操作，在浏览网页 时仍能保留在编辑工具中已经排好的形式显示内容 ，使用标记时，默认使用2号字体（10磅） 。 2） 标题标记
7、，i取值范围为16。是 字号最大的标题，而则是字号最小 的标题。15ASP程序设计2.2 HTML标记3）、 、 用来使文本以黑体字的形式输出； 用来使文本以斜体字的形式输出； 用来使文本以下加一划线的形式输出 ；使用文本字体加粗。 4） 是字体标记，它可以对输出 文本的字体大小、颜色等进行设置。font标记主 要有size 、color和face三个属性。16ASP程序设计2.2 HTML标记2.2.4 图像标记图像在网页制作中是非常重要的一个方面 ，HTML语言也专门提供了标记来处 理图像的输出。图像标记的基本格式是：17ASP程序设计2.2 HTML标记2.2.5水平线标记 标记是在HT
8、ML文档中加入一条水平线 。 2.2.6 表格标记表格标记是HTML中非常重要的标记之一 。多数网页都是使用表格或多重表格来设计， 主要是因为表格不但可以固定文本或图像等网 页元素的输出。18ASP程序设计2.2 HTML标记1） 标记对用来创建一个表格 2）， 标记对用来创建表格中的行，只能 放在标记对之间使用。 标记对用来创建表格中行中的每一 个单元格 。 3） 标记对用来设置表格头，通常是黑 体居中文字。19ASP程序设计2.2 HTML标记2.2.7 链接标记链接标记使浏览的内容具有了灵活性和网络 性。链接标记的格式如下： 链接的载体 标记对之间的链接载体可是文本或图像。 href属性
9、不可缺少。20ASP程序设计2.2 HTML标记2.2.8 表单标记表单在Web网页中用来给访问者填写信息， 实现客户端与服务器端的交互功能。表单标记的格式: . 标记创建一个表单容器。21ASP程序设计2.2 HTML标记1）input标记 格式： 在表单控件标记中具有非常重要的 地位，它提供客户的输入区。该标记是单个标 记，没有结束标记。该标记共提供了九种类型 的输入区域，由type属性来决定。22ASP程序设计2.2 HTML标记2）下拉列表框 格式：. 、标记对用来创建一个菜 单下拉列表框。具有multiple、name 和size属性。multiple属性使用下拉列表实现多选 ；na
10、me是定义列表框的名字；size属性用来设置列 表的高度。23ASP程序设计2.2 HTML标记标记用来指定列表框中的一个选 项，此标记具有selected和value属性， selected用来指定默认的选项，value属性 用来给指定的选项赋值，服务器正 是通过调用区域的名字来获取 value属性的数据值。24ASP程序设计2.2 HTML标记3）多行文本框 用来创建 一个可以输入多行的文本框，此标记对用于 标记对之间。 具有以下属性：name是文本框的名称；cols是文本框的宽度；rows是文本框的列数，即其高度。25ASP程序设计2.3 HTML表单的设计2.3.1 Web页面的交互W
11、eb页面的交互功能在客户端是通过表单 来实现的。HTML表单提供了一个用户与服务 器端交互的界面。2.3.2 常用表单的设计常见的表单有用户登陆、注册、调查、查 询、图片或文件上传等。26ASP程序设计1 1）登陆窗口）登陆窗口login.htmlogin.htm的设计，效果如图的设计，效果如图2-22-2所示。所示。图2-2一个登陆窗口的设计 27ASP程序设计2 2）用户注册窗口）用户注册窗口register.htmregister.htm的设计，如图的设计，如图2-32-3图图2-3 2-3 一个用户注册窗口的设一个用户注册窗口的设 计计 28ASP程序设计3 3）查询窗口）查询窗口se
12、rch.htmserch.htm的设计，如图的设计，如图2-42-4图图2-4 2-4 一个查询窗口的一个查询窗口的 设计设计 29ASP程序设计2.4 使用CSS格式化网页 n CSS（Cascading Style Sheets，层叠 样式表），又称格式页。用户可以利用CSS精确地控制页面里每一个元素的字体样式、 背景、排列方式、区域尺寸等。 30ASP程序设计2.4.1 CSS样式表的定义 1通过HTML标记定义 2用id属性定义样式表 3使用class定义样式表 2.4.2 在html中加入css的方法 1嵌入式样式表 2内联式样式表 3外联式样式表 4输入式样式表 31ASP程序设计
13、属性的综合介绍：align属性： 很多元素都有对其方式属性align，例如段落、表格 、标题、单元格等，其用法如下：段落居中表格居中标题居中单元格内容居中 也可以直接使用元素使所包含内容居 中显示。 align=“left“，align=“center“，align=“right“分别表示居 左,居中，居右对齐方式，不设置该属性时，默认为居左对 齐。 32ASP程序设计实用案例1：一个典型用户注册表单设计实例 【例2.1】（form.html）在许多网站中都存 在用户注册的功能，本例设计了一个典型的用 户注册页面，效果如图2-5所示。33ASP程序设计图2-5 典型用户注册表单页面34ASP程
14、序设计2.5 技能与实训设计一张网页，要求如下：在网页中添加一个表格。设置网页 背景图片。并在相应单元格中添加相应文字 和图片，设置文字字体为宋体，大小为4号字 ，加粗。 “新浪网”、“搜狐网”、“东方教育网 ” 分别添加链接。 35ASP程序设计如图所示 ：36ASP程序设计2.6 思考与练习1. 填空题 (1) HTML又称为_语言。 (2) 无序列表用_标记开始，列 表中的每一个条目都用_标记引用 。 (3) 网页中插入图像时，设置图像来源位 置使用属性_标记。 (4) 表格由_标记标识。 37ASP程序设计(5) _标记用来定义一个框架 容器。 (6) 指定 form的方法为post，
15、动作为 login.asp 。 (7) 可以使用VBScript客户端的脚本 _实现向页面输出“大家好！” 。38ASP程序设计2. 选择题 (1) ( )标记是文件头的开始。 A. B. C. D. (2) 设置图像的替代文字使用标记的( )属 A. src B. altC. align D. width (3) 定义表格的行的标记为( )。 A. B. C. D.39ASP程序设计3. 判断题 (1) 标题元素共有6种，即h1、h2、h3、h4、h5 、h6，用于表示网页中的各种题目，标题字号越小 ，字体越小。( ) (2) 使用标记可以在浏览网页时仍能保留 在编辑工具中已经排好的形式显示内容。( ) (3) 用插入视频或动画时，loop取值为1 或infinite时，表示无限次循环播放。( ) (4) 使用内联式样式表是把定义CSS样式的语句 放在HTML文件的部分。( )40ASP程序设计4. 简答题 (1) 简述一个完整的HTML文件的基本结构。 (2) 常用的列表有哪几种格式？分别使用什么标 记？ (3) 怎样实现段落居中、表格居中、标题居中、 单元格内容居中？ (4) 简述制作表格的方法。 (5) 框架的HTML文件的基本结构是怎样的？ (6) 简述在HTML中加入CSS的4种方法。 41
