html css制作静态网页
HTML与CSS制作静态网页基础
结构搭建（HTML部分）
使用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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>页眉内容（如导航栏）</header>
<main>主体内容（如文章、图片）</main>
<footer>页脚信息（如版权声明）</footer>
</body>
</html><!DOCTYPE html>声明文档类型。<meta>标签确保响应式布局和字符编码正确。- 语义化标签（
<header>、<main>等）提升可读性与SEO。
样式设计（CSS部分）
通过CSS控制外观，示例文件style.css：
/* 全局样式 */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
/* 页眉样式 */
header {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
/* 主体内容样式 */
main {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* 页脚样式 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
position: fixed;
bottom: 0;
width: 100%;
}- 使用
margin: 0 auto实现内容居中。 position: fixed固定页脚至底部。
响应式布局
通过媒体查询适配不同设备：
@media (max-width: 768px) {
main {
padding: 1rem;
}
header, footer {
padding: 0.5rem;
}
}常用工具与资源
- 代码编辑器：VS Code、Sublime Text。
- 调试工具：浏览器开发者工具（F12）。
- 学习参考：MDN Web Docs、W3Schools。
通过以上步骤可完成基础静态网页，后续可通过JavaScript添加交互功能。
