最新demo

HTML与CSS基础：零基础入门前端开发

5月 2024
Updated 5月 2025
前端技术, 入门指南

HTML与CSS基础：零基础入门前端开发

前端开发是现代互联网世界的重要组成部分，它关注的是用户可以直接看到和交互的网站部分。对于初学者来说，HTML和CSS是进入前端开发领域的第一步。本文将为零基础的读者提供一个全面的HTML和CSS入门指南。

什么是前端开发？

前端开发主要包含三大核心技术：

  1. HTML (超文本标记语言) - 定义网页的结构和内容
  2. CSS (层叠样式表) - 控制网页的外观和布局
  3. JavaScript - 为网页添加交互功能

本文将重点介绍前两者：HTML和CSS的基础知识。

HTML基础

HTML是什么？

HTML（HyperText Markup Language，超文本标记语言）是创建网页的标准标记语言。它通过一系列的元素（标签）来告诉浏览器如何显示内容。

HTML文档结构

一个基本的HTML文档结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

让我们来解析这个结构：

  • <!DOCTYPE html> 声明文档类型
  • <html> 是HTML文档的根元素
  • <head> 包含了文档的元数据（如字符集、视口设置、标题等）
  • <body> 包含了可见的页面内容

常用HTML标签

标题标签

HTML提供了六个级别的标题标签，从<h1>到<h6>：

1
2
3
4
5
6
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

段落标签

<p>标签用于定义段落：

1
2
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

链接标签

<a>标签用于创建超链接：

1
<a href="https://www.example.com">访问Example网站</a>

图像标签

<img>标签用于在网页中嵌入图像：

1
<img src="images/example.jpg" alt="示例图片">

alt属性提供了图像的替代文本，当图像无法显示时会显示这段文字，同时也有助于提高网页的可访问性。

列表标签

HTML提供了有序列表<ol>和无序列表<ul>：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 无序列表 -->
<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

表格标签

<table>标签用于创建表格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

表单标签

<form>标签用于创建表单，收集用户输入：

1
2
3
4
5
6
7
8
9
<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br>
    
    <input type="submit" value="提交">
</form>

HTML5新特性

HTML5引入了许多新的元素和属性，如：

  • 语义化标签：<header>, <footer>, <nav>, <section>, <article>, <aside>
  • 多媒体标签：<audio>, <video>
  • 图形标签：<canvas>, <svg>
  • 表单新元素：<datalist>, <output>, 以及新的input类型如email, url, date等
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
<!-- 语义化标签示例 -->
<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
</header>

<section>
    <h2>文章标题</h2>
    <article>
        <p>文章内容...</p>
    </article>
</section>

<aside>
    <h3>相关链接</h3>
    <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
    </ul>
</aside>

<footer>
    <p>&copy; 2024 我的网站</p>
</footer>

CSS基础

CSS是什么？

CSS（Cascading Style Sheets，层叠样式表）用于控制HTML元素的外观和布局。它让网页设计师能够将内容与表现分离，提高了网页的可维护性。

CSS的三种使用方式

1. 内联样式

直接在HTML元素的style属性中定义样式：

1
<p style="color: blue; font-size: 18px;">这是一个蓝色的段落，字体大小为18像素。</p>

2. 内部样式表

在HTML文档的<head>部分使用<style>标签定义样式：

1
2
3
4
5
6
7
8
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

3. 外部样式表（推荐）

创建一个单独的CSS文件，然后在HTML文档中引用它：

1
2
3
<head>
    <link rel="stylesheet" href="styles.css">
</head>

styles.css文件内容：

1
2
3
4
p {
    color: blue;
    font-size: 18px;
}

CSS选择器

选择器用于选择要样式化的HTML元素。

基本选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 元素选择器 */
p {
    color: blue;
}

/* 类选择器 */
.highlight {
    background-color: yellow;
}

/* ID选择器 */
#header {
    font-size: 24px;
}

/* 通用选择器 */
* {
    margin: 0;
    padding: 0;
}

组合选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 后代选择器 */
article p {
    font-style: italic;
}

/* 子选择器 */
nav > ul {
    border: 1px solid black;
}

/* 相邻兄弟选择器 */
h1 + p {
    font-weight: bold;
}

/* 通用兄弟选择器 */
h1 ~ p {
    color: gray;
}

伪类和伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 伪类 */
a:hover {
    color: red;
}

li:first-child {
    font-weight: bold;
}

/* 伪元素 */
p::first-letter {
    font-size: 2em;
}

p::before {
    content: "→ ";
}

CSS盒模型

CSS盒模型是CSS布局的基础，它将每个HTML元素视为一个矩形盒子，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。

1
2
3
4
5
6
7
.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}

默认情况下，width和height只包括内容区域的尺寸。可以使用box-sizing属性改变这一行为：

1
2
3
4
5
6
7
8
.box {
    box-sizing: border-box; /* width和height包括内容、内边距和边框 */
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}

