2.1.1 创建第1个HTML文档

本节介绍如何创建1个简单的HTML文档，该文档在浏览器中显示“Hello HTML5！”字符串。

1. 新建文件

首先运行NotePad++文字处理软件，然后新建一个文本文件（没有基础的读者可以使用DreamWeaver软件开发HTML网页）。

2. 添加代码

在编辑器中添加如下代码。

<!DOCTYPE HTML> 
<html> 
<head> 
<title>HTML5参考手册</title> 
<meta name="keywords" content="HTML5"> 
</head> 
<body> 
Hello HTML5！ 
</body> 
</html>

3. 保存文件

将以上代码保存成文件 firstHTML.html（注意后缀名不能省略）。Notepad++会根据创建的文件类型，为文档中的各种关键字显示不同的字体和颜色。

创建完成的界面如图2-1所示。

47140-00-023-2.jpg

图2-1 创建HTML文档

4. 运行HTML文档

运行HTML文档有多种方式，这里介绍常用的几种方式。

（1）直接使用文件物理路径访问。由于HTML是纯浏览器解释的语言，不需要服务器端的任何解释行为，只要浏览器支持HTML标准即可以浏览，所以直接在浏览器中输入HTML文档路径即可运行HTML文档。

如笔者存放firstHTML.html文档的路径为“D:\winapache\wwwroot\chap02”，因此只要打开浏览器，在地址栏中输入“D:\winapache\wwwroot\chap02\firstHTML.html”即可。

使用物理路径访问HTML文档时，浏览器通常会自动在浏览器地址栏添加一些关键字来表示当前访问的是物理路径。如Chrome和Firefox浏览器会自动在地址前面添加“file:///”字符串表示访问的是物理路径文件，而Safari浏览器必须手动添加“file:///”，如果直接输入物理路径则不能访问。Opera浏览器会自动在地址前面添加“file://localhost/”，IE 10浏览器则不添加任何字符，直接使用物理访问。

提示：如果双击该文件，系统会使用默认的浏览器打开该文件，这种方法也是使用文件的物理路径访问。

使用物理路径访问firstHTML.html文档的界面如图2-2所示。

47140-00-024-1.jpg

图2-2 物理路径访问HTML文档

从图中看出，虽然firstHTML.html文档中包含了很多内容，但是实际的显示结果只有字符串“Hello HTML5！”。

（2）直接使用NotePad++软件访问HTML文档。NotePad++软件的【运行】菜单提供了调用浏览器的快捷方式（前提是读者电脑安装了对应的浏览器）。如要使用Chrome浏览器查看文档，选择【运行→Launch in Chrome】菜单命令即可启动Chrome浏览器打开当前文档。如果读者使用其他软件，也可以使用那些软件提供的便捷访问方法。

（3）使用虚拟路径访问。当用户把文档上传到Web服务器之后，一般都需要通过虚拟路径访问。使用虚拟路径访问文档，首先需要安装Web服务器，如目前常用的Web服务器有微软的IIS服务器、Apache服务器等。笔者安装了Apache服务器（有关Apache服务器的安装请参考相关文档），其目录被设置为“D:\winapache\wwwroot\”，因此如果想通过虚拟路径访问文档，必须将文档放置在此目录下。如要访问前面创建的文档，可以首先打开浏览器，然后输入地址“http://localhost/chap02/firstHTML.html”即可。其中“localhost”表示服务器名称（因为Web服务器安装在本地计算机，默认的服务器名称为localhost）。如果Web服务器安装在远程计算机，则需要将localhost改成对应的域名或者IP地址，如“http://www.w3.org”。

通过虚拟路径访问firstHTML.html文档的界面如图2-3所示。

47140-00-024-2.jpg

图2-3 虚拟路径访问HTML文档

从图中可以看出，两种方法的显示效果是一样的，不过建议读者采用虚拟路径来访问文档。

提示：HTTP（Hypertext Transport Protocol）为超文本传送协议。“http://”放在文件地址前面，表示当前采用的是HTTP协议来访问文档。事实上，网络中还有其他协议，如FTP、Telnet等，读者可以参考相关书籍。浏览器默认采用的协议为HTTP。

上一章目录下一章