下载掌阅APP，畅读海量书库
立即打开
网页技术的基本知识已经讲完了。本节将制作一个基本的、完整的网页，读者在实践的同时，必须对每一个步骤有所理解。本节能让读者消除对网页技术的恐惧心理，更轻松地学习后面的技术。
标签是HTML技术中最基本的单位，也是HTML技术最重要的组成部分。标签可以轻松地控制网页的内容格式和样式。
编写HTML标签有4点要注意。
（1）任何标签必须用两个角括号括起来，即<和>，如<html>。
（2）任何单独的标签都是闭合的（闭合就是标签的最后要有一个/来标示结束），比如<br/>就是单独的（注意要在最后加上/，以表示其是独立的）。双标签必须有结束标签，比如<body>和</body>就是双标签（<body>是开始标签，</body>是结束标签，在开始和结束标签中可以有内容）。
（3）单标签里可以添加部分属性，用空格分隔，如<img width="100"/>。而双标签可在其开始标签添加部分属性，用空格分隔，如<body bgcolor="＃ffffff"></body>。
说明 ：标签与属性的格式即为<标签 属性="值" 属性="值"…>。
（4）标签是大小写无关的，<body>跟<BODY>表示的意思是一样的，标准推荐使用小写。
注意 ：某些时候HTML不是非常严格，比如<br>同样可以存在，但推荐读者养成标准的代码习惯。
本节综合前面的知识制作一个网页，为了规范起见，以制作整个网站的流程来制作这个网页。
（1）建立网站根目录，笔者的根目录创建在D:\，目录名为web。
（2）双击“控制面板|管理工具|Internet信息服务”项，启动IIS。
（3）在IIS窗口中右击“默认网站|属性”选项，“IP地址”选项为“（全部未分配）”，如图2.13所示，“主目录”选项卡的“本地路径”选项为“D:\web”，如图2.14所示，“文档”选项卡的“默认文档”为“index.htm”，如图2.15所示。
（4）笔者下载了一个jpg图片文件，并命名为test.jpg，移动到D:\web目录下。
注意 ：读者可以自己随意找一张jpg图片并命名为test.jpg放在D:\web目录下。
图2.13 设置网站IP地址
图2.14 设置网站根目录路径
图2.15 设置网站默认主页
（5）在D:\web目录下新建一个文本文件（扩展名为txt），用记事本程序编辑该文本文档，输入代码如代码2.1所示。
代码2.1 第一个网页的HTML代码：index.htm
注意 ：代码中的<img>标签为单标签，用于显示图片，用src指向图片路径，因为图片和网页文档位于同一目录下，所以图片路径采用相对文档路径。
（6）在记事本菜单栏选择“文件|另存为”命令，确认保存路径为“D:\web”，“文件名”项使用“index.htm”，“文件保存类型”项选择“所有文件”，如图2.16所示。
注意 ：以IIS中设置默认主页为index.htm，所以这里的网页文件作为默认网站的主页。
index.htm的网页文件已制作完成，如果需要再次编辑，读者只需要右击index.htm，选择菜单的“打开方式|记事本”命令。读者现在可以直接双击该文件，系统将调用IE浏览器浏览该网页。
既然已经配置好了IIS，读者也可以模拟浏览器端，访问网页服务器的形式测试网页。打开IE浏览器，在地址栏输入“localhost”，回车测试，如图2.17所示。
图2.16 保存网页类型
图2.17 网页测试结果
至此就完成了自己制作的第一个网页。在网页代码中的换行和空格是不起作用的，读者可以自己试试。新建文本文档只是为了启动记事本程序，所以网页制作完后可以将其删除。
这个页面虽然很简单，但是其表现了一个网页的完整结构，也完成了前面所学内容的实践论证。
说明 ：“localhost”中文意思是本机，在IIS没有给默认网站设置IP地址时采用。“localhost”在本机测试时常用，代替域名的作用。