使用SSI（Server Side Include）的html文件扩展名，SSI（Server Side Include），通常称为“服务器端嵌入”或者叫“服务器端包含”，是一种类似于ASP的基于服务器的网页制作技术。

SSI工作原理：

将内容发送到浏览器之前，可以使用“服务器端包含 (SSI)”指令将文本、图形或应用程序信息包含到网页中。例如，可以使用 SSI 包含时间/日期戳、版权声明或供客户填写并返回的表单。对于在多个文件中重复出现的文本或图形，使用包含文件是一种简便的方法。将内容存入一个包含文件中即可，而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示 Web 服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。

因为包含 SSI 指令的文件要求特殊处理，所以必须为所有 SSI 文件赋予 SSI 文件扩展名。默认扩展名是 .stm、.shtm 和 .shtml。

Web 服务器在处理网页的同时处理 SSI 指令。当 Web 服务器遇到 SSI 指令时，直接将包含文件的内容插入 HTML 网页。如果“包含文件”中包含 SSI 指令，则同时插入此文件。除了用于包含文件的基本指令之外，还可以使用 SSI 指令插入文件的相关信息（如文件的大小）或者运行应用程序或 shell 命令。

网站维护常常碰到的一个问题是，网站的结构已经固定，却为了更新一点内容而不得不重做一大批网页。SSI提供了一种简单、有效的方法来解决这一问题，它将一个网站的基本结构放在几个简单的HTML文件中（模板），以后我们要做的只是将文本传到服务器，让程序按照模板自动生成网页，从而使管理大型网站变得容易。

所以，利用SHTML格式的页面目的和 ASP 差不多，但是因为是 API 所以运转速度更快，效率更高，比ASP快，比HTML慢，但由于可以使用服务器端包含，因此使页面更新容易（特别是批量更新banner，版权等），想象一下吧，你有一段 HTML，要在中间穿插一些特殊的服务端脚本，比如插入其他 HTML 段落，你选择 ASP 来完成这个任务，但是如果任务更繁重，需要更多的时间，比如 5 s，这个时候你不用 ASP 而用  SHTML，或许处理时间就只用 4s 了。

SSI有什么用？

之所以要扯到 SSI，是因爲 Shtml - Server-Parsed HTML 的首字母缩略词。包含有嵌入式服务器方包含命令的 HTML 文本。在被传送给浏览器之前，服务器会对 SHTML 文档进行完全地读取、分析以及修改。shtml和asp 有一些相似，以shtml命名的文件里，使用了ssi的一些指令，就像asp中的指令，你可以在SHTML文件中写入SSI指令，当客户端访问这些shtml文件时，服务器端会把这些SHTML文件进行读取和解释，把SHTML文件中包含的SSI指令解释出来比如：你可以在SHTML文件中用SSI指令引用其他的html文件（#include ），服务器传送给客户端的文件，是已经解释的SHTML不会有SSI指令。它实现了HTML所没有的功能，就是可以实现了动态的SHTML，可以说是HTML的一种进化吧。像新浪的新闻系统就是这样的，新闻内容是固定的但它上面的广告和菜单等就是用#include引用进来的。

目前，主要有以下几种用用途：

1. 显示服务器端环境变量<#echo>
2. 将文本内容直接插入到文档中<#include>
3. 显示WEB文档相关信息<#flastmod #fsize> (如文件制作日期/大小等)
4. 直接执行服务器上的各种程序<#exec>(如CGI或其他可执行程序)
5. 设置SSI信息显示格式<#config>(如文件制作日期/大小显示方式)

高级SSI<XSSI>可设置变量使用if条件语句。

使用SSI

SSI是为WEB服务器提供的一套命令，这些命令只要直接嵌入到HTML文档的注释内容之中即可。如：

<!--#include file="info.htm"-->

