HTML-CSS 基础学习#

HTML 基础标签#

标题标签：`<h1>-<h6>`#

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

超链接标签：`<a href="" target="">…</a>`#

1
<a href="" target="">链接文本</a>

属性说明：

href: 指定资源访问的URL
target: 指定何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开

CSS 样式基础#

CSS样式基础

CSS样式应用

选择器类型#

最常见的三类选择器的写法：

元素选择器: 标签名{...}
类选择器: .class属性值{...}
ID选择器: #id属性值{...}

优先级最高的是ID选择器

CSS选择器示意图

引入视频#

引入视频示意图

1
<video controls>
2
    <source src="视频文件路径" type="video/mp4">
3
    您的浏览器不支持视频标签。
4
</video>

引入图片#

引入图片示意图

1
<img src="图片路径" alt="图片描述" width="宽度" height="高度">

标签#

HTML标签示意图

字符实体#

字符实体示意图

常用的HTML字符实体：

字符	实体名称	实体编号	描述
<	`<`	`<`	小于号
>	`>`	`>`	大于号
&	`&`	`&`	和号
”	`"`	`"`	引号
’	`'`	`'`	撇号
空格	` `	` `	不间断空格

CSS 布局技术#

整体居中显示#

整体居中显示示意图

1
.container {
2
    display: flex;
3
    justify-content: center;
4
    align-items: center;
5
    height: 100vh;
6
}

CSS 盒子模型#

组成： 内容（content）、内边距（padding）、边框（border）、外边距（margin）

CSS盒子模型示意图

具体使用盒子模型#

盒子模型应用示例

1
.box {
2
    width: 200px;
3
    height: 100px;
4
    padding: 20px;
5
    border: 2px solid #000;
6
    margin: 10px;
7
}

参照页面原型，完成员工管理页面制作#

Flex 布局#

flex布局 是 Flexible Box 的缩写，意为”弹性布局”，是一种一维的布局模型。flex布局可以为元素之间提供强大的布局和对齐能力。

Flex布局示意图

1
.flex-container {
2
    display: flex;
3
    flex-direction: row; /* 主轴方向 */
4
    justify-content: center; /* 主轴对齐方式 */
5
    align-items: center; /* 交叉轴对齐方式 */
6
    flex-wrap: wrap; /* 是否换行 */
7
}
8

9
.flex-item {
10
    flex: 1; /* 弹性增长 */
11
    margin: 10px;
12
}

表单标签#

表单标签：`<form>`#

表单属性：

action: 表单数据提交的URL地址
method: 表单提交方式
- get: 表单数据拼接在URL后面，？username=java，大小有限制
- post: 表单数据在请求中携带，大小没有限制

注意： 表单项必须有name属性才可以提交。

表单标签-表单项#

<input>的type属性：

text, password, radio, checkbox, file, date, datetime-local, time, hidden, button, submit

<select> 定义下拉列表

<textarea> 定义文本域

1
<form action="提交地址" method="提交方式">
2
    <input type="text" name="username" placeholder="请输入用户名">
3
    <input type="password" name="password" placeholder="请输入密码">
4
    <input type="radio" name="gender" value="male"> 男
5
    <input type="checkbox" name="hobby" value="reading"> 阅读
6
    <input type="file" name="avatar">
7
    <input type="date" name="birthday">
8
    <input type="email" name="email">
9
    <input type="submit" value="提交">
10
    <input type="reset" value="重置">
11

12
    <!-- 下拉列表 -->
13
    <select name="city">
14
        <option value="beijing">北京</option>
15
        <option value="shanghai">上海</option>
16
    </select>
17

18
    <!-- 文本域 -->
19
    <textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>
20
</form>

表单元素示意图

表格标签#

HTML表格结构示意图

1
<table>
2
    <thead>
3
        <tr>
4
            <th>姓名</th>
5
            <th>年龄</th>
6
            <th>职业</th>
7
        </tr>
8
    </thead>
9
    <tbody>
10
        <tr>
11
            <td>张三</td>
12
            <td>25</td>
13
            <td>程序员</td>
14
        </tr>
15
    </tbody>
16
</table>

Tlias案例代码#

以下是一个完整的员工管理页面示例，展示了HTML和CSS的综合应用：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Tlias智能学习辅助系统</title>
7
    <style>
8
        /* 顶部导航栏样式 */
9
        .navbar {
10
            display: flex;
11
            justify-content: space-between;
12
            align-items: center;
13
            padding: 15px 30px;
14
            background-color: #6c757d;
15
            border-bottom: 1px solid #eaeaea;
16
        }
17

18
        .navbar h1 {
19
            font-size: 24px;
20
            font-weight: bold;
21
            margin: 0;
22
            color: white;
23
            font-family: "KaiTi", "楷体", serif;
24
        }
25

26
        .logout-link {
27
            text-decoration: none;
28
            color: white;
29
            font-size: 16px;
30
        }
31

