本文摘自PHP中文网,作者(*-*)浩,侵删。
在普通的静态html开发过程中,没必要用框架,只想用最基本的方式写几个静态页面出来,但是HTML中没有include语法,每个页面的公共部分都要手动复制粘贴一次,实在不科学……在网上看了有如下的解决方案: ( 推荐学习:html教程 )
方案一:将html文件转为js文件,然后在页面加载的时候将其加载进来执行渲染
方案二:使用iframe标签进行引用
方案三:使用gulp插件gulp-html-import
本人推荐使用第三种方案,使用起来也很方便,下面介绍使用步骤:
1、npm install gulp -D
2、npm install gulp-html-import -D
3、目录结构:
1 2 3 4 5 6 7 8 9 10 11 | |
-- html-import
| |
| -- components
| | |
| | -- header.html
| | |
| | -- footer.html
| |
| -- index.html
| -- gulpfile.js
|
4、gulpfile.js
1 2 3 4 5 6 7 8 | var gulp = require('gulp');
var htmlImport = require('gulp-html-import');
gulp.task('import', function () {
gulp.src('./*.html')
.pipe(htmlImport('./components/'))
.pipe(gulp.dest('dist'));
})
|
5、index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<title>Gulp-html-import Example</title>
</head>
<body>
@import "header.html"
<p>Hello World</p>
@import "footer.html"
</body>
</html>
# 使用标签@import "XXX.html" 引入公共页面
|
6、header.html
阅读剩余部分
相关阅读 >>
Html怎么设置水平线与文字的距离
Html怎么让文字居中
Html如何给背景加链接
Html实现美化上传文件样式
怎样解决在Html中竖列文字竖列显示不全的问题
Html与css中的过渡模块
Html如何设置背景图片
Html代码如何让照片变模糊
Html怎么加入js
Html中如何引入css
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 在HTML页面中引入外部HTML文件的解决方案