在多个页面上批量编辑HTML？_Html

在多个页面上批量编辑HTML？

html

在多个页面上批量编辑HTML？,html,Html,例如，如果我正在构建一个带有菜单的页面标题，该菜单将显示在网站的每个页面上，如果我想在每个页面上更改菜单，是否有一种方法可以在每个页面上实现此更改，而不必编辑每个HTML页面假设我的菜单有5个选项卡，以后我想添加第6个选项卡，或者删除一个选项卡，有没有一种有效的方法可以做到这一点，而不必在每个页面上手动编辑HTML？HTML本身并没有提供这样的机制，尽管最初指定HTML元素词汇表的语言是SGML，以…的形式做。使用SGML实体，您通常会创建一个仅包含菜单的SGML文件，然后从多个单独的页面内容

例如，如果我正在构建一个带有菜单的页面标题，该菜单将显示在网站的每个页面上，如果我想在每个页面上更改菜单，是否有一种方法可以在每个页面上实现此更改，而不必编辑每个HTML页面

假设我的菜单有5个选项卡，以后我想添加第6个选项卡，或者删除一个选项卡，有没有一种有效的方法可以做到这一点，而不必在每个页面上手动编辑HTML？

HTML本身并没有提供这样的机制，尽管最初指定HTML元素词汇表的语言是SGML，以…的形式做。使用SGML实体，您通常会创建一个仅包含菜单的SGML文件，然后从多个单独的页面内容文件中拉入该文件：

<!-- content of menu.sgml file -->
<nav>
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="blog.html">Blog</a></li>
    <!-- ... further menu items -->
  </ul>
</nav>

<!-- content of page.sgml pulling-in menu.sgml -->
<!DOCTYPE html [
  <!-- this declares the "menu" entity -->
  <!ENTITY menu SYSTEM "menu.sgml">
]>
<html>
  <head>
    <title>Menu demo</title>
  </head>
  <body>
    <!-- this pulls-in menu.sgml as if it were part
         of page.sgml directly --> 
    &menu
    <main>
      <h2>Heading</h2>
      <p>Main content of your page</p>
    </main>
  </body>
</html>






&菜单
标题
页面的主要内容

现在，您只需编辑

menu.sgml

，并使更新的菜单内容在引用

menu.sgml

的任何页面文件中始终保持最新。您甚至可以省略

菜单

（以及整个

DOCTYPE

文档序言）的声明，因为默认情况下，SGML将

菜单

实体引用解析为与引用文件位于同一目录中的同名文件

注意：浏览器不实现SGML。要在浏览器中（和/或在使用node.js时在服务器端）使用SGML，可以使用我的sgmljs.net SGML parser/lib；有关相关实体技术的讨论，请参见

常用的服务器端模板库，如Jade、pug、handlebar、mustache等，都有自己的称为partials或include的机制，以获得或多或少等同于SGML通用实体的功能。

如果您的页面也使用PHP，您可以在include语句的帮助下添加它

否则，这里有一个JavaScript解决方案：

menu.html

<a href="a.html">Start</a><br>
<a href="b.html">Page 2</a><br>
<a href="c.html">Page 3</a><br>

script.js

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}
</script>


函数includeHTML（）{
var z，i，elmnt，file，xhttp；
/*循环浏览所有HTML元素的集合：*/
z=document.getElementsByTagName（“*”）；
对于（i=0；i


你的“正常”文件

includeHTML（）；

从这里：您不能只使用html。您可以使用angular作为前端，如果使用php进行html编码，也可以使用require（）或include（）
<div w3-include-html="menu.html"></div> <!-- put that line where you want to include the HTML. -->

<script>
includeHTML();
</script> <!-- Put that at the end of your file. -->