就是一条SSI指令，其作用是将"info.htm"的内容拷贝到当前的页面中，当访问者来浏览时，会看到其它HTML文档一样显示info.htm其中的内容。其它的SSI指令使用形式基本同刚才的举例差不多，可见SSI使用只是插入一点代码而已，使用形式非常简单。当然，如果WEB服务器不支持SSI，它就会只不过将它当作注释信息，直接跳过其中的内容；浏览器也会忽略这些信息。

如何在我的WEB服务器上配置SSI功能？

在一些WEB服务器上（如IIS 4.0/SAMBAR 4.2），包含 #include 指令的文件必须使用已被映射到 SSI 解释程序的扩展名；否则，Web 服务器将不会处理该SSI指令；默认情况下，扩展名 .stm、.shtm 和 .shtml 被映射到解释程序（Ssinc.dll）。
Apache则是根据你的设置情况而定，修改srm.conf如：

AddType text/x-server-parsed-html .shtml 将只对.shtml扩展名的文件解析SSI指令
AddType text/x-server-parsed-html .html 将对所有HTML文档解析SSI指令

Netscape WEB服务器直接使用 Administration Server(管理服务器)可打开SSI功能。
Website 使用 Server Admin 程序中的 Mapping 标签，扩展名添加内容类型为：wwwserver/html-ssi
Cern 服务器不支持SSI，可用SSI诈骗法，到 http://sw.cse.bris.ac.uk/WebTools/fakessi.html 上下载一个PERL脚本，即可使你的CERN服务器使用一些SSI指令。（不支持exec指令。）

SSI指令基本格式

程序代码：

<!-- 指令名称="指令参数">

示例：

<!--#include file="info.htm"-->

说明：

1. <!-- -->是HTML语法中表示注释，当WEB服务器不支持SSI时，会忽略这些信息。
2. #include 为SSI指令之一。
3. file 为include的参数， info.htm为参数值，在本指令中指将要包含的文档名。

注意：

1. <!--与#号间无空格，只有SSI指令与参数间存在空格。
2. 上面的标点=""，一个也不能少。
3. SSI指令是大小写敏感的，因此参数必须是小写才会起作用。

SSI指令使用详解

#echo 示范

作用：将环境变量插入到页面中。

语法：

<!--#echo var="变量名称"-->

示例：

<!--#echo var="DOCUMENT_NAME"--> 本文档名称
<!--#echo var="DATE_LOCAL"--> 现在时间
<!--#echo var="REMOTE_ADDR"--> 你的IP地址

#include 示范

作用：将文本文件的内容直接插入到文档页面中。

语法：

<!--#include file="文件名称"-->
<!--#include virtual="文件名称"-->

file 文件名是一个相对路径，该路径相对于使用 #include 指令的文档所在的目录。被包含文件可以在同一级目录或其子目录中，但不能在上一级目录中。如表示当前目录下的的nav_head.htm文档，则为file="nav_head.htm"。
virtual 文件名是 Web 站点上的虚拟目录的完整路径。如表示相对于服务器文档根目录下hoyi目录下的nav_head.htm文件；则为file="/hoyi/nav_head.htm"

参数：

file 指定包含文件相对于本文档的位置
virtual 指定相对于服务器文档根目录的位置

注意：

1. 文件名称必须带有扩展名。
2. 被包含的文件可以具有任何文件扩展名，我觉得直接使用htm扩展名最方便，微软公司推荐使用 .inc 扩展名（这就看你的爱好了）。

示例：

<!--#include file="nav_head.htm"--> 将头文件插入到当前页面
<!--#include file="nav_foot.htm"--> 将尾文件插入到当前页面

#flastmod 和 #fsize 示范

作用：

#flastmod 文件最近更新日期
#fsize 文件的长度

语法：

<!--#flastmod file="文件名称"-->
<!--#fsize file="文件名称"-->

参数：

file 指定包含文件相对于本文档的位置 如 info.txt 表示当前目录下的的info.txt文档
virtual 指定相对于服务器文档根目录的位置 如 /hoyi/info.txt 表示

注意：文件名称必须带有扩展名。

示例：

<!--#flastmod file="news.htm"--> 将当前目录下news.htm文件的最近更新日期插插入到当前页面
<!--#fsize file="news.htm"--> 将当前目录下news.htm的文件大小入到当前页面

