Question

您是否看过代码并认为它看起来如此简单？

就像它只是一个简单的三行代码 - “我不可能搞砸了！”，你说，并最终弄乱了它？因为我做了，这让我发疯了。好吧不是那么疯狂，但我很难过。

我正在制作一个在线投资组合，我希望它能够多页并很快实现，我不能（不想）将标题html AND header css重写到每个页面中。它根本没有效率。

所以我做了一些研究和研究发现W3数据包括库

（w3schools.com/lib/w3data.js&w3schools.com/w3css/w3data_includes.asp）

我的W3索引包括：

<!DOCTYPE html>
<html lang="en">

<head>
  blah blah blah
</head>

<script src="https://www.w3schools.com/lib/w3data.js">
</script>

<body>
  <div w3-include-HTML="header.html"></div>

  <script>
    w3IncludeHTML();
  </script>

  <div id="blah">
    blah blah blah
  </div>

</body>

</html>

不要打扰它，它只是在那里让我知道我放置重要的东西。

注意：

我将脚本标记移动到＆amp;没有标题显示
我移动了div和＆amp;没有标题显示
我合并了脚本标签，因此它内部有src＆amp;仍然没有标题显示
他们都在同一个文件中，彼此相邻
我做了一些其他的东西，但它基本上是在移动东西并尝试不同的语法我不认为值得一提

如果需要更多信息，请告诉我。

Answer 1

你显然还有很多工作要做，但这需要你所拥有的并让它运作 - 使用你提供的东西将单独的menu.html注入index.html：

Answer in Plunker

的index.html：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://www.w3schools.com/lib/w3data.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div w3-include-html="menu.html"></div>

  <script>
    w3IncludeHTML();
  </script>

</body>
</html>

menu.html：

<div class="v_dropdown">
  MENU
</div>

<header class="in_dropdown">
  <div id="filler_hdr" class="header">
    <div id="filler_file"></div>
  </div>

  <div id="articles_hdr" class="header">
    <div id="arcs_tab" class="tab">
      <strong><a href="articles.html">Articles</a></strong>
    </div>
    <div id="arcs_file" class="file"></div>
  </div>

  <div id="projects_hdr" class="header">
    <div id="prj_tab" class="tab">
      <strong><a href="projects.html">Projects</a></strong>
    </div>
    <div id="prj_file" class="file"></div>
  </div>

  <div id="photo_hdr" class="header">
    <div id="photo_tab" class="tab">
      <strong><a href="photos.html">Photography</a></strong>
    </div>
    <div id="photo_file" class="file"></div>
  </div>

  <div id="blog_hdr" class="header">
    <div id="blog_tab" class="tab">
      <strong><a href="blog.html">Blog</a></strong>
    </div>
    <div id="blog_file" class="file"></div>
  </div>

</header>

此外，确保在本地开发时使用Web服务器而不是file：// URI来提供本地文件，因为除非您从某种类型的Web提供文件，否则w3data库将无法工作服务器

此外，您还有一些非常混乱的HTML。由于您似乎仍在学习一些HTML基础知识并且只想尝试深入研究，因此您可能需要验证HTML。一种方法是使用 online tool like this 。

W3库 - 不工作，看起来很简单

1 个答案: