01HTML 基础

从「HTML 是什么」到「语义化与 HTML5」，6 节课把网页的骨架一次搭对。 每个元素都配属性逐项分析表，每个知识点都配可随手修改的实时实验台。

6 节课 35+ 个动手实验 建议按顺序学习

课程列表

01

认识 HTML

初识超文本语言：文档骨架、标签语法、关键字与属性的第一印象，跑通「你好，网页」。

骨架标签属性 02

元素与属性

块级 / 行内元素的分工，布尔属性、全局属性，让标签真正「各司其职」。

块级 / 行内布尔属性全局属性 03

文本与链接

标题、段落、强调等文本标签全解，a 链接的五种目标与站内锚点跳转。

文本a 链接锚点 04

列表与表格

ul / ol / dl 三兄弟排列并列或有序内容，table 全家按行列对齐数据。

列表表格行列 05

表单与输入

form 打包数据，input 全家族与选择控件，text 七兄弟，原生验证免 JS 拦错误。

forminput原生验证 06

语义化与 HTML5

骨架七将 header / nav / main / aside / footer，文字级语义与多媒体，head SEO 收官。

语义化骨架多媒体

本章你将学会

  • 看懂并写出任何一段 HTML，知道每个标签长什么样、何时用、为何用
  • 熟练区分块级 / 行内 / 表单 / 语义化元素，能按内容含义选择合适的标签
  • 用文本、链接、列表、表格把内容组织得清晰有序
  • 用 form + input + 原生验证搭出完整可提交的注册 / 表单页
  • 用语义化标签搭出骨架分明的页面，让代码对机器和未来的自己都「会说话」

实验台使用指南

本站每个知识点都配有「左代码、右预览」的实验台，几个隐藏技能先交底：

操作效果
直接改左侧代码右侧预览 0.35 秒内自动刷新，所见即所得
拖拽中间分隔条左右分屏比例任意调整，双击分隔条恢复 1:1
工具栏「主题」下拉暖墨 / 暖纸 / 夜幕 / 抹茶四套语法高亮主题，全站记忆
Tab 键在代码框内缩进 4 个空格
「重置」按钮改乱了也不怕，一键回到初始代码
顶栏「课程大纲 / 扩展阅读」左侧抽屉跳任意课时，右侧边栏去 MDN / 菜鸟深挖
学习建议：每个实验台都至少改三处值。看懂不如改懂，改懂不如改坏再修好。