引言
在互联网时代，拥有一个个性鲜明的网站对于个人或企业来说至关重要。HTML和CSS是构建网页的基础，掌握它们可以帮助你轻松打造属于自己的网站。本文将为你提供一个全面的HTML+CSS网页制作入门攻略，让你从零开始，逐步掌握网页制作技巧。
第一部分：HTML基础
1. HTML简介
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它通过一系列标签对网页中的内容进行组织和格式化。
2. HTML结构
一个基本的HTML页面通常包含以下结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
3. 常用标签
<h1>-<h6>：标题标签<p>：段落标签<a>：超链接标签<img>：图片标签<div>：块级元素，用于布局<span>：行内元素，用于文本格式化
第二部分：CSS基础
1. CSS简介
CSS（层叠样式表）用于设置网页的样式和布局。它可以将HTML内容和样式分离，提高网页的可维护性。
2. CSS选择器
- 类选择器：
.class - ID选择器：
#id - 标签选择器：
div
3. 常用样式
- 字体：
font-family - 颜色：
color - 背景：
background-color - 尺寸：
width,height - 布局：
margin,padding,float
第三部分：实战案例
1. 个人简历网页
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body>
<h1>张三</h1>
<p>联系方式：zhangsan@example.com</p>
<h2>教育背景</h2>
<p>某某大学 计算机科学专业 本科</p>
</body>
</html>
CSS代码
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333;
}
p {
color: #666;
}
2. 小型企业主页
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小型企业主页</title>
</head>
<body>
<header>
<h1>企业名称</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品与服务</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
</header>
<section>
<h2>关于我们</h2>
<p>企业简介...</p>
</section>
<footer>
<p>版权所有 © 2025 企业名称</p>
</footer>
</body>
</html>
CSS代码
body {
font-family: Arial, sans-serif;
background-color: #fff;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
第四部分：进阶技巧
1. 响应式设计
响应式设计可以使网页在不同设备上都能良好显示。使用媒体查询（Media Queries）可以实现响应式设计。
2. 前端框架
使用前端框架（如Bootstrap、Foundation）可以快速搭建网页，提高开发效率。
3. 版本控制
使用版本控制系统（如Git）可以方便地管理代码，提高团队协作效率。
总结
通过本文的学习，相信你已经对HTML+CSS网页制作有了基本的了解。掌握这些基础知识后，你可以开始尝试制作自己的网站。记住，多练习、多思考，才能不断提高自己的技能。祝你学习愉快！