ASP动态网页制作基础教程(苏玉雄) 第2章

《ASP动态网页制作基础教程(苏玉雄) 第2章》由会员分享，可在线阅读，更多相关《ASP动态网页制作基础教程(苏玉雄) 第2章（194页珍藏版）》请在金锄头文库上搜索。

1、,第2章 HTML 语 言,2.1 HTML基础 2.2 设置文本格式 2.3 使用列表 2.4 使用图像 2.5 使用字幕和背景音乐 2.6 使用表格 2.7 使用超链接 2.8 使用表单 本章小结,在上一章的学习中知道，ASP动态网页实际上是包含HTML标记、文本和脚本命令的动态网页。为了更好地学习ASP动态网页的设计方法，就必须对HTML语言有所了解。本章将介绍HTML语言的基本内容，包括HTML基础、设置文本格式、使用列表格式、使用图像、使用字幕和背景音乐、使用超链接、使用表格、使用表单等。,HTML是用来表示Web文档的规范，它使用标记来确定网页显示的格式。静态网页是标准的HTML文

2、件，动态网页经过应用程序服务器处理后也将生成标准的HTML文件。,2.1 HTML 基 础,2.1.1 HTML的工作原理 HTML文件是标准的ASCII文件。从结构上讲，HTML文件由元素(Element)组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即有起始标记和结尾标记。元素的起始标记叫做起始链接签(Start Tag)，元素的结束标记叫做结尾链接签(End Tag)。HTML用标记来标注要显示的网页的各个部分，以通知Web浏览器应该如何显示网页。,2.1.2 标记基础 HTML语言是控制网页内容显示格式的标记集合，标记给浏览器提供

3、了格式化Web文档的指令。HTML标记的基本语法如下： (1) HTML标记不区分大小写，但通常使用大写字母。 (2) 所有的标记都必须用尖括号()括起来。例如，、等。 (3) 大多数标记都是成对出现的，包括开始标记和结束标记，开始标记和结束标记定义了标记所影响的范围；结束标记与开始标记名称相同，但结束标记总是以一个斜线符号开头的。例如和、和等。也有一些标记没有结束标记，如换行符就是这样。,(4) 每个标记有不同的属性，其属性写在开始标记的尖括号内。如，其中 “bgcolor“ 是标记的属性，表示背景颜色。bgcolor=“red“ 即是将页面的背景颜色设置成红色。,2.1.3 HTML文档结

4、构 一个HTML文档的基本结构可以表示如下： 标题文字 主体内容部分 ,基本的HTML文档通常包括以下三个顶级标记： 1. HTML标记 HTML标记是全部文档内容的容器，是开始标记，是结束标记，它们分别是网页的第一标记和最后一个标记。,2. 首部标记 首部标记用于提供和Web页有关的各种信息。在首部标记中，可以使用和标记来指定网页的标题，使用和标记来插入脚本等。,3. 正文标记 正文标记包含了文档的内容，文字、图像、动画等均位于该标记中。正文标记有许多属性，例如： (1) BACKGROUND：指定文档中背景图像的URL地址。 (2) BGCOLOR：指定文档的背景颜色。 (3) TEXT：

5、指定文档中文字的颜色。,图2-1,案例2-1：利用HTML标记，在记事本中编写一个文档，以显示如图2-1所示的效果。 【操作步骤】 (1) 打开记事本编辑器，输入以下代码： 一个简单的网页 这是使用HTML语言编写的简单网页 ,(2) 将该文件保存为“2-1.htm”或者“2-1.html”，然后用IE浏览器打开，显示效果如图2-1所示。 (3) HTML代码可以使用记事本进行编写，也可以用专业的网页编辑软件如Dreamveaver进行编写。 思考： (1) 以上代码中开始标记和结束标记是否可以交叉使用？ (2) 如何设置文档的背景颜色为黑色？,1. 填空题 (1) 一个基本的HTML文档通常

