HTML + CSS

原创于 2025-11-23 18:03:05 发布 · 459 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

前端专栏收录该内容

1 篇文章

订阅专栏

布局核心：Flexbox 与 Grid（重点！）

Flexbox：一维布局

CSS Grid：二维布局

Flexbox vs Grid 怎么选？

什么是 HTML？

HTML（HyperText Markup Language）是网页的“骨架”。

用 <h1>、<p>、<div> 等标签定义内容结构
浏览器读取 HTML 文件后，将其渲染成你看到的网页
不是编程语言，无需担心“逻辑复杂”

一个最简单的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
  <p>这是一个段落。</p>
</body>
</html>

保存为 index.html，双击打开就能看到效果！

什么是 CSS？

CSS（Cascading Style Sheets）是网页的“皮肤”。

控制颜色、字体、间距、布局等视觉样式
实现“内容”与“样式”分离，便于维护和复用

例如：

h1 {
  color: #1e90ff;
  font-size: 28px;
  text-align: center;
}

这段代码会让所有 <h1> 标题变成蓝色、居中、大字号。

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>
</head>
<body>
  <!-- 你的内容写在这里 -->
</body>
</html>

⚠️ 别忘了 <meta charset="UTF-8">，否则中文可能乱码！

标签规则

大多数标签成对出现：<p>内容</p>
自闭合标签无需结束：<img src="logo.png" alt="Logo">（HTML5 中可省略 /）
属性写在开始标签里：<a href="https://example.com">链接</a>

常用 HTML 标签速查表

标签	用途
`<h1>` ~ `<h6>`	标题（h1 最重要）
`<p>`	段落
`<a href="...">`	超链接
`<img src="..." alt="...">`	图片（`alt` 是无障碍必备）
`<ul>` / `<ol>` + `<li>`	无序/有序列表
`<div>`	通用块级容器
`<span>`	通用行内容器
`<header>`, `<nav>`, `<main>`, `<footer>`	语义化标签（强烈推荐使用！）

✅ 语义化标签不仅让代码更清晰，还能提升 SEO 和屏幕阅读器兼容性！

CSS 基础语法

CSS 的基本结构是：

选择器 {
  属性: 值;
  color: red;
  font-size: 16px;
}

引入 CSS 的三种方式

内联样式（不推荐）

<p style="color: green;">绿色文字</p>

内部样式表（适合单页）
```
<style>
  p { color: green; }
</style>
```

外部样式表（✅ 推荐！）

<link rel="stylesheet" href="style.css">

CSS 选择器大全

选择器	示例	说明
元素选择器	`p`	选所有 `<p>`
类选择器	`.btn`	选 `class="btn"` 的元素
ID 选择器	`#top`	选 `id="top"` 的元素（页面唯一）
后代选择器	`nav a`	`nav` 里的所有 `<a>`
子选择器	`ul > li`	`ul` 的直接子元素 `li`
伪类	`a:hover`	鼠标悬停时的链接

💡 尽量少用 ID 选择器，优先用 class，更利于复用和维护。

盒模型（Box Model）详解

每个 HTML 元素都是一个“盒子”，由四部分组成：

margin → border → padding → content

content：实际内容（文字、图片等）
padding：内边距（内容到边框的距离）
border：边框
margin：外边距（与其他元素的间距）

默认情况下，width 和 height 只包含 content。但你可以通过以下代码改变行为：

* {
  box-sizing: border-box;
}

✅ 这行代码会让 width 包含 padding + border，布局更直观，强烈建议全局设置！

布局核心：Flexbox 与 Grid（重点！）

Flexbox：一维布局

适合导航栏、卡片内对齐、垂直居中等场景。

启用方式：

.container {
  display: flex;
}

常用属性（容器）：

justify-content：主轴对齐（如 center、space-between）
align-items：交叉轴对齐（如 center 实现垂直居中）
flex-direction: column：改成纵向排列
flex-wrap: wrap：允许换行

✅ 经典用法：全屏居中

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

CSS Grid：二维布局

适合整体页面结构、图库、仪表盘等。

启用方式：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 两列，比例 1:2 */
  gap: 16px;
}

高级技巧：命名区域布局

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: 80px 1fr 60px;
  grid-template-columns: 200px 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Flexbox vs Grid 怎么选？

场景	推荐方案
导航栏、按钮组、卡片内部对齐	✅ Flexbox
整体页面布局、多列复杂结构	✅ CSS Grid
不确定？	Grid 做外层，Flexbox 做内层！