因特网技术基础第二章.ppt

第二章 Web开发基础,一、 HTML语言简介,1 HTML基础 HTML是用来表示Web文档的规范，它使用标记来确定网页显 示的格式。静态网页是标准的HTML文件，动态网页经过应用程序 服务器的处理后也将生成标准的HTML文件。 2 HTML工作原理 HTML是一种规范，是用于Web文档的格式化语言。HTML通 过标记（Tag）来标记要显示的网页中的各个部分，以告诉Web浏 览器应该如何显示网页，即确定网页内容的格式。浏览器按照顺 序阅读HTML文件，然后根据内容附近的HTML标记来解释和显示 各种内容，这个过程称为语法分析。例如，如果为某段文字添加 了标记，浏览器将会以比一般文字大的粗体字来显示这 段文字。,总结说明 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 HTML 文档 = 网页 HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本 HTML 文档也被称为网页 Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：,3 标记基础 HTML语言是控制网页内容显示格式的标记集合，标记给浏览器提供 了格式化Web文档的指令。 1). 基本的HTML语法 在HTML语言中，所有的标记都必须用尖括号（即小于号“”）括起来。例如，、等。大部分标记 都是成对出现的，包括开始标记和结束标记，开始标记和相应的结束标记 定义了标记所影响的范围；结束标记与开始标记名称相同，但结束标记总 是以一个斜线符号开头的。例如，和、和 等。也有一些标记只要求单一标记符号，例如换行标记就 是这样。 HTML标记不区分大小写，推荐使用小写。 2). 标记符的属性 大多数标记都拥有一个属性集，通过这些属性可以对作用的内容进行 更多的控制。在HTML语言中，所有属性都放置在开始标记的尖括号内。, This is a header This is a paragraph. ,3) . 关于HTML版本,本课程中主要讲解的是HTML 4.01 为什么使用 HTML4.0？ 最初的 HTML 绝没有打算要包含支持格式化文档的标签。HTML 标签原打算用于定义文档的的内容。 This is a paragraph This is a heading 当诸如 这样的标签和 color 属性被加入 HTML3.2 的规范当中，它开始成为开发者的一场噩梦。那些不得不将字体和文字信息添加到每个单一网页的站点，其开发过程最终变成了漫长、昂贵和极其痛苦的过程。 HTML4.0 的优秀特性 通过使用 HTML4.0，所有的格式化信息都可以从 HTML 文件中剥离，并植入一个独立的样式表。因为 HTML4.0 将文档的表现与其结构分离，我们从而得到了我们一直需要的东西：在不把文档内容搞糟的情况下，对表现层进行完全的控制。 官方的 HTML4.01 标准推荐使用小写的标签。,4 HTML文档的基本结构 一个基本的HTML文档通常包含以下三对顶级标记。 1). HTML标记. HTML标记是全部文档内容的容器，是开始标记， 是结束标记，它们分别是网页的第一个标记和最后一 个标记，其他所有HTML代码都位于这两个标记之间。HTML标 记告诉浏览器或其他程序：这是一个Web文档，应该按照HTML 语言规则对文内的标记进行解释。.标记是 可选的，但最好不要可以省略这两个标记，以保持Web文档结构的 完整性。 2). 首部标记. 首部标记用于提供与Web页有关的各种信息。在首部标记中， 可以使用和标记来指定网页的标题，使用 和标记来定义CSS样式表，使用 和标记来插入脚本，等等。,3). 正文标记. 正文标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML元素均位于该标记中。正文标记有下列属性。 (1) BACKGROUD：指定文档背景图像的URL地址，图像平铺在页背景上。（HTML4.0以前使用，现在不推荐使用，现在可以用style属性或CSS代替） (2) BGCOLOR：指定文档的背景颜色。（现在不推荐使用，现在可以用style属性或CSS代替） (3) TEXT：指定文档中文本的颜色。 （现在不推荐使用，现在可以用style属性或CSS代替） (4) ONLOAD：指定文档首次加载时调用的事件处理程序。 (5) ONUNLOAD：用于指定文档卸载时调用的事件处理程序。 在上述属性中，各个颜色属性的值有两种表示方法：使用颜色名 称来指定，例如红色、绿色和蓝色分别用red、green和blue表示；使 用十六进制格式数值#RRGGBB来表示，RR、GG和BB分别表示颜色 中的红、绿、蓝三基色的两位十六进制数据。,4). 关于style属性（可以应用在 等标签中，用于设置HTML 元素的样式，如格式化文本）,style 属性用于改变 HTML 元素的样式。 可以通过“=”对属性进行赋值， style 属性可以设置下列属性值， 如： 设置背景颜色： background-color 设置背景图像： background-image 设置字体： font-family 设置字颜色：color 设置字体大小： font-size（以像素为单位px） 设置文本对齐方式：text-align（center、left、right）,style属性应用实例, A paragraph. This is a heading This is a text. ,5). HTML文档的基本结构 HTML文档的基本结构可以表示如下： 标题文字 文本、图像、动画、HTML指令等 5 添加注释 在HTML语言中，注释由开始标记构成，这 两个标记之间的文字被浏览器解释为注释，而不在浏览器窗口中显示。,6 设置文本格式 分段与换行 段落是文档的基本信息单位。将文档划分为段落，可以通过使 用分段标记、换行标记、标题标记或插入水平线来实现。 1). 分段标记P 分段标记定义了一个段落，使用该标记时要跳过一个空行，使 后续内容隔一行显示。若同时使用和，则将段落包围起来， 表示一个分段的块；若省略结束标记，可以将开始标记放在段、 尾。分段标记的常用属性是ALIGN （现在可以用style属性或CSS代 替） ，用于设置段落的水平对齐方式。 2). 换行标记BR 标记强行规定了当前行的中断，使后续内容在下一行显示。,3). 标题标记Hn 标题标记用于设置文档中的标题和副标题，其中n的取值是1到 6；.标记表示字体最大的标题，标记表 示字体最小的标题。 4). 水平线标记HR HR标记在文档中添加一条水平线，用来分开文档的两个部 分。该标记有以下属性： (1) ALIGN：指定线的对齐方式，取值为left（左对齐）、 center（居中对齐）或right（右对齐），默认值为center。 (2) COLOR：指定线的颜色。 (3) NOSHADE：若指定该项，则显示一条无阴影的实线。 (4) SIZE：指定线的宽度，以像素为单位。 (5) WIDTH：指定线的长度，单位可以是像素或百分比（占页 面宽度的百分比）。,7 设置段落对齐方式 在网页中有四种段落对齐方式：左对齐、右对齐、居中对齐和 两端对齐。在HTML语言中，可以使用ALIGN属性来设置段落的对 齐方式。 （现在可以用style属性或CSS代替） ALIGN属性可以应用于多种标记，例如分段标记.、 标题标记.以及水平线标记等。ALIGN属性的取 值可以是：left（左对齐）、center（居中对齐）、right（右对齐） 以及justify（两边对齐）。两边对齐是指将一行中的文本在排满的 情况下向左右两页边对齐，以避免在左右页边出现锯齿状。 对于不同的标记，ALIGN属性的默认值是有所不同的。对于分 段标记和各个标题标记，ALIGN属性的默认值为left；对于水平线 标记，ALIGN属性的默认值为center。 若要将文档中的多个段落设置成相同的对齐方式，可将这些段 落置于和标记之间组成一个节，并使用ALIGN 属性 （现在可以用style属性或CSS代替）来设置该节的对齐方式。,8 设置字体、字号和颜色 在HTML语言中，可以使用字体标记.来设 置文本的字符格式，为此可以将文本置于和标记 之间，并通过FACE、SIZE和COLOR属性来设置文本的字体、字 号和颜色。 （现在不推荐使用，现在使用style属性或CSS） FACE属性指定一种字体，或者给出一个字体列表，各种字体 名称用逗号来分隔，可以按照作者的喜好程度来排列。例如： 超文本标记语言 SIZE属性指定字体的大小（即字号），其取值可以从1到7，默 认值为3。SIZE属性值越大，显示的字号就越大。相对于基本字体 （BASEFONT）的大小，也可使用或号来指定相对字号。如： 超文本标记语言 ASP动态网页设计 COLOR属性指定文本的颜色，可以用颜色名称表示，也可以 用十六进制RGB格式表示。例如： 超文本标记语言 ASP动态网页设计,9 设置字符样式 通过设置字符样式可以为某些字符设置特殊格式，例如粗体、 斜体、下划线、删除线、上标、下标等。常用的设置字符样式的 标记如下： . 粗体 . 大字体 . 斜体 . 删除线 . 小字体 . 删除线 . 上标 . 下标 . 固定宽度字体 . 下划线,10 插入特殊字符 设计网页时，经常要插入一些空格。这本来是一个十分简单的问题，但在HTML网页中却变得比较麻烦。在输入文本时按了多次空格键，但在浏览器中打开网页时却只能看到一个空格。另外，在网页中有时可能要插入一些特殊符号，如版权符号和注册符号等。当遇到这种情况时，可以使用两种方式来输入特殊符号：即使用字符实体名称或数字表示方式。 例如，若要在网页中输入一个无间断空格，可以输入“,11 使用图像 在网页中插入图像 在HTML语言中，可使用IMG标记在网页中插入一个行内图像。 1). SRC和ALT属性 IMG标记有许多属性，其中最常用的是SRC和ALT属性，分别用于设置图像的位置和替换文本。SRC属性给出图像文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。ALT属性给出图像的简单文本说明，这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先显示出来。 2). 指定图像的高和宽 当使用IMG标记在网页中插入一个图像时，可以通过HEIGHT和WIDTH属性来设置图像的高度和宽度，所用单位可以是像素或百分数。如果只给出了高度或宽度，则图像将按比例进行缩放。,12 设置图像格式与布局 使用标记IMG在网页中插入一个图像时，除了使用SRC、ALT、 HEIGHT和WIDTH属性来指定图像的来源、替换文本以及图像的尺寸之 外，还可以使用IMG标记的其他属性对图像的格式布局进行设置。 1). 设置图像的边框 使用IMG标记的BORDER属性可以给图像添加边框效果，该属性的取值为正整数，单位为像素。例如： 2). 设置图像与文本之间的空白 使用IMG标记的HSPACE和VSPACE属性可以设置图像与文本之间的空白，前者指定图像的左、右边距，后者指定图像的上、下边距，两者的单位均为像素。 ,3). 设置图像在页面上的对齐方式 如果插入的图像在页面上单独占一行，则可以将IMG标记置于和标记之间，并通过P标记的ALIGN属性来设置图像在页面上的对齐方式。例如： 4). 设置图像与文本的对齐方式 当在页面中进行图文混排时，可以使用IMG标记的ALIGN属性来设置图像与文本在垂直方向的对齐方式，此时ALIGN属性的取值如下： top：图像与文本顶部对齐。 middle：图像与文本中央对齐。 bottom：图像与文本底部对齐。 通过设置IMG标记的ALIGN属性，也可以在图像的左、右绕排文本，此时ALIGN属性的取值为： left：图像居左，文本居右。 right，图像居右，文本居左。,13 使用表格 1). 创建基本表格 若要创建一个基本的表格，可以使用以下HTML代码： 标题标题标题 数据数据数据 数据数据数据 数据数据数据 ,2). 设置表格的属性 创建表格时，可以通过TABLE标记的下列属性来对表格的格 式进行设置： (1) ALIGN：指定表格的对齐方式，取值可以是left（默认值）、center或right。 (2) BACKGROUND：指定用作表格背景图片的URL地址。 (3) BGCOLOR：指定表格的背景颜色。 (4) BORDER：指定表格边框的宽度，以像素为单位。如果省略该属性，则默认值为0。 (5) BORDERCOLOR：指定表格边框颜色，应与BORDER属性一起使用。 (6) CELLPADDING：指定单元格内数据与单元格边框之间的间距，以像素为单位。 (7) CELLSPACING：指定单元格之间的间距，以像素为单位。 (8) WIDTH：指定表格的宽度，以像素或百分比为单位。,3). 设置行的属性 表格中的每一行是用TR标记来定义的，可以通过该标记的下列属性对指定行的格式进行设置： (1) ALIGN：指定行中单元格的水平对齐方式，取值为left（默认值）、center或right。 (2) BACKGROUND：给出图像文件的URL，该图像用作指定行的背景。 (3) BGCOLOR：指定行的背景颜色。 (4) BORDERCOLOR：指定行的边框颜色，该属性只有当TABLE标记的BORDER属性取非零值时才起作用。 (5) VALIGN：指定行中单元格内容的垂直对齐方式，该属性的取值可以是top（顶端对齐）、middle（居中对齐）、bottom（底端对齐）或baseline（基线对齐）。,4).设置单元格的属性 通过TD标记的下列属性可以对指定单元格的格式进行置： (1) ALIGN：指定单元格内文本的水平对齐方式，取值为left（默认值）、center或right。 (2) BACKGROUND：指定图像的URL，该图像用作单元格的背景。 (3) BGCOLOR：指定单元格的背景颜色。 (4) BORDERCOLOR：指定单元格的边框颜色。 (5) COLSPAN：指定合并单元格时一个单元格跨越的表格列数。 (6) NOWRAP：若指定该属性，则避免Web浏览器将单元格里的文本换行。 (7) ROWSPAN：指定合并单元格时一个单元格跨越的表格行数。 (8) VALIGN：指定单元格中文本的垂直对齐方式，取值可以是top、middle（默认值）、bottom或baseline。,14 使用超链接 1). 理解超链接 超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源，例如可以是一个网页、一幅图像、一首歌曲、一段动画或一个程序等。 超链接标签： 通过使用 href 属性，创建指向另外一个文档的链接（或超链接） 如：文件 按照目标端点的不同，可以将超链接分为以下几种形式。 (1) 文件链接：这种链接的目标端点是的一个文件，它可以位于当前网页所在的服务器，也可以位于其他服务器。 (2) 锚点链接：这种链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。 (3) E-mail链接：通过这种链接可以启动电子邮件客户端程序（如Outlook或FoxMail等），并允许访问者向指定的地址发送邮件。,2). 理解路径 路径是指从站点根文件夹或当前文件夹起到目标文件所经过的路线，可以使用路径来指定超链接中目标端点的位置。路径有以下几种类型： (1) 绝对路径：也称为绝对URL，它给出目标文件的完整URL地址，包括传输协议在内。如果要链接的文件位于外部服务器上，则必须使用绝对路径。 (2) 相对路径：也称为相对URL，是指以当前文档所在位置为起点到目标文档所经过的路径。若要将当前文档与处在同一文件夹中的另一个文档链接，或者将同一站点中不同文件夹下的文档相互链接，都可以使用相对路径，此时可以省去当前文档与目标文档完整URL中的相同部分，只留下不同部分。 (3) 根相对路径：是指从站点根目录到被链接文件的路径。使用这种路径是指定站点内文档链接的最好方式。,3). 创建邮件链接 使用A标记创建邮件链接，该标记的HREF属性应由三个部分组成：第一部分是电子邮件协议名称mailto，第二部分是电子邮件地址，第三部分是可选的邮件主题，其形式为“subject=主题”。第一部分与第二部分之间用冒号（:）分隔，第二部分与第三部分之间用问号（?）分隔。 例如： 给我写信 当访问者在浏览器窗口中单击邮件连接时，将会自动启动电子邮件客户端程序（例如Outlook Express或FoxMail等），并将指定的主题填入“主题”栏中。,15 使用表单 什么是表单？ 表单是用来收集站点访问者信息的域集。表单从用户收集信息，然后将这些信息提交给服务器进行处理。表单可以包含允许用户进行交互的各种控件，例如文本框、列表框、复选框和单选按钮等。 如何使用表单？ 站点访问者填表单的方式是输入文本、单击单选按钮与复选框，以及从下拉菜单中选择选项。在填好表单之后，站点访问者便送出所输入的数据，该数据就会根据所设置的表单处理程序，以各种不同的方式进行处理。,16 创建表单 在HTML语言中，表单通过FORM标记来定义，基本语法格式 如下： FORM标记具有以下属性： (1) NAME：指定表单的名称，以标识表单。命名表单后，可以使用脚本语言（如VBScript或JScript）来引用或控制该表单 (2) METHOD：指定将表单数据传输到服务器的方法，其取值可以是： post：在HTTP请求中嵌入表单数据。 get：将表单数据附加到请求该页的URL中。 (3) ACTION：指定将要接收表单数据的服务器端程序或动态网页的网址。,(4) onSubmit：指定提交表单时调用的事件处理程序。 (5) onReset：指定重置表单时调用的事件处理程序。 (6) TARGET：指定一个目标窗口，其取值为： _blank：在未命名的新窗口中打开目标文档。 _parent：在显示当前文档的窗口的父窗口中打开目标文档。 _self：在提交表单所使用的窗口中打开目标文档。 _top：在当前窗口内打开目标文档，确保目标文档占用整个窗口。,17 使用输入型表单控件 为了让用户通过表单输入数据，可以使用INPUT标记创建各种 输入型表单控件。通过将INPUT标记的TYPE属性设置为不同的值， 可以创建不同类型的输入型表单控件，包括单行文本框、密码框、 复选框、单选按钮、文件域以及按钮等。 1). 在表单中添加单行文本框 如果要获取站点访问者提供的一行信息，可以在表单中添加单 行文本框。为此，可以在.之间添加一个INPUT 标记，并将其TYPE属性指定为“text”。创建单行文本框的基本语法 格式为： 其中NAME属性指定文本框的名称，通过它可以在脚本中引用该文本 框控件；VALUE属性指定文本框的初始值；SIZE属性指定文本框的宽 度；MAXLENGTH属性指定允许在文本框内输入的最大字符数。当提交表 单时，该文本框的名称和内容都会包含在表单结果中。,2). 在表单中添加密码域 如果要求站点访问者输入密码后才能进入站点时，则应在表单 中添加密码域。密码域其实只是一个单行的文本框。当站点访问 者在这个域中键入数据时，大部分的Web浏览器都会以星号显示密 码以保机密。若要创建一个密码域，请在.之间 添加一个标记，并将其TYPE属性指定为“password”。创 建密码域的基本语法格式为： 其中NAME属性用于指定密码域的名称，通过这个名称可以在 脚本中引用该控件；VALUE属性用于指定密码域的初始值；SIZE 属性指定密码域的宽度；MAXLENGTH属性用于指定允许在密码 域内输入的最大字符数。当提交表单时，该域的名称和内容都会 被包含在表单结果中。,3). 在表单中添加按钮 使用标记可以在表单中添加三种类型的按钮：即提交按钮、重置按钮和自定义按钮。创建按钮的基本语法格式为： 对该标记的属性说明如下： (1) TYPE：指定按钮的类型，取值可以是： submit：创建一个提交按钮。 reset：创建一个重置按钮。 button：创建一个自定义按钮。 (2) NAME：指定按钮的名称。 (3) VALUE：指定显示在按钮上的标题文本。,4). 在表单中添加图形化按钮 在表单中可以添加图片作为提交按钮使用。在填写表单后，站点访问者单击图片以提交表单，那么表单上的数据，包括图片域名称，就会被提交到表单处理程序。图形化的提交按钮使用标记来创建，方法是将该标记的TYPE属性设置为“image”， 语法格式为： 其中TYPE属性表示以一个图像作为提交按钮，所用图像的 URL地址由SRC属性给出，NAME或VALUE属性提供图像的替 换文本。,5). 在表单中添加复选框 如果想让站点访问者去选择一个或多个选项或都不选取时，可以在表单中添加复选框。若要创建复选框，可以在. 之间使用标记，并将TYPE属性设置为“checkbox”，基本语法格式如下： 选项文本 其中NAME属性指定复选框的名称；VALUE属性指定提交时的值；CHECKED属性是可选的，若使用该属性，则当第一次打开表单时该复选框处于选中状态。 当提交表单时，假如复选框被选中，它的内部名称和值都会包含在表单结果中。否则，只有名称会被纳入表单结果中，但值为空白。,6). 在表单中添加单选按钮 如果想让站点访问者从一组选项中选择其中之一，可以在表单中添加单选按钮。在一组单选按钮中，一次只能选择一个。若要创建单选按钮，可以在.之间使用标记，并将TYPE属性设置为“radio”，基本语法格式如下： 选项文本 其中NAME属性指定单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项；VALUE属性指定提交时的值；CHECKED属性是可选的，若使用该属性，则当第一次打开表单时该单选按钮处于选中状态。当提交表单时，该单选按钮组名称和所选取的单选按钮指定值都会包含在表单结果中。如果没有任何单选按钮被选取，组名称会被纳入表单结果中，但值为空白。,7). 在表单中添加文件域 文件域由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。如果想让站点访问者通过表单来选择文件，可以在表单中添加文件域。 在和之间添加标记，并将其TYPE属性设置为“file”，即可创建文件域，语法格式为： 其中NAME属性指定文件域的名称，VALUE属性给出初始文件名，SIZE属性指定文件名输入框的宽度。,18 使用其他表单控件 1). 在表单中添加滚动文本框 若要接受站点访问者输入多于一行的文本，请在表单中添加滚动文本框。在和之间添加TEXTAREA标记，即可创建滚动文本框，其基本语法格式如下： . 其中NAME属性指定滚动文本框控件的名称，ROWS属性指定该控件的高度（以行为单位），COLS属性指定该控件的宽度（以字符为单位），READONLY属性指定滚动文本框的内容不被用户修改。 创建滚动文本框时，在和标记之间输入的文本将作为该控件的初始值。当提交表单时，该域名称和内容都会包含在表单结果中。,2). 在表单中添加选项菜单 若要创建选项菜单，应在和之间添加标记，并使用标记将每个选项列出来，基本语法格式如下： 选项1 选项2 其中NAME属性指定选项菜单控件的名称；SIZE属性指定在列表中一次可以看到的选项数目；布尔属性MULTIPLE指定是否允许作多项选择；SELECTED属性指定该选项的初始状态为