教程总览
- 目标读者：零基础的编程小白，想学习制作网页的初学者。
- 学习路径：先理解 HTML（网页的骨架），再学习 CSS（网页的样式），最后将两者结合，动手制作一个简单的个人主页。
- 核心理念：HTML 负责内容，CSS 负责表现。 这是最重要的思想，贯穿始终。
第一部分：HTML 基础 - 网页的骨架
什么是 HTML？
HTML (HyperText Markup Language) 不是一种编程语言，而是一种标记语言，它使用一系列 来描述网页的结构和内容。
- 骨架：就像盖房子需要先搭钢筋骨架，HTML 就是网页的骨架，定义了哪里是标题，哪里是段落，哪里是图片。
- 通常成对出现,如
<p> 和 </p>。<p> 是开始标签，</p> 是结束标签，标签之间的内容就是我们要展示的内容。
第一个网页：HTML 基本结构
每个 HTML 文件都有一个固定的基本结构，用你喜欢的文本编辑器（如 VS Code, Sublime Text, 甚至记事本）创建一个文件，命名为 index.html，然后输入以下内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落，用于介绍我的网站。</p>
<p>这是另一个段落。</p>
</body>
</html>
代码解释：
<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个 HTML5 文件。<html>：根元素，包裹了整个页面的内容。<head>：头部，包含页面的元数据，这些内容不会直接显示在页面上。
<meta charset="UTF-8">：设置字符编码为 UTF-8，可以正确显示中文等特殊字符。<meta name="viewport" ...>：确保网页在移动设备上有良好的显示效果。<title>：页面的标题，会显示在浏览器标签栏上。
<body>：主体，包含了所有要在页面上直接显示的内容。
如何运行？
直接用浏览器打开 index.html 文件，你就能看到你的第一个网页了！
常用 HTML 标签
标签
| 名称 |
描述 |
示例 |
<h1> - <h6> |
h1 是最重要的标题，h6 是最次要的。 |
<h1>主标题</h1> |
<p> |
段落 |
用于包裹一段文本。 |
<p>这是一段文字。</p> |
<a> |
锚点/链接 |
用于创建链接。 |
<a href="https://www.google.com">访问谷歌</a> |
<strong> 或 <b> |
加粗 |
<strong> 语义更强调重要性。 |
<strong>粗体</strong> |
<em> 或 <i> |
斜体 |
<em> 语义更强调语气。 |
<em>斜体</em> |
<br> |
换行 |
单标签，用于换行。 |
你好<br>世界 |
<hr> |
水平线 |
单标签，创建一条分割线。 |
<hr> |
列表标签
| 名称 |
描述 |
示例 |
<ul> |
无序列表 |
列表项前有圆点。 |
<ul><li>苹果</li><li>香蕉</li></ul> |
<ol> |
有序列表 |
列表项前有数字。 |
<ol><li>第一步</li><li>第二步</li></ol> |
<li> |
列表项 |
用于 <ul> 或 <ol> 中。 |
<li>列表项</li> |
图像和媒体标签
| 名称 |
描述 |
示例 |
<img> |
图像 |
单标签，用于在页面中显示图片。 |
<img src="image.jpg" alt="图片描述"> |
src |
源 |
图片的路径。 |
|
alt |
替代文本 |
图片无法显示时显示的文字，对 SEO 和无障碍访问很重要。 |
|
容器和布局标签
| 名称 |
描述 |
<div> |
分区 |
一个通用的容器，用于组合其他元素并进行布局。 |
<span> |
内联容器 |
一个通用的内联容器，用于对文本的一部分进行样式设置。 |
第二部分：CSS 基础 - 网页的化妆术
什么是 CSS？
CSS (Cascading Style Sheets) 层叠样式表，是一种用来表现 HTML 或 XML 等文件样式的计算机语言。
- 化妆术：如果说 HTML 是人的骨架，CSS 就是人的衣服、发型、妆容，决定了网页的外观（颜色、字体、间距、布局等）。
- 层叠：当多个 CSS 规则作用于同一个元素时，会根据规则的重要性、来源和顺序来决定最终样式。
如何在 HTML 中引入 CSS？
有三种方式,最常用的是前两种。
内部样式表
在 HTML 文件的 <head> 标签内使用 <style>
<head>
...
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
color: gray;
}
</style>
...
</head>
外部样式表（推荐）
这是最佳实践,因为它能实现内容与样式的完全分离，便于维护。
- 创建一个 CSS 文件，
style.css。
- 在 HTML 文件的
<head> 中使用 <link> 标签引入它。
style.css 文件内容：
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
color: gray;
}
index.html 文件内容：
<head>
...
<link rel="stylesheet" href="style.css">
...
</head>
内联样式
直接在 HTML 标签中使用 style 属性，这种方式不推荐，因为它会使 HTML 和 CSS 混乱，难以维护。
<p style="color: red; font-size: 20px;">这是一段有样式的文字。</p>
CSS 基本语法
CSS 规则由两个主要部分组成：选择器 和 声明块。
selector {
property1: value1;
property2: value2;
}
- 选择器：告诉浏览器哪个 HTML 元素要应用样式。
p 选择所有 <p>
- 声明块：包含一个或多个声明，每个声明由一个属性和一个值组成。
- 属性：你想设置的样式特性（如
color, font-size）。
- 值：你给属性设置的值（如
red, 20px）。
常用 CSS 属性
文本属性
| 属性 |
描述 |
示例 |
color |
设置文本颜色 |
color: red; 或 color: #FF0000; |
font-size |
设置字体大小 |
font-size: 16px; |
font-family |
设置字体系列 |
font-family: "Times New Roman", serif; |
text-align |
文本对齐方式 |
text-align: center; (居中), left, right |
line-height |
设置行高 |
line-height: 1.5; |
盒模型属性
这是 CSS 布局的核心，每个 HTML 元素都可以看作一个盒子，包含：
- Content (内容)：文本、图片等。
- Padding (内边距)与边框之间的空间。
- Border (边框)和内边距的线。
- Margin (外边距)：盒子与其他盒子之间的空间。
| 属性 |
描述 |
示例 |
width |
宽度 |
width: 300px; |
height |
高度 |
height: 200px; |
padding |
设置内边距 |
padding: 10px; (上下左右都是 10px) |
border |
设置边框 |
border: 1px solid black; (1px宽，实线，黑色) |
margin |
设置外边距 |
margin: 20px auto; (上下20px，左右自动，用于水平居中) |
背景属性
| 属性 |
描述 |
示例 |
background-color |
设置背景颜色 |
background-color: lightblue; |
background-image |
设置背景图片 |
background-image: url('image.jpg'); |
布局属性
| 属性 |
描述 |
示例 |
display |
设置元素的显示类型 |
display: block; (如 div), display: inline; (如 span), display: none; (隐藏) |
float |
使元素浮动 |
float: left; (左浮动), float: right; (右浮动) |
clear |
清除浮动 |
clear: both; |
第三部分：实战项目 - 制作一个简单的个人主页
我们把学到的知识结合起来,动手做一个简单的个人主页。
文件结构
创建一个文件夹,my-website，在里面创建两个文件：
index.htmlstyle.css
步骤 1：编写 HTML 结构 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">张三的个人主页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>张三</h1>
<p>前端开发爱好者</p>
</header>
<main>
<section>
<h2>关于我</h2>
<p>你好！我叫张三，是一名正在学习前端开发的学生，我对创造美观且实用的网页充满热情。</p>
<p>除了编程，我还喜欢阅读科幻小说和打篮球。</p>
</section>
<section>
<h2>我的技能</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript (学习中...)</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 张三的个人主页. All rights reserved.</p>
</footer>
</div>
</body>
</html>
步骤 2：添加 CSS 样式 (style.css)
让我们为这个骨架穿上漂亮的衣服。
/* 1. 全局重置和基本样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
margin: 0;
background-color: #f4f4f4;
color: #333;
}
/* 2. 容器居中 */
.container {
width: 80%;
max-width: 900px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 3. 页头样式 */
header {
text-align: center;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
margin-bottom: 20px;
}
header h1 {
color: #2c3e50;
margin: 0;
}
header p {
color: #7f8c8d;
font-size: 1.2em;
margin-top: 5px;
}
/* 4. 主要内容区样式 */
main {
margin-bottom: 20px;
}
section {
margin-bottom: 30px;
}
section h2 {
color: #34495e;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
section ul {
list-style-type: square; /* 将列表项前的圆点换成方块 */
padding-left: 20px;
}
/* 5. 页脚样式 */
footer {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #95a5a6;
font-size: 0.9em;
}
步骤 3：查看成果
将这两个文件保存在同一个文件夹下,然后用浏览器打开 index.html，恭喜你，你已经成功制作了你的第一个有样式的网页！
第四部分：进阶学习方向
你已经掌握了 HTML 和 CSS 的基础，接下来可以探索更广阔的世界：
-
CSS 布局：
- Flexbox (弹性盒布局)：一维布局模型，非常适合用于组件和导航栏等，是目前最主流的布局方式。
- Grid (网格布局)：二维布局模型，非常适合用于构建整个页面的整体布局。
-
响应式设计：
学习使用媒体查询,让你的网页在不同尺寸的设备（手机、平板、桌面）上都能有良好的显示效果。
-
CSS 预处理器：
- Sass/SCSS 或 Less：它们为 CSS 增加了变量、嵌套、混合等强大功能，让 CSS 更易于编写和维护。
-
JavaScript：
这是网页的“行为层”，负责实现交互功能，如点击按钮、表单验证、动态更新内容等，HTML + CSS + JavaScript 是前端开发的“三剑客”。
学习资源推荐
- MDN Web Docs (Mozilla 开发者网络)：最权威、最全面的 Web 技术文档，强烈推荐！
- W3Schools：一个非常友好的在线教程和参考网站，有大量实例。
- freeCodeCamp：提供免费的交互式编程课程，边学边练。
- YouTube 频道：
- Traversy Media
- The Net Ninja
- Fireship (内容更新快，节奏快)
- HTML 是内容，是骨架。
- CSS 是表现，是样式。
- 多写多练是掌握编程技能的唯一途径。
- 学会使用浏览器的开发者工具 (F12)，它是你调试网页的利器。
希望这份教程能帮助你顺利开启网页开发之旅！祝你学习愉快！
