HTML代码复用

最新推荐文章于 2023-11-21 20:12:59 发布
最新推荐文章于 2023-11-21 20:12:59 发布
阅读量1.7k 收藏 8
点赞数 2
分类专栏： HTML 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alpha105/article/details/131031251
版权

对于多个HTML页面，其头部或底部相同时，为避免代码重复以及方便修改，可以通过JavaScript实现代码的复用，示例如下：

1、创建JavaScript文件（命名为menu.js），将需要的HTML代码写入其中

function setTchMenu() {
    document.getElementById("menu").innerHTML = "<p class=title>在线课程注册系统（教师端）</p><p class=option_right id=me>user_name</p>"
}

2、在HTML的head中插入js文件

<head>
    <script src="menu.js" type="text/javascript"></script>
</head>

3、在HTML的body中需要重复使用代码的位置插入div并设置id

<body>
    <div class="menu" id="menu"></div>
</body>

4、在HTML的script中写入相关代码（以页面加载时载入菜单为例）

<script>
    window.onload = function() {
        setTchMenu();
    }
</script>

至此，完成HTML代码的复用，在更改页面内容时只需修改menu.js中的内容即可。

html5 网页复用问题,html代码复用各种方法
weixin_32149443的博客
06-16 1076
1.gulp-file-include(工具)使用步骤：1.安装gulp以及gulp-file-include(NodeJs上)2.新建gulpfile.js,配置 gulp-file-include:var gulp =require('gulp');//引入gulpvar fileinclude =require('gulp-file-include');//引入gulp-file-incl...
jsp页面代码复用
cheng___xu的博客
06-17 789
在jsp页面中可以通过jsp:include动作进行代码的复用 如：头部导航页面head.jsp的内容，其中只有主要代码，没有body,html标签 <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!--导航条-->
HTML的复用技巧
09-28
在面向对象软件开发的时候，我们经常提到“复用”，很好地复用代码不仅可以大大提高开发效率，同时使得代码更易于维护。
HTML不同页面中重用代码
weixin_34233856的博客
02-24 974
需求 几个页面需要的头部和底部的内容往往是一样的，这就希望可以只写一段代码作为模板，然后再几个页面中都加载这这个模板。另外，如果需要修改，也只要修改模板就好，所有页面都同时都是新的样式了。 通过 JavaScript 来实现 能实现上面需求的方法还是不少的，这个比较简单一点，几乎不需要学习的额外知识，只通过2句基本的js语句就能实现。一句写页面html，一句加载js文件执行。暂时先用了这个方法。 ...
html复用方法
全栈者也的博客
12-13 3790
  gulp-file-include ejs https://www.cnblogs.com/villy1029/p/6903612.html   html-loader https://blog.csdn.net/qingzhizhenhun/article/details/79353106   &lt;!-- 底部加载外部文件 --&gt; &lt;footer c...
