欢迎来到站长教程网!

HTML/Xhtml

当前位置:主页 > 网页制作 > HTML/Xhtml >

在HTML页面中引入外部HTML文件的解决方案

时间:2020-06-08|栏目:HTML/Xhtml|点击:

在普通的静态html开发过程中,没必要用框架,只想用最基本的方式写几个静态页面出来,但是HTML中没有include语法,每个页面的公共部分都要手动复制粘贴一次,实在不科学……

在HTML页面中引入外部HTML文件的解决方案

在网上看了有如下的解决方案: ( 推荐学习:html教程 )

方案一:将html文件转为js文件,然后在页面加载的时候将其加载进来执行渲染

方案二:使用iframe标签进行引用

方案三:使用gulp插件gulp-html-import

本人推荐使用第三种方案,使用起来也很方便,下面介绍使用步骤:

1、npm install gulp -D

2、npm install gulp-html-import -D

3、目录结构:

| -- html-import | | | -- components | | | | | -- header.html | | | | | -- footer.html | | | -- index.html | -- gulpfile.js

4、gulpfile.js

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

<!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

<!-- header.html --> <h1>I am the header</h1>

8、gulp import 运行gulp将页面进行合并最终会生成dist目录

9、/dist/index.html

<!-- /dist/index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gulp-html-import Example</title> </head> <body> <h1>I am the header</h1> <p>Hello World</p> <h1>I am the footer</h1> </body> </html>

上一篇:HTML的address 标签

栏    目:HTML/Xhtml

下一篇:HTML的frame标签

本文标题:在HTML页面中引入外部HTML文件的解决方案

本文地址:http://www.jh-floor.com/wangyezhizuo/HTML_Xhtml/125566.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号