很多新手想入门前端开发，却不知道从哪里开始，其实前端入门最基础、最容易上手的就是HTML——超文本标记语言，用于构建网页的结构（比如网页中的标题、段落、图片、链接）。
HTML不需要复杂的环境配置，不需要编译，只需用记事本/VS Code写代码，保存为.html文件，双击就能在浏览器中打开运行，非常适合新手入门。
今天分享3个HTML入门级简单案例，覆盖HTML核心基础标签，每一行代码都有详细注释，新手零代码基础也能轻松看懂，复制就能运行，快速感受前端开发的乐趣～
前提准备（新手必看）
-
编写工具：记事本（电脑自带，无需安装）或VS Code（推荐，有语法高亮，更易编写）；
-
运行方法：编写完代码后，保存文件，文件名后缀改为.html（比如index.html），双击文件，自动用默认浏览器打开，就能看到效果；
-
核心规则：HTML由一系列“标签”组成，标签通常成对出现（比如<h1>标题</h1>），前面是开始标签，后面是结束标签（/不可少）；标签不区分大小写，但建议小写（规范写法）。
案例一：简单网页标题和段落（入门必练）
核心知识点：HTML基本结构、标题标签（<h1>-<h6>）、段落标签（<p>）、换行标签（<br/>）。
完整代码（复制就能运行）：
<!DOCTYPE html> <!-- 声明文档类型为HTML5，固定开头 -->
<html lang="zh-CN"> <!-- HTML根标签，lang="zh-CN"表示中文网页 -->
<head> <!-- 头部标签，用于设置网页标题、编码等，不显示在网页内容中 -->
<meta charset="UTF-8"> <!-- 设置网页编码为UTF-8，避免中文乱码 -->
<title>我的第一个HTML网页</title> <!-- 网页标题，显示在浏览器标签栏 -->
</head>
<body> <!-- 主体标签，网页所有可见内容都写在这个标签里 -->
<!-- 标题标签：h1到h6，字体大小依次减小，h1最大，h6最小，每个标题独占一行 -->
<h1>这是一级标题（最大）</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<!-- 段落标签：<p>，用于包裹文本段落，自动换行，段落之间有间距 -->
<p>这是第一个段落，HTML入门很简单，只需掌握基础标签，就能写出简单的网页。</p>
<p>这是第二个段落，换行标签<br/>可以实现强制换行，比如这句话<br/>我想分成两行显示。</p>
</body>
</html> <!-- 根标签结束 -->
💡 运行效果：浏览器标签栏显示“我的第一个HTML网页”，网页内容显示3个不同大小的标题和2个段落，第二个段落中有强制换行。
💡 重点标签讲解：
-
<h1>-<h6>：标题标签，每个标题独占一行，h1常用于网页主标题，一个网页建议只放一个h1；
-
<p>：段落标签，包裹文本段落，自动换行，段落之间有默认间距；
-
<br/>：换行标签，单标签（不需要结束标签），用于强制换行（比如在段落中换行）。
案例二：网页添加图片和链接（常用功能）
核心知识点：图片标签（<img>）、链接标签（<a>），这两个是HTML最常用的标签，几乎所有网页都会用到。
完整代码（复制就能运行）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML图片和链接案例</title>
</head>
<body>
<h2>网页图片演示</h2>
<!-- 图片标签：<img>，单标签，核心属性：src（图片路径）、alt（图片加载失败时显示的文本） -->
<!-- 方法1：使用本地图片（图片和HTML文件放在同一个文件夹，直接写图片文件名） -->
<img src="test.jpg" alt="测试图片" width="300" height="200"> <!-- width和height设置图片宽高 -->
<!-- 方法2：使用网络图片（直接写图片的URL地址） -->
<img src="https://img.xxx.com/test.png" alt="网络测试图片" width="300">
<h2>网页链接演示</h2>
<!-- 链接标签：<a>，成对出现，核心属性：href（链接地址），文本是链接显示的内容 -->
<!-- 方法1：链接到外部网页（比如CSDN） -->
<a href="https://www.csdn.net/" target="_blank">点击访问CSDN（新窗口打开）</a> <!-- target="_blank"表示新窗口打开链接 -->
<br/><br/> <!-- 两个换行标签，增加间距 -->
<!-- 方法2：链接到本地HTML文件（和当前文件同文件夹，写文件名） -->
<a href="index.html">点击访问我的第一个网页（当前窗口打开）</a>
<!-- 方法3：锚点链接（链接到当前网页的某个位置） -->
<br/><br/>
<a href="#bottom">点击跳转到网页底部</a>
<br/><br/><br/><br/><br/> <!-- 多个换行，增加页面长度 -->
<p id="bottom">这是网页底部（锚点位置）</p>
</body>
</html>
💡 运行效果：网页显示2张图片（本地图片+网络图片）和3个链接，点击链接可跳转到对应页面，点击锚点链接可跳转到网页底部。
💡 重点标签讲解：
-
<img>：图片标签，src属性是必须的（指定图片路径，本地图片/网络图片均可），alt属性用于图片加载失败时显示文本（提升用户体验），width和height可设置图片宽高；
-
<a>：链接标签，href属性指定链接地址，target="_blank"表示新窗口打开链接（不设置则在当前窗口打开）；
-
锚点链接：先给目标位置设置id（比如<p id="bottom">），再用<a href="#id值">链接到该位置。
案例三：简单列表和表格（结构化展示数据）
核心知识点：无序列表（<ul>）、有序列表（<ol>）、表格标签（<table>），用于结构化展示数据（比如导航栏、商品列表、数据表格）。
完整代码（复制就能运行）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML列表和表格案例</title>
</head>
<body>
<h2>无序列表（无顺序，用圆点标记）</h2>
<!-- 无序列表：<ul> 包裹列表项<li>，默认圆点标记，每个列表项独占一行 -->
<ul>
<li>HTML（网页结构）</li>
<li>CSS（网页样式）</li>
<li>JavaScript（网页交互）</li>
</ul>
<h2>有序列表（有顺序，用数字标记）</h2>
<!-- 有序列表：<ol> 包裹列表项<li>，默认数字标记，自动排序 -->
<ol>
<li>学习HTML基础标签</li>
<li>学习CSS美化网页</li>
<li>学习JavaScript实现交互</li>
</ol>
<h2>简单表格（展示学生信息）</h2>
<!-- 表格标签：<table> 包裹表格，<tr> 表示表格行，<th> 表示表头单元格，<td> 表示普通单元格 -->
<table border="1"> <!-- border="1" 设置表格边框，默认无边框 -->
<tr> <!-- 第一行：表头 -->
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr> <!-- 第二行：数据行 -->
<td>1001</td>
<td>张三</td>
<td>20</td>
</tr>
<tr> <!-- 第三行：数据行 -->
<td>1002</td>
<td>李四</td>
<td>19</td>
</tr>
</table>
</body>
</html>
💡 运行效果：网页显示无序列表（圆点标记）、有序列表（数字标记）和一个带边框的表格，表格展示学生的学号、姓名、年龄信息。
💡 重点标签讲解：
-
列表标签：<ul>（无序列表）和<ol>（有序列表）内部，只能放<li>（列表项）标签；
-
表格标签：<table> 是表格根标签，<tr> 表示一行，<th> 是表头（默认加粗居中），<td> 是普通单元格，border属性设置表格边框（默认无边框）。
以上3个HTML案例，覆盖了HTML最核心、最常用的基础标签，新手可以先复制代码运行，观察效果，再逐行理解标签的含义，尝试修改代码（比如修改图片路径、链接地址、表格数据），感受HTML的灵活性。
HTML入门很简单，重点是记住常用标签的用法，多写、多运行、多修改，就能快速掌握。后续学习CSS（美化网页）和JavaScript（实现交互），就能写出更美观、更实用的网页。