#exec 示范

作用：将某一外部程序的输出插入到页面中。可插入CGI程序或者是常规应用程序的输入，这取决于使用的参数是cmd还是cgi。

语法：

<!--#exec cmd="文件名称"-->
<!--#exec cgi="文件名称"-->

参数：

cmd 常规应用程序
cgi CGI脚本程序

示例：

<!--#exec cmd="cat /etc/passwd"--> 将会显示密码文件
<!--#exec cmd="dir /b"--> 将会显示当前目录下文件列表
<!--#exec cgi="/cgi-bin/gb.cgi"--> 将会执行CGI程序gb.cgi。
<!--#exec cgi="/cgi-bin/access_log.cgi"--> 将会执行CGI程序access_log.cgi。

注意：从上面的示例可以看出，这个指令相当方便，但是也存在安全问题。

禁止方法：

1. Apache，将access.conf中的"Options Includes ExecCGI"这行代码删除；
2. 在IIS中，要禁用 #exec 命令，可修改 SSIExecDisable 元数据库；

#config

作用： 指定返回给客户端浏览器的错误信息、日期和文件大小的格式。

语法：

<!--#config errmsg="自定义错误信息"-->
<!--#config sizefmt="显示单位"-->
<!--#config timefmt="显示格式"-->

参数：

errmsg 自定义SSI执行错误信息，可以为任何你喜欢的方式。
sizefmt 文件大小显示方式，默认为字节方式("bytes")可以改为千字节方式("abbrev")
timefmt 时间显示方式，最灵活的配置属性。

示例：显示一个不存在文件的大小

<!--#config errmsg="服务器执行错误，请联系管理员 yiho@126.com，谢谢！"-->
<!--#fsize file="不存在的文件.htm"-->

以千字节方式显示文件大小

语法：

<!--#config sizefmt="abbrev"-->
<!--#fsizefile="news.htm"-->

以特定的时间格式显示时间

<!--#config timefmt="%Y年/%m月%d日 星期%W 北京时间%H:%M:%s，%Y年已过去了%j天 今天是%Y年的第%U个星期"-->
<!--#echo var="DATE_LOCAL"--> 显示今天是星期几，几月，时区
<!--#config timefmt="今天%A， %B ，服务器时区是 %z，是"-->
<!--#echo var="DATE_LOCAL"-->

XSSI

XSSI（Extended SSI）是一组高级SSI指令，内置于Apache 1.2或更高版本的mod-include模块之中。其中可利用的的指令有：

#printenv
#set
#if

#printenv

作用： 显示当前存在于WEB服务器环境中的所有环境变量。

语法：

<!--#printenv-->

#set

作用：可给变量赋值，以用于后面的if语句。

语法：

<!--#set var="变量名" value="变量值"-->

示例：

<!--#set var="color" value="红色"-->

#if

作用：创建可以改变数据的页面，这些数据根据使用if语句时计算的要求予以显示。

语法：

<!--#if expr="$变量名=\"变量值A\""-->
  显示内容
<!--#elif expr="$变量名=\"变量值B\""-->
  显示内容
<!--#else-->
  显示内容
<!--#endif"-->

示例：

<!--#if expr="$SERVER_NAME=\"hoyi.zb169.net\""-->
  欢迎光临好易CGI工厂在淄博热线的分站 http://hoyi.zb169.net。
<!--#elif expr="$SERVER_NAME=\"linux.cqi.com.cn\"" -->
  欢迎光临好易CGI工厂在太阳城的分站 http://linux.cqi.com.cn/~hoyi。
<!--#else-->
  欢迎光临好易CGI工厂！
<!--#endif"-->

注意：用于前面指令中的反斜杠，是用来代换内部的引号，以便它们不会被解释为结束表达式。不可省略。

1、Config 命令

Config 命令主要用于修改SSI的默认设置。其中：

