1.2 HTML与HTTP_ASP.NET 3.5教程-QQ阅读男生轻小说网

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

设备和账号都新为新人

1.2 HTML与HTTP

前面介绍了Web访问过程中的两个重要的组成部分和各自的功能，下面介绍Web客户端和Web服务器之间传输的内容和协议。

1.2.1 HTML标记语言

HTML（HyperText Markup Language）是一种简单、通用的超文本标记语言，Web服务器返回给客户端的最常见的内容就是HTML文档。可以用其制作包含图像、文字、声音等精彩内容在内的网页，它由浏览器解释并显示在用户浏览器的窗口中。HTML文档的基本结构如下所示：

<html>
<head>…</head>                     //文档头部分
<body>
…                                  //文档的主体部分
</body>
</html>

基本HTML页面从<html>标记开始，到</html>结束。在它们之间，就是头部分和主体部分。头部分用<head>…</head>标记（Tags）界定，一般包含网页标题、文档属性等不在页面上显示的元素。主体部分是网页的主体，内容均会反映在页面上，用<body>….</body>标记来界定，主要包括文字、图像、动画、超链接等内容。

注意：代码中“//”符号为注释符。

标记是HTML语言的标签符号和用标签符号构成的各种元素的统称。标签是描述性的标记，用一对“< >”中间包含若干字符表示，通常成对出现，前一个是起始标签，后一个为结束标签。标记不区分大小写。较常见的标签如下：

<html></html>                  //HTML文档的开始和结束标签
<title></title>                //HTML文档标题的开始和结束标签
<body></body>                  //HTML文档体的开始和结束标签
<table></table>                //表格的开始和结束标签
<tr></tr>                      //表格中行的开始和结束标签
<td></td>                      //表格中列的开始和结束标签
<a></a>                        //超链接的开始和结束标签
<p></p>                        //段落的开始和结束标签
<form></form>                  //为用户输入创建表单标签
<br>                           //换行标签强行中断当前行，使后续内容在下一行显示
<input></input>                //定义输入域的开始，在其中用户可输入数据

【例1-1】用HTML语言设计一个简单的登录网页页面，设计后打开页面如图1.3所示。

图1.3 简单的HTML示例

设计步骤如下：

（1）新建一个命名为“example1-1”的文本文件，把下面的代码添加到example1-1.txt文件中并保存。

              <HTML>
              <HEAD>
              <Title>简单的HTML示例</Title>
              </HEAD>
              <BODY>
              <form name="form1"method="post"id="form1">
    <p align="center">用户登录</p><br>
    <table align="center"border="1"width="40%">
        <tr>
          <td align="right">用户名：</td>
          <td><input name="TextBoxName"type="text"id="TextBoxName"/></td>
        </tr>
<tr>
 <td align="right">密码：</td>
 <td><input name="TextBoxPwd"type="text"id="TextBoxPwd"/></td>
 </tr>
 </table>
 <p align="center"><input type="submit"name="BtnOK"value="确定"id="BtnOK"/></p>
 </form>
 </BODY>
 </HTML>

其中标签中的“name”、“method”、“id”等为标签的属性，等号后的为属性值。

在HTML的所有标记中，许多标记有若干属性，通过设置属性值，可对标记内的内容进行控制，多个属性之间必须用空格隔开。如果不设置标记的属性值，则使用系统的默认属性值。例如，上例中的body、p标记。

属性设置的一般格式为

<标记 属性1="值1" 属性2="值2"…>  …  </标记>

（2）更改example1-1.txt的后缀名，改成example1-1.html。用浏览器打开它，浏览器会对文档中的不同标记进行解释并显示指定的效果，打开后的网页页面即如图1.3所示。

注意：有些标记没有结束标记，如代码中的<br>标记。

1.2.2 XHTML标记语言

HTML从出现到现在，标准不断完善，功能也越来越强大，但其规范化要求不是很严格，仍有很多缺陷和不足。例如，代码琐碎、臃肿，尤其是标记使用不规范，浏览器需要有足够的能力才能够正确显示HTML页面。随着Web的发展，当面对多样的数据和表现，如数学公式、音乐标注等非传统文档类型时，HTML显得力不能及。另外，HTML不能适应越来越多的网络设备和应用的需要，如手机、PDA等显示设备不能直接显示HTML。因此HTML的后继者XHTML就出现了。XHTML非常严格，兼容性强，交互性好，能够解决HTML发展的问题，如多种显示设备的支持、多样数据的表现等。

