怎么在HTML页面中引入外部HTML文件
怎么在HTML页面中引入外部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
vargulp=require('gulp');varhtmlImport=require('gulp-html-import');gulp.task('import',function(){gulp.src('./*.html').pipe(htmlImport('./components/')).pipe(gulp.dest('dist'));})
5、index.html
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Gulp-html-importExample</title></head><body>@import"header.html"<p>HelloWorld</p>@import"footer.html"</body></html>#使用标签@import"XXX.html"引入公共页面
6、header.html
<!--header.html--><h2>Iamtheheader</h2>
8、gulp import 运行gulp将页面进行合并最终会生成dist目录
9、/dist/index.html
<!--/dist/index.html--><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Gulp-html-importExample</title></head><body><h2>Iamtheheader</h2><p>HelloWorld</p><h2>Iamthefooter</h2></body></html>
看完上述内容,你们掌握怎么在HTML页面中引入外部HTML文件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注恰卡编程网行业资讯频道,感谢各位的阅读!
推荐阅读
-
html简介(超文本标记语言)
背景知识HTML与W3C(WorldWideWeb:www)的关系,HTML规范是由w3c负责制定的,W...
-
css边框属性如何设置(html button如何设置圆角边框颜色)
htmlbutton如何设置圆角边框颜色?在HTML中把块的边框可以做成圆角需要利用css的border-radius属性。cs...
-
怎么通过HTML的表单向服务器发送数据
怎么通过HTML的表单向服务器发送数据本篇内容介绍了“怎么通过HT...
-
HTML怎么实现文件下载对话框
HTML怎么实现文件下载对话框本篇内容介绍了“HTML怎么实现文件...
-
html页面中的单选框功能如何实现
html页面中的单选框功能如何实现本文小编为大家详细介绍“html...
-
可视化html文件怎么修改支持PDF导出
可视化html文件怎么修改支持PDF导出这篇文章主要介绍“可视化h...
-
HTML怎么链接音频文件
HTML怎么链接音频文件本文小编为大家详细介绍“HTML怎么链接音...
-
HTML表单文件选择框样式怎么自定义
HTML表单文件选择框样式怎么自定义本篇内容主要讲解“HTML表单...
-
HTML怎么使用注释来阻止执行
HTML怎么使用注释来阻止执行这篇文章主要介绍“HTML怎么使用注...
-
HTML后代选择器的功能怎么用
HTML后代选择器的功能怎么用本文小编为大家详细介绍“HTML后代...