HTML是一种用于创建网页的标准标记语言，它可以用来描述网页的结构和内容，在HTML中，我们可以使用<include>标签来包含其他HTML文件的内容，这种方式可以帮助我们更好地组织和管理代码，提高代码的复用性。
1. <include>标签的基本用法
在HTML中，<include>标签并不是一个标准的HTML标签，而是一个自定义的标签，要使用<include>标签，我们需要先定义一个JavaScript函数，然后在HTML文件中使用这个函数来包含其他HTML文件的内容。
我们需要在HTML文件中定义一个<script>标签，用于编写JavaScript代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-在这里编写JavaScript代码 -->
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
file = elmnt.getAttribute("include-html");
if (file) {
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."; }
elmnt.removeAttribute("include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
</script>
</body>
</html>
接下来，我们需要在HTML文件中使用<include>标签来包含其他HTML文件的内容，我们可以创建一个名为header.html的文件，用于存放网页的头部内容：
<!-header.html -->
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<a href="">首页</a> | <a href="">关于我</a> | <a href="">联系我</a>
</nav>
</header>
在主HTML文件中，我们可以使用<include>标签来包含header.html文件的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="includeHTML()">
<!-在这里编写其他HTML代码 -->
<div include-html="header.html"></div>
</body>
</html>
当浏览器加载主HTML文件时，onload事件会触发includeHTML()函数，该函数会查找所有包含include-html属性的元素，并使用AJAX请求来获取这些元素指定的HTML文件的内容，一旦获取到内容，就会将其插入到对应的元素中。include-html属性会被移除，以防止重复包含。includeHTML()函数会递归地调用自身，以确保所有包含的HTML文件都被正确处理。
2. <include>标签的优缺点
优点：
1、提高代码复用性：通过使用<include>标签，我们可以将常用的HTML代码封装到一个单独的文件中，然后在需要的地方引用它，这样可以避免重复编写相同的代码，提高代码的复用性。
2、便于维护：当我们需要修改某个公共部分的代码时，只需要修改一次即可，这有助于减少因代码修改导致的版本冲突和错误。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/240507.html
微信扫一扫 