1.XHTML的格式

XHTML的格式与HTML类同，只是文档前面加了一个文档说明和标记的命名空间。它的基本格式为

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">//XHTML文档类型的声明
<html xmlns="http://www.w3.org/1999/xhtml"  >
<head>
<title>XHTML的格式</title>        //文档头部分
XHTML命名空间
</head>
<body>
<div>XHTML文档的主体部分</div>  //文档主体部分
</body>
</html>

第一行代码是DOCUMENT声明。DOCUMENT是document type（文档类型）的缩写，用来说明所使用的XHTML是什么版本。上例代码中所使用的是xhtml1-transitional文档类型。文档类型中包含了文档的规则，浏览器展现页面时会根据页面所采用的DTD（文档类型定义）来解释页面内的标识，并将其显示出来。

第二行代码与HTML也有明显差别。在HTML代码中仅有<html>，但在XHTML中，标记内还有xmlns="http://www.w3.org/1999/xhtml"。"xmlns"是XHTML namespace的缩写，即XHTML命名空间，它用来声明网页内所用到的标记是属于哪个命名空间的。在不同的命名空间中，可以有相同的标记表示不同的含义，所以声明命名空间是非常必要的。

2.XHTML与HTML的区别

（1）标记的嵌套使用

标记的嵌套使用是对文档结构的要求。尽管HTML也要求正确的嵌套，可是在实际中，即使HTML使用了不正确的嵌套形式，很多浏览器也一样可以正常显示。但是XHTML对文档的结构要求较严格，整个文档一定要有正确的组织格式，所有的嵌套必须完全正确。例如，在XHTML中：

<body><div>XHTML文档的主体部分</div></body>   //正确的嵌套
<body><div>XHTML文档的主体部分</body></div>    //错误的嵌套

（2）大小写的使用

HTML是不区分大小写的，元素和属性名称可以是大写、小写或是混合书写。但是XHTML文档要求所有的元素和属性名称必须要小写，属性值不做要求。例如，在XHTML中：

<img src="/images/025.jpg"alt="nanjing"/>          //正确
<IMG SRC="/images/025.jpg"Alt="nanjing"/>       //错误

（3）引号的使用

HTML中的引号比较随意，属性值可以用引号引起来，也可以不使用引号。但是XHTML中要求所有的属性值都必须加引号。例如，在XHTML中：

<input type="submit"value="确定"id="BtnOK"/>      //正确
<input type=submit value=确定id=BtnOK"/>          //错误

（4）结束标记

在HTML中，有些标记是可以省略结束标记的，由下一个标记的出现来让它自然结束。这种省略形式在XHTML中是绝对不允许的，XHTML要求所有的标记都必须有结束标记，即使是单个标记，也需要使用“/>”来结束。例如，在XHTML语言中：

<p>asp.net3.5                                //错误
<p>asp.net3.5</p>                             //正确
asp.net3.5<br>                                //错误
asp.net3.5<br/>                                //正确

（5）样式的使用

在不使用样式表的情况下，HTML中的每个属性都可以直接使用“属性名=属性值”的方法设置外观样式。例如，在HTML中：

<img src="image\njnu.jpg"width=300 height=60>

上例中的图片的高度和宽度样式是直接通过属性设置的。但在XHTML中，如果不使用样式表，则只能通过style属性来设置样式。上述代码在XHTML中如下所示：

<img style="width:300px;height:60px;"src="image/njnu.jpg"/>

（6）id和name

在HTML中，每个元素都可以定义name属性，同时也可以定义id属性，两个属性都可以标识某一个元素。例如：

<input type="submit" value="确定" name="BtnOK" id="BtnOK" />

但是在XHTML中，每个元素只能有一个标记属性id，name属性不再被使用。例如：

<input type="submit"value="确定"id="BtnOK"/>           //没有name属性

（7）特殊符号

在XHTML中，特殊符号用编码表示，例如：

&lt    表示<
&gt   表示>
&amp  表示 &