32
        .logout-link:hover {
33
            text-decoration: underline;
34
        }
35

36
        /* 搜索表单区域样式 */
37
        .search-container {
38
            padding: 20px 30px;
39
            background-color: #f8f9fa;
40
            border-bottom: 1px solid #eaeaea;
41
        }
42

43
        .search-form .form-row {
44
            display: flex;
45
            align-items: center;
46
            gap: 20px;
47
            flex-wrap: wrap;
48
        }
49

50
        .search-form .form-group {
51
            display: flex;
52
            align-items: center;
53
            gap: 10px;
54
        }
55

56
        .search-form .form-group label {
57
            white-space: nowrap;
58
        }
59

60
        .search-form .form-control {
61
            padding: 8px;
62
            border: 1px solid #ced4da;
63
            border-radius: 4px;
64
        }
65

66
        .search-form .form-control#employeeName {
67
            width: 200px;
68
        }
69

70
        .search-form .form-control#employeeGender {
71
            width: 150px;
72
        }
73

74
        .search-form .form-control#employeePosition {
75
            width: 200px;
76
        }
77

78
        .button-group {
79
            display: flex;
80
            gap: 25px;
81
            margin-left: 100px;
82
        }
83

84
        .btn {
85
            padding: 8px 20px;
86
            border: none;
87
            border-radius: 4px;
88
            cursor: pointer;
89
            color: white;
90
        }
91

92
        .btn-primary {
93
            background-color: #007bff;
94
        }
95

96
        .btn-secondary {
97
            background-color: #6c757d;
98
        }
99

100
        .btn:hover {
101
            opacity: 0.9;
102
        }
103

104
        /* 表格展示区域样式 */
105
        .table-container {
106
            padding: 20px 30px;
107
            background-color: #ffffff;
108
        }
109

110
        .table-title {
111
            font-size: 18px;
112
            font-weight: bold;
113
            margin-bottom: 15px;
114
            color: #333;
115
        }
116

117
        .data-table {
118
            width: 100%;
119
            border-collapse: collapse;
120
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
121
            border-radius: 8px;
122
            overflow: hidden;
123
        }
124

125
        .data-table thead {
126
            background-color: #6c757d;
127
            color: white;
128
        }
129

130
        .data-table th,
131
        .data-table td {
132
            padding: 12px 15px;
133
            text-align: left;
134
            border-bottom: 1px solid #eaeaea;
135
        }
136

137
        .data-table th {
138
            font-weight: bold;
139
            text-transform: uppercase;
140
            letter-spacing: 0.5px;
141
            font-size: 14px;
142
        }
143

144
        .data-table tbody tr:hover {
145
            background-color: #f8f9fa;
146
        }
147

148
        .data-table tbody tr:last-child td {
149
            border-bottom: none;
150
        }
151

152
        .avatar-img {
153
            width: 40px;
154
            height: 40px;
155
            border-radius: 50%;
156
            object-fit: cover;
157
        }
158

159
        .operation-btn {
160
            padding: 5px 10px;
161
            border: none;
162
            border-radius: 4px;
163
            cursor: pointer;
164
            font-size: 13px;
165
            margin-right: 5px;
166
        }
167

168
        .edit-btn {
169
            background-color: #ffc107;
170
            color: #212529;
171
        }
172

173
        .delete-btn {
174
            background-color: #dc3545;
175
            color: white;
176
        }
177

178
        .edit-btn:hover,
179
        .delete-btn:hover {
180
            opacity: 0.8;
181
        }
182

183
        /* 页脚版权展示区样式 */
184
        .footer {
185
            background-color: #6c757d;
186
            color: white;
187
            text-align: center;
188
            padding: 20px 30px;
189
            flex-shrink: 0;
190
            margin-bottom: 10px;
191
        }
192

193
        .footer .company-name {
194
            font-size: 16px;
195
            margin-bottom: 5px;
196
        }
197

198
        .footer .copyright {
199
            font-size: 14px;
200
            opacity: 0.8;
201
        }
202
    </style>
203
</head>
204
<body>
205
    <!-- 第一部分：顶部导航栏 -->
206
    <nav class="navbar">
207
        <h1>Tlias智能学习辅助系统</h1>
208
        <a href="#" class="logout-link">退出登录</a>
209
    </nav>
210

211
    <!-- 第二部分：搜索表单区域 -->
212
    <div class="search-container">
213
        <form id="searchForm" class="search-form" action="/search" method="GET">
214
            <div class="form-row">
215
                <!-- 员工姓名输入框 -->
216
                <div class="form-group">
217
                    <label for="employeeName">姓名:</label>
218
                    <input type="text" id="employeeName" name="employeeName" placeholder="请输入员工姓名" class="form-control">
219
                </div>
220

221
                <!-- 性别下拉选择 -->
222
                <div class="form-group">
223
                    <label for="employeeGender">性别:</label>
224
                    <select id="employeeGender" name="employeeGender" class="form-control">
