2.1 HTML语言基础_Dreamweaver CS3 Ajax网页设计入门与实例详解-QQ阅读男频玄幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

2.1 HTML语言基础

HTML（Hypertext Markup Language）即超文本标记语言，是WWW的描述语言。HTML语言是Web文档的规范，它使用各种HTML标记来设置网页显示的格式。一个Ajax网页通常就是添加了调用XMLHttpRequest对象的JavaScript脚本的HTML网页，其文件扩展名为.html或.htm。当然，Ajax网页也可以是某种类型的动态网页。

2.1.1 HTML网页基本结构

HTML网页中包含各种HTML标记（也称为标签），这些标记是一些嵌入式命令，用于提供网页的结构、外观和内容等信息。Web浏览器利用这些信息来决定如何显示网页。Web浏览器按照顺序读取HTML网页，然后根据内容附近的HTML标记来解释和显示各种页面元素，这个过程称为语法分析。

1.HTML标记

HTML标记的一般格式如下：

        <标记 属性1="属性值" 属性2="属性值"…>要控制的内容</标记>
        <标记 属性1="属性值" 属性2="属性值"… />

在HTML语言中，所有标记都必须用一对尖括号括起来，这对尖括号由小于号“<”和大于号“>”组成，它们是HTML语言的定界符，例如，<html>、<head>、<body>、<div>、<form>等。大多数HTML标记都包含一个开始标记和一个结束标记，用于定义该标记所影响的范围，例如，<html>和</html>、<head>和</head>等。也有一些HTML标记只要求单一标记，通常应当在这些标记的大于号之前放置一个斜线符号“/”，例如、水平线标记<hr />、换行标记<br />即是这样。

通过HTML标记可以定义一个页面元素，称为HTML元素。大多数HTML元素都拥有一个属性集，通过这些属性可以对该元素进行更多的控制。在HTML语言中，所有属性都放置在开始标记的尖括号内。

例如，当使用<p>标记定义文本段落时，通过align属性设置段落的对齐方式；当使用<font>标记设置文本格式时，通过face属性来指定文本的字体，通过size属性来指定文本的字号，通过color属性指定文本的颜色。

请看下面的HTML代码：

        <p align="center">
        <font face="楷体_GB2312" size="6" color="red">HTML网页设计</font>
        <br />
        <font face="" size="7" color="blue">Ajax异步交互</font>
        </p>

2.通用属性

大多数HTML元素都具有以下通用属性。

● id属性：为HTML元素指定一个独一无二的标识符。该属性值以英文字母开头，后面可以跟任意的字母、数字、连字符（-）、下画线（_）、冒号（:）及句点（.）。在JavaScript脚本中可以通过id属性来引用网页中的特定HTML元素，这在DHTML网页设计和Ajax编程中是很有用的。

● class属性：把一个元素指定为一个或多个类的成员。class属性在与CSS样式表结合时特别有用，在当前页面或外部CSS样式表文件中定义一个类样式，并把该类样式的名称设置为class属性的值（外部CSS样式表文件需要链接到页面），以设置HTML元素的外观。与id属性不同，一个class类可以被任意数量的元素分享。在JavaScript脚本中通过“objectId.className”形式访问元素的class属性。

● style属性：为一个单独出现的元素指定CSS样式。通过style属性可以通过CSS来设置元素的样式。在JavaScript脚本中通过“objectId.style.property”形式访问元素的特定CSS属性。

● title属性：为元素指定一个标题，通常以“即时提示”形式显示出来。当用户用鼠标指针指向该元素时，title属性的内容就会动态地显示出来。在JavaScript中通过“objectId.title”形式访问title属性。请看下面的例子：

        <p id="p1" style="font-family:华文行楷; font-size:18pt;" title="这是一个演示">
        这是一个文本段落。
        </p>

在这个例子中，把段落的标识符指定为p1，并通过style属性设置了字体（font-family）和字号（font-size），通过style属性指定了用鼠标指针指向该段落时显示的提示文字。

3.网页的基本结构

网页的基本结构可以描述如下：

一个HTML网页包含以下顶级元素。

