HTML 零基础入门到实战（附 100 + 代码示例与图解教程）

北泽别胡说

于 2025-05-21 14:08:49 发布

阅读量1k

点赞数 25

分类专栏：新手保护期，从0到1学前端文章标签： html 前端

本文链接：https://blog.csdn.net/Liu_Zhong_Yuan/article/details/148105231

版权

新手保护期，从0到1学前端专栏收录该内容

6 篇文章

订阅专栏

本文是专为新手设计的 HTML 入门教程，从最基础的 HTML 是什么、如何编写第一个页面开始，逐步拆解 HTML 元素 / 标签、属性、表单、图像多媒体、链接导航等核心模块。通过 100 + 行带注释的代码示例、用 “人话” 讲解技术概念，搭配「新手常见错误」和「代码复制即用」模块，帮助零基础小白 3 小时掌握 HTML 核心语法，快速上手制作个人主页、表单页面、响应式导航等实用场景。

一、HTML 是什么？新手必懂的 3 个基础概念

1.1 一句话理解 HTML

HTML（超文本标记语言） 是网页的 “骨架”，用<标签>告诉浏览器 “这里是标题”“这里是图片”“这里是按钮”，就像给网页内容贴标签分类。

👉 类比：HTML 相当于给食材（文字 / 图片）分类的餐盒，CSS 是餐盒的配色和摆放，JavaScript 是让餐盒动起来的魔法。

1.2 第一个 HTML 页面代码

<!DOCTYPE html> <!-- 告诉浏览器这是HTML5页面 -->

<html> <!-- 网页的最外层容器 -->

<head> <!-- 头部：存放网页信息，不显示在页面上 -->

<meta charset="UTF-8"> <!-- 确保中文不乱码 -->

<title>我的第一个网页</title> <!-- 网页标题（显示在浏览器标签页） -->

</head>

<body> <!-- 身体：存放网页显示的内容 -->

<h1>你好，HTML！</h1> <!-- 一级标题 -->

<p>这是我的第一个HTML段落。</p> <!-- 段落 -->

</body>

</html>

👉 层级关系示意图：

1.3 新手必看：HTML 文件怎么运行？

新建一个文本文档，后缀名改为.html（如index.html）
用记事本 / VS Code 打开，粘贴上面的代码
双击文件，浏览器会自动打开显示内容👉 效果如图：

二、HTML 元素与标签：网页内容的 “分类器”

2.1 什么是 “元素” 和 “标签”？

标签：用<>包裹的关键词，如<h1>、<p>，分为开始标签（<p>）和结束标签（</p>）

元素：开始标签 + 内容 + 结束标签，如<p>段落内容</p>
👉 例外：自闭合标签（没有内容的标签），如<img src="logo.png" />

2.2 新手必学的 10 个基础标签

（1）文本标签（网页的 “文字积木”）

标签	作用	代码示例	显示效果
<h1>-<h6>	标题（h1 最大，h6 最小）	<h1>一级标题</h1>	一级标题（加粗大号字）
<p>	段落	<p>这是一个段落。</p>	普通段落（自动换行）
<span>	行内容器（包裹少量文字）	<span style="color:red;">红色文字</span>	红色文字（和其他内容同行）
<strong>	加粗强调	<strong>重点内容</strong>	加粗内容

（2）结构标签（网页的 “布局分区”）

<header> <!-- 页面头部：通常放LOGO和导航 -->

<h1>网站LOGO</h1>

</header>

<nav> <!-- 导航菜单：放页面链接 -->

<a href="#">首页</a> | <a href="#">关于我们</a>

</nav>

<main> <!-- 主体内容：页面核心区域 -->

<article> <!-- 独立内容块：如博客文章、商品详情 -->

<h2>文章标题</h2>

<p>文章内容...</p>

</article>

</main>

<footer> <!-- 页脚：放版权信息 -->

© 2025 版权所有

</footer>

👉 效果示意图：

2.3 块级元素 VS 行内元素：新手必懂的显示规则

类型	特点	常见标签举例	典型用法
块级元素	独占一行，可设置宽高	div、p、h1、article	作为布局容器，包裹大量内容
行内元素	与其他元素同行，宽高由内容决定	span、a、strong、img	包裹少量文字或小图片

三、HTML 属性：给元素添加 “额外功能”

3.1 什么是属性？

属性是标签的 “修饰词”，放在开始标签里，给元素添加额外信息，格式为属性名="属性值"。

👉 示例：

<a href="https://www.baidu.com" target="_blank">百度一下</a>

<!-- href：链接地址；target="_blank"：在新窗口打开 -->

3.2 新手必学的 5 个核心属性

