网硕互联帮助中心前言
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」，输入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个H5页面</title>
</head>
<body>
<h1>Hello World！</h1>
<p>这是我用H5写的第一个网页</p>
</body>
</html>
右键选择「Open in Default Browser」打开，就能看到效果！
代码说明：
- <!DOCTYPE html>：声明这是 H5 文档
- <html>：整个网页的根标签
- <head>：存放网页的元数据（标题、编码等）
- <body>：存放网页的可见内容
- 标签通常成对出现（<标签名>开始，</标签名>结束）
2. 常用标签大全（必学）
（1）标题标签（h1-h6）
<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!– 以此类推到h6 –>
（2）文本标签
<p>这是一个段落标签，会自动换行</p>
<br> <!– 换行标签（单标签） –>
<hr> <!– 水平线标签 –>
<strong>加粗文本</strong>
<em>斜体文本</em>
（3）图片标签
<img src="图片地址" alt="图片描述" width="300">
- src：图片路径（可以是本地图片或网络图片）
- alt：图片加载失败时显示的文字（必写，有利于 SEO）
- width：图片宽度（高度会自动等比例缩放）
（4）链接标签
<a href="https://www.baidu.com" target="_blank">百度一下</a>
（5）列表标签
<!– 无序列表 –>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<!– 有序列表 –>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
（6）div 标签（布局神器）
<div style="background: pink; width: 200px; height: 100px;">
这是一个块级容器，常用于布局
</div>
- div 是 "盒子"，可以装任何内容
- 通过 style 属性可以简单设置样式
3. 表格和表单（扩展内容）
表格
<table border="1"> <!– border设置边框 –>
<tr> <!– 行 –>
<th>姓名</th> <!– 表头单元格 –>
<th>年龄</th>
</tr>
<tr>
<td>张三</td> <!– 普通单元格 –>
<td>20</td>
</tr>
</table>
表单（用于用户输入）
<form>
<label>用户名：</label>
<input type="text" placeholder="请输入用户名"><br>
<label>密码：</label>
<input type="password"><br>
<button type="submit">提交</button>
</form>
四、实战案例：个人介绍页（30 分钟）
结合上面学的标签，我们来做一个简单的个人介绍页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的个人介绍</title>
</head>
<body>
<h1 style="text-align: center;">欢迎来到我的小站</h1>
<div style="text-align: center;">
<img src="https://picsum.photos/200/200" alt="个人头像" width="200">
</div>
<h2>关于我</h2>
<p>大家好，我是一名H5初学者，今天刚学会写第一个网页！</p>
<p>我的爱好：</p>
<ul>
<li>编程</li>
<li>看电影</li>
<li>运动</li>
</ul>
<h2>我的技能</h2>
<ol>
<li>HTML基础</li>
<li>正在学习CSS</li>
</ol>
<h2>联系我</h2>
<a href="mailto:example@qq.com">发送邮件</a>
</body>
</html>
效果说明：这个页面包含了标题、图片、列表、链接等元素，虽然简单但五脏俱全。你可以替换成自己的信息，就是一个个性化页面了。
评论前必须登录！
注册