【例1-2】用XHTML语言改写【例1-1】，用于体现XHTML与HTML的区别。

设计步骤如下：

（1）新建一个命名为“example1-2”的文本文件，把下面的代码添加到example1-2.txt文件中并保存。

<!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>
<title>简单的HTML示例</title>
</head>
<body>
<form name="form1"method="post"id="form1">
      <p align="center">用户登录</p><br>
      <table align="center"border="1"width="40%">
          <tr>
              <td align="right">用户名：</td>
              <td><input name="TextBoxName"type="text"id="TextBoxName"/></td>
          </tr>
          <tr>
              <td align="right">密码：</td>
              <td><input name="TextBoxPwd"type="text"id="TextBoxPwd"/></td>
          </tr>
      </table>

      <p align="center"><input type="submit" value="确定" id="BtnOK" /></p>
</form>
</body>
</html>

（2）更改example1-2.txt的后缀名，改成example1-2.html。用浏览器打开它，浏览器会对文档中的不同标记进行解释并显示指定的效果，打开后的网页页面即如图1.3所示。

比较【例1-1】和【例1-2】可以看出，XHTML语言多了DOCUMENT声明和XHTML命名空间，同时文档中的元素和属性名称小写，并除去了name="BtnOK"。

1.2.3 CSS样式表

在网页中另一个重要的表现技术就是CSS（Cascading Style Sheet，层叠样式表）。它是W3C（World Wide Web Consortium，全球万维网联盟）为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，增加了类、层等新概念，可以对文字重叠、定位等提供更为丰富的样式。在当今的网页制作中，几乎所有漂亮的网页都使用了CSS。有了CSS的控制，网页便会给人一种赏心悦目的感觉。

1.CSS样式规则

样式是指元素在浏览器中的呈现形式，如元素的高度、宽度，是否有边框，边框颜色，边框粗细，字体大小，字体颜色，元素的背景色和背景图片，元素内数据的对齐方式等。在（HTML或XHTML）标记中可以通过style属性设置元素的样式，每个style内包含一个或多个属性，其一般形式为：

style="属性名1: 属性值1; 属性名2: 属性值2;……"

属性名与属性值之间用冒号“：”分隔，如果一个样式有多个属性，则各属性之间用分号“;”隔开。例如：

<p style="font-family: "宋体"; color:green; background-color: yellow; font-size: 9pt">……</p>

这种通过元素的style属性给元素设置样式的优点是方便、直观，缺点是需要给每个元素设置。为了解决此问题，可以进行集中样式管理，这种单独定义的样式被称为样式规则。

样式必须符合的格式如下所示：

样式选择符{ 样式属性1:值1;    样式属性2:值2;  样式属性3:值3;……}

其中包含两个部分：样式选择符和样式属性。样式选择符用来设置样式所作用的元素范围。{ }内是所采用的样式。{ }内的样式会对样式选择符作用范围内的所有元素生效。例如：

td{font-size:12px;  background-color:green}

td表示样式选择符，对<td>标签起作用。font-size和background-color表示样式属性，分别表示字体大小和背景色。12px和green则表示属性值，字体为12像素，背景色为绿色。

2.样式选择符分类

为了方便控制样式规则所作用的元素范围，CSS中把样式选择符分为如下几类：标签选择符、类选择符、ID选择符、伪类选择符、包含选择符和并列选择符。

（1）标签选择符

标签选择符（即HTML或XHTML标记）是最典型的选择符类型。定义的时候直接使用标记名称作为选择符名称。常见格式如下：

标签名{ 样式属性1:值1;   样式属性2:值2; 样式属性3:值3;……}

例如：

div
{
  background-color:white;       //背景颜色
  text-align:center;            //文本水平布局
}

引用本css文件的页面内所有div标记都会采用{}内的样式。

（2）类选择符

标签选择符比较方便，能够对某种标签定义样式，但是有的时候并不想对网页内所有此标签应用同一种样式，而只想对某些标签应用某种样式，它们不一定是相同的标签。常见格式如下：

.类名{ 样式属性1:值1; 样式属性2:值2; 样式属性3:值3;……}

例如：

.center
{
  background-color:white;       //背景颜色
  text-align:center;            //文本水平布局
}

