第一步创建要复用的head.html（head.css样式另写）
<!--注意：除body内的内容全部去除 -->
<h1>头部</h1>
h1{
text-align: center;
}
第二步创建测试页面Text.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- 引入axios 可以用网络地址，也可以自行下载引入 注意：后缀要是.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<!-- 引入css样式 -->
<link rel="stylesheet" href="./css/head.css">
</head>
<body>
<!-- 在此插入复用的代码 -->
<heade></heade>
<h1>正文</h1>
<script>
// 引入路径
axios.get('./con-html/head.html')
.then(res => {
document.querySelector('heade').innerHTML = res.data
})
.catch(err => {
console.error(err);
})
</script>
</body>
</html>
测试结果
注意：如果复用代码段要插入图片、音频、背景图什么的和路径有关系的，要进行更改路径以测试文件为准。
今天刚学记录一下下！！！
今天刚学记录一下下！！！
今天刚学记录一下下！！！
2038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
