01 - HTML+CSS 零基础入门教程

全栈开发入门 管理员 2026年06月23日 139 次阅读 1695 字 约 6 分钟

视频教程：BV1uq421P71e

视频链接：BV1uq421P71e
发布日期：2024-03-30
视频时长：32:19
播放量：14.1万
所属合集：零基础AI全栈开发系列

视频概要

全栈开发系列的第一课，从最基础的HTML标签和CSS样式讲起，面向完全零基础的观众。在Sealos平台上进行教学，覆盖HTML文档结构、常用标签、CSS选择器、盒模型、Flex布局、渐变背景、阴影效果等核心概念。

知识点清单

A. HTML基础

A1. HTML是什么

知识点说明重要程度
超文本标记语言HTML是HyperText Markup Language的缩写，网页的骨架★★★★★
标签(Tag)HTML的基本组成单位，用尖括号 < > 包裹★★★★★
HTML与CSS的关系HTML定结构、CSS定样式，二者配合使用★★★★★
HTML与txt的区别.html文件可被浏览器解析为网页，.txt只是纯文本★★★★
编码(UTF-8)统一使用UTF-8编码，避免中文乱码★★★★

A2. 文档基本结构

<!DOCTYPE html>    <!-- 声明文档类型 -->
<html>             <!-- 根元素 -->
<head>             <!-- 头部：元信息 -->
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>             <!-- 主体：可见内容 -->
    <!-- 页面内容 -->
</body>
</html>

A3. 常用HTML标签

标签类型作用示例
<h1>~<h6>块级标题（h1最大，h6最小）<h1>一级标题</h1>
<p>块级段落<p>一段文字</p>
<div>块级通用容器，独占一行<div>区块</div>
<span>行内行内容器，不换行<span>文字</span>
<a>行内超链接<a href="url">链接</a>
<img>行内图片<img src="pic.jpg" alt="描述">
<ul> / <ol>块级无序/有序列表<ul><li>项目</li></ul>
<form>块级表单容器<form>输入框等</form>
<input>行内输入框<input type="text">
<button>行内按钮<button>点击</button>
<table>块级表格<table><tr><td>单元格</td></tr></table>

A4. 块级元素 vs 行内元素

特性块级元素 (div, p, h1)行内元素 (span, a, img)
换行独占一行不换行，同行排列
宽度默认填满父容器由内容决定
高度设置可设置宽高行内元素设置height/width无效
典型用途页面布局分区文字样式、链接
相互转换display: inlinedisplay: block

A5. 表单与输入

<form class="form">
    <input type="text" placeholder="请输入姓名">
    <input type="password" placeholder="请输入密码">
    <input type="email" placeholder="请输入邮箱">
    <button type="submit">提交</button>
</form>

注意：<form> 是表单标签用于收集用户输入，from 只是自定义的CSS类名，不要混淆。

B. CSS基础

B1. CSS是什么

知识点说明重要程度
层叠样式表CSS是Cascading Style Sheets的缩写，网页的外观★★★★★
作用控制HTML元素的颜色、大小、位置、动画等★★★★★
引入方式内联样式、内部样式表<style>、外部.css文件★★★★
选择器优先级ID > 类 > 标签 > 通配符★★★★

B2. 选择器

/* 标签选择器：匹配所有该标签 */
p { color: red; }

/* 类选择器：匹配 class="类名" 的元素 */
.my-class { color: blue; }

/* ID选择器：匹配 id="id名" 的元素（唯一） */
#my-id { color: green; }

/* 后代选择器 */
div p { color: orange; }

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

B3. 盒模型（重点）

┌─────────────────────────────────┐
│           margin (外边距)         │
│  ┌───────────────────────────┐  │
│  │       border (边框)        │  │
│  │  ┌───────────────────┐    │  │
│  │  │  padding (内边距)  │    │  │
│  │  │  ┌─────────────┐  │    │  │
│  │  │  │  content     │  │    │  │
│  │  │  │  (内容)      │  │    │  │
│  │  │  └─────────────┘  │    │  │
│  │  └───────────────────┘    │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

.box {
    margin: 20px;           /* 外边距 */
    border: 2px solid #333; /* 边框 */
    padding: 15px;          /* 内边距 */
    width: 200px;           /* 内容宽度 */
    height: 100px;          /* 内容高度 */
}

B4. Flexbox弹性布局

.flex-container {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    flex-direction: row;      /* 排列方向：row(水平) | column(垂直) */
    gap: 10px;                /* 子元素间距 */
}

B5. 常用CSS属性速查

属性作用常用值
color文字颜色red, #333, rgb(0,0,0)
background背景色/渐变linear-gradient(90deg, #7141a8, #2c72fb)
font-size字体大小16px, 1.2em, 2rem
font-weight字体粗细bold, normal, 700
border-radius圆角8px, 50%(圆形)
box-shadow阴影0px 0px 10px rgba(0,0,0,0.3)
width/height宽高100px, 80%, 80vw
text-align文字对齐center, left, right
position定位方式relative, absolute, fixed
cursor鼠标样式pointer(手型), default
overflow溢出处理hidden, scroll, auto
transition过渡动画all 0.3s ease

B6. 相对单位

单位相对基准适用场景
px像素（绝对值）固定尺寸
%父元素响应式布局
em父元素字体大小字体相关
rem根元素字体大小全局字体缩放
vw视口宽度的1%自适应宽度
vh视口高度的1%自适应高度

C. 开发工具

工具作用说明
VS Code代码编辑器推荐安装Live Server插件实现热刷新
Chrome浏览器预览和调试F12打开开发者工具，可实时修改CSS
Sealos Devbox云端开发环境免去本地环境配置
Live ServerVS Code插件保存代码后浏览器自动刷新

常见问题

问题解答
为什么打开HTML是空白的？检查文件编码是否为UTF-8，检查标签是否正确闭合
HTML开发工具用什么？记事本就行，推荐VS Code + Live Server插件
div和span有什么区别？div是块级元素独占一行，span是行内元素不换行
CSS样式太多记不住怎么办？常用的就那几个，善用AI工具查询具体属性
加空格字往右移了？用padding代替空格，padding会让光标也跟着移动
居中怎么做？Flex布局：justify-content: center; align-items: center;
背景色不显示？检查是否英文输入法，检查选择器是否正确匹配元素
可以写80vw吗？可以，80vw表示视口宽度的80%，实现自适应屏幕
阴影三个参数是什么？水平偏移 垂直偏移 模糊半径 颜色
为什么用padding而不是margin？padding在边框内增加空间，margin在边框外；视觉效果不同
Flex和传统布局的区别？Flex是弹性布局，能自动分配空间，比float更简单直观

前置知识检查

  • 无前置要求，本集是系列第一课

学习建议

  • 本集是动手的第一步，务必打开电脑跟着写
  • 不需要记住所有CSS属性，理解盒模型和Flex布局是核心
  • Live Server插件能让你实时看到代码变化，强烈推荐安装
  • 理解三者关系：HTML是骨架、CSS是外观、JS是行为
返回首页