如果某个标签的class属性设置为类选择符的名称，则类选择符就会对此标签起作用。例如：

<h1 class="center">类选择符</h1>
<h2 class="center">类选择符</h2>

h1和h2的class属性都设置为center，则center样式规则就会对它们起作用。

注意：类名的前面有个“.”，表示是自定义类。利用样式生成器定义的时候，系统会自动加上这个点，但引用的时候不要带点。

（3）ID选择符

ID选择符用于对某一个元素定义样式规则，只能用于某个元素。常见格式如下：

#ID名称{ 样式属性1:值1;  样式属性2:值2;    样式属性3:值3;……}

例如：

#header
{
  background-color:white;       //背景颜色
  text-align:center;            //文本水平布局
}

如果某个标签的ID属性的值和ID选择符的名称相同，则ID选择符会对此标签生效。例如：

<div id="header"> ... </div>

可以看出，类选择符和ID选择符的定义方式非常相似，但也存在一定的区别。多个标签可以使用同一个自定义类，而ID却只能用于某一个标签。

利用CSS定义样式时还要注意，如果某个元素同时受标签选择符、类选择符和ID选择符的影响，则要注意它们的优先级问题：ID选择符的优先级最高，其次是类选择符，标签选择符的优先级最低。

（4）伪类选择符

“伪类”是特殊的类，能自动地被支持CSS的浏览器所识别。伪类的一个最常用的应用是指定超链接标签<A>，使用伪类可以为访问过的、未访问过的、激活的及鼠标指针悬停于其上的4种状态的超链接定义不同的显示样式，即

A:link                      //代表未访问过的超链接
A:visited                    //代表访问过的超链接
A:hover                     //当鼠标指针移动到超链接上
A:active                    //当超链接处于选中状态

A是超链接标签。在CSS定义中，A:hover必须被置于A:link和A:visited之后才有效，而A:active必须被置于A:hover之后才有效。伪类名称对大小写不敏感。例如：

a:active
{
      color:blue;                    //超链接被选中时的颜色
      background-color:buttonface;   //超链接被选中时的背景颜色
}

（5）包含选择符

包含选择符用于定义具有层次关系的样式规则，它由多个样式选择符组成，一般格式如下：

选择符1  选择符2…{ 样式属性1:值1;样式属性2:值2;    样式属性3:值3;……}

各选择符之间用空格分割。例如：

DIV  P  H1
{
                    font-weight: bold;
                    color: red;
}

只有处于DIV标签内的P标签内的H1标签才会应用如上的样式，其他地方的H1不会受此样式影响。

【例1-3】用CSS美化【例1-1】中的登录网页页面。

设计步骤如下：

（1）新建一个命名为“example1-3”的文本文件，把下面的代码添加到example1-3.txt文件中并保存。

