python学习体系

Appearance

章节1 — HTML5与CSS3基础 ​

一、章节概述 ​

本章带领学员从零搭建 Web 前端基石：掌握 HTML5 语义化标签构建页面骨架，熟练使用 CSS3 选择器与盒模型完成样式布局，理解 Flex 弹性布局与 Grid 网格布局两大现代布局体系，并学会用媒体查询实现响应式设计。

二、学习目标 ​

目标分类具体目标
知识目标理解 HTML5 语义化标签的作用与 SEO 价值；掌握 CSS3 盒模型原理与 Flex/Grid 核心概念
技能目标能独立使用语义化标签搭建页面结构；能用 Flex 与 Grid 完成常见布局；能编写媒体查询适配移动端
素质目标培养语义化、可访问性（a11y）的前端编码意识

三、核心知识点 ​

3.1 HTML5 语义化标签 ​

定义 ​

语义化标签是用有意义的标签名来描述内容的用途，替代过去 div#header / div#footer 的无意义堆砌。好处：SEO 优化、可访问性提升、代码可读性更强。

常用语义化标签一览 ​

标签含义用途
<header>页眉网站顶部、导航区
<nav>导航主导航菜单
<main>主体页面唯一主要内容
<section>区块按主题分组的区域
<article>独立文章博客正文、新闻卡片
<aside>侧边栏广告、相关链接
<footer>页脚版权、联系信息
<figure> / <figcaption>插图图片 + 标题组合

代码示例 ​

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>
  <header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">课程</a></li>
        <li><a href="#">关于</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <article>
        <h2>HTML5 语义化入门</h2>
        <p>合理使用语义化标签能让页面结构更加清晰……</p>
        <figure>
          <img src="semantic-layout.png" alt="语义化布局示意图" />
          <figcaption>图1：语义化布局结构</figcaption>
        </figure>
      </article>
    </section>
    <aside>
      <p>相关推荐：CSS3 布局教程</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 前端课程团队</p>
  </footer>
</body>
</html>

3.2 表单、表格与多媒体标签 ​

3.2.1 HTML5 表单 ​

新增的输入类型与属性极大地增强了表单体验。

类型 / 属性说明
type="email"邮箱格式校验
type="tel"电话号码（移动端弹出数字键盘）
type="number"数字微调框
type="range"滑块
type="date" / type="time"日期 / 时间选择器
placeholder占位提示
required必填校验
pattern正则验证
html
<form action="/submit" method="POST" novalidate>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" placeholder="请输入姓名" required />

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required />

  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" min="1" max="150" />

  <label for="intro">简介：</label>
  <textarea id="intro" name="intro" rows="4"></textarea>

  <button type="submit">提交</button>
</form>

3.2.2 表格 ​

html
<table border="1">
  <caption>课程表</caption>
  <thead>
    <tr>
      <th>时间</th>
      <th>周一</th>
      <th>周二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>08:00-10:00</td>
      <td>HTML5</td>
      <td>CSS3</td>
    </tr>
    <tr>
      <td>10:15-12:00</td>
      <td colspan="2">实训项目</td>
    </tr>
  </tbody>
</table>

3.2.3 多媒体标签 ​

html
<!-- 音频 -->
<audio controls src="intro.mp3">您的浏览器不支持 audio 标签</audio>

<!-- 视频 -->
<video controls width="640" poster="cover.jpg">
  <source src="course.mp4" type="video/mp4" />
  您的浏览器不支持 video 标签
</video>

<!-- 嵌入页面 -->
<iframe src="https://www.bilibili.com" width="800" height="600"></iframe>

3.3 CSS 选择器与盒子模型 ​

3.3.1 常用选择器 ​

选择器语法说明
元素选择器div { }选中所有 div
类选择器.class-name { }选中所有该类的元素
ID 选择器#id { }选中唯一 ID 的元素
属性选择器[type="text"] { }按属性筛选
后代选择器ul li { }ul 内部所有 li
子代选择器ul > li { }ul 直属子级 li
伪类:hover / :first-child / :nth-child(2n)特殊状态
伪元素::before / ::after插入内容
css
/* 属性选择器 + 伪类示例 */
input[type="text"]:focus {
  border-color: #42b883;
  outline: none;
  box-shadow: 0 0 4px rgba(66, 184, 131, 0.5);
}

/* 伪元素示例 */
.card::before {
  content: "★";
  color: gold;
  margin-right: 6px;
}

/* :nth-child 奇偶行 */
tr:nth-child(even) {
  background-color: #f5f5f5;
}

3.3.2 盒子模型 ​

每个元素在页面中被渲染为一个矩形盒子，从内到外：