6、包括 、 、 三个顶级标记。 (2) HTML标记一般 (区分还是不区分)大小写,作 业,2. 上机实训 试写出一个基本的HTML网页显示一行信息：“欢迎你使用HTML语言编写网页”。,2.2.1 段落标记与换行 段落是文档的基本信息单位。将文档划分为段落，可以通过使用分段标记、换行标记、插入水平线来实现。,2.2 设置文本格式,1分段标记P 分段标记定义了一个段落，使用该标记时要跳过一个空行，使后续内容隔一行显示。若同时使用和，则将段落包围起来，表示一个分段的块；若省略结束标记，可以将开始标记放在段尾。 分段标记的常用属性是ALIGN，用于设置段落的水平对齐方式。网页中有4种段落对齐方式：左

7、对齐、右对齐、居中对齐和两端对齐。如设置成align=“center“，则意味着居中对齐。此外，我们还可以使用和标记将多个段落组成一个节，并使用ALIGN属性来设置该节的对齐方式。,2换行标记BR BR标记强行规定了当前行的中断，其后续内容将在下一行显示。 案例2-2：使用段落标记实现如图2-2所示的效果。 【操作步骤】 (1) 打开记事本编辑器，输入以下代码： 使用分段标记和换行标记 ,图2-2,分段标记定义了一个段落，使用该标记时要跳过一个空行，使后续内容隔一行显示。本段内容左对齐。 这是第二段文本，右对齐。显然与第一段之间空了一行进行分隔。 BR标记强行规定了当前行的中断。这里加入BR标

8、记，其后续内容在下一行显示出来。 (2) 将该文件保存为“2-2.htm”或者“2-2.html”，然后用IE浏览器打开，显示效果如图2-2所示。,2.2.2 水平线标记HR 水平线是网页中常用的一种分隔方式，使用HR标记可在文档中添加一条水平线，其主要属性如下： (1) ALIGN：指定线的对齐方式，取值为left(左对齐)、center (居中对齐)或right(右对齐)，默认值为center。 (2) COLOR：指定线的颜色。 (3) NOSHADE：若指定该项，则显示一条无阴影的实线。 (4) SIZE：指定线的宽度，以像素为单位。 (5) WIDTH：指定线的长度，单位可以是像素或

9、百分比。,案例2-3：使用水平线标记实现如图2-3所示的效果。 本例说明在网页中如何通过HR标记的各种属性来控制水平线的显示效果。 【操作步骤】 (1) 在记事本编辑器中输入如下代码： 水平线标记的使用 ,图2-3,以下是默认的水平线： 以下是宽度为屏幕宽度的90%的红色无阴影的水平线： (2) 将该文件保存为“2-3.htm”或者“2-3.html”，然后用IE浏览器打开，显示效果如图2-3所示。,说明： (1) 本例中水平线的宽度百分比是以屏幕宽度为100%设置的，如果水平线放置在表格的单元格中，则以当前单元格为100%进行设置，故百分比是以相对水平线所在的标记进行设置的。在表格的宽度设置

10、中同此理。 (2) 水平线一般用于分隔同一个页面。,2.2.3 设置字体 将文本置于和标记之间，并可通过FACE、SIZE和COLOR属性来设置文本的字体、字号和颜色。 1设置字体 字体标记的FACE属性指定一种字体。例如： 欢迎来到我的网站。 或者给出一个字体列表，各种字体名称用逗号来分隔。例如： Welcome to my website！,如果浏览页面的计算机上安装了该字体，则以该字体来显示文本；如果没有安装，则会尝试选用列表中的下一种字体。这种情况会继续下去，直至找到匹配字体或到达列表结束。如果找不到匹配的字体，浏览器将使用默认字体。,2设置字号 FONT标记的SIZE属性指定字体的大

