HTML入门教程：在HTML页面中引入外部HTML文件的解决方案，如：将html文件转为js文件，然后在页面加载的时候将其加载进来施行渲染；运用iframe标签进行援用；运用gulp插件gulp-html-import等办法 在普通的静态html开发历程中，没须要用框架，只想用最根本的方式写几个静态页面出来，但是HTML中没有include语法，每个页面的公共局部都要手动复制粘贴一次，实在不科学……

在网上看了有如下的解决方案： ( 举荐学习：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

    
    


    @import "header.html"
    
Hello World
    @import "footer.html"


# 运用标签@import "XXX.html"引入公共页面

6、header.html

I am the header

8、gulp import 运转gulp将页面进行合并终究会生成dist名目

9、/dist/index.html

    
    


    
I am the header
    
Hello World
    
I am the footer

以上就是在HTML页面中引入外部HTML文件的解决方案的细致内容，更多请关注 百分百源码网 其它相干文章！