HTML 基本结构
HTML 文档的基本结构包括： 声明、 根元素、 头部和 主体部分。 部分包含文档的元数据，如 标题、<meta> 标签、<link> 样式表链接等。<body> 部分包含文档的实际内容，如文本、图片、链接、表格等。</div>
<div class="navigation">
<a href="view.php?id=18" class="nav-btn">上一篇：前端性能优化</a>
<a href="index.php" class="back-link">返回知识库</a>
<a href="view.php?id=20" class="nav-btn">下一篇：HTML 常用标签</a>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-content">
<!-- 页脚顶部 -->
<div class="footer-top">
<!-- 站点信息 -->
<div class="footer-section">
<h3>关于我们</h3>
<div class="footer-text">
© 2026 OpenAether. 保留所有权利.
</div>
<div class="footer-text">
联系邮箱: <a href="mailto:openaether@163.com" class="footer-link">openaether@163.com</a>
</div>
</div>
<!-- 快速链接 -->
<div class="footer-section">
<h3>快速链接</h3>
<ul class="footer-links">
<li><a href="/" class="footer-link">首页</a></li>
<li><a href="/?route=about" class="footer-link">关于</a></li>
<li><a href="/know/" class="footer-link">知识库</a></li>
<li><a href="https://tonji.lxqgf.cn/" class="footer-link">统计</a></li>
<li><a href="/?route=links" class="footer-link">友情链接</a></li>
<li><a href="/sitemap.xml" class="footer-link">站点地图</a></li>
<li><a href="/subscription.php" class="footer-link">订阅</a></li>
</ul>
</div>
</div>
<!-- 网站认证信息 -->
<div class="footer-certifications">
<a href="https://www.snzy.cc/website/TYF2026022001000120.html" title="OpenAether的三年之约" target="_blank"><img style="width:130px;height:45px;" src="https://www.snzy.cc/images/snzylogo.png"></a>
<a href="https://www.snzy.cc/certificate/zhengshu-2026022001000120.html" title="OpenAether正在履约中" target="_blank"><img src="https://www.snzy.cc/istatic/picture/snzylyzs.png" alt="林霄阙正在履约中" style="width: 130px;height: 45px;"></a>
<a onclick="window.open('https://www.ktrust.cc/trust.php?sn=b3BlbmFldGhlci5jbg==','Trust SSL 安全签章','height=1000,width=660,top=0')" >
<img src="https://www.ktrust.cc/images/TrustSSL-business.png" style="height: 45px;">
</a>
<a href="https://i.n3v.cn/keyword.php?type=BXT9080853461" title="OpenAether" target="_blank"><img style="height:35px;" src="https://i.n3v.cn/assets/images/blog-star.png" alt="OpenAether"></a>
<a href="https://www.ktrust.cc/ipv6.php?domain=openaether.cn" title="本站已支持IPv6访问" target="_blank">
<img src="https://www.ktrust.cc/static/picture/ipv6.png" style="height: 35px;"/>
</a>
<a href="https://www.ssljx.cn/openaether.cn" target="_blank">
<img src="https://www.ssljx.cn/static/image/sslr.png" style="height: 35px;">
</a>
</div>
<!-- 备案信息 -->
<div class="footer-record">
<div class="footer-text text-center">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="footer-link">
滇ICP备2025053877号-1丨滇ICP备2025053877号-2 </a>
</div>
<div class="footer-text text-center">
<a href="http://www.beian.gov.cn/" target="_blank" rel="noopener noreferrer" class="footer-link">
滇公网安备53018102000274号丨滇公网安备53018102000259号 </a>
</div>
<!-- 其它备案收纳盒 -->
<div class="footer-text text-center">
<button class="备案-toggle" onclick="toggle备案()">
其它备案 <span class="备案-toggle-icon">▼</span>
</button>
<div id="备案内容" class="备案内容">
<a href="https://icp.gov.moe/?keyword=20261573" target="_blank" class="footer-link">萌ICP备20261573号</a> |
<a href="https://icp.n3v.cn/beian/ICP-2026020005.html" target="_blank" class="footer-link">易AIA盟2026020005号</a> |
<a href="https://icp.redcha.cn/beian/ICP-20050326.html" title="茶ICP备20050326号" target="_blank" class="footer-link">茶ICP备20050326号</a> |
<a href="https://icp.snzy.cc/?id=2026020000" title="梵AIA盟2026020000号" target="_blank" class="footer-link">梵AIA盟2026020000号</a> |
<a href="https://icp.gs/?id=20262120" title="岸号:20262120号" target="_blank" class="footer-link">岸号:20262120号</a> |
<a href="https://www.moicp.cn/keyword.php?type=魔ICP备2026170518号-1" target="_blank" class="footer-link">魔ICP备2026170518号-1</a> |
<a href="https://icp.wudu.ltd/id.php?keyword=20268888" target="_blank" class="footer-link">雾备20268888号</a> |
<a href="https://icp.xnet.ren/beian/ICP-2026020001.html" title="信网联盟2026020001号" target="_blank" class="footer-link">信网联盟2026020001号</a>
</div>
</div>
</div>
<!-- 备案收纳盒脚本 -->
<script>
function toggle备案() {
const 备案内容 = document.getElementById('备案内容');
const 切换图标 = document.querySelector('.备案-toggle-icon');
if (备案内容.style.display === 'none') {
备案内容.style.display = 'block';
切换图标.style.transform = 'rotate(180deg)';
} else {
备案内容.style.display = 'none';
切换图标.style.transform = 'rotate(0deg)';
}
}
// 初始化时隐藏备案内容
window.onload = function() {
document.getElementById('备案内容').style.display = 'none';
};
</script>
<!-- 页脚底部 -->
<div class="footer-bottom">
<div class="footer-text">
由 <a href="https://openaether.cn" target="_blank" class="footer-link">OpenAether</a> 强力驱动 | 设计与开发 © 2026 </div>
</div>
<!-- 网站统计 -->
<div class="footer-section">
<div class="stats-info"><p>网站今日访问：1,278 次 · 网站总访问：5,239 次</p><p>本站已运行：<span id="site-uptime">0年11月24日19时42分43秒</span></p></div><script>// 实时更新网站运行时间
function updateUptime() {
const startDate = new Date("2025-02-28 12:33:20");
const now = new Date();
const diff = now - startDate;
// 计算年、月、日、时、分、秒
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const months = Math.floor(days / 30);
const years = Math.floor(months / 12);
// 计算剩余时间
const remainingMonths = months % 12;
const remainingDays = days % 30;
const remainingHours = hours % 24;
const remainingMinutes = minutes % 60;
const remainingSeconds = seconds % 60;
// 构建时间字符串
let uptimeStr = "";
// 始终显示年份
uptimeStr += years + "年";
uptimeStr += remainingMonths + "月";
uptimeStr += remainingDays + "日";
uptimeStr += remainingHours + "时";
uptimeStr += remainingMinutes + "分";
uptimeStr += remainingSeconds + "秒";
// 更新显示
const uptimeElement = document.getElementById("site-uptime");
if (uptimeElement) {
uptimeElement.textContent = uptimeStr;
}
}
// 初始更新
updateUptime();
// 每秒更新一次
setInterval(updateUptime, 1000);</script> </div>
</div>
</footer>
<!-- 回到顶部按钮 -->
<a href="#" class="back-to-top" aria-label="回到顶部">
<span class="back-to-top-icon">↑</span>
</a>
<!-- JavaScript 脚本 -->
<script src="/assets/js/main.js"></script>
<!-- AI 机器人脚本 -->
<script src="/assets/js/robot.js"></script>
<!-- 编辑器脚本（如果需要） -->
<!-- 自定义脚本 -->
<!-- 统计代码 -->
<script src="https://tonji.lxqgf.cn/assets/js/ministat.js"></script>
<!-- 其他页脚内容 -->
<!-- 页面加载完成后的脚本 -->
<script>
// 页面加载完成后执行的代码
window.addEventListener('load', function() {
// 隐藏加载指示器
const loader = document.querySelector('.loader');
if (loader) {
loader.style.display = 'none';
}
// 其他加载完成后的操作
});
</script>
<!-- 公告弹窗 -->
<div id="announcement-popup" class="announcement-popup">
<div class="announcement-popup-content">
<button id="close-announcement" class="announcement-close" aria-label="关闭公告">×</button>
<h4 id="announcement-title" class="announcement-title"></h4>
<div id="announcement-content" class="announcement-body"></div>
</div>
</div>
<!-- 公告弹窗脚本 -->
<script>
// 获取公告数据
async function getAnnouncement() {
try {
const response = await fetch('/api/announcement.php');
const data = await response.json();
return data;
} catch (error) {
console.error('获取公告失败:', error);
return null;
}
}
// 显示公告弹窗
async function showAnnouncement() {
const announcement = await getAnnouncement();
if (announcement && announcement.active) {
const popup = document.getElementById('announcement-popup');
const title = document.getElementById('announcement-title');
const content = document.getElementById('announcement-content');
if (popup && title && content) {
title.textContent = announcement.title;
content.innerHTML = announcement.content.replace(/\n/g, '<br>');
popup.classList.add('announcement-popup-visible');
// 设置本地存储，避免重复显示
localStorage.setItem('announcement_shown', announcement.id);
}
}
}
// 初始化公告弹窗
document.addEventListener('DOMContentLoaded', function() {
// 检查是否已经显示过公告
const shownId = localStorage.getItem('announcement_shown');
// 如果没有显示过，或者存储的ID与当前公告ID不同，则显示
if (!shownId) {
showAnnouncement();
} else {
// 检查存储的公告是否仍然有效
getAnnouncement().then(announcement => {
if (announcement && announcement.active && announcement.id != shownId) {
showAnnouncement();
}
});
}
// 关闭按钮事件
const closeBtn = document.getElementById('close-announcement');
if (closeBtn) {
closeBtn.addEventListener('click', function() {
const popup = document.getElementById('announcement-popup');
if (popup) {
popup.classList.remove('announcement-popup-visible');
}
});
}
// 公告弹窗自动关闭
setTimeout(function() {
const popup = document.getElementById('announcement-popup');
if (popup) {
popup.classList.remove('announcement-popup-visible');
}
}, 10000); // 10秒后自动关闭
});
</script>
</body>
</html>