11、小(字号)，其取值可以为17，默认值为3。SIZE属性值越大，显示的字号就越大。例如： 欢迎来到我的网站。 也可以使用“”或“”号来指定相对字号，这种字号的设置方式是相对于基本字体(BASEFONT)的大小，例如： 欢迎来到我的网站。 ,3设置文本颜色 FONT标记的COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制RGB格式表示。例如： 欢迎来到我的网站。 欢迎来到我的网站。,案例2-4：设置如图2-4所示的字体。 本例说明如何使用字体标记来设置文本的字体、字号和颜色。 【操作步骤】 (1) 打开记事本编辑器，输入如下代码： FONT标记设置字体、字号和颜色 ,图2-4,欢迎

12、来到我的网站。 欢迎来到我的网站。 欢迎来到我的网站。 欢迎来到我的网站。 ,(2) 将文件保存为“2-4.htm”或“2-4.html”，打开浏览器查看效果，如图2-4所示。,2.2.4 设置字符样式 通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体等。常用的设置字符样式的标记见表2-1。,表2-1 常用的设置字符样式的标记,案例2-5：设置字符的样式，如图2-5所示。 【操作步骤】 (1) 用记事本打开“2-4.htm”文件，在第一段文字上添加加粗样式，在第二段文字上添加斜体样式，给最后一段文字设置斜体样式，输入如下代码： 设置字体样式 ,图2-5, 欢迎来到我的网站。 欢迎来到

13、我的网站。 欢迎来到我的网站。 欢迎来到我的网站。 ,(2) 将该文件另存为“2-5.html”，打开浏览器查看效果，如图2-5所示。 说明：此例中是以加粗和倾斜的字体效果为例，如果要使用其他的字体样式，只需要将要设置样式的文字放置在相应的标签中即可。,2.2.5 插入特殊字符 使用HTML代码编写网页时，一些特殊字符是必须用特定的字符实体名或数字来代替的，如空格、小于号等。例如，若要在网页中输入一个无间断空格，可以输入“站。 常用的特殊符号的实体名称和数字表示见表2-2。,表2-2 常用特殊符号的实体名称或数字表示,说明：在网页中插入空格可以采用多种方式，除了使用代码，有时也可以在需插入空格

14、的地方插入一张空白的图片或者一个空的单元格来实现。,(1) 编写HTML代码，完成如下要求： a. 将网页的背景颜色设置为蓝色； b. 将文字颜色设置成白色。 (2) 输入三段文字内容，要求每段文字前面空两格；每段文字之间用白色水平线分隔。,作 业,2.3.1 创建有序列表 有序列表是在各列表项前面显示数字或字母的缩排列表，可以使用有序列表标记OL和列表项标记LI来创建，语法格式如下： 列表项1 列表项2 列表项n ,2.3 使 用 列 表,OL标记有两个常用属性：START和TYPE。START属性用于数字序列的起始值，可以取整数值；TYPE属性用于设置数字序列样式，其取值如下： 1 表示阿

15、拉伯数字1、2、3等，此为默认值。 A 表示大写字母A、B、C等。 A 表示小写字母a、b、c等。 表示大写罗马数字、等。 i 表示小写罗马数字i、ii、iii、iv等。,案例2-6：创建有序列表，显示如图2-6所示的效果。 本案例说明如何使用OL和LI标记创建有序列表。 【操作步骤】 (1) 打开记事本编辑器，输入如下代码： 有序列表实例 ,用数字表示的列表： 第一点第二点第三点 HTML语言是： 一种人类的交流方式一种计算机语言超文本标记语言 ,图2-6,(2) 将该文件保存为“2-6.html”，用浏览器浏览查看网页效果，如图2-6所示。 提示：有序列表是可以嵌套的。若要使用嵌套的有序列表，将相关的列表标记嵌套使用即可。,2.3.2 创建无序列表 无序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标记UL和列表项标记LI来创建，其语法格式类似有序列表格式，具体如下： 列表项1 列表项2 列表项n ,UL标记的TYPE属性用于指定列表项前面显示的项目符号，其取值如下。 disc：使用实心圆作为项目符号(默认值)。 circle：使用空心圆作为项目符号。 square：使用方块作为项目符号。 应