Errmsg：设置默认错误信息。为了能够正常的返回用户设定的错误信息，在HTML文件中Errmsg参数必须被放置在其它SSI命令的前面，否则客户端只能显示默认的错误信息，而不是由用户设定的自定义信息。

<!--#config errmsg="Error! Please email webmaster@mydomain.com" -->

Timefmt：定义日期和时间的使用格式。Timefmt参数必须在echo命令之前使用。

<!--#config timefmt="%A， %B %d， %Y"-->
<!--#echo var="LAST_MODIFIED" -->

显示结果为：

Wednesday， April 12， 2000

也许用户对上例中所使用的%A %B %d感到很陌生，下面我们就以表格的形式总结一下SSI中较为常用的一些日期和时间格式。

Sizefmt：决定文件大小是以字节、千字节还是兆字节为单位表示。如果以字节为单位，参数值为"bytes"；对于千字节和兆字节可以使用缩写形式。同样，sizefmt参数必须放在fsize命令的前面才能使用。

<!--#config sizefmt="bytes" -->
<!--#fsize file="index.html" -->

2、Include 命令

Include 命令可以把其它文档中的文字或图片插入到当前被解析的文档中，这是整个SSI的关键所在。通过Include命令只需要改动一个文件就可以瞬间更新整个站点！

Include 命令具有两个不同的参数：

Virtual：给出到服务器端某个文档的虚拟路径。
File：给出到当前目录的相对路径，其中不能使用"../"，也不能使用绝对路径。

<!--#include virtual="/includes/header.html" -->
<!--#include file="header.html" --> 这就要求每一个目录中都包含一个header.html文件。

3、Echo 命令

Echo 命令可以显示以下各环境变量：

DOCUMENT_NAME：显示当前文档的名称。
DOCUMENT_URI：显示当前文档的虚拟路径。例如：

<!--#echo var="DOCUMENT_NAME" -->
<!--#echo var="DOCUMENT_URI" -->

随着网站的不断发展，那些越来越长的URL地址肯定会让人头疼。如果使用SSI，一切就会迎刃而解。因为我们可以把网站的域名和SSI命令结合在一起显示完整的URL，即：

http://YourDomain<!--#echo var="DOCUMENT_URI" -->

QUERY_STRING_UNESCAPED：显示未经转义处理的由客户端发送的查询字串，其中所有的特殊字符前面都有转义符"\"。例如：

<!--#echo var="QUERY_STRING_UNESCAPED" -->

DATE_LOCAL：显示服务器设定时区的日期和时间。用户可以结合config命令的timefmt参数，定制输出信息。例如：

<!--#config timefmt="%A， the %d of %B， in the year %Y" -->
<!--#echo var="DATE_LOCAL" -->

显示结果为：

Saturday， the 15 of April， in the year 2000

DATE_GMT：功能与DATE_LOCAL一样，只不过返回的是以格林尼治标准时间为基准的日期。例如：

<!--#echo var="DATE_GMT" -->

LAST_MODIFIED：显示当前文档的最后更新时间。同样，这是SSI中非常实用的一个功能，只要在HTML文档中加入以下这行简单的文字，就可以在页面上动态的显示更新时间。

<!--#echo var="LAST_MODIFIED" -->

CGI环境变量

除了SSI环境变量之外，echo命令还可以显示以下CGI环境变量：

SERVER_SOFTWARE：显示服务器软件的名称和版本。例如：
<!--#echo var="SERVER_SOFTWARE" -->
SERVER_NAME： 显示服务器的主机名称，DNS别名或IP地址。例如：
<!--#echo var="SERVER_NAME" -->
SERVER_PROTOCOL：显示客户端请求所使用的协议名称和版本，如HTTP/1.0。例如：
<!--#echo var="SERVER_PROTOCOL" -->
SERVER_PORT：显示服务器的响应端口。例如：
<!--#echo var="SERVER_PORT" -->
REQUEST_METHOD：显示客户端的文档请求方法，包括GET， HEAD， 和POST。例如：
<!--#echo var="REQUEST_METHOD" -->
REMOTE_HOST：显示发出请求信息的客户端主机名称。
<!--#echo var="REMOTE_HOST" -->
REMOTE_ADDR：显示发出请求信息的客户端IP地址。
<!--#echo var="REMOTE_ADDR" -->
AUTH_TYPE：显示用户身份的验证方法。
<!--#echo var="AUTH_TYPE" -->
REMOTE_USER：显示访问受保护页面的用户所使用的帐号名称。
<!--#echo var="REMOTE_USER" -->

