HTML通过语义化标签构建网页结构，如header、nav、main、article、section、aside和footer，结合CSS实现响应式布局，提升可维护性与SEO。
HTML 中并没有“函数”这一概念，你提到的“html函数”实际上是指使用 HTML 标签和结构化元素来定义网页的布局与框架。HTML（超文本标记语言）通过语义化标签构建页面结构，为网页内容提供清晰的组织方式。下面是一份实用指南，帮助你用 HTML 正确搭建网页的基本框架。
使用语义化标签构建页面结构
现代 HTML5 提供了一系列语义化标签，让页面结构更清晰、更易维护，也利于搜索引擎优化（SEO）和无障碍访问。
- <header>：定义页面或区块的头部，通常包含网站标题、导航菜单等。
- <nav>：专门用于包裹主导航链接，提升可访问性。
- <main>：表示页面主要内容区域，每个页面应只有一个 main 区域。
- <article>：用于独立的内容块，如博客文章、新闻条目。
- <section>：定义文档中的章节或分组内容，通常带有标题。
- <aside>：表示侧边栏或与主内容相关但可独立存在的信息。
- <footer>：定义页面或区域的底部，常用于版权信息、联系方式等。
创建基本网页框架的代码示例
以下是一个标准的 HTML 页面结构，展示了如何组合这些标签来构建完整布局：
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我的网页</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>欢迎来到我的网站</h2>
<p>这是主页内容。</p>
</section>
<aside>
<h3>侧边栏</h3>
<p>推荐内容、广告或其他辅助信息。</p>
</aside>
</main>
<footer>
<p>© 2025 我的网站. 保留所有权利。</p>
</footer>
</body>
</html>
结合 CSS 实现灵活布局
HTML 负责结构，CSS 负责样式与布局控制。常用布局方式包括 Flexbox 和 Grid，能轻松实现响应式设计。
立即学习“前端免费学习笔记（深入）”；
- 使用 display: flex; 让导航横向排列并居中对齐。
- 使用 display: grid; 将主内容区与侧边栏按比例划分（如 70%/30%）。
- 添加媒体查询（@media）使页面在手机上自动调整布局。
例如，在 CSS 中设置：
main {display: grid;
grid-template-columns: 70% 30%;
gap: 20px;
}
@media (max-width: 768px) {
main {
grid-template-columns: 1fr;
}
} 基本上就这些。用好语义化标签，再配合 CSS，就能构建出结构清晰、易于维护且响应式的网页框架。