（1）class：给元素分组（可复用的样式类）

<p class="warning">注意：这是一条警告信息！</p>

<p class="warning">另一条警告信息</p>

<!-- 多个元素可共用同一个class，方便用CSS统一样式 -->

（2）id：元素的唯一标识（常用于 JS 定位）

<button id="buy-btn">立即购买</button>

<script>

// 通过id找到按钮并添加点击事件

document.getElementById("buy-btn").addEventListener("click", () => {

alert("按钮被点击了！");

});

</script>

（3）src：引入外部资源（图片 / 视频 / 脚本）

<img src="logo.png" alt="公司LOGO"> <!-- 插入图片 -->

<script src="script.js"></script> <!-- 引入JS文件 -->

（4）href：定义链接地址（超链接核心属性）

<a href="https://www.example.com">访问官网</a> <!-- 外部链接 -->

<a href="about.html">关于我们</a> <!-- 内部链接（同一网站的页面） -->

<a href="#top">回到顶部</a> <!-- 锚点链接（跳转到当前页面的某个位置） -->

（5）alt：图片 / 视频的替代文本（重要 SEO 和无障碍功能）

<img src="product.jpg" alt="红色连衣裙">

<!-- 图片加载失败时显示alt文字，帮助搜索引擎和盲人阅读器理解内容 -->

四、HTML 表单：让用户输入信息的 “表格”

4.1 表单是什么？

表单是收集用户信息的工具，比如注册页的邮箱、密码输入框，问卷的选择题等，通过<form>标签创建。

4.2 新手必学的表单元素（附注册表单案例）

（1）输入框（<input>）

<!-- 文本输入框 -->

<label>姓名：</label>

<input type="text" placeholder="请输入姓名">

<!-- 密码输入框（输入内容自动隐藏） -->

<label>密码：</label>

<input type="password" placeholder="请输入密码">

<!-- 邮箱输入框（自动校验格式） -->

<label>邮箱：</label>

<input type="email" placeholder="example@domain.com">

（2）单选框和复选框

<!-- 单选框（只能选一个） -->

<label>性别：</label>

<input type="radio" name="gender" value="male"> 男

<input type="radio" name="gender" value="female"> 女

<!-- 复选框（可多选） -->

<label>兴趣爱好：</label>

<input type="checkbox" value="reading"> 阅读

<input type="checkbox" value="music"> 音乐

（3）下拉菜单（<select>）

<label>所在城市：</label>

<select>

<option value="beijing">北京</option>

<option value="shanghai">上海</option>

<option value="guangzhou">广州</option>

</select>

（4）完整注册表单代码

<form>

<h3>用户注册表单</h3>

<label>姓名：</label>

<input type="text" required placeholder="请输入姓名" /> <!-- required：必填项 -->

<label>邮箱：</label>

<input type="email" required placeholder="example@domain.com" />

<label>密码：</label>

<input type="password" minlength="6" placeholder="密码至少6位" /> <!-- minlength：最小长度 -->

<label>性别：</label>

<input type="radio" name="gender" value="male" checked> 男 <!-- checked：默认选中 -->

<input type="radio" name="gender" value="female"> 女

<button type="submit">立即注册</button> <!-- 提交表单 -->

</form>

👉 效果示意图：

五、HTML 图像与多媒体：让网页更生动

5.1 插入图片（<img>标签）

<!-- 基础用法 -->

<img src="photo.jpg" alt="风景照片" width="300" height="200">

<!-- 响应式图片（根据屏幕大小自动调整） -->

<img src="logo-small.jpg" srcset="logo-medium.jpg 768w, logo-large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw">

5.2 插入视频和音频

（1）视频播放（替代 Flash 的现代方案）

<video controls width="640" autoplay muted poster="preview.jpg">

<source src="video.mp4" type="video/mp4"> <!-- MP4格式（兼容主流浏览器） -->

<source src="video.webm" type="video/webm"> <!-- WebM格式（备用） -->

你的浏览器不支持视频播放，请升级浏览器。

</video>

controls：显示播放控件（播放按钮、进度条等）

muted autoplay：静音自动播放（移动端必备，避免打扰用户）

poster：视频加载前显示的封面图

（2）音频播放（如背景音乐、播客）

<audio controls loop>

<source src="music.mp3" type="audio/mpeg">

你的浏览器不支持音频播放。

</audio>

<!-- loop：循环播放 -->

六、HTML 链接与导航：网页的 “高速公路”

6.1 超链接的 3 种类型

