1. 语义化标签的正确使用
避免滥用
标签，应使用具有实际意义的标签。例如：
<header>
<nav>
<ul>
<li><a href="#home">首页</a></li>
</ul>
</nav>
</header>
<main>
<section id="dishes">
<article class="dish-card">
<h3>宫保鸡丁</h3>
<p>经典川菜...</p>
</article>
</section>
</main>
<footer>
<p>© 2024 美食网页毕业论文</p>
</footer>
解析：使用<header>、<nav>、<main>、<article>和<footer>标签有助于搜索引擎理解页面结构，提升SEO效果，这也是毕业论文中的加分项。
2. CSS3 Flexbox 布局应用
现代网页布局推荐使用Flexbox，它比传统的Float布局更灵活。以下是实现卡片横向排列的代码示例：
.dish-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.dish-card {
flex: 1 1 300px; / 最小宽度300px，可伸缩 /
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.dish-card img {
width: 100%;
height: auto;
border-radius: 8px 8px 0 0;
}
解析：通过flex-wrap: wrap实现换行，gap属性控制间距，使布局在不同屏幕尺寸下保持整洁。
3. 媒体查询与响应式适配
确保网页在手机、平板和PC上均能正常显示。关键代码如下：
/ 默认PC端样式 /
.container {
width: 1200px;
margin: 0 auto;
}
/ 平板适配 /
@media (max-width: 992px) {
.container {
width: 90%;
}
}
/ 手机适配 /
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
display: none; / 需配合JS实现汉堡菜单 /
}
.dish-grid {
flex-direction: column;
}
}
解析：使用@media查询根据视口宽度调整容器宽度和布局方向，是实现移动端适配的核心技术。