3.1.2　HTML文档结构

1．第一个简单的HTML程序

HTML的本质是标记，也就是说，它是在文本的基础上进行了标记，并引入了其他的相关资源。一个最简单的HTML程序代码如下（此处代码为案例需要，非HTML 5标准，后文会详细介绍相关标准）：

将上述代码复制到文本文件中，并将文本文件的后缀改为html，双击该文件，即可通过浏览器访问，其显示界面如图3.1所示。

从图3.1中可以看出，一个简单的HTML文档基本上由以下的4部分组成的：

①＜HTML＞＜/HTML＞。这是HTMTL文档的起始位置和结束位置，

②＜HEAD＞＜/HEAD＞。这是HTML的头部标签，一般包含HTML文档的字符集、脚本文件、CSS代码、JavaScript代码等不需要在浏览器中直接显示的内容。

③＜TITLE＞＜/TITLE＞。这是在浏览器页面中的标题栏的内容。

④＜BODY＞＜/BODY＞。这部分是网页的主体部分，页面中显示的所有效果都是属于这部分。

2．HTML的基本特点

在学习HTML之前，首先了解HTML的基本特点，本书将HTML的基本特点总结如下，方便读者熟悉：

①HTML是少数几个不区分大小写的语言，如标签中的＜HTML＞、＜html＞、＜hTmL＞的解析是一样的。

②HTML的标记分为配对标记和单标记，其中大部分是成对出现的，称为配对标记，少部分单独出现，称为单标记。如换行标记＜br/＞是单标记，＜p＞...＜/p＞、……、＜table＞...＜/table＞等是配对标记。

③HTML的标签如果是成对出现的，当后面的结束标记省略时，编译器不会提示错误，有些页面也会正常显示。但是，在HTML 5的标准下，一般建议不要省略标记，尽量书写完整，这样方便后面的CSS进行页面的优化。

④大部分标记都带有若干属性，属性之间不同的值，可以表示不同的意义。

3．相对路径和绝对路径

（1）相对路径

在Web应用程序开发中，本文将相对路径定义为不以“/”开头的路径。它在应用中有如下特点：

①＜a href="../1.html"＞表示访问上一级目录中的1.html，该文件必须在上一级目录下，否则报404错误。

②＜a href="./2.html"＞表示访问当前目录中的2.html。

③./表示当前路径作为起点，../表示以上一级目录作为起点，如果要定位到其他目录，则需要添加目录名。

④相对路径较易出错，在实际开发中建议使用绝对路径。

（2）绝对路径

与相对路径不同，绝对路径是以“/”开头的路径，它的用法如下：

①＜a href="/web/2.html"＞表示访问Web工程根目录中的1.html，无论之前的链接在何处。

②链接地址、表单提交地址、重定向的绝对路径，应该从“应用名（工程名）”开始写，而转发应该从“应用名之后”开始，格式如“/工程名/目录路径/index.html”。

4．MyEclipse的HTML编辑

在本书中，所有的页面都是通过MyEclipse开发并管理Tomcat，具体步骤如下：

（1）配置MyEclipse中的Tomcat

①单击工具栏上的Run/Stop/Restart MyEclipse Servers图标的下拉按钮，选择Configure Server。

②在弹出的Preferences对话框中展开MyEclipse—Servers—Tomcat—Tomcat 6.X。

③将Tomat server选项置为Enable（默认为Disable）。

④单击Tomcat home directory之后的Browse按钮，选择Tomcat主目录；然后自动生成Tomcat base directory和Tomcat temp directory，单击OK按钮。

⑤注意事项：两项可改可不改的。

a．Tomcat下的JDK—Tomcat JDK name是已安装的JDK。

b．建议Tomcat下的Launch—Tomcat launch mode设置为Run model，默认为Debug mode，该模式在有些时候会显示不正常。

⑥再单击工具栏上的Run/Stop/Restart MyEclipse Servers图标的下拉按钮，选择Tomcat 6.x，单击Start按钮。

⑦当在控制台显示Server startup in XXX ms时，则Tomcat启动成功。

（2）建立Web工程

①建立一个Web Project（Web工程），填写Project name（如web），JDK最好选6.0，其他选项默认，单击Finish按钮。

②在WebRoot下右击，新建一个HTML文档，修改文件名，如1.html。

③在后续章节中，可能会涉及操作Java类和web.xml文件，感兴趣的读者可以提前了解。

（3）部署项目到Tomcat服务器

①单击工具栏上的Deploy MyEclipse J2EE Project to Server图标。

②弹出Project Deployments对话框，单击Add按钮。

③弹出New Deployment对话框，选择Tomcat 6.x，单击Finish按钮，最后单击OK按钮。

“Project Deployments”对话框有4个按钮，常用的为：

a．Add按钮：在Tomcat服务器上增加新应用。

b．Remove按钮：删除Tomcat服务器上的新应用。

c．Redeploy按钮：重新部署该应用，一般每次修改后都需要重新部署。

（4）访问Tomcat服务器上的页面

访问方式很简单，只需要在浏览器地址栏中输入http://localhost:8080/web/1.html并按【Enter】键，即可访问，其中web为工程名。