介绍 HTML是什么 ,,,,|,,,,,,html-import ,,, |,,, |,,,, |,,,,, components ,,, |,,, |,,,, |,,,, |,,, |,,,,,, header.html ,,, |,,, |,,,, |,,,, |,,, |,,,,,, footer.html ,,, |,,, |,,,, |,,,,, index.html ,,, |,,,,, gulpfile.js
怎么在HTML页面中引入外部HTML文件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
HTML的全称为超文本标记语言,它是一种标记语言,包含了一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的互联网资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形,动画,声音,表格,链接等,主要和css + js配合使用并构建优雅的前端网页。
<强>方案一:将html文件转为js文件,然后在页面加载的时候将其加载进来执行渲染
<强>方案二:使用iframe标签进行引用
<强>方案三:使用吞咽插件gulp-html-import
本人推荐使用第三种方案,使用起来也很方便、下面介绍使用步骤:
1, npm安装杯- d
2, npm安装gulp-html-import - d
3,目录结构:
4, gulpfile。js
& lt; ! DOCTYPE html> & lt; html> & lt; head>,,,, & lt; meta charset=癠TF-8"在,,,,& lt; title> Gulp-html-import Example & lt;/head> & lt; body>,,,, @import “header.html",,,, & lt; p> Hello World,,,, @import “footer.html" & lt;/body> & lt;/html> #,使用标签@import “XXX.html"引入公共页面
6头。html
& lt; !——,/dist/index.html ——祝辞& lt; ! DOCTYPE html> & lt; html> & lt; head>,,,, & lt; meta charset=癠TF-8"在,,,,& lt; title> Gulp-html-import Example & lt;/head> & lt; body>,,,, & lt; h2>小姐:am 从而header,,,, & lt; p> Hello World,,,, & lt; h2>小姐:am 从而footer & lt;/body> & lt;/html>
看完上述内容,你们掌握怎么在html页面中引入外部html文件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
