溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在HTML頁面中引入外部HTML文件？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
方案一：將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 --><h2>I am the header</h2>
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> <h2>I am the header</h2> <p>Hello World</p> <h2>I am the footer</h2></body></html>
看完上述內容，你們掌握怎么在HTML頁面中引入外部HTML文件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
