html - 是否可以在多个页面上像模板一样重用 HTML?

标签 html

我在一个网站上有几个页面,每个页面都使用相同的标题。我想知道是否有某种方法可以简单地引用带有 html 标题的文件,就像在这个伪代码中一样:

<!-- Main Page -->

<body>
  <html_import_element src = "myheadertemplate.html">
<body>

然后在一个单独的文件中:

<!-- my header template html -->

<div>
  <h1>This is my header</h1>
  <div id = "navbar">
    <div class = "Tab">Home</div>
    <div class = "Tab">Contact</div>
  </div>
</div>

这样我就可以编写一次标题 html,然后通过编写一个简单的标记将它导入到我需要它的每个页面中。这可能吗?我可以用 XML 做到这一点吗?

最佳答案

您可以按照下面的方式进行。

<head>
  <link rel="import" href="myheadertemplate.html">
</head>

你可以在哪里拥有你的 myheadertemplate.html

<div>
  <h1>This is my header</h1>
  <div id = "navbar">
    <div class = "Tab">Home</div>
    <div class = "Tab">Contact</div>
  </div>
</div>

然后你可以在下面的JS中使用它

var content = document.querySelector('link[rel="import"]').import;

关于html - 是否可以在多个页面上像模板一样重用 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36387676/

相关文章:

ios - ionic:HTML5音频标签在iOS 11上不起作用

html - 根据所选值更改列宽

jquery - 在网页中可靠且快速地播放音频的最佳方法?

javascript - onDrop/onDragOver HTML5 更新 div

html - 根据特定容器更改弹出宽度

jquery - 如何获取带有类名的内部div的值?

javascript - jQuery/Javascript - 自行运行脚本函数

javascript - 调用JS函数onClick

html - 如何使 float 操作按钮/内容与 MaterializeCSS 中的两个 div 重叠

javascript - 使用 jquery 或 javascript 禁用基于先前选择的下拉值的下拉选项?