怎么在HTML頁面中引入外部HTML文件

發(fā)布時(shí)間：2021-05-10 16:16:00 來源：億速云閱讀：430 作者：Leah 欄目：開發(fā)技術(shù)

怎么在HTML頁面中引入外部HTML文件？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(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)容，你們掌握怎么在HTML頁面中引入外部HTML文件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

怎么在HTML頁面中引入外部HTML文件

html是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