本文是专为新手设计的 HTML 入门教程，从最基础的 HTML 是什么、如何编写第一个页面开始，逐步拆解 HTML 元素 / 标签、属性、表单、图像多媒体、链接导航等核心模块。通过 100 + 行带注释的代码示例、用 “人话” 讲解技术概念，搭配「新手常见错误」和「代码复制即用」模块，帮助零基础小白 3 小时掌握 HTML 核心语法，快速上手制作个人主页、表单页面、响应式导航等实用场景。
一、HTML 是什么？新手必懂的 3 个基础概念
1.1 一句话理解 HTML
HTML（超文本标记语言） 是网页的 “骨架”，用<标签>告诉浏览器 “这里是标题”“这里是图片”“这里是按钮”，就像给网页内容贴标签分类。
👉 类比：HTML 相当于给食材（文字 / 图片）分类的餐盒，CSS 是餐盒的配色和摆放，JavaScript 是让餐盒动起来的魔法。
1.2 第一个 HTML 页面代码
你好，HTML！
这是我的第一个HTML段落。
👉 层级关系示意图：
1.3 新手必看：HTML 文件怎么运行？
新建一个文本文档，后缀名改为.html（如index.html）用记事本 / VS Code 打开，粘贴上面的代码双击文件，浏览器会自动打开显示内容👉 效果如图：
二、HTML 元素与标签：网页内容的 “分类器”
2.1 什么是 “元素” 和 “标签”？
标签：用<>包裹的关键词，如
、
，分为开始标签（
）和结束标签（
）元素：开始标签 + 内容 + 结束标签，如
段落内容
👉 例外：自闭合标签（没有内容的标签），如
2.2 新手必学的 10 个基础标签
（1）文本标签（网页的 “文字积木”）
标签
作用
代码示例
显示效果
-
标题（h1 最大，h6 最小）
一级标题
一级标题（加粗大号字）
段落
这是一个段落。
普通段落（自动换行）
行内容器（包裹少量文字）
红色文字
红色文字（和其他内容同行）
加粗强调
重点内容
加粗内容
（2）结构标签（网页的 “布局分区”）
网站LOGO
文章标题
文章内容...
© 2025 版权所有
👉 效果示意图：
2.3 块级元素 VS 行内元素：新手必懂的显示规则
类型
特点
常见标签举例
典型用法
块级元素
独占一行，可设置宽高
div、p、h1、article
作为布局容器，包裹大量内容
行内元素
与其他元素同行，宽高由内容决定
span、a、strong、img
包裹少量文字或小图片
三、HTML 属性：给元素添加 “额外功能”
3.1 什么是属性？
属性是标签的 “修饰词”，放在开始标签里，给元素添加额外信息，格式为属性名="属性值"。
👉 示例：
3.2 新手必学的 5 个核心属性
（1）class：给元素分组（可复用的样式类）
注意：这是一条警告信息！
另一条警告信息
（2）id：元素的唯一标识（常用于 JS 定位）
（3）src：引入外部资源（图片 / 视频 / 脚本）
（4）href：定义链接地址（超链接核心属性）
（5）alt：图片 / 视频的替代文本（重要 SEO 和无障碍功能）
四、HTML 表单：让用户输入信息的 “表格”
4.1 表单是什么？
表单是收集用户信息的工具，比如注册页的邮箱、密码输入框，问卷的选择题等，通过
👉 效果示意图：
五、HTML 图像与多媒体：让网页更生动
5.1 插入图片（标签）
5.2 插入视频和音频
（1）视频播放（替代 Flash 的现代方案）
你的浏览器不支持视频播放，请升级浏览器。
controls：显示播放控件（播放按钮、进度条等）
muted autoplay：静音自动播放（移动端必备，避免打扰用户）
poster：视频加载前显示的封面图
（2）音频播放（如背景音乐、播客）
你的浏览器不支持音频播放。
六、HTML 链接与导航：网页的 “高速公路”
6.1 超链接的 3 种类型
类型
语法示例
作用
外部链接
跳转到其他网站
内部链接
跳转到同一网站的其他页面
锚点链接
跳转到当前页面的某个位置（需配合 id）
6.2 制作一个简单的导航栏（含响应式折叠效果）
👉 效果示意图：小屏幕点击汉堡图标展开菜单，大屏幕直接显示链接。
七、HTML 与 CSS、JavaScript 的关系：网页的 “铁三角”
7.1 HTML + CSS：让网页变漂亮
（1）三种 CSS 引入方式
方式
代码示例
优缺点
内联样式
红色文字
简单直接，不适合维护（少用）
内部样式表
适合单个页面，样式集中管理
外部样式表
适合大型项目，样式可复用
（2）示例：用 CSS 美化按钮
👉 效果示意图：
7.2 HTML + JavaScript：让网页动起来
当前时间：
👉 效果：页面显示实时更新的当前时间。
八、实战案例：用 HTML 制作个人主页
8.1 页面结构
头部：姓名 + 标题
导航栏：关于我、技能、作品、联系方式
主体内容：个人简介、技能列表、作品展示
页脚：版权信息
8.2 核心代码（简化版）
北泽别胡说
前端开发新手
关于我
我是一名正在学习HTML的新手，希望成为优秀的前端工程师！
技能
- HTML基础
- CSS入门
© 2025 北泽别胡说 All Rights Reserved
👉 效果示意图：
九、新手常见错误与解决方案（避坑指南）
9.1 标签忘记闭合
错误：
段落内容没有结束标签
后果：页面显示混乱，浏览器报错
解决：养成写完开始标签立即补全结束标签的习惯，用 VS Code 等编辑器自动补全。
9.2 路径错误导致图片 / 链接失效
错误：图片放在images文件夹，代码写为
解决：检查路径是否正确，相对路径用src="images/logo.png"，绝对路径用完整 URL。
9.3 语义化标签滥用
错误：所有容器都用
解决：仅在内容有独立意义时使用，普通容器用
十、技术笔记：新手必备的 HTML 速查表
10.1 常用标签速记表
功能
标签示例
记忆技巧
标题
-
h 是 heading（标题）的缩写
段落
p 是 paragraph（段落）的缩写
链接
a 是 anchor（锚点）的缩写
图片
img 是 image（图像）的缩写
表单
form 本身就是 “表单” 的意思
10.2 开发工具推荐
编辑器：VS Code（免费强大，支持代码补全）
浏览器：Chrome（调试工具 F12 非常好用）
学习网站：MDN Web Docs（权威文档）、W3Schools（适合新手）
总结：新手如何快速掌握 HTML？
动手写代码：从复制示例开始，修改参数观察效果（如改图片地址、按钮颜色）
拆解网页：用浏览器 F12 查看任意网站的 HTML 代码，学习别人的结构
做小项目：先做个人主页，再尝试表单页、产品展示页
查文档：遇到不熟悉的标签 / 属性，直接搜索 “HTML [标签名] MDN”
五一出行穿什么衣服合适？收藏这份美出新高度的穿搭秘籍0
《封神幻想世界》神话题目大全及答案