HTML代码复用实践的详细介绍-html教程-PHP中文网

首页

web前端

html教程

HTML代码复用实践的详细介绍

黄舟

May 27, 2017 pm 02:30 PM

前言

通常我们所做的一些页面，我们可以从设计图里面看出有一些地方是相同的。例如：头部，底部，侧边栏等等。如果是制作静态页面的同学，对于这些重复的部分只能够通过复制粘贴到新的页面来，如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上10个页面都用到了这个公共的html代码。那修改起来不是很麻烦吗？

对于后端的同学而言，他们可以通过模版来进行拆分。这样做可以提高html代码的复用性和可维护性。但对于只是对设计图而制作成静态页面的同学而言他们，html没有提供像模版的include这种方法。但又不想使用到后端的模版，那么接下来的我介绍的几个工具也许可以帮助到你。

gulp-file-include

第一个我要介绍的是一个gulp的插件，他提供了一个include的方法让我们可以想后端模版一样把公共的部分分离出去。而且提供的include方法有许多配置项，详细可以去看看 gulp-file-include。

下面我们写一个小demo来快速的了解一下，我们需要先安装gulp以及gulp-file-include。

npm install -g gulp
mkdir gulp-file-include && cd gulp-file-include
npm install  gulp --save-dev
npm install gulp-file-include

安装好之后，来简单的组织一下文件的目录：

|-node_modules|-src // 生产环境的 html 存放文件夹    |-include // 公共部分的 html 存放文件夹    |-*.html 
|-dist // 编辑后的 html 文件
gulpfile.js

在新建的gulpfile.js，配置好gulp-file-include：

var gulp = require(&#39;gulp&#39;);var fileinclude  = require(&#39;gulp-file-include&#39;);

gulp.task(&#39;fileinclude&#39;, function() {
    gulp.src(&#39;src/**.html&#39;)
        .pipe(fileinclude({          prefix: &#39;@@&#39;,          basepath: &#39;@file&#39;
        }))
    .pipe(gulp.dest(&#39;dist&#39;));
});

接着新建两个html文件，分别是头部和底部：

header.html

<h1>这是 header 的内容</h1>

footer.html

<h1>这是 footer 的内容</h1>

最后在新建一个html，把要用到的header和footer给include进来。

layout.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>
    @@include(&#39;include/header.html&#39;)    <p> 这是 layout 的内容 </p>

    @@include(&#39;include/footer.html&#39;)</body></html>

最后回到命令行工具里，执行gulp fileinclude：

看到编译完成之后，到dist目录一下有一个layout.html的文件，这就是最后编译出来的。

好了，上面的一个小实例也明白之后。也许能够在以后的工作中大大提供生产力，使得自己写的html代码更加具有维护性和可复用性。

前端模版

上面说道gulp-file-include简单而且易上手，对于不想使用模版的同学是一个很好的小工具。但是熟悉前端模版的同学来说，我们一样可以使用模版来做到html代码的维护性和可复用性。那么我就用一个我自己比较常用的ejs这个模版来说说一下如何分离那些公共部分的html文件。

把上一个例子的整个文件夹复制到一个新的地方，然后把名字修改为ejs。接着把node_modules文件夹给删除，dist文件夹下的html文件都删除。

用到ejs模版的话，需要把src里面的html文件的后缀名都修改成.ejs。把ejs文件编译成html的工具依旧是使用gulp。只需要安装gulp-ejs就可以了。

npm install gulp --save-dev
npm install gulp-ejs --save-dev

接着就是修改gulpflie.js文件了：

var gulp = require(&#39;gulp&#39;);var ejs  = require(&#39;gulp-ejs&#39;);

gulp.task(&#39;ejs&#39;, function() {
    gulp.src(&#39;src/**.ejs&#39;)
        .pipe(ejs())
    .pipe(gulp.dest(&#39;dist&#39;));
});

然后是修改layout.ejs文件：

<!DOCTYPE html><html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Document</title></head><body>    
<%-include include/header  %>    
<p> 这是 layout 的内容 </p>    
<%-include include/footer  %>
</body>
</html>

最后就是在命令行工具里面运行gulp ejs，在到dist目录下看到编译好的layout.html文件。就大功告成了。

其实模版具有许多强大的方法，而上面的例子主要还是演示include这个方法，可能会觉得有点大才小用。有兴趣的同学可以再去了解一下模版的一些方法。

以上是HTML代码复用实践的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

See all articles