如何在HTML頁面中引入外部HTML文件

如何在HTML頁面中引入外部HTML文件？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

在東西湖等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,成都全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站建設(shè),東西湖網(wǎng)站建設(shè)費(fèi)用合理。

在普通的靜態(tài)html開發(fā)過程中，沒必要用框架，只想用最基本的方式寫幾個(gè)靜態(tài)頁面出來，但是HTML中沒有include語法，每個(gè)頁面的公共部分都要手動(dòng)復(fù)制粘貼一次，實(shí)在不科學(xué)

在網(wǎng)上看了有如下的解決方案：

方案一：將html文件轉(zhuǎn)為js文件，然后在頁面加載的時(shí)候?qū)⑵浼虞d進(jìn)來執(zhí)行渲染

方案二：使用iframe標(biāo)簽進(jìn)行引用

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

本人推薦使用第三種方案，使用起來也很方便，下面介紹使用步驟：

1、npm install gulp -D

2、npm install gulp-html-import -D

3、目錄結(jié)構(gòu)：

    |
    -- 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>
# 使用標(biāo)簽@import "XXX.html"引入公共頁面

6、header.html

<!-- header.html -->

<h2>I am the header</h2>

8、gulp import 運(yùn)行g(shù)ulp將頁面進(jìn)行合并最終會(huì)生成dist目錄

9、/dist/index.html

<!-- /dist/index.html -->

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

分享標(biāo)題：如何在HTML頁面中引入外部HTML文件
本文網(wǎng)址：http://www.jbt999.com/article44/ijjgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化、App開發(fā)、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容