CSS布局

传统布局方式

  1. 正常流：默认的布局方式，元素从上到下、从左到右排列。
  2. 浮动：使用float属性使元素脱离正常流，向左或向右浮动。
  3. 定位：使用position属性控制元素的位置。
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
/* 浮动示例 */
.left {
    float: left;
    width: 30%;
}

.right {
    float: right;
    width: 65%;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 定位示例 */
.relative {
    position: relative;
    top: 20px;
    left: 30px;
}

.absolute {
    position: absolute;
    top: 50px;
    left: 50px;
}

.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

现代布局方式

  1. Flexbox：一维布局模型，适合设计一行或一列的布局。
  2. Grid：二维布局模型，适合设计行和列的布局。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Flexbox示例 */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex: 1;
    margin: 10px;
}

/* Grid示例 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.grid-item {
    padding: 20px;
    background-color: #f0f0f0;
}

响应式设计

响应式设计使网页能够适应不同的屏幕尺寸。主要技术包括：

  1. 流体布局：使用相对单位（如百分比）而不是固定单位（如像素）。
  2. 媒体查询：根据设备特性（如屏幕宽度）应用不同的样式。
  3. 弹性图像：确保图像不会超出其容器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 流体布局 */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 媒体查询 */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }
    
    .column {
        width: 100%;
        float: none;
    }
}

/* 弹性图像 */
img {
    max-width: 100%;
    height: auto;
}

实践项目：创建一个简单的个人网页

让我们将所学的HTML和CSS知识应用到实践中，创建一个简单的个人网页。

HTML结构

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!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="styles.css">
</head>
<body>
    <header>
        <h1>张三的个人网页</h1>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#skills">技能</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系我</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="about">
        <h2>关于我</h2>
        <img src="profile.jpg" alt="张三的照片">
        <p>你好！我是张三，一名热爱前端开发的学生。我喜欢创建美观且用户友好的网站。</p>
    </section>
    
    <section id="skills">
        <h2>技能</h2>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript (基础)</li>
            <li>响应式设计</li>
        </ul>
    </section>
    
    <section id="projects">
        <h2>项目</h2>
        <div class="project">
            <h3>个人博客</h3>
            <p>使用HTML和CSS创建的个人博客网站。</p>
            <a href="#">查看项目</a>
        </div>
        <div class="project">
            <h3>响应式登录页面</h3>
            <p>一个适应各种设备的登录页面设计。</p>
            <a href="#">查看项目</a>
        </div>
    </section>
    
    <section id="contact">
        <h2>联系我</h2>
        <form>
            <div class="form-group">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">留言：</label>
                <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit">发送</button>
        </form>
    </section>
    
    <footer>
        <p>&copy; 2024 张三的个人网页. 保留所有权利.</p>
    </footer>
</body>
</html>

CSS样式

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    color: #2980b9;
}

/* 头部样式 */
header {
    background-color: #3498db;
    color: white;
    padding: 1rem;
    text-align: center;
}

header h1 {
    margin-bottom: 1rem;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: white;
}

nav ul li a:hover {
    color: #f4f4f4;
}

/* 区块样式 */
section {
    padding: 2rem;
    margin: 1rem 0;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

section h2 {
    color: #3498db;
    margin-bottom: 1rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

/* 关于我 */
#about img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

/* 技能 */
#skills ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

#skills li {
    background-color: #3498db;
    color: white;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    border-radius: 3px;
}

/* 项目 */
.project {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f9f9f9;
    border-left: 3px solid #3498db;
}

.project h3 {
    color: #3498db;
    margin-bottom: 0.5rem;
}

.project a {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.8rem;
    background-color: #3498db;
    color: white;
    border-radius: 3px;
}

.project a:hover {
    background-color: #2980b9;
}

/* 联系表单 */
.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
}

input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 3px;
}

button {
    background-color: #3498db;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #2980b9;
}

/* 页脚 */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
    
    nav ul li {
        margin: 0.5rem 0;
    }
    
    #about img {
        float: none;
        display: block;
        margin: 0 auto 1rem;
    }
    
    #skills ul {
        justify-content: center;
    }
}

学习资源推荐

对于想要继续学习HTML和CSS的初学者，以下是一些优质的学习资源：

  1. MDN Web文档：Mozilla提供的全面的Web开发文档
  2. W3Schools：提供简单易懂的教程和示例
  3. CSS-Tricks：提供许多CSS技巧和教程
  4. freeCodeCamp：提供免费的编程课程，包括HTML和CSS
  5. Codecademy：提供互动式编程学习

结语

HTML和CSS是前端开发的基础，掌握这些技术将为你进一步学习JavaScript和其他前端框架打下坚实的基础。记住，实践是学习编程的最佳方式，所以不要害怕尝试和犯错。

希望这篇入门指南能够帮助你开始前端开发之旅。祝你学习愉快！

你有什么问题或者想法？欢迎在评论区留言讨论！