HTML_CSS基础详解
HTML + CSS 基础详解
本章位置：Java 核心阶段 Web 基础
前置知识：JavaSE 基础、数据库与 JDBC 综合练习
下一章：JavaScript
学习目标：掌握 HTML 页面结构、常用标签、表单、语义化标签，以及 CSS 选择器、盒模型、布局、Flex、定位、响应式等基础知识，能够独立完成一个简单的静态网页。
一、为什么 Java 后端也要学 HTML 和 CSS
后面学习：
Servlet
JSP
Spring MVC
Spring Boot
Vue
都会接触网页。
后端程序最终经常需要：
接收浏览器请求
返回 HTML
提供接口给前端
处理表单
展示数据
所以即使以后主要做：
Java 后端
也必须理解最基础的：
HTML
CSS
JavaScript
二、网页由什么组成
一个普通网页通常由三部分组成：
HTML
CSS
JavaScript
可以简单理解：
HTML
负责结构
CSS
负责样式
JavaScript
负责交互
例如：
HTML
按钮是什么
CSS
按钮长什么样
JavaScript
点击按钮后做什么
三、HTML 是什么
HTML：
HyperText Markup Language
中文：
超文本标记语言
HTML 不是传统意义上的编程语言。
它主要使用：
标签
描述网页结构。
四、最基本的 HTML 页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个页面</title>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
五、DOCTYPE
<!DOCTYPE html>
告诉浏览器：
当前页面使用 HTML5 标准
现在新页面基本都写：
<!DOCTYPE html>
六、html 标签
<html>
</html>
表示：
整个 HTML 文档的根元素
例如：
<html lang="zh-CN">
lang 表示：
页面主要语言
七、head 和 body
页面主要分：
<head>
</head>
和：
<body>
</body>
head
主要放：
页面标题
字符编码
CSS
SEO 信息
脚本引用
页面元信息
body
主要放：
用户真正能看到的页面内容
八、字符编码
推荐：
<meta charset="UTF-8">
避免中文乱码。
如果浏览器、文件、服务器编码不一致：
可能出现乱码
九、title
<title>学生管理系统</title>
主要显示在：
浏览器标签页
十、HTML 标签基本结构
一般：
<标签名>内容</标签名>
例如：
<p>这是一段文字</p>
十一、单标签
有些标签不需要成对：
<img>
<input>
<br>
<hr>
<meta>
<link>
HTML5 中常见写法：
<img src="a.jpg" alt="图片">
不要求写：
<img />
十二、标签属性
例如：
<a href="https://example.com">
访问网站
</a>
这里：
href
就是属性。
结构：
属性名="属性值"
十三、标题标签
HTML 提供：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
其中：
h1 最大
h6 最小
更准确地说：
标题层级不同
不仅仅是字体大小不同。
十四、段落标签
<p>
这是一段文字。
</p>
适合普通正文。
十五、换行 br
第一行
<br>
第二行
十六、水平线 hr
<hr>
可以插入分隔线。
现代页面更多通过：
CSS border
实现视觉分隔。
十七、文本强调标签
粗体强调：
<strong>重要内容</strong>
语义强调：
<em>强调内容</em>
十八、不要只为了样式使用语义标签
例如：
<strong>
不只是“变粗”。
它还有：
内容重要
的语义。
如果只想改变视觉样式：
更推荐 CSS
十九、div
<div>
内容
</div>
div 是：
通用块级容器
非常常用。
例如：
<div class="card">
<h2>Java</h2>
<p>Java 学习笔记</p>
</div>
二十、span
<span>
内容
</span>
常用于：
一小段行内内容
例如：
<p>
当前状态：
<span>已完成</span>
</p>
二十一、块级元素和行内元素
传统理解：
块级元素
通常：
独占一行
例如：
div
p
h1
ul
section
行内元素
通常：
和其他内容在同一行
例如：
span
a
strong
em
但最终显示方式可以通过：
display
改变。
二十二、链接 a
<a href="https://www.baidu.com">
百度
</a>
二十三、target
新标签打开：
<a
href="https://example.com"
target="_blank"
>
新窗口打开
</a>
如果是外部不可信链接，实际项目中还应注意：
rel="noopener noreferrer"
二十四、页面内链接
可以：
<a href="#section1">
跳转到第一章
</a>
目标：
<h2 id="section1">
第一章
</h2>
二十五、图片 img
<img
src="images/logo.png"
alt="网站 Logo"
>
常用属性：
src
图片地址
alt
图片替代文本
二十六、alt 为什么重要
如果：
图片加载失败
浏览器可以显示：
alt 内容
同时对：
无障碍访问
SEO
也很重要。
二十七、不要只靠 HTML width/height 做所有图片样式
虽然可以：
<img
src="a.jpg"
width="200"
>
但现代页面通常更推荐：
img {
width: 200px;
}
样式统一放 CSS。
二十八、无序列表 ul
<ul>
<li>Java</li>
<li>MySQL</li>
<li>SpringBoot</li>
</ul>
二十九、有序列表 ol
<ol>
<li>创建项目</li>
<li>配置数据库</li>
<li>启动程序</li>
</ol>
三十、列表的实际用途
除了文章列表，
导航栏也经常使用：
<ul>
<li>
<a href="#">首页</a>
</li>
</ul>
然后通过 CSS 做成横向菜单。
三十一、表格 table
基本结构：
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>90</td>
</tr>
</table>
三十二、表格标签
table
表格
tr
一行
th
表头单元格
td
普通单元格
三十三、thead tbody
更规范：
<table>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>90</td>
</tr>
</tbody>
</table>
三十四、合并单元格
横向：
<td colspan="2">
内容
</td>
纵向：
<td rowspan="2">
内容
</td>
三十五、表单 form
表单用于：
收集用户输入
例如：
登录
注册
搜索
提交订单
填写资料
三十六、form 基本结构
<form>
<input type="text">
<button type="submit">
提交
</button>
</form>
三十七、action
<form action="/login">
表示：
表单提交到哪个地址
三十八、method
常见：
<form method="get">
或者：
<form method="post">
后面 Servlet 会详细学习：
GET
POST
区别。
三十九、input
最常见表单标签：
<input>
四十、text
<input
type="text"
name="username"
>
四十一、password
<input
type="password"
name="password"
>
浏览器会隐藏输入内容。
注意：
隐藏显示不等于密码安全。
真正安全还需要：
HTTPS
后端密码哈希
安全认证
四十二、radio
单选：
<label>
<input
type="radio"
name="gender"
value="male"
>
男
</label>
<label>
<input
type="radio"
name="gender"
value="female"
>
女
</label>
要实现互斥：
name 必须相同
四十三、checkbox
多选：
<label>
<input
type="checkbox"
name="hobby"
value="java"
>
Java
</label>
四十四、number
<input
type="number"
name="age"
min="1"
max="150"
>
浏览器会提供基础数字输入体验。
但：
前端校验永远不能替代后端校验。
四十五、email
<input
type="email"
name="email"
>
浏览器可以做基础格式判断。
四十六、date
<input
type="date"
name="birthday"
>
四十七、file
<input
type="file"
name="avatar"
>
用于文件上传。
后面学习 Servlet / SpringBoot 时会涉及：
multipart/form-data
四十八、hidden
隐藏字段：
<input
type="hidden"
name="id"
value="1001"
>
用户页面看不到，
但提交时仍会发送。
注意：
hidden 并不安全，用户仍然可以修改请求。
四十九、textarea
多行文本：
<textarea
name="description"
rows="5"
cols="30"
></textarea>
五十、select
下拉选择：
<select name="major">
<option value="java">
Java
</option>
<option value="ai">
人工智能
</option>
</select>
五十一、button
<button type="submit">
提交
</button>
常见 type：
submit
提交表单
button
普通按钮
reset
重置表单
五十二、label
推荐：
<label for="username">
用户名
</label>
<input
id="username"
type="text"
name="username"
>
点击文字：
也可以聚焦输入框
提升可用性。
五十三、placeholder
<input
type="text"
placeholder="请输入用户名"
>
注意：
placeholder 不能替代 label
五十四、required
<input
type="text"
required
>
表示：
浏览器提交前要求填写
但仍然必须：
后端再次校验
五十五、name 为什么重要
表单提交时：
<input
name="username"
value="admin"
>
通常会形成：
username=admin
如果没有：
name
表单数据通常不会按普通表单字段提交。
五十六、语义化标签
HTML5 提供：
header
nav
main
section
article
aside
footer
相比所有地方都：
<div>
语义更加清楚。
五十七、header
<header>
网站头部
</header>
五十八、nav
<nav>
导航菜单
</nav>
五十九、main
<main>
页面主体
</main>
通常一个页面主要内容区域。
六十、section
<section>
一个主题区域
</section>
六十一、article
<article>
一篇独立文章
</article>
博客文章就很适合。
六十二、aside
<aside>
侧边栏
</aside>
六十三、footer
<footer>
页脚
</footer>
六十四、完整语义化结构示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>博客首页</title>
</head>
<body>
<header>
<h1>Java 学习博客</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">Java</a>
<a href="#">MySQL</a>
</nav>
<main>
<article>
<h2>Java 数组</h2>
<p>
数组用于保存多个同类型数据。
</p>
</article>
</main>
<footer>
Copyright 2026
</footer>
</body>
</html>
六十五、CSS 是什么
CSS：
Cascading Style Sheets
中文：
层叠样式表
用于控制：
颜色
字体
间距
布局
边框
动画
响应式
六十六、CSS 基本语法
选择器 {
属性: 值;
}
例如：
h1 {
color: red;
font-size: 32px;
}
六十七、CSS 三种引入方式
行内样式
内部样式
外部样式
六十八、行内样式
<p style="color: red;">
Hello
</p>
不推荐大量使用。
原因：
结构和样式混在一起
不好维护
六十九、内部样式
<style>
p {
color: red;
}
</style>
适合：
单页面练习
七十、外部 CSS
HTML：
<link
rel="stylesheet"
href="css/style.css"
>
style.css：
p {
color: red;
}
实际项目更推荐：
外部样式表
七十一、标签选择器
p {
color: #333;
}
选中：
所有 p
七十二、类选择器
HTML：
<div class="card">
内容
</div>
CSS：
.card {
border: 1px solid #ddd;
}
类选择器：
.
开头。
七十三、id 选择器
HTML：
<div id="header">
</div>
CSS：
#header {
height: 60px;
}
id 选择器：
#
开头。
七十四、class 和 id 怎么选
实际样式中：
优先 class
因为：
class 可以复用
id 更多用于：
页面唯一标识
锚点
JS 精确定位
七十五、通配符选择器
* {
box-sizing: border-box;
}
选中：
所有元素
七十六、后代选择器
.card p {
color: #666;
}
表示：
.card 内部所有 p
七十七、子代选择器
.menu > li {
list-style: none;
}
只选择：
直接子元素
七十八、并集选择器
h1,
h2,
h3 {
color: #222;
}
七十九、属性选择器
input[type="text"] {
border: 1px solid #ccc;
}
八十、伪类
例如：
a:hover {
color: red;
}
表示：
鼠标悬停
八十一、常见伪类
:hover
:focus
:first-child
:last-child
:nth-child()
:checked
:disabled
八十二、focus
input:focus {
outline: none;
border-color: #333;
}
表示：
输入框获得焦点时
八十三、nth-child()
例如：
tr:nth-child(even) {
background: #f7f7f7;
}
偶数行：
添加背景色
八十四、伪元素
常见：
::before
::after
例如：
.title::before {
content: "• ";
}
八十五、CSS 优先级
当多个规则同时作用于一个元素时：
浏览器需要决定谁生效
大致可以理解：
!important
>
行内样式
>
id
>
class / 属性 / 伪类
>
标签
但真正规则还涉及：
选择器权重
源码顺序
继承
层叠
八十六、不要滥用 !important
例如：
color: red !important;
虽然优先级高，
但大量使用会导致：
样式越来越难覆盖
更应该优化：
选择器结构
CSS 组织
八十七、颜色
常见：
color: red;
十六进制：
color: #333333;
简写：
color: #333;
RGB：
color: rgb(51, 51, 51);
带透明：
color: rgba(0, 0, 0, 0.6);
八十八、字体
body {
font-family:
Arial,
"Microsoft YaHei",
sans-serif;
}
八十九、字体大小
font-size: 16px;
九十、字体粗细
font-weight: 600;
或者：
font-weight: bold;
九十一、行高
line-height: 1.8;
文章正文经常通过较大的：
line-height
提升阅读体验。
九十二、文本对齐
text-align: center;
常见：
left
center
right
九十三、文本装饰
去除链接下划线：
a {
text-decoration: none;
}
九十四、背景颜色
body {
background-color: #f5f5f5;
}
九十五、背景图片
.hero {
background-image:
url("../images/bg.jpg");
}
九十六、背景尺寸
background-size: cover;
常见：
cover
覆盖整个容器
contain
完整显示图片
九十七、盒模型
CSS 最重要的基础之一：
Box Model
盒模型
一个元素可以理解成：
margin
┌──────────────────────────┐
│ border │
│ ┌────────────────────┐ │
│ │ padding │ │
│ │ ┌──────────────┐ │ │
│ │ │ content │ │ │
│ │ └──────────────┘ │ │
│ └────────────────────┘ │
└──────────────────────────┘
九十八、content
内容区域。
例如：
width: 200px;
height: 100px;
九十九、padding
内边距：
padding: 20px;
表示：
内容和边框之间的距离
一百、border
border:
1px solid #ddd;
一百零一、margin
外边距：
margin: 20px;
表示：
元素和其他元素之间的距离
一百零二、四方向写法
margin:
10px
20px
30px
40px;
顺序：
上
右
下
左
口诀：
顺时针
一百零三、两个值
margin:
10px
20px;
表示：
上下 10px
左右 20px
一百零四、box-sizing
默认盒模型：
box-sizing:
content-box;
这时：
width
只表示 content
padding 和 border 会额外增加总宽度。
一百零五、border-box
推荐：
* {
box-sizing:
border-box;
}
这样：
width
包含 content + padding + border
布局更直观。
一百零六、width 和 max-width
例如文章容器：
.container {
width: 100%;
max-width: 1200px;
}
这样：
大屏不超过 1200px
小屏自动缩小
一百零七、水平居中
固定最大宽度容器：
.container {
max-width: 1200px;
margin: 0 auto;
}
其中：
左右 auto
实现水平居中。
一百零八、display
常见：
block
inline
inline-block
none
flex
grid
一百零九、display: none
.hidden {
display: none;
}
元素：
不显示
也不占布局空间
一百一十、visibility: hidden
visibility: hidden;
元素：
看不见
但通常仍占空间
和：
display: none
不同。
一百一十一、overflow
如果内容超出容器：
overflow: hidden;
或者：
overflow: auto;
一百一十二、圆角
border-radius: 12px;
一百一十三、阴影
box-shadow:
0 8px 24px
rgba(0, 0, 0, 0.08);
卡片设计中很常见。
一百一十四、opacity
opacity: 0.5;
整个元素包括子元素：
一起透明
如果只想背景半透明，
更适合：
rgba()
一百一十五、定位 position
常见：
static
relative
absolute
fixed
sticky
一百一十六、static
默认：
position: static;
正常文档流。
一百一十七、relative
position: relative;
元素仍保留原来的布局位置，
同时可以作为：
absolute 子元素的定位参照
一百一十八、absolute
position: absolute;
元素脱离普通文档流。
通常相对于：
最近的非 static 定位祖先
定位。
一百一十九、absolute 常见组合
父：
.card {
position: relative;
}
子：
.badge {
position: absolute;
top: 10px;
right: 10px;
}
一百二十、fixed
position: fixed;
相对于：
浏览器视口
固定。
例如：
回到顶部按钮
固定客服按钮
一百二十一、sticky
position: sticky;
top: 0;
在达到指定位置后：
可以吸附
常用于：
顶部导航
表头
侧边栏目录
一百二十二、z-index
定位元素重叠时：
z-index: 100;
控制：
层叠顺序
但它还受到：
层叠上下文
影响。
初学阶段先理解基础即可。
一百二十三、Flex 布局
Flex：
弹性布局
是现代 CSS 最常用布局方式之一。
父元素：
.container {
display: flex;
}
子元素自动成为：
flex item
一百二十四、主轴和交叉轴
默认：
flex-direction: row;
主轴：
从左到右
交叉轴：
从上到下
一百二十五、justify-content
控制：
主轴方向对齐
常见：
flex-start
center
flex-end
space-between
space-around
space-evenly
一百二十六、居中布局
.container {
display: flex;
justify-content: center;
align-items: center;
}
这是最常见的：
水平 + 垂直居中
一百二十七、align-items
控制：
交叉轴对齐
例如：
align-items: center;
一百二十八、flex-direction
横向：
flex-direction: row;
纵向：
flex-direction: column;
一百二十九、gap
控制子元素间距：
display: flex;
gap: 20px;
相比给每个子元素单独：
margin
更方便。
一百三十、flex-wrap
flex-wrap: wrap;
空间不够时：
允许换行
一百三十一、flex
例如：
.main {
flex: 1;
}
表示：
占据剩余空间
常用于：
侧边栏 + 主内容
一百三十二、导航栏 Flex 示例
<nav class="nav">
<div class="logo">
MyBlog
</div>
<div class="menu">
<a href="#">首页</a>
<a href="#">Java</a>
<a href="#">MySQL</a>
</div>
</nav>
CSS：
.nav {
display: flex;
justify-content:
space-between;
align-items: center;
padding: 16px 24px;
}
.menu {
display: flex;
gap: 20px;
}
一百三十三、Grid 简单了解
CSS Grid：
二维布局
非常适合：
卡片网格
后台布局
相册
复杂页面结构
例如：
.grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 20px;
}
表示：
三列等宽
一百三十四、响应式网格
.grid {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(
240px,
1fr
)
);
gap: 20px;
}
空间不足时：
自动减少列数
一百三十五、响应式设计
响应式：
Responsive Design
目标：
电脑
平板
手机
都能正常显示。
一百三十六、viewport
移动端页面通常写：
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
否则移动设备可能按照桌面宽度缩放页面。
一百三十七、媒体查询
@media (
max-width: 768px
) {
.nav {
flex-direction:
column;
}
}
表示：
屏幕宽度 <= 768px 时
应用这些样式
一百三十八、常见响应式思路
桌面：
侧边栏 + 主内容
手机：
上下排列
例如：
.layout {
display: flex;
}
@media (
max-width: 768px
) {
.layout {
flex-direction:
column;
}
}
一百三十九、单位 px
font-size: 16px;
px：
像素
简单直接。
一百四十、百分比 %
width: 80%;
通常相对于：
父元素
一百四十一、rem
font-size: 1rem;
通常相对于：
html 根元素字体大小
如果根：
html {
font-size: 16px;
}
那么：
1rem = 16px
一百四十二、em
通常相对于：
当前元素或继承后的字体大小
使用时比 rem 更容易出现层层叠加。
一百四十三、vw / vh
vw
视口宽度的百分比
vh
视口高度的百分比
例如：
.hero {
min-height: 100vh;
}
表示：
至少一屏高度
一百四十四、图片响应式
推荐：
img {
max-width: 100%;
height: auto;
}
避免图片：
撑破容器
一百四十五、object-fit
.cover {
width: 200px;
height: 120px;
object-fit: cover;
}
图片会：
裁切填满容器
一百四十六、鼠标样式
button {
cursor: pointer;
}
一百四十七、过渡 transition
.card {
transition:
transform 0.2s;
}
悬停：
.card:hover {
transform:
translateY(-4px);
}
实现简单平滑动画。
一百四十八、transform
常见：
translate
scale
rotate
例如：
.card:hover {
transform:
scale(1.02);
}
一百四十九、不要一开始沉迷复杂动画
初学 CSS 优先掌握：
盒模型
Flex
Grid
定位
响应式
字体和间距
动画属于：
锦上添花
一百五十、CSS Reset 简单处理
浏览器默认样式可能不同。
可以写：
* {
box-sizing:
border-box;
}
body {
margin: 0;
}
实际项目可能使用更完整：
reset.css
normalize.css
一百五十一、页面基础样式建议
body {
margin: 0;
font-family:
Arial,
"Microsoft YaHei",
sans-serif;
color: #222;
background: #f7f7f7;
line-height: 1.6;
}
一百五十二、按钮基础样式
.button {
border: none;
padding:
10px
18px;
border-radius:
8px;
cursor: pointer;
}
一百五十三、输入框基础样式
.input {
width: 100%;
padding:
10px
12px;
border:
1px solid #ddd;
border-radius:
8px;
outline: none;
}
焦点：
.input:focus {
border-color: #333;
}
一百五十四、表格基础样式
table {
width: 100%;
border-collapse:
collapse;
}
th,
td {
padding: 12px;
border-bottom:
1px solid #eee;
text-align: left;
}
一百五十五、卡片样式
.card {
padding: 24px;
background: white;
border-radius:
12px;
box-shadow:
0 8px 24px
rgba(0, 0, 0, 0.06);
}
一百五十六、综合案例：登录页 HTML
<!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="style.css"
>
</head>
<body>
<main class="login-page">
<section class="login-card">
<h1>
学生管理系统
</h1>
<form>
<div class="form-item">
<label for="username">
用户名
</label>
<input
id="username"
class="input"
type="text"
name="username"
required
>
</div>
<div class="form-item">
<label for="password">
密码
</label>
<input
id="password"
class="input"
type="password"
name="password"
required
>
</div>
<button
class="login-button"
type="submit"
>
登录
</button>
</form>
</section>
</main>
</body>
</html>
一百五十七、登录页 CSS
* {
box-sizing:
border-box;
}
body {
margin: 0;
font-family:
Arial,
"Microsoft YaHei",
sans-serif;
background:
#f4f4f4;
color:
#222;
}
.login-page {
min-height:
100vh;
display:
flex;
justify-content:
center;
align-items:
center;
padding:
20px;
}
.login-card {
width:
100%;
max-width:
400px;
background:
white;
padding:
32px;
border-radius:
16px;
box-shadow:
0
12px
30px
rgba(0, 0, 0, 0.08);
}
.login-card h1 {
margin-top:
0;
margin-bottom:
24px;
text-align:
center;
}
.form-item {
margin-bottom:
18px;
}
.form-item label {
display:
block;
margin-bottom:
8px;
}
.input {
width:
100%;
padding:
11px
12px;
border:
1px solid
#dcdcdc;
border-radius:
8px;
outline:
none;
}
.input:focus {
border-color:
#333;
}
.login-button {
width:
100%;
border:
none;
padding:
12px;
border-radius:
8px;
background:
#111;
color:
white;
cursor:
pointer;
}
.login-button:hover {
opacity:
0.88;
}
一百五十八、综合案例：后台管理布局
HTML：
<div class="admin-layout">
<aside class="sidebar">
<h2>
Admin
</h2>
<nav>
<a href="#">
首页
</a>
<a href="#">
学生管理
</a>
<a href="#">
用户管理
</a>
</nav>
</aside>
<main class="content">
<header class="topbar">
<h1>
学生管理
</h1>
</header>
<section class="card">
页面内容
</section>
</main>
</div>
一百五十九、后台布局 CSS
.admin-layout {
min-height:
100vh;
display:
flex;
}
.sidebar {
width:
220px;
padding:
24px;
background:
#111;
color:
white;
}
.sidebar nav {
display:
flex;
flex-direction:
column;
gap:
12px;
}
.sidebar a {
color:
white;
text-decoration:
none;
padding:
10px;
border-radius:
8px;
}
.sidebar a:hover {
background:
rgba(255, 255, 255, 0.1);
}
.content {
flex:
1;
padding:
24px;
background:
#f5f5f5;
}
一百六十、手机端后台适配
@media (
max-width: 768px
) {
.admin-layout {
flex-direction:
column;
}
.sidebar {
width:
100%;
}
.sidebar nav {
flex-direction:
row;
flex-wrap:
wrap;
}
}
一百六十一、常见错误：所有内容都用 div
虽然：
<div>
什么都能包，
但应该优先考虑：
header
nav
main
section
article
footer
让结构更清晰。
一百六十二、常见错误：使用 br 做大量布局
不推荐：
用户名：
<br>
<input>
<br>
<br>
密码：
<br>
<input>
布局应该交给：
CSS margin
padding
flex
grid
一百六十三、常见错误：使用空格硬撑距离
不要：
用户名： <input>
不同字体和设备下会乱。
应该：
CSS 布局
一百六十四、常见错误：忘记 meta charset
可能导致：
中文乱码
推荐：
<meta charset="UTF-8">
一百六十五、常见错误：忘记 viewport
移动端可能：
页面缩放异常
推荐：
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
一百六十六、常见错误：图片没有 alt
不推荐：
<img src="logo.png">
推荐：
<img
src="logo.png"
alt="网站 Logo"
>
一百六十七、常见错误：表单没有 name
例如：
<input
type="text"
value="admin"
>
如果要传统表单提交，
通常应该：
<input
type="text"
name="username"
>
一百六十八、常见错误：把前端校验当安全机制
例如：
<input
type="number"
min="1"
max="100"
>
用户仍可以：
绕过浏览器
直接发送 HTTP 请求
所以：
后端必须再次校验
一百六十九、常见错误：CSS 选择器太深
例如：
body
.main
.content
.article
.card
.header
.title
span {
}
层级太深：
难维护
难覆盖
推荐：
使用清晰 class
例如：
.article-title {
}
一百七十、常见错误：固定高度太多
例如：
height:
800px;
内容多了：
可能溢出
普通内容区域更常：
min-height:
...
或者让内容自然撑开。
一百七十一、常见错误：所有宽度都固定 px
例如：
width:
1200px;
在手机上：
直接横向溢出
更合理：
width:
100%;
max-width:
1200px;
一百七十二、常见错误：absolute 做整个页面布局
absolute 适合：
角标
浮层
局部定位
不适合：
整个页面所有模块
主布局优先：
Flex
Grid
正常文档流
一百七十三、常见错误：不知道盒模型导致宽度超出
例如：
.box {
width:
300px;
padding:
30px;
border:
1px solid;
}
默认 content-box 下：
总宽度 > 300px
推荐全局：
* {
box-sizing:
border-box;
}
一百七十四、常见错误：margin 和 padding 混淆
padding
元素内部空间
margin
元素外部空间
可以记：
内容和边框之间
→ padding
元素和元素之间
→ margin
一百七十五、常见错误：只会 float
老教程常使用：
float:
left;
做布局。
现代新项目大多数普通布局更推荐：
Flex
Grid
float 主要理解：
历史代码
图文环绕
即可。
一百七十六、CSS 调试方式
浏览器按：
F12
打开：
开发者工具
可以查看：
Elements
Styles
Computed
Box Model
一百七十七、Elements
可以实时查看：
HTML 结构
也能临时修改页面。
一百七十八、Styles
查看：
哪些 CSS 规则正在生效
如果规则被划掉：
说明被更高优先级样式覆盖
一百七十九、Computed
查看最终：
计算后的样式
例如：
最终 width
最终 font-size
最终 margin
一百八十、盒模型调试
开发者工具中会直接显示：
margin
border
padding
content
这是排查：
为什么宽度不对
为什么元素错位
最重要的工具之一。
一百八十一、练习题 1：个人介绍页
要求：
头像
姓名
简介
学习方向
联系方式
使用：
HTML + CSS
完成。
一百八十二、练习题 2：登录页面
要求：
用户名
密码
记住我
登录按钮
使用：
Flex
盒模型
表单
完成居中卡片。
一百八十三、练习题 3：学生表格
使用：
table
展示：
学号
姓名
年龄
专业
成绩
加入：
表头背景
隔行变色
hover 效果
一百八十四、练习题 4：导航栏
要求：
左边 Logo
右边菜单
使用：
Flex
完成。
一百八十五、练习题 5：博客文章卡片
每个卡片：
标题
摘要
发布日期
标签
阅读按钮
使用：
Grid
排列。
一百八十六、练习题 6：后台管理页面
结构：
左侧菜单
顶部标题
右侧内容
要求：
桌面横向布局
手机改成上下布局
一百八十七、练习题 7：注册表单
字段：
用户名
密码
确认密码
邮箱
性别
专业
个人介绍
使用：
input
radio
select
textarea
完成。
一百八十八、练习题 8：响应式卡片
桌面：
3 列
平板：
2 列
手机：
1 列
可以使用：
Grid + media query
一百八十九、HTML 必须掌握标签
html
head
body
h1~h6
p
div
span
a
img
ul
ol
li
table
tr
th
td
form
input
textarea
select
option
button
label
header
nav
main
section
article
aside
footer
一百九十、CSS 必须掌握
选择器
字体
颜色
背景
width / height
margin
padding
border
box-sizing
display
position
Flex
Grid 基础
overflow
伪类
响应式
媒体查询
一百九十一、HTML + CSS 学习路线
建议顺序：
HTML 页面结构
↓
常用标签
↓
链接和图片
↓
列表
↓
表格
↓
表单
↓
语义化标签
↓
CSS 基础
↓
选择器
↓
文本样式
↓
盒模型
↓
display
↓
定位
↓
Flex
↓
Grid
↓
响应式
↓
综合页面
一百九十二、本章总结
HTML 解决：
页面里有什么
CSS 解决：
这些内容怎么显示
最基础的网页开发思路：
先写 HTML 结构
↓
再写 CSS 样式
↓
最后用 JavaScript 增加交互
不要一开始追求：
很炫的动画
复杂组件
高级框架
先做到：
结构正确
布局稳定
表单规范
不同屏幕能正常显示
就已经打好了 Web 前端基础。
下一章继续学习：
JavaScript
开始让页面真正具备：
事件
交互
数据处理
DOM 操作
表单校验
异步请求
也就正式从：
静态网页
进入：
动态网页
阶段。