<HTML>
<HEAD>
<Title>简单的CSS应用示例</Title>
<style type="text/css" >
  p {font-family:宋体; font-size:14pt; color: Blue }
  td{font-size:12px;  background-color:Silver}
  a:link{color:#FF0000}       // 未访问的链接颜色
  a:visited{color:#00FF00}    // 已访问的链接颜色
  a:hover{color:#FF00FF}      // 鼠标移动到链接上时的颜色
  a:active{color:#0000FF}     // 选定的链接颜色
</style>
</HEAD>
<BODY >
<form name="form1" method="post" id="form1">
  <p align="center">用户登录</p>
  <table align="center" border="1" width="40%">
    <tr>
      <td align="right">用户名：</td>
      <td><input name="TextBoxName" type="text" id="TextBoxName" /></td>
    </tr>
    <tr>
      <td align="right">密码：</td>
      <td><input name="TextBoxPwd" type="text" id="TextBoxPwd" /></td>
    </tr>
  </table>
  <p align="center">
    <input type="submit" name="BtnOK" value="确定" id="BtnOK" />
    <a href="http://www.baidu.com">百度</a></p>
</form>
</BODY>
</HTML>

（2）更改example1-3.txt的后缀名，改成example1-3.html。用浏览器打开它，浏览器会对文档中的不同标记进行解释并显示指定的效果，打开后的网页页面如图1.4所示。

在【例1-3】的代码中，<style></style>标签对括起来的部分就是CSS样式表。其中：（1）p {font-family:宋体;font-size:14pt;color: Blue} 中的“p”代表该样式是针对<p>标签的。font-family表示字体，font-size:14pt表示字体大小，color: Blue表示字体颜色。

图1.4 CSS应用示例页面

（2）td {font-size: 12px; background-color:Silver}中的“td”代表该样式是针对<td>标签的。font-size:12px表示字体大小，background-color:Silver表示背景颜色。

1.2.4 脚本语言

HTML提供了较完善的设计页面的功能，但它提供的信息大多是静态的，这些信息被下载到客户计算机后，就是固定不变的，一些原本可以在客户端完成的任务（如数据合法性检查等），不得不依靠服务器来完成，这样既加重了服务器的负担，也增加了网络的负载。于是，Netscape公司与Sun公司于1995年合作开发了JavaScript脚本语言，弥补了上述不足，大大提高了客户端的交互性。在此之后，微软公司也发布了自己的脚本语言VBScript。例如：

<script type="text/javascript">this.location.href='http://baidu.com'</script>  //使用JavaScript链接到百度
<script type="text/vbscript">MsgBox("Hello,World!")</script>                   //使用VBScript弹出
                                                                      "Hello,World!"对话框

脚本语言是介于HTML、Java、C++ 和Visual Basic之类的编程语言之间的语言。HTML通常用于格式化文本和链接网页，而编程语言则通常用于向计算机发送一系列复杂指令。脚本语言也可用来向计算机发送指令，但它们的语法和规则没有可编译的编程语言那样严格和复杂。脚本语言主要用于格式化文本和使用以编程语言编写的已编译好的组件。

无论哪种脚本语言，其运行环境只局限于Web浏览器。它们只能通过Web浏览器去完成某种操作，而不是像普遍意义上的程序那样可以独立运行。因为需要由Web浏览器进行解释和执行，所以脚本语言并不像其他编译型程序设计语言那样用途广泛。

【例1-4】利用JavaScript脚本语言检查登录用户名是否为空值，若为空值则弹出对话框提示。

设计步骤如下：

（1）新建一个命名为“example1-4”的文本文件，把下面的代码添加到example1-4.txt文件中并保存。

<HTML>
<HEAD>
<Title>简单的HTML示例</Title>
<script type="text/javascript">
function demo()
{
  if (document.form1.TextBoxName.value=="")
  { alert("请输入用户名！");}

}
</script>
</HEAD>
<BODY >
<form name="form1" method="post" id="form1">
  <p align="center">用户登录</p>
  <table align="center" border="1" width="40%">
    <tr>
      <td align="right">用户名：</td>
      <td><input name="TextBoxName" type="text" id="TextBoxName" /></td>
    </tr>
    <tr>
      <td align="right">密码：</td>
      <td><input name="TextBoxPwd" type="text" id="TextBoxPwd" /></td>
    </tr>
  </table>
  <p align="center">
    <input type="submit"name="BtnOK" value="确定"id="BtnOK" onclick="demo();"/></p>
</form>
</BODY>
</HTML>

（2）更改example1-4.txt的后缀名，改成example1-4.html。用浏览器打开它，不输入用户名并单击【确定】按钮，浏览器弹出对话框并提示“请输入用户名”，如图1.5所示。

图1.5 JavaScript示例

以上网页源文件中，<script>和</script>标签括起来的部分就是JavaScript代码。代码中只包含了一个名为demo的函数，此函数的功能是判断用户名是否为空，若为空则弹出一个对话框，显示“请输入用户名”文字信息。在网页的“确定”按钮中，通过设置其onclick事件，使用户单击该按钮时调用demo函数。

1.2.5 HTTP协议与URL

WWW（World Wide Web，万维网）简称Web，是Internet（又称国际互联网）上最方便、最受用户欢迎的信息服务类型。WWW上集中了全球的信息资源，是存储和发布信息的地方，也是人们查询信息的场所。Internet中包含了成千上万的WWW服务器。

Web浏览器和服务器用超文本传输协议HTTP（HyperText Transfer Protocol）来传输Web文档，通过统一资源定位符URL（Uniform Resource Locator）标识文档在网络上服务器的位置及服务器中的路径。

1.HTTP协议

客户端与服务器要进行正常的通信，必须遵循统一的传输内容和传输协议，否则将无法正常通信。在Web世界里，传输协议使用的是HTTP。传输的内容为HTML超文本标记语言。有了这两项标准，Web浏览器便知道如何向Web服务器发送请求，而Web服务器也知道如何将请求的资源传送到Web浏览器，如图1.6所示。

图1.6 传输Web文档

例如：

http://www.baidu.com                    //通过http协议打开百度主页

因为WWW服务器使用的主要协议是HTTP协议，故可以在浏览器中省略“http://”。

例如：

www.baidu.com   //省略“http://”

HTTP协议的主要特点可概括如下：

（1）支持客户/服务器（C/S）模式。

（2）简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD和POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

（3）灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

（4）无链接：无链接的含义是限制每次链接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开链接。采用这种方式可以节省传输时间。

（5）无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次链接传送的数据量增大。另一方面，当服务器不需要先前信息时其应答就较快。

2.URL

WWW的信息分布在全球，要找到所需信息就必须有一种说明该信息存放在哪台计算机的哪个路径下的定位信息。统一资源定位器URL就是用来确定某信息位置的方法。

URL的概念实际上并不复杂，就像指定一个人要说明他的国别、地区、城镇、街道、门牌号一样，URL指定Internet资源要说明它位于哪台计算机的哪个目录中。URL通过定义资源位置的抽象标识来定位网络资源，其格式如下：

信息服务类型：//信息资源地址/文件路径

对于Internet，“信息服务类型”是指Internet的协议名，包括ftp（文件传输服务）、http（超文本传输服务）、gopher（Gopher服务）、mailto（电子邮件地址）、telnet（远程登录服务）、news（提供网络新闻服务）和wais（提供检索数据库信息服务）。

“信息资源地址”指定一个网络主机的域名或IP地址。在有些情况下，主机域名后还要加上端口号，域名与端口号之间用冒号“：”隔开。这里的端口是指操作系统用来辨认特定信息服务的软件端口。一般情况下，WWW服务器程序采用标准的保留端口号（80），因此，用户在URL中可以省略。以下是URL的一些例子：

http://www.whitehouse.gov:70                   //使用http协议，“70”是端口号
telnet://www.sina.com                          //telnet是Internet的远程登录协议
ftp://ftp.w3.org/pub/www/doc                   //使用文件传输协议
gopher://gopher.internet.com                   //Internet上提供双向沟通的界面（查询系统）
news://comp.sys.novell                         //使用网络新闻服务
wais://quake.think.com/directory-of-servers    //使用wais协议，提供检索数据库信息服务

注意：以上只是示例，在实际网络中并不可访问。

3.绝对路径和相对路径

实际应用中，路径通常被分为绝对路径和相对路径两种表示方法。

所谓绝对路径，就是指带有完整域名的文件路径。例如：

http://www.sohu.com/index.htm                      //其中“www.sohu.com”为域名

所谓相对路径，就是由目标文件与当前文件的相对位置来表示的文件路径。例如：

<a href = "../index.html">上一级index.html页面</a> //链接到上一级目录中的index.html页面

其中“..”表示上一级目录，“../../”表示上上级的目录，以此类推。

在实际中还有如下符号：

（1）“.”代表目前所在的目录。例如：

<a href="./SubDir2/Red.gif">下一级目录的Red.gif</a>   //打开下一级目录的Red.gif图片

（2）“/”代表根目录。例如：

<a href="/Red.gif">打开根目录下的Red.gif文件</a>     //打开根目录下的Red.gif图片

【例1-5】利用相对路径和绝对路径打开各个目录下的文件。

设计步骤如下：

（1）在桌面上新建一个命名为“example1-5”的文件夹，在此文件夹中新建一个命名为“example1-5”的文本文件，把下面的代码添加到example1-5.txt文件中并保存。

<html>
<head>
<title>example1-5相对路径和绝对路径</title>
</head>
<body>
<a href="C:/girl.gif">打开根目录下的girl.gif文件</a><br>       //利用绝对路径打开

<a href = "../example1-4.html">上一级example1-4.html页面</a><br>
<a href = "./SubDir2/boy.gif ">下一级目录的boy.gif</a><br>
<a href="/girl.gif">打开根目录下的girl.gif文件</a><br>        //利用相对路径打开
</body>
</html>

（2）更改example1-5.txt的后缀名，改成example1-5.html。在C盘下存放一张“girl.gif”图片，把example1-4.html复制到桌面上，同时在example1-5文件下新建一个命名为“SubDir2”的文件夹并在此文件夹下存放一张boy.gif文件。

（3）用浏览器打开example1-5.html文件，分别单击各个链接，浏览器分别打开不同的文件，结果如图1.7所示。

图1.7 利用相对和绝对路径打开文件

1.2.6 HTML表单与Web请求

HTML中有一对特殊的标签<form></form>，在这一对标签之间可以包含许多称为“表单控件”的标签，这些表单控件通常是用来获取用户的输入的，而后当单击某个特定的按钮后，所有表单控件中的用户输入的值将被提交到服务器，从而形成一次新的Web请求。例如：

<form name="form1" action="HTMLPage.htm" method="post" id="form1">
  用户名：<input name="TextBoxName" type="text" id="TextBoxName" />
  <input type="submit" name="BtnOK" value="确定" id="BtnOK"/>
</form>

其中包含一个文本框（用于输入用户名）和一个提交按钮。单击【确定】按钮后，数据就会被传送至表单的“action”属性所指向的页面，形成了一次Web请求。

常用的表单控件有文本框、密码框、单选钮、复选框、下拉列表框、按钮等。

Web请求发送的方式有2种，分别是GET和POST。上面例子中采用的是POST方式，这是Web表单的默认方式。

虽然这两种方式都可以向服务器提交数据，但是其应用的环境还是有区别的。一般情况下，用户在网页表单中输入数据，并单击某个按钮之后发送的请求，通常使用POST方式。

而用户通过地址栏输入要访问的资源地址，或者通过网页中的超链接访问资源时，采用的是GET方式。例如：

              http://www.sohu.com/sport/index.aspx?Id=2     //此处的Id参数以GET方式传送到服务器

从提交的形式来看，GET和POST方式有很大区别。GET方式本质上是将用户需要提交的数据转存到URL中，作为资源请求的一部分传送到Web服务器，当服务器接收到这样的资源请求时，会将其中的用户数据部分从地址中分离出来。

【例1-6】使用POST方式将登录页面的用户名和密码传到HTMLPage.htm文件中。

设计步骤如下：

（1）在桌面上新建一个命名为“example1-6”的文件夹，在此文件夹中分别新建一个命名为“example1-6”和一个命令为“HTMLPage”的文本文件，把下面的代码添加到example1-6.txt文件中并保存。

<html >
<head>
  <title>form示例</title>
</head>
<body  bgcolor="#ccff66">
<form name="form1" action="HTMLPage.htm" method="post" id="form1">
  <p align="center">用户登录</p>
  <table align="center" border="1" width="40%">
    <tr>
      <td align="right">用户名：</td>
      <td><input name="TextBoxName" type="text" id="TextBoxName" /></td>
    </tr>
    <tr>
      <td align="right">密码：</td>
      <td><input name="TextBoxPwd" type="text" id="TextBoxPwd" /></td>
    </tr>
  </table>
  <p align="center">
    <input type="submit" name="BtnOK" value="确定" id="BtnOK"/></p>
</form>
</body>
</html>

（2）把下面的代码添加到HTMLPage.txt文件中，更改example1-6.txt和HTMLPage.txt的后缀名，分别改成example1-6.html和HTMLPage.htm。

<html >
<head>
  <title>HTMLPage页面</title>
</head>

<BODY>
<h1>这是HTMLPage页面<h1>
</body>
</html>

（3）用浏览器打开example1-6.html文件，输入用户名和密码并单击【确定】按钮，结果如图1.8所示。

当单击【确定】按钮后，浏览器打开了HTMLPage页面，并把用户名和密码传到HTMLPage页面中。至于HTMLPage页面是怎样获得数据的，在以后的章节中会为大家介绍。

图1.8 将登录页面的用户名和密码传到HTMLPage页面