在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>
<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-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。修改后效果如下:
<servlet-mapping>
<servlet-name>ssi</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
转载于:https://www.cnblogs.com/kelly-one/p/7784925.html
在html页面中引入公共的头部和底部相关推荐
- thymeleaf页面中引入公共页面
一.前言 当我们在html页面使用thymeleaf时,经常会遇到这样的情况.有一些html片段在我们所有页面都存在,造成了代码重复.遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用 ...
- html引入公共的头部,导航栏,尾部
个人分类: HTML5 很不错的文章,讲解html引入公共的头部,导航栏,尾部的很仔细_ 一.asp语言和PHP语言 首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是i ...
- 如何在vue页面中引入其他的子组件?(局部引入/全局引入)
在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示. 首先我们创建两个页面Test.vue和Tset2.vue: 起始效 ...
- 怎样在vue单页面中引入其他组件
场景 在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现 首先在components下新建组件Today_recommend.vue组件 <templat ...
- 同一页面中引入多个JS库产生的冲突解决方案(转)
发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用'$'符号作为其代号.因此在一个页面中引入多个JS库,并且使用'$'作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...
- 【转】Vue.js入门教程(二)在页面中引入vue的方式
第二章:安装和基础效果展示 页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
- html页面怎么引用通用的头部,html 如何引入一个公共的头部和底部
html 静态页面中引用外部页面没那么方便,主要方法有: asp语言和PHP语言 首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是index.asp,调用头部代码是在i ...
- 在html页面中引入另一个html页面
我们在使用html编写一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引 ...
- 在html页面中引入jquery
在html页面引入jquery,只需在页面中添加下面内容即可,src属性表示引入的路径,按住ctrl键,如果看到有个手型图标,可以点进去,说明引入成功 <script language=&quo ...
最新文章
- RedHat使用163源
- python把文件读成字节流_Python中对字节流/二进制流的操作:struct
- *Codeforces587E. Duff as a Queen
- 图说 mysql 事务隔离级别
- Internet信息服务找不到
- 表单+文件上传+音频+iframe
- PostgreSQL中如何得到一个随机的字符
- 2-9 prev + next选择器 “远亲不如近邻” 返回且只返回唯一-个元素。 而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素...
- python钓鱼网站_Python+MySQL获取PhishTank的钓鱼网站列表作业笔记
- 测度论与概率论基础(程士宏)学习笔记(三)
- AI智能工具集(含AI语音合成、视频补帧、视频放大、目标检测、图片风格化等)
- mesh组网是什么意思
- 古代官员常用计算机笔,古代官员也有年终奖清朝皇帝一般会赏赐
- 磁盘分析管理软件:Disk Space Analyzer Pro mac版
- arm 中的nor flash 和 nand flash
- java 输出水仙花数
- AndroidShortcuts
- 高校间计算机专业交流研讨会,第七届全国高校计算机网络教学暨网络工程专业建设研讨会...
- ai-人工智能的本质和未来_人工智能的历史-从一开始
- 如何在jQuery官网下载库文件!
热门文章
- SpringBoot自动化配置之一:SpringBoot内部的一些自动化配置原理
- 11步提高代码质量和整体工作效率
- 让 Windows 7 定时待机
- 文件流下载 ASP.NET
- tomcat的诡异的端口占用问题
- Projection with Type Hint用法
- 卷积神经网络VGG16权重数量的计算和理解(转载)
- Linux 向文件末尾追加命令(转载)
- This application failed to start because it could not find or load the Qt platform plugin xcb in
- 入行以来涉及的技术简史