● html元素。<html>…</html>称为文档标记，可以视为全部HTML文档内容的容器，html元素包含HTML文档。HTML网页一般是由文档首部和文档正文两个部分组成的。<html>标记通常是文档的第一个标记，表示文档由此开始，</html>是文档的最后一个标记，表示文档到此结束，其他所有HTML源代码都位于这两个标记之间。Web浏览器将按照HTML语言规则对文档内的各种标记进行语法分析，从<html>标记开始，直至遇到</html>标记。不过，当创建各种动态网页时，也经常在<html>标记之前和</html>标记之后放置服务器端脚本代码，这些代码由相应的应用程序服务器负责处理。

● head元素。<head>…</head>称为文件首部标记，用于提供与文档有关的各种信息。在文档首部中，可以使用<meta… />标记来设置文档的格式和所用的字符集；使用<title>…</title>标记来指定HTML文档的标题；使用<script>…</script>标记来添加JavaScript脚本代码或者导入外部JavaScript脚本文件；使用<style>…</style>标记来定义内嵌CSS样式；使用<link… />标记链接到外部CSS样式表文件，等等。

● body元素。<body>…</body>称为文档正文标记，指明文档正文的开始和结束，用于定义HTML文档的主要部分，给出要在网页上显示的内容及其显示格式。在Web浏览器窗口中显示的内容，例如文本、表格、图像、声音、视频、动画、超链接、表单、脚本及其他页面元素，均位于<body>与</body>标记之间。

在标准兼容模式下，html元素代表文档可显示内容的整个外观。如果未指定标准兼容模式，或正在使用较早版本的Internet Explorer，则是body元素代表文档可显示内容的整个外观。body元素的大小无法更改，它等于窗口的大小，在此对象上设置的边距位于此对象的边框和滚动条之内。在JavaScript脚本中可以通过document对象来访问body元素。

4.body元素的常用属性

通过body元素的属性对基本的页面属性进行设置。该元素的常用属性如下。

● bgcolor属性：指定网页的背景颜色。颜色值用16进制的#rrggbb格式表示，其中rr、gg和bb分别表示红、绿、蓝三基色的值。16进制数码包括0～1及A～F，例如红色用“#FF0000”表示，蓝色用“#0000FF”表示。

● text属性：指定网页中的默认文本颜色。

● link属性：指定超链接文本的颜色。

● alink属性：指定活动链接文本的颜色。

● vlink属性：指定已访问过的链接文本的颜色。

● background属性：指定网页的背景图像。该属性值为图像文件的路径。

● leftmargin属性：指定页面的左边距，取值为整数。

● topmargin：指定页面的上边距，取值为整数。

用Dreamweaver编写HTMl网页时，可利用标签检查器设置HTML元素的属性。方法是：把插入点放置在HTML标记中，按F9键打开标签检查器，并对该HTML标记的属性进行设置。使用这种方法设置颜色值和文件路径特别方便，如2-1所示。

图2-1 利用标签检查器设置body元素的属性

例2-1 创建一个简单的HTML网页。效果如图2-2所示。

图2-2 一个简单的HTML网页

设计步骤

1 在Ajax站点的本地根文件夹中创建一个文件夹并命名为chap02。关于该站点的创建，请参阅1.2.2节“定义Dreamweaver站点”。

2 在记事本程序中输入以下内容：

        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
        <title>一个简单的HTML网页</title>
        <head>
        <body text="#FFFFFF" bgcolor="#99CCFF" leftmargin="50" topmargin="30">
        这是一个简单的HTML网页。
        </body>
        </html>

3 把文件保存在Ajax站点的chap02文件夹中，文件名为page2-01.html。

4 在IE浏览器地址栏中输入“http://localhost/ajax/chap02/page2-01.html”，以查看该网页的效果。

2.1.2 XHTML代码规范介绍

XHTML（eXtensible HyperText Markup Language）即可扩展的超文本标记语言。国际W3C组织（World Wide Web Consortium）于2000年发布了XHTML 1.0版本，这是一种在HTML 4.0基础上优化和改进的新语言，是一种基于XML应用的HTML，它的可扩展性和灵活性将适应未来Web应用更多的需求。

虽然XML数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML语言设计的网站，目前直接采用XML尚为时过早。因此，使用XML的规则对HTML 4.0进行扩展便形成了XHTML，建立XHTML的目的就是实现HTML向XML的过渡。目前国际上在网站设计中推崇的Web标准就是基于XHTML的应用。