4、Fsize：显示指定文件的大小，可以结合config命令的sizefmt参数定制输出格式。

<!--#fsize file="index_working.html" -->

5、Flastmod：显示指定文件的最后修改日期，可以结合config 命令的timefmt参数控制输出格式。

<!--#config timefmt="%A， the %d of %B， in the year %Y" -->
<!--#flastmod file="file.html" -->

这里，我们可以利用flastmod参数显示出一个页面上所有链接页面的更新日期。方法如下：

<!--#config timefmt=" %B %d， %Y" -->
<A href="/directory/file.html">File</A>
<!--#flastmod virtual="/directory/file.html" -->
<A href="/another_directory/another_file.html">Another File</A>
<!--#flastmod virtual="/another_directory/another_file.html" -->

显示结果为：

File April 19， 2000
Another File January 08， 2000

6、Exec

Exec命令可以执行CGI脚本或者shell命令。使用方法如下：

Cmd：使用/bin/sh执行指定的字串。如果SSI使用了IncludesNOEXEC选项，则该命令将被屏蔽。
Cgi：可以用来执行CGI脚本。例如，下面这个例子中使用服务端cgi-bin目录下的counter.pl脚本程序在每个页面放置一个计数器：

<!--#exec cgi="/cgi-bin/counter.pl" -->

关于SHTML和HTML的区别

让我们先来看看SHTML和HTML的区别，如果用一句话来解释就是:SHTML 不是HTML而是一种服务器 API，shtml是服务器动态产成的html.

虽然两者都是超文本格式，但shtml是一种用于SSI技术的文件。也就是Server Side Include--SSI 服务器端包含指令。如果Web Server有SSI功能的话，大多数（尤其是基于Unix平台）的WEB服务器，如Netscape Enterprise Server等均支持SSI命令。

当使用css定义字体时你可能会这样做：

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

事实上你可以简写这些属性：

font: 1em/1.5em bold italic small-caps verdana,serif

现在好多了吧，不过有一点要注意：使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性（如 font-weight，font-style，font-varient）如未指定将自动使用默认值。

2. 同时使用两个class

通常我们只为属性指定一个class，但这并不等于你只能指定一个，实际上，你想指定多少就可以指定多少，例如：

<p class="text side">...</p>

通过同时使用两个 class（使用空格而不是逗号分割），这个段落将同时应用两个 class 中制定的规则。如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。

3. css中边框（border)的默认值

当编写一条边框的规则时，你通常会指定颜色、宽度以及样式（任何顺序均可）。例如：border: 3px solid #000（3像素宽的黑色实线边框），其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线（solid)，那么其余的值将使用默认值：默认的宽度为中等（相当于3到4像素）；默认的颜色为边框里的文字颜色。如果这正是你想要的效果，你完全可以不在css里指定。

4. !important会被IE忽略

在 css 中，通常最后指定的规则会获得优先权。然而对除了IE以外的浏览器来说，任何后面标有 !important 的语句将获得绝对的优先权，例如：margin-top: 3.5em !important; margin-top: 2em。

除IE以外所有浏览器中的顶部边界都是3.5em，而IE为2em，有时候这一点很有用，尤其在使用相对边界值时（就像这个例子），可以显示出IE与其他浏览器的细微差别。（很多人可能还注意到了css的子选择器也是会被IE忽略的）

5. 图片替换的技巧

使用标准的html而不是图片来显示文字通常更为明智，除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时，你只能选择图片。

举例来说，你想在每一页的顶部使用“Buy widgets”的标题，但你同时又希望这是能被搜索引擎发现的，为了美观你使用了少见的字体那么你就得用图片来显示了：

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