┌─────────────────────────────────┐
│         margin                  │
│  ┌─────────────────────────┐   │
│  │       border            │   │
│  │  ┌───────────────────┐  │   │
│  │  │     padding       │  │   │
│  │  │  ┌─────────────┐  │  │   │
│  │  │  │  content    │  │  │   │
│  │  │  └─────────────┘  │  │   │
│  │  └───────────────────┘  │   │
│  └─────────────────────────┘   │
└─────────────────────────────────┘
  • 标准盒模型：width = content → 元素总宽 = width + padding + border
  • IE 怪异盒模型 / box-sizing: border-box：width = content + padding + border → 更易计算
css
/* 推荐全局设置 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
  /* 此时 width = 200 已包含 padding + border */
}

3.4 Flex 弹性布局 ​

定义 ​

Flexbox（弹性盒子）是一维布局模型，让容器中的子元素沿主轴或交叉轴自动排列和伸缩。

容器属性 ​

属性取值说明
display: flex—开启弹性容器
flex-directionrow | column | row-reverse | column-reverse主轴方向
justify-contentflex-start | center | space-between | space-around | space-evenly主轴对齐
align-itemsstretch | center | flex-start | flex-end交叉轴对齐
flex-wrapnowrap | wrap是否换行
gap长度值子项间距（推荐替代 margin）

项目属性 ​

属性说明
flex: 1简写：flex-grow flex-shrink flex-basis，1 表示等分剩余空间
align-self单独覆盖交叉轴对齐方式
order改变排序（默认 0）

代码示例 — 经典三栏布局 ​

css
.container {
  display: flex;
  gap: 16px;
  padding: 16px;
}

.sidebar {
  flex: 0 0 240px;  /* 固定宽度不伸缩 */
  background: #f0f0f0;
}

.main {
  flex: 1;  /* 占满剩余空间 */
  background: #fff;
}

代码示例 — 水平垂直居中（经典场景） ​

css
.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

3.5 Grid 网格布局 ​

定义 ​

CSS Grid 是二维布局模型，可同时控制行与列，适合复杂页面分区。

容器属性 ​

属性说明
display: grid开启网格容器
grid-template-columns: 1fr 1fr 1fr定义三列等宽
grid-template-rows: auto 300px定义行高
grid-template-areas命名区域
gap: 16px行列间距
justify-items / align-items单元格内对齐

项目属性 ​

属性说明
grid-column: 1 / 3跨列（从第1列到第3列）
grid-row: 1 / 2跨行
grid-area对应命名区域

代码示例 — 经典页面分区 ​

css
.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 80px;
  height: 100vh;
  gap: 8px;
}

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

代码示例 — 响应式卡片网格 ​

css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

对比总结：Flex 适合一维排列（导航栏、居中），Grid 适合二维分区（整体页面、卡片墙）。

3.6 响应式设计与媒体查询 ​

定义 ​

响应式设计（RWD）让同一套网站在不同尺寸设备（手机、平板、桌面）上都能获得良好浏览体验。核心三要素：流式布局 + 弹性图片 + 媒体查询。

视口设置 ​

html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

媒体查询语法 ​

css
/* 断点示例（推荐移动优先） */

/* 基础样式：手机 */
.container {
  display: flex;
  flex-direction: column;
}

/* 平板 ≥768px */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .item {
    flex: 0 0 50%;
  }
}

/* 桌面 ≥1024px */
@media (min-width: 1024px) {
  .item {
    flex: 0 0 33.33%;
  }
}

弹性单位 ​

单位说明
%相对父容器
vw / vh视口宽度的 1% / 高度的 1%
rem相对根字号（默认 16px）
em相对父字号
clamp(min, prefer, max)动态值区间
css
/* 响应式字号示例 */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.responsive-image {
  max-width: 100%;
  height: auto;
}

四、小结 ​

知识点核心要点
HTML5 语义化用 <header>、<nav>、<main>、<section>、<article>、<footer> 替代无意义 div
表单表格多媒体新增 input 类型、表格语义结构、audio/video/iframe
CSS 选择器类选择器、属性选择器、伪类、伪元素
盒子模型content / padding / border / margin；box-sizing: border-box
Flex 布局一维布局，justify-content + align-items 解决居中
Grid 布局二维布局，grid-template-areas 直观分区
响应式设计媒体查询 + 弹性单位 + 弹性图片

五、练习 ​

基础题 ​

  1. 写出 HTML5 文档基本骨架，并用语义化标签搭建一个博客页面：包含顶部导航、文章主体、侧边栏推荐和底部版权。
  2. 创建一个班级成绩表（表格），包含姓名、语文、数学、英语四列，并用 CSS 奇偶行变色。

进阶题 ​

  1. 用 Flex 实现一个圣杯布局（header + 三栏 body + footer），中间三栏为左菜单、主体内容、右广告栏。
  2. 用 Grid + 媒体查询实现一个卡片墙：桌面端 4 列、平板 2 列、手机 1 列，每张卡片包含图片和标题。

挑战题 ​

  1. 使用 clamp() + minmax() 实现一个完全自适应的页面，不写任何媒体查询断点就能适配 320px ~ 1920px。

Python 学习资料

仅供学习使用