目前HTML正在向XHTML发展，因此创建HTML网页时应该对XHTML代码规范有所了解，以便设计出符合标准的网页。

XHTML代码规范主要包括以下规则。

（1）所有标记必须使用相应的结束标记进行关闭。在HTML中，成对的标记可以不用结束标记来关闭。但在XHTML中要求所有成对的标记必须使用结束标记来关闭，例如<head>…</head>、<title>…</title>以及<body>…</body>等；对于那些不成对的标记，则必须在其最后使用一个正斜线符号“/”来关闭，例如<br />、<hr />、<input …/>等。

（2）标记及其属性名称必须使用小写字母。在HTML中是不区分字母的大小写的，例如<HTML>、<Html>或<html>作用都是一样的。在XHTML中，规定所有标记及其属性名称都必须使用小写字母。例如，正文标记必须写成<body></body>，而不允许写成<BODY></BODY>。

（3）标记的属性值必须使用引号括起来。在HTML中，设置标记的属性值可以不使用引号，例如<font face=华文行楷size=3 color=#FF0000></font>。在XHTML中，必须使用双引号把属性值括起来，例如<font face="华文行楷" size="3" color="#FF0000"></font>。

（4）标记的属性必须具有值。在HTML中，设置标记的属性值可以使用简写形式，例如<input checked>。在XHTML中，要求所有属性都必须具有值，而不允许使用简写形式，对于HTML中那些可以简写的属性，把属性名称设置为属性值就可以了，例如<input checked="checked">。

（5）强制XHTML元素。在XHTML规范中，要求所有文档都必须有一个<!DOCTYPE>声明，要创建符合XHTML 1.0标准的网页，必须在文档首行添加以下文档类型声明：

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

其中DOCTYPE是Document Type（文档类型）的缩写，用来说明所使用的XHTML或者HTML是什么版本；其中的DTD（例如xhtml1-transitional.dtd）称为文档类型定义，浏览器就根据所定义的DTD来解释页面中的HTML标记并将其内容呈现出来。要创建符合标准的网页，<!DOCTYPE>声明是必不可少的。

2.1.3 创建HTML网页

HTML网页就是扩展名为.htm或.html的文本文件，可以使用各种文本编辑器（如记事本程序）来创建和编辑。在Dreamweaver CS3中，可以使用【文件】面板或【新建文档】对话框创建空白的HTML网页，此时会自动生成网页的基本结构。

1.打开一个Dreamweaver站点

创建一个新站点时，往往只有一个根文件夹。在网站开发过程中，可能需要在站点根文件夹中创建一些文件夹，用于存储图像、动画等资源文件，然后根据网站的功能逐步创建一些静态网页或动态网页。

在Dreamweaver CS3中可以创建和管理多个站点，但在同一时刻只能打开一个站点。若要创建新的网页，首先要打开一个Dreamweaver站点。

打开站点的操作方法如下：

1 启动Dreamweaver CS3。

2 选择【窗口】→【文件】命令或者按F8键，此时弹出【文件】面板。该面板左侧的列表中列出Windows桌面、本地驱动器及所有Dreamweaver站点。

从面板左侧的列表框中选择要打开的站点（用文件夹图标表示），如图2-3所示。

打开一个Dreamweaver站点后，便可以在其中创建网页了。

2.设置新建网页的首选参数

用HTML语言编写网页时，可以通过<meta>标记来设置文档的类型和编码字符集。在Dreamweaver CS3中，网页的默认编码字符集为UTF-8。如果希望创建简体中文网页，也可以把默认编码字符集更改为GB2312，为此需要设置新建网页的首选参数。具体操作步骤如下：

图2-3 打开站点

1 选择【编辑】→【首选参数】命令，此时将出现【首选参数】对话框。

2 在左侧的【类别】列表中单击【新建文档】（如图2-4所示），然后对以下首选参数进行设置。

● 从【默认文档】列表中选择将要用于所创建页面的文档类型，即HTML。

● 在【默认扩展名】文本框中，为新建的HTML网页指定希望使用的文件扩展名（.htm或.html）。