225
                        <option value="">全部</option>
226
                        <option value="男">男</option>
227
                        <option value="女">女</option>
228
                    </select>
229
                </div>
230

231
                <!-- 职位下拉选择 -->
232
                <div class="form-group">
233
                    <label for="employeePosition">职位:</label>
234
                    <select id="employeePosition" name="employeePosition" class="form-control">
235
                        <option value="">全部</option>
236
                        <option value="班主任">班主任</option>
237
                        <option value="讲师">讲师</option>
238
                        <option value="学工主管">学工主管</option>
239
                        <option value="教研主管">教研主管</option>
240
                        <option value="咨询师">咨询师</option>
241
                    </select>
242
                </div>
243

244
                <!-- 操作按钮 -->
245
                <div class="button-group">
246
                    <button type="submit" class="btn btn-primary">查询</button>
247
                    <button type="reset" class="btn btn-secondary">清空</button>
248
                </div>
249
            </div>
250
        </form>
251
    </div>
252

253
    <!-- 第三部分：表格展示区域 -->
254
    <div class="table-container">
255
        <div class="table-title">员工列表</div>
256
        <table class="data-table">
257
            <thead>
258
                <tr>
259
                    <th>姓名</th>
260
                    <th>性别</th>
261
                    <th>头像</th>
262
                    <th>职位</th>
263
                    <th>入职日期</th>
264
                    <th>最后操作时间</th>
265
                    <th>操作</th>
266
                </tr>
267
            </thead>
268
            <tbody>
269
                <tr>
270
                    <td>令狐冲</td>
271
                    <td>男</td>
272
                    <td><img src="https://via.placeholder.com/40x40/cccccc/ffffff?text=L" alt="令狐冲头像" class="avatar-img"></td>
273
                    <td>讲师</td>
274
                    <td>2020-03-15</td>
275
                    <td>2023-10-20 14:30</td>
276
                    <td>
277
                        <button class="operation-btn edit-btn">编辑</button>
278
                        <button class="operation-btn delete-btn">删除</button>
279
                    </td>
280
                </tr>
281
                <tr>
282
                    <td>任盈盈</td>
283
                    <td>女</td>
284
                    <td><img src="https://via.placeholder.com/40x40/ffcccc/ffffff?text=R" alt="任盈盈头像" class="avatar-img"></td>
285
                    <td>教研主管</td>
286
                    <td>2019-07-01</td>
287
                    <td>2023-10-21 09:15</td>
288
                    <td>
289
                        <button class="operation-btn edit-btn">编辑</button>
290
                        <button class="operation-btn delete-btn">删除</button>
291
                    </td>
292
                </tr>
293
                <tr>
294
                    <td>岳不群</td>
295
                    <td>男</td>
296
                    <td><img src="https://via.placeholder.com/40x40/ccffcc/ffffff?text=Y" alt="岳不群头像" class="avatar-img"></td>
297
                    <td>班主任</td>
298
                    <td>2018-05-10</td>
299
                    <td>2023-10-19 16:45</td>
300
                    <td>
301
                        <button class="operation-btn edit-btn">编辑</button>
302
                        <button class="operation-btn delete-btn">删除</button>
303
                    </td>
304
                </tr>
305
            </tbody>
306
        </table>
307
    </div>
308

309
    <!-- 第四部分：页脚版权展示区 -->
310
    <footer class="footer">
311
        <div class="company-name">黑马程序员有限公司</div>
312
        <div class="copyright">© 2023 Tlias智能学习辅助系统. 保留所有权利.</div>
313
    </footer>
314
</body>
315
</html>

CSS 样式调整技巧#

修改 .button-group 的样式来增加外边距。在CSS中，使用 margin 属性来控制元素的外边距。

margin 是外边距，控制元素与其他元素之间的距离
padding 是内边距，控制元素内容与边框之间的距离

表单控件宽度调整#

1
.search-form .form-control#employeeName {
2
    width: 150px; /* 姓名输入框宽度 */
3
}
4

5
.search-form .form-control#employeeGender {
6
    width: 100px; /* 性别选择框宽度 */
7
}
8

9
.search-form .form-control#employeePosition {
10
    width: 150px; /* 职位选择框宽度 */
11
}

姓名输入框 (#employeeName)：150px 宽
性别选择框 (#employeeGender)：100px 宽
职位选择框 (#employeePosition)：150px 宽

gap: 10px; 就是控制两个按钮之间距离的属性

总结#

学习总结

HTML和CSS是前端开发的基础，掌握这些基础知识对于构建现代化的网页应用至关重要。通过本文的学习，你应该能够：

熟练使用HTML基础标签
理解CSS选择器和样式规则
掌握盒子模型和布局技术
能够创建完整的表单和表格
运用Flex布局进行页面排版
通过实战案例巩固所学知识

继续深入学习JavaScript，你将能够创建更加动态和交互性强的网页应用。

周咚咚の小窝