这样当然没错，但是有证据显示搜索引擎对真实文本的重视远超过alt文本（因为已经有太多网站使用alt文本充当关键字），因此，我们得用另一种方法：<h1><span>Buy widgets</span></h1> ，那你的漂亮字体怎么办呢？下面的css可以帮上忙：

h1 {
 background: url(widget-image.gif) no-repeat;
}
 
h1 span {
 position: absolute;
 left:-2000px;
}

现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css，文本被定位于屏幕左侧-2000像素处。

6. css盒模型hack的另一选择

css盒模型hack被用来解决IE6之前的浏览器显示问题，IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内（而不是加在宽度值上）。例如，你可能会使用以下css来指定某个容器的尺寸：

#box {
 width: 100px;
 border: 5px;
 padding: 20px;
}

然后在html中应用：<div id="box">...</div>，盒的总宽度在几乎所有浏览器中为150像素（100像素宽度+两条5像素的边框+两个20像素的填充），唯独在IE6之前版本的浏览器中仍然为100像素（边框值和填充值包含在宽度值中），盒模型的hack正是为了解决这一问题，但是也会带来麻烦。更简单的办法如下：

css:
 
#box {
 width: 150px;
}

#box div {
 border: 5px;
 padding: 20px;
}

html:
 
<div id="box"><div>...</div></div>

这样一来在任何浏览器中盒的总宽度都将是150像素。

7. 将块元素居中

假设你的网站使用了固定宽度的布局，所有的内容置于屏幕中央，可以使用以下的css：

#content {
 width: 700px;
 margin: 0 auto;
}

你可以把html的body之内任何项目置于<div id="content"></div>中，该项目将自动获得相等的左右边界值从而保证了居中显示。不过，这在IE6之前版本的浏览器中仍然有问题，将不会居中，因此必须修改如下：

body {
 text-align: center;
}
 
#content {
 text-align: left;
 width: 700px;
 margin: 0 auto;
}

对body的设定将导致主体内容居中，但是连所有的文字也居中了，这恐怕不是你想要的效果，为此#content 的div还要指定一个值：text-align: left。

8. 使用css实现垂直居中

垂直居中对表格来说是小菜一碟，只需指定单元格为 vertical-align: middle 即可，但这在css布局中不管用。假设你将一个导航菜单的高度设为2em，然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。

要解决这一问题，只需将盒的行高设为与盒的高度相同即可，以这个例子来说，盒高2em，那么只需在css中再加入一条：line-height: 2em 就可实现垂直居中了！

9. 容器内的css定位

css的最大优点之一就是可以将对象定位在文档的任何位置，同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则：

#container {
 position: relative;
}

则容器内的任何元素的定位都是相对于该容器的。假定你使用以下html结构：

<div id="container"><div id="navigation">...</div></div>

如果想将navigation定位在容器内离左边界30像素，离顶部5像素，可以使用以下css语句：

#navigation {
 position: absolute;
 left: 30px;
 top: 5px;
}

10. 延伸至屏幕底部的背景色

css的缺点之一是缺乏垂直方向的控制，从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景，但你希望导航所在的列为蓝色背景，使用以下css即可：

#navigation {
 background: blue;
 width: 150px;
}

问题在于导航项不会一直延伸到页面的底部，自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断，浪费了你的一番设计。怎么办呢？很不幸我们现在只能用欺骗的办法，即将body的背景指定为与左列同颜色同宽度的图片，css如下：

body {
 background: url(blue-image.gif) 0 0 repeat-y;
}

背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度，当用户改变文字的大小导致内容的宽度扩张时，背景色的宽度不会随之改变。到写这篇文章为止这是对这类问题的唯一解决办法，因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色。注：文章深入浅出，简单扼要，可能未能详尽，但已深得我心！哈：）

另：CSS Hack 浏览器兼容一览表

CSS Hack 是指我们为了兼容各浏览器，而使用的特别的css定义技巧。