前言

HTML5（简称 H5）是构建 Web 页面的基础技术之一，也是前端开发的入门必备。很多人觉得编程很难，但其实 H5 非常适合零基础学习 —— 它语法简单、直观可见，写完代码就能在浏览器看到效果。

本文专为纯小白打造，无需任何编程基础，只需跟着步骤操作，2 小时就能入门 H5 并制作出第一个网页。

一、什么是 H5？为什么要学？

H5 是 HTML 的第五个版本，简单理解就是 "网页的骨架"。所有你看到的网页，本质上都是用 H5 搭建的基础结构，再配合 CSS 美化、JavaScript 实现交互。

学习 H5 的 3 个理由：

入门门槛低：语法类似英语单词，标签语义化，容易理解应用广泛：网站、小程序、APP 界面都离不开 H5 基础即时反馈：写完代码刷新浏览器就能看到效果，成就感强

二、准备工具（5 分钟搞定）

不需要安装复杂软件，只需准备：

编辑器：推荐「VS Code」（免费、轻量、功能全）

下载地址：Visual Studio Code - Code Editing. Redefined安装后建议添加「Open in Browser」插件（方便一键在浏览器打开网页） 浏览器：Chrome 或 Edge（推荐 Chrome，按 F12 可打开开发者工具）

学习心态：别害怕出错，编程就是不断试错的过程

三、H5 核心语法（1 小时掌握）

1. 第一个 H5 文件

打开 VS Code，新建文件并保存为「index.html」，输入以下代码：

Hello World！

这是我用H5写的第一个网页

右键选择「Open in Default Browser」打开，就能看到效果！

代码说明：

：声明这是 H5 文档：整个网页的根标签：存放网页的元数据（标题、编码等）：存放网页的可见内容标签通常成对出现（<标签名>开始，结束）

2. 常用标签大全（必学）

（1）标题标签（h1-h6）

一级标题（最大）

二级标题

三级标题

（2）文本标签

这是一个段落标签，会自动换行

加粗文本

斜体文本

（3）图片标签

src：图片路径（可以是本地图片或网络图片）alt：图片加载失败时显示的文字（必写，有利于 SEO）width：图片宽度（高度会自动等比例缩放）

（4）链接标签

百度一下

（5）列表标签

• 列表项1
• 列表项2

1. 第一步
2. 第二步

（6）div 标签（布局神器）

div 是 "盒子"，可以装任何内容通过 style 属性可以简单设置样式

3. 表格和表单（扩展内容）

表格

表单（用于用户输入）

四、实战案例：个人介绍页（30 分钟）

结合上面学的标签，我们来做一个简单的个人介绍页：

欢迎来到我的小站

关于我

大家好，我是一名H5初学者，今天刚学会写第一个网页！

我的爱好：

• 编程
• 看电影
• 运动

我的技能

1. HTML基础
2. 正在学习CSS

联系我

发送邮件

效果说明：这个页面包含了标题、图片、列表、链接等元素，虽然简单但五脏俱全。你可以替换成自己的信息，就是一个个性化页面了。

附：常见问题解决

代码没效果？检查标签是否闭合，是否有拼写错误图片不显示？检查 src 路径是否正确想美化页面？学习 CSS 后可以给标签添加更多样式