HTML 代码复用实践
weixin_34109408的博客
08-02 743
前言 通常我们所做的一些页面，我们可以从设计图里面看出有一些地方是相同的。例如：头部，底部，侧边栏等等。如果是制作静态页面的同学，对于这些重复的部分只能够通过复制粘贴到新的页面来，如果页面的数量上去了而中途公共的部分出现要修的地方。不过有上10个页面都用到了这个公共的html代码。那修改起来不是很麻烦吗？ 拿sf来说，他们的头部和底部...
html代码复用（axios的方法）
qq_70353846的博客
11-21 477
html代码复用（axios的方法）
HTML的复用
weixin_34120274的博客
07-08 339
这次我们介绍一个新的npm包来完成这项任务，会有更好的体验呢； gulp-file-include存在的问题： 非JS语法； 循环、条件语句无法嵌套； 搭建环境 新建项目文件ejsDemo，初始化项目文件，本地安装gulp、gulp-ejs、gulp-data： npm init -y npm install -D gulp ...
复制html代码复用,html代码用js实现复用
weixin_42305648的博客
06-26 667
html代码用js实现复用发布时间：2020-06-08 02:33:25来源：51CTO阅读：2286作者：DanielYue作为前端开发人员，大家都会碰到的一个问题就是重复的代码怎么处理，如果总是复制粘贴，会使得代码显得非常的庞大，不易读。虽然有一些语言如node.js可以模块化管理，但是用js或者jquery实现既简单又可以面对其他环境搭建的时间。假如有一段html代码，我需要在多个页面使用...
html页面如何复用,html代码用js实现复用
weixin_35954566的博客
06-04 1426
作为前端开发人员，大家都会碰到的一个问题就是重复的代码怎么处理，如果总是复制粘贴，会使得代码显得非常的庞大，不易读。虽然有一些语言如node.js可以模块化管理，但是用js或者jquery实现既简单又可以面对其他环境搭建的时间。假如有一段html代码，我需要在多个页面使用，那就来实现以下：html>Document.asd{border:1pxsolid#ccc;}.sss{color:...
岗位信息vue前端代码复用
02-11
以给定文件的内容片段为例，我们可以看到代码复用的几个关键点： 1. 使用组件化开发：在Vue中，组件是独立且可复用的代码块。在上述代码中，使用了element-ui提供的多个组件，比如`el-container`、`el-header`、`el...
html5 代码复用,代码复用模式（推荐篇） – 深入理解JavaScript系列 46
weixin_34296646的博客
06-09 553
本文是《JavaScript深度解析》系列文章第 46篇 (共 51 篇)介绍本文介绍的四种代码复用模式都是最佳实践，推荐大家在编程的过程中使用。模式1：原型继承原型继承是让父对象作为子对象的原型，从而达到继承的目的：function object(o) {function F() {}F.prototype = o;return new F();}//要继承的父对象var parent = {n...
html 地址复用,HTML的复用
weixin_35796207的博客
06-15 192
这次我们介绍一个新的npm包来完成这项任务，会有更好的体验呢；gulp-file-include存在的问题：非JS语法；循环、条件语句无法嵌套；搭建环境新建项目文件ejsDemo，初始化项目文件，本地安装gulp、gulp-ejs、gulp-data：npm init -ynpm install -D gulp gulp-ejs gulp-data各工具包的功能：gulp：gulp插件运行的环境；...
在html文件中引入另一html文件，实现代码复用
ll1109489444的博客
02-16 8807
最近写前端html网页，下载了一个模板进行修改，发现每个页面都有很多重复代码（如导航栏）。于是想将重复代码抽取出来，方便修改，也能减轻代码量。百度过几个方法，如 一、新建一个Text.html文件，将重复代码复制进去（方便以后修改） 二、打开站长之家，找到旧版本的html/js互转功能，将重复代码转化为js代码（百度有详细教程）（当然也可以自己写） 如下图： 三、新建一个js文件，如nav
HTML怎样实现代码复用，HTML复用之gulp-file-include
http://xueshuai.top
01-05 582
首先需要全局安装 Gulp npm install gulp -g 在一个项目中安装 gulp-file-include npm install gulp-file-include -s 新建 dist 、src / include 目录、gulpfile.js 文件 dist 是打包之后的页面文件 src/include 是写分离出来的 html 文件(公共html部分，只需要写 html body 部分) gulpfile.js 是 gulp-file-include 的配置文.
html5 网页复用问题,代码复用模式（避免篇） – 深入理解JavaScript系列 45
weixin_36472718的博客
06-16 322
本文是《JavaScript深度解析》系列文章第 45篇 (共 51 篇)介绍任何编程都提出代码复用，否则话每次开发一个新程序或者写一个新功能都要全新编写的话，那就歇菜了，但是代码复用也是有好要坏，接下来的两篇文章我们将针对代码复用来进行讨论，第一篇文避免篇，指的是要尽量避免使用这些模式，因为或多或少有带来一些问题；第二排是推荐篇，指的是推荐大家使用的模式，一般不会有什么问题。模式1：默认模式代码...
html如何复用其它页面,编写可以复用的 HTML 模板
weixin_39630126的博客
06-03 1103
Web 组件简介编写可以复用的 HTML 模板(本文)从 0 开始创建自定义元素使用 Shadow DOM 封装样式和结构Web 组件的高阶工具Web 组件规范中最不被认可但是最强大的功能之一是 元素。在这个系列的第一篇文章中，我们将这种模板元素定义为『仅在调用时才渲染的用户自定义 HTML 模板』。换句话说，模板就是一种当浏览器被告知时才执行的 HTML 代码，其他情况下是被忽略的。这种模块可...
复用html
最新发布
03-08
### HTML代码复用或元素复用的最佳实践 为了提高开发效率并保持网页的一致性和维护性，在HTML中实现代码复用或元素复用是非常重要的。以下是几种最佳实践方法： #### 使用模板引擎 通过引入服务器端渲染技术，如Jinja2（常用于Python Flask框架），可以在视图函数中传递数据给前端页面，并利用模板继承机制来减少重复代码。 ```jinja {% extends 'base.html' %} {% block content %} <h1>{{ title }}</h1> <p>Welcome to my website!</p> {% endblock %} ``` 这种方式不仅简化了文件结构，还使得不同页面间共有的部分易于管理和更新[^2]。 #### 利用Web Components标准构建自定义组件 借助现代浏览器支持的Web Components特性，能够创建封装良好的独立部件。这些部件拥有自己的DOM树、样式表以及行为逻辑，从而实现了真正的模块化编程模式。 ```javascript class MyElement extends HTMLElement { connectedCallback() { this.innerHTML = '<strong>Hello from custom element</strong>'; } } customElements.define('my-element', MyElement); ``` 此做法有助于增强用户体验的同时也促进了团队协作中的分工合作[^1]。 #### 应用外部资源加载策略 对于那些频繁使用的脚本库或者CSS样式集，应该考虑将其托管至CDN上并通过`<link>`和`<script>`标签远程引用；而对于静态图片素材，则推荐采用Sprite Map形式集中管理，以此降低HTTP请求次数进而加快页面响应速度。 ```html <link rel="stylesheet" href="//cdn.example.com/style.css"> <script src="//cdn.example.com/script.js"></script> <img class="sprite-icon icon-home" alt=""> ``` 上述措施均能有效促进HTML文档内部及其关联资产之间的高效重用。 #### 避免滥用特定语义标签 值得注意的是，在追求灵活性的过程中不应忽视HTML本身所携带的意义属性。例如，虽然`<div>`是一个非常通用的选择器，但在适当情况下选用更具描述性的容器（比如文章主体应优先考虑使用`<article>`而非泛指型别的`<section>`)会使整个项目更加清晰易懂且有利于SEO优化工作开展。 ```html <article> <header><h1>Title of the article</h1></header> <p>This is an example paragraph inside an article tag.</p> </article> ``` 遵循以上建议可以帮助开发者更好地组织HTML源码，达到事半功倍的效果。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值