参考链接:

http://www.cnblogs.com/jason-star/p/3345225.html

http://blog.csdn.net/jsxzzliang/article/details/47022055

使用SHTML进行公共头部和底部的引用

      SHTML介绍:shtml是一种基于SSI技术的文件,也就是Server Side Include--SSI 服务器端包含指令,一些Web Server如果有SSI功能的话就会对shtml文件特殊招待,服务器会先扫一次shtml文件看没有特殊的SSI指令存在,如果有的话就按Web Server设定规则解释SSI指令,解释完后跟一般html一起调去客户端。

SHTML的优点:使用ssi技术页面生成shtml文件,只用在头部文件位置加入<!--#include virtual="header.htm" -->/<!--#include file="header.htm" -->,其中第一个表示相对于服务器的路径,第二个表示文件的相对路径。然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好,需要处理的文件在服务器端完成的,不会加重访问者的浏览器负担。

使用步骤:以tomcat作为服务器示例

1、找到Tomcat\conf\web.xml 文件,打开注释 <servlet-name>ssi</servlet-name>

同时加入
<init-param>
          <param-name>inputEncoding</param-name>
          <param-value>utf-8</param-value>
        </init-param>
        <init-param>
          <param-name>outputEncoding</param-name>
          <param-value>utf-8</param-value>
        </init-param>
修改后效果如下:
<servlet>
        <servlet-name>ssi</servlet-name>
        <servlet-class>
          org.apache.catalina.ssi.SSIServlet
        </servlet-class>
        <init-param>
          <param-name>buffered</param-name>
          <param-value>1</param-value>
        </init-param>
        <init-param>
          <param-name>debug</param-name>
          <param-value>0</param-value>
        </init-param>
          <init-param>
          <param-name>inputEncoding</param-name>
          <param-value>utf-8</param-value>
        </init-param>
        <init-param>
          <param-name>outputEncoding</param-name>
          <param-value>utf-8</param-value>
        </init-param>
        <init-param>
          <param-name>expires</param-name>
          <param-value>666</param-value>
        </init-param>
        <init-param>
          <param-name>isVirtualWebappRelative</param-name>
          <param-value>false</param-value>
        </init-param>
        <load-on-startup>4</load-on-startup>
    </servlet>

2、打开mapping,同时修改.shtml为html。修改后效果如下:

   <!-- The mapping for the SSI servlet -->

   
<servlet-mapping>
        <servlet-name>ssi</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
 
3、修改Tomcat\conf\context.xml文件,修改效果如下:
<Context>改为:<Context privileged="true">,“表示享有特权的”
 
4、重启tomcat即可生效
 
5、页面嵌套html
页面1:
index.html
<! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> index</ title>
</ head>
< body>
<!--#include virtual = "common/header.html" -->
</ body>
</ html>
 
 
页面二:
header.html
 
<! DOCTYPE html>
< html>
< head>
< meta charset= "UTF-8" >
< title> index</ title>
</ head>
< body>
hello world!
</ body>
</ html>

在html页面中引入公共的头部和底部的更多相关文章

  1. html 引入公共的头部和底部

  2. 利用ajax 引入静态页公共的头部与底部

    利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的 首先得把公用的 ...

  3. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

  4. 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部

    问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...

  5. JSP页面中引入另一个JSP页面

    一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bo ...

  6. 同一页面中引入多个JS库产生的冲突解决方案(转)

    发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号.因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...

  7. 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件

    分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...

  8. 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层

    系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...

  9. 在UTF-8页面中引入编码为GBK的JavaScript文件乱码问题了

    原文地址:http://js8.in/2009/12/11/%E5%AF%B9%E5%BC%95%E7%94%A8%E5%A4%96%E9%83%A8javascript%E9%A1%B5%E9%9D ...

随机推荐

  1. [二十三]SpringBoot 之 redis

    本文章牵涉到的技术点比较多:spring Data JPA.Redis.Spring MVC,Spirng Cache,所以在看这篇文章的时候,需要对以上这些技术点有一定的了解或者也可以先看看这篇文章 ...

  2. C++解析(17):操作符重载

    0.目录 1.操作符重载 2.完善的复数类 3.小结 1.操作符重载 下面的复数解决方案是否可行? 示例1--原有的解决方案: #include <stdio.h> class Compl ...

  3. [洛谷P4910]帕秋莉的手环

    题目大意:有一个$n(n\leqslant10^{18})$个点的环,每个点可以是$0$或$1$,要求相邻点中至少一个$1$,问方案数,多组询问. 题解:先考虑是一条链的情况,令$f_{i,j}$表示 ...

  4. 洛谷 3201 [HNOI2009]梦幻布丁 解题报告

    3201 [HNOI2009]梦幻布丁 题目描述 \(N\)个布丁摆成一行,进行\(M\)次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为\(1,2,2 ...

  5. 函数式编程(1)-高阶变成(2)-filter

    filter Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的时,filter()把传入的函数依次作用于每个元素,然 ...

  6. python基础----封装、封装与扩展性

    从封装本身的意思去理解,封装就好像是拿来一个麻袋,把小猫,小狗,小王八,还有egon和alex一起装进麻袋,然后把麻袋封上口子.但其实这种理解相当片面 首先我们要了解 要封装什么 你钱包的有多少钱(数 ...

  7. java如何优雅的实现时间控制

    前言:最近小王同学又遇到了一个需求:线上的业务运行了一段时间,后来随着使用人数增多,出现了一个问题是这样的,一个订单会重复创建几次,导致数据库里出现了很多垃圾数据.在测试同学的不断测试下,发现问题出在 ...

  8. HTTP协议格式【转】

    原文链接:https://www.jianshu.com/p/8fe93a14754c 一.URI结构 HTTP使用统一资源标识符(URI)来传输数据和建立连接.URL(统一资源定位符)是一种特殊种类 ...

  9. NYOJ--7

    原题链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=7 分析:x与y分开考虑,分别排序,邮局定在最中间的两个数之间就可以了. 街区最短路径问题 ...

  10. poj3783 Balls

    Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1110   Accepted: 721 Description ...