● 从【默认文档类型（DTD）】列表中选择一种XHTML文档类型定义（DTD），使新页面遵从XHTML规范。例如，可以从该列表中选择【XHTML 1.0 Transitional】或【XHTML 1.0 Strict】，使HTML文档符合XHTML规范。

● 从【默认编码】列表中选择在创建新页面时要使用的编码，并指定在未指定任何编码的情况下打开一个文档时要使用的编码。建议选择简体中文（GB2312）作为文档的默认编码。

● 根据需要，对其他选项进行设置。

完成设置后，单击【确定】按钮。

图2-4 设置新建文档的默认属性

3.创建HTML网页

在Dreamweaver CS3中，可以创建包含预设计CSS布局的页面，或者先创建一个空白网页，然后创建网页的布局。创建HTML网页的操作方法如下。

1 在【文件】面板上打开一个站点。

2 选择【文件】→【新建】命令，此时将出现【新建文档】对话框。

3 在【新建文档】对话框的【空白页】类别中，从【页面类型】列表中选择要创建的页面类型。若要创建HTML网页，可选择【HTML】，如图2-5所示。

图2-5 【新建文档】对话框

4 如果希望新页面包含CSS布局，可从【布局】列表中选择一个预设计的CSS布局；否则，选择【无】。根据所做的选择，在对话框的右侧将显示选定布局的预览和说明。

5 从【文档类型】列表中选择文档类型。在大多数情况下，可以使用默认选择，即XHTML 1.0 Transitional。

6 如果在【布局】列中选择了CSS布局，则从【布局CSS位置】列表中为布局的CSS选择一个位置，有以下选项。

● 选择【添加到文档头】，可将布局的CSS添加到要创建的页面首部中。

● 选择【新建文件】，可将布局的CSS添加到新的外部CSS文件并将新的样式表附加到要创建的页面中。

● 选择【链接到现有文件】，可指定已包含布局所需的CSS规则的现有CSS文件。为此，可单击【附加CSS文件】窗格上方的【附加样式表】图标并选择一个现有CSS样式表。当希望在多个文档上使用相同的CSS布局（CSS布局的CSS规则包含在一个文件中）时，此选项特别有用。

7 创建页面时，还可以将CSS样式表附加到新页面（与CSS布局无关）。为此，可单击【附加CSS文件】窗格上方的【附加样式表】图标并选择一个CSS样式表。

8 如果要设置文档的默认首选参数（例如文档类型、编码和文件扩展名），可单击【首选参数】参数，并在随后出现的对话框中对相关选项进行设置。

9 完成设置后，单击【创建】按钮。此时，新建的网页出现在文档窗口中。

也可以利用【文件】面板快速创建空白的HTML网页，操作方法如下。

1 选择【窗口】→【文件】命令或者按F8键，打开【文件】面板。

2 在【文件】面板上，用鼠标右键单击用于保存新网页的文件夹，并从弹出菜单中选择【新建文件】命令。此时，一个新文件出现在该件夹中，该文件的名称为“untitled”，其扩展名则取决于当前站点的类型。例如，对于ASP动态站点，新文件的扩展名为.asp。

3 对新建网页进行重命名。若要创建HTML网页，可把文件扩展名更改为.html，如图2-6所示。

图2-6 利用文件面板创建空白的HTML网页

一个空白的HTML网页出现在文档窗口中。如果工作在设计视图下，在这个新网页中是看不到任何内容的，它的确是一个“空白”网页。但是，如果切换到代码视图，则会看到该网页并非什么内容也没有。实际上，每当通过上述操作创建HTML网页时，这个新建的网页都会自动包含HTML文档基本结构，其源代码如下。

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>无标题文档</title>
        </head>
        <body>
        </body>
        </html>

在<html>标记中，xmlns是XHTML Namespace的缩写，即XHTML名称空间。xmlns属性用于设置默认的XHTML名称空间，表明文档元素来自http://www.w3.org/1999/xhtml这个名称空间。

例2-2 创建一个包含CSS布局的HTML网页，效果如图2-7所示。

图2-7 包含CSS布局的网页

设计步骤

1 在Dreamweaver中打开Ajax站点。

2 按Ctrl+N组合键，以打开【新建文档】对话框。

