一、HTML 基础详解

1.1 HTML 是什么？

HTML（HyperText Markup Language，超文本标记语言）是网页的结构语言，用来描述网页的内容，如文本、图片、视频、链接等。

1.2 HTML 文档结构

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
  </head>
  <body>
    <h1>主标题</h1>
    <p>段落内容</p>
  </body>
</html>

1.3 常用标签分类

（1）标题与段落

1
2
3
<h1>标题1</h1>
<h2>标题2</h2>
<p>这是一个段落。</p>

（2）链接与图片

1
2
<a href="https://example.com" target="_blank">访问链接</a>
<img src="image.jpg" alt="描述文字" width="300">

（3）音频与视频

1
2
3
4
5
6
7
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
</video>

（4）列表

1
2
3
4
5
6
7
<ul>
  <li>无序列表项</li>
</ul>

<ol>
  <li>有序列表项</li>
</ol>

（5）表格

1
2
3
4
5
6
7
8
<table border="1">
  <tr>
    <th>姓名</th><th>年龄</th>
  </tr>
  <tr>
    <td>张三</td><td>18</td>
  </tr>
</table>

（6）表单

1
2
3
4
5
6
7
8
9
10
<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>
  <label>性别：</label>
  <input type="radio" name="gender" value="male"> 男
  <input type="radio" name="gender" value="female"> 女
  <br>
  <input type="submit" value="提交">
</form>

二、CSS 基础与常用样式

2.1 CSS 是什么？

CSS（Cascading Style Sheets）用于设置网页样式（字体、颜色、布局、动画等），让页面更美观。

2.2 CSS 三种写法

1
2
3
4
5
6
7
8
9
10
<!-- 内联样式 -->
<p style="color: red;">红色文字</p>

<!-- 内部样式 -->
<style>
  h1 { color: blue; }
</style>

<!-- 外部样式 -->
<link rel="stylesheet" href="style.css">

2.3 常见属性分类

字体与文字

1
2
3
4
5
font-size: 16px;
color: #333;
text-align: center;
font-weight: bold;
line-height: 1.5;

盒子模型

1
2
3
4
5
6
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
border: 1px solid #000;
box-sizing: border-box;

背景与边框

1
2
3
background-color: #f0f0f0;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);

鼠标与动画

1
2
cursor: pointer;
transition: all 0.3s ease;

三、CSS 布局体系

3.1 传统布局方式：float 和 position

  • float: 浮动布局（现在多用于兼容旧浏览器）
  • position: 绝对定位与相对定位
1
2
position: relative; /* 相对当前位置 */
position: absolute; /* 相对最近的定位祖先 */

3.2 弹性布局（Flexbox）

Flexbox 是现代主流的布局方式，用于水平/垂直排列、自动间距、对齐等。

父容器属性

1
2
3
4
display: flex;
flex-direction: row;     /* 水平排列 */
justify-content: space-between; /* 水平对齐 */
align-items: center;     /* 垂直对齐 */

子项属性

1
2
3
flex: 1;             /* 自动占据剩余空间 */
order: 2;            /* 排序 */
align-self: flex-end; /* 单独对齐 */

示例

1
2
3
4
<div style="display: flex;">
  <div style="flex: 1; background: red;">左边</div>
  <div style="flex: 2; background: blue;">右边</div>
</div>

四、补充内容（推荐了解）

4.1 常用 HTML5 新标签

标签 作用
<header> 页眉
<nav> 导航
<section> 区块
<article> 文章内容
<footer> 页脚

4.2 响应式设计基础

使用媒体查询：

1
2
3
4
5
@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

4.3 常见选择器总结

选择器 作用
* 选择所有元素
.class 选择类名
#id 选择 ID
div p 后代选择器
div > p 子选择器
a:hover 伪类选择器

五、综合实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>个人信息页</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f0f2f5;
      padding: 20px;
    }
    .card {
      max-width: 600px;
      margin: auto;
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 10px #ccc;
    }
    .card img {
      width: 100%;
      border-radius: 10px;
    }
    .card h2 {
      margin-top: 10px;
    }
    .card form input, .card form textarea {
      width: 100%;
      padding: 8px;
      margin: 5px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .card form button {
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="card">
    <img src="profile.jpg" alt="个人头像">
    <h2>张三</h2>
    <p>前端开发爱好者</p>
    <form>
      <label>留言：</label>
      <textarea rows="4"></textarea>
      <button type="submit">提交</button>
    </form>
  </div>
</body>
</html>

六、学习建议与工具

推荐工具

  • 编码工具：VS Code
  • 在线预览：CodePen、JSFiddle
  • 图标库：Font Awesome
  • 布局参考：Flexbox Froggy（游戏学弹性布局）

七、总结

项目 内容
HTML 构建网页结构
CSS 美化网页样式
盒子模型 理解网页元素占据的空间
Flex 布局 实现灵活排列、居中等
表单、表格、多媒体 丰富网页内容类型