类型	语法示例	作用
外部链接	<a href="https://www.baidu.com">百度</a>	跳转到其他网站
内部链接	<a href="about.html">关于我们</a>	跳转到同一网站的其他页面
锚点链接	<a href="#contact">联系我们</a>	跳转到当前页面的某个位置（需配合 id）

6.2 制作一个简单的导航栏（含响应式折叠效果）

<nav>

<a href="#">首页</a>

<a href="#">产品</a>

<a href="#">案例</a>

<a href="#">联系我们</a>

</nav>

<!-- 移动端折叠导航（配合CSS） -->

<nav>

<input type="checkbox" id="menu-toggle">

<label for="menu-toggle">&#9776; 菜单</label> <!-- 汉堡菜单图标 -->

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

</ul>

</nav>

<style>

/* 桌面端导航 */

nav a {

display: inline-block;

padding: 10px;

}

/* 移动端隐藏导航，点击汉堡菜单显示 */

@media (max-width: 768px) {

nav ul {

display: none;

}

#menu-toggle:checked ~ ul {

display: block;

}

}

</style>

👉 效果示意图：小屏幕点击汉堡图标展开菜单，大屏幕直接显示链接。

七、HTML 与 CSS、JavaScript 的关系：网页的 “铁三角”

7.1 HTML + CSS：让网页变漂亮

（1）三种 CSS 引入方式

方式	代码示例	优缺点
内联样式	<p style="color:red;">红色文字</p>	简单直接，不适合维护（少用）
内部样式表	<style>p { color: red; }</style>	适合单个页面，样式集中管理
外部样式表	<link rel="stylesheet" href="style.css">	适合大型项目，样式可复用

（2）示例：用 CSS 美化按钮

<!-- HTML -->

<button class="btn">点击我</button>

<!-- CSS（内部样式表） -->

<style>

.btn {

padding: 10px 20px;

background-color: #4A90E2;

color: white;

border: none;

border-radius: 4px;

}

</style>

👉 效果示意图：

7.2 HTML + JavaScript：让网页动起来

<!-- HTML -->

<p id="time-display">当前时间：</p>

<!-- JavaScript -->

<script>

function updateTime() {

const timeDisplay = document.getElementById("time-display");

timeDisplay.textContent = "当前时间：" + new Date().toLocaleTimeString();

}

setInterval(updateTime, 1000); // 每秒更新一次时间

</script>

👉 效果：页面显示实时更新的当前时间。

八、实战案例：用 HTML 制作个人主页

8.1 页面结构

头部：姓名 + 标题

导航栏：关于我、技能、作品、联系方式

主体内容：个人简介、技能列表、作品展示

页脚：版权信息

8.2 核心代码（简化版）

<!DOCTYPE html>

<html>

<head>

<title>北泽别胡说的个人主页</title>

<style>

body { text-align: center; font-family: Arial, sans-serif; }

nav a { margin: 0 10px; color: #333; text-decoration: none; }

</style>

</head>

<body>

<header>

<h1>北泽别胡说</h1>

<p>前端开发新手</p>

</header>

<nav>

<a href="#about">关于我</a>

<a href="#skills">技能</a>

<a href="#projects">作品</a>

</nav>

<main>

<section id="about">

<h2>关于我</h2>

<p>我是一名正在学习HTML的新手，希望成为优秀的前端工程师！</p>

</section>

<section id="skills">

<h2>技能</h2>

<ul>

<li>HTML基础</li>

<li>CSS入门</li>

</ul>

</section>

</main>

<footer>

<p>© 2025 北泽别胡说 All Rights Reserved</p>

</footer>

</body>

</html>

👉 效果示意图：

九、新手常见错误与解决方案（避坑指南）

9.1 标签忘记闭合

错误：<p>段落内容没有结束标签

后果：页面显示混乱，浏览器报错

解决：养成写完开始标签立即补全结束标签的习惯，用 VS Code 等编辑器自动补全。

9.2 路径错误导致图片 / 链接失效

错误：图片放在images文件夹，代码写为<img src="logo.png">

解决：检查路径是否正确，相对路径用src="images/logo.png"，绝对路径用完整 URL。

9.3 语义化标签滥用

错误：所有容器都用<article>或<section>

解决：仅在内容有独立意义时使用，普通容器用<div>，参考MDN 语义化指南。

十、技术笔记：新手必备的 HTML 速查表

10.1 常用标签速记表

功能	标签示例	记忆技巧
标题	<h1>-<h6>	h 是 heading（标题）的缩写
段落	<p>	p 是 paragraph（段落）的缩写
链接	<a href="地址">文字</a>	a 是 anchor（锚点）的缩写
图片	<img src="图片地址" />	img 是 image（图像）的缩写
表单	<form>...</form>	form 本身就是 “表单” 的意思