在html页面中引入公共的头部和底部

参考链接:

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>

时间: 2024-10-11 06:07:03

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

页面中引入带中文的JS文件乱码问题

1. WebConfig: ? 1 <globalization requestEncoding="gb2312" responseEncoding="gb2312" fileEncoding="gb2312"/> 2.<META http-equiv="content-type" content="text/html; charset=gb2312"> 3.<script t

页面中引入js的几种方法

通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入外部文件<script src="xx.js"></script>. 下面再介绍几种页面引入js的代码: 在js中引入外部js,通过document.wirite("scr"+"ipt src='xx.js'></scr&q

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

系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <meta http-equiv="Conten

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

一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bottom固定的时候可以用这种方式 原文地址:https://www.cnblogs.com/suhfj-825/p/8214929.html

html 如何引入一个公共的头部和底部

2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没有得到,没什么可懊恼的呀,说明你用力的方向错了呗,(偷笑一个),是否觉得彼岸又离你近了一步? 我准备独立出头部和底部文件 界面用shtml 注意点:文件后缀名shtml  然后引用的文件路径有问题 参考文章地址: 做了两个公共的html页面:top.html和footer.html 一个index.

Java项目在jsp页面中引入jquery框架的步骤

环境:在Java  web项目中引入juqery框架 工具:MyEclipse8.5 [步骤如下] A:新建一个Java web项目TestJquery,在WebRoot目录下创建一个jquery文件夹 B:下载jquery-1.8.3.min.js放入jquery文件夹中 C:创建jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%&g

ckeditor4.x操作之在页面中引入(一)

一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js <script src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea class="ckeditor"></textarea> 3.将相应的控件替换成编辑器代码 4.配置编辑器 ckeditor的配置都集中在

thymeleaf:在一个页面中引入其它的页面

这个在jsp中很容易实现,但是springBoot不推荐使用jsp,建议使用thymeleaf,下面是在thymeleaf中引入界面的方法 1.修改配置文件 spring: mvc: static-path-pattern: /static/** thymeleaf: prefix: classpath: /templates/ 在springBoot中,静态资源(如js,css,图片,静态html)都放在static当中,动态资源(如html)放在templates中. 这是我的目录结构 现在

https 页面中引入 http 资源的解决方式

今天在做echart地图页面的时候,碰到一个小问题,页面报错如下: 原因是我在github-page的页面上,请求了一个http协议的jq库,但是我的github是基于https协议的,这显然是协议不同导致的报错.怎么解决呢?我在segmentfault上查了一下,有如下方法: 相对协议 什么是相对协议呢? 简而言之,就是将URL的协议(http.https)去掉,只保留//及后面的内容.这样,在使用https的网站中,浏览器会通过https请求URL,否则就通过http发送请求. <img s