3 在该对话框左侧单击【空白页】，从【页面类型】列表中选择【HTML】，从【布局】列表中选择【列混合，左侧栏、标题和脚注】，从【布局CSS位置】列表中选择【添加到文档头】，然后单击【创建】按钮，如图2-8所示。

在文档窗口中打开了新建网页，它具有预定义的布局并包含一些内容，如图2-9所示。

图2-8 创建具有“列混合，左侧栏、标题和脚注”布局的网页

图2-9 包含CSS布局的网页

4 在标题栏、左侧栏、主要内容栏和脚注栏分别输入文字，以替换原有内容。

5 按Ctrl+S组合键，并选择chap02作为目标文件夹，把网页保存为page2-02.html。

6 切换到代码视图，仔细查看在文档首部生成的CSS样式规则。

7 按F12键，在浏览器中查看网页效果，并调整浏览器窗口宽度，观察左侧栏和主要内容栏宽度的变化情况。

2.1.4 设置页面属性

从2.1.1中可以知道，通过<body>标记的属性可以设置页面的字体、颜色及边距等各种基本属性。在Dreamweaver CS3中，还可以通过【页面属性】对话框来设置页面的基本属性，当设置完成后将自动生成一些CSS样式规则。

利用【页面属性】对话框设置页面属性的操作步骤如下。

1 选择【修改】→【页面属性】命令，以打开【页面属性】对话框。

2 从【页面属性】对话框左侧的【分类】列表中选择【外观】，在这里可以设置页面字体、字号（以像素为单位）、文本样式（粗体、斜体），文本颜色、背景颜色、背景图像、背景图像的重复方式、左边距、右边距、上边距和下边距等，如图2-10所示。

图2-10 设置网页的外观属性

3 从【分类】列表中选择【链接】，在这里可以设置链接文本的字体、字号、文本样式（粗体、斜体）、链接文本的颜色、访问过的链接的颜色、鼠标指针滑过时链接文本的颜色、鼠标指针在链接上单击时应用的颜色，以及链接的下画线样式，如图2-11所示。

4 从【分类】列表中选择【标题】，在这里可以设置标题1至标题6，指定这6种标题标记（<h1>～<h6>）所使用的字号大小（以像素为单位）和颜色，如图2-12所示。

图2-11 设置页面的链接属性

图2-12 设置页面的标题属性

5 从【分类】列表中选择【标题/编码】，在这里可以设置网页的标题（它将出现在浏览器的标题栏中）、文档类型，以及编码字符集，如图2-13所示。

6 完成设置后，单击【确定】按钮。

例2-3 利用【页面属性】对话框设置页面的字体、字号、文字颜色、背景图像及页边距等属性，网页效果如图2-14所示。

图2-13 设置页面的标题的编码

图2-14 设置页面属性示例

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-03.html，利用文档工具栏把网页标题设置为“设置页面属性示例”。

2 利用【页面属性】对话框设置该页的页面字体、字号、文本颜色、背景图像、左边距、右边距和上边距，并设置以粗体显示文本，如图2-15所示。

图2-15 设置页面的外观属性

3 在页面上输入文本。

4 切换到代码视图，查看由Dreamweaver在文档首部生成的CSS样式规则，源代码如下：

        <style type="text/css">
        <!--
        body{
          background-image:url(../images/bg01.jpg);    /＊ 设置网页的背景图像 ＊/
          margin-left:36px;                            /＊ 设置网页的左边距 ＊/
          margin-top:30px;                             /＊ 设置网页的上边距 ＊/
          margin-right:36px;                           /＊ 设置网页的右边距 ＊/
        }
        body,td,th{
          font-family:华文行楷;                        /＊ 设置页面字体 ＊/
          font-size:16pt;                              /＊ 设置字号 ＊/
          color:#CC0000;                               /＊设置文本的颜色 ＊/
        }
        -->
        </style>

【代码说明】

在<style>…</style>块中，创建了两个CSS规则：第一个CSS规则对<body>标记的背景图像、左边距、上边距和右边距进行了设置；第二个CSS规则对<body>、<td>和<th>标记的字体、字号和文本颜色进行了设置。这两个CSS规则自动应用于当前页面中。

5 在浏览器中查看网页的显示效果。