html基础教程零基础入门：从标签用法到网页制作实战案例详解

admin HTML教程 2025-10-24 3

是不是很多零基础的朋友想学做网页，却被 “HTML”“标签”“代码” 这些词吓住？“看教程里满屏的尖括号，不知道啥意思”“跟着写了几行代码，网页显示一团乱”“想做个简单的个人页面，却不知道从哪下手”？别慌，HTML 其实是网页的 “骨架”，就像盖房子的钢筋框架，看似复杂，其实每个标签都有明确的作用。今天兔子哥就带零基础的朋友从基础标签学到实战做网页，全是大白话加例子，跟着做就行，一起往下看吧！

先说说：HTML 到底是啥？学它能做啥？

很多人刚接触时觉得 HTML 高深，其实它就是 “超文本标记语言” 的缩写，说白了就是用各种标签告诉浏览器 “这段是标题”“这段是图片”“这段是链接”。你看到的所有网页，背后都有 HTML 代码在支撑，学它就能自己动手做网页，不用再羡慕别人的个人主页了。

用生活例子理解 HTML 的作用

简单说，HTML 就像写作文的格式符号：

你想让一句话变大变粗（标题），就用标签；
你想插入一张照片（图片），就用标签；
你想加个跳转链接（比如点一下去百度），就用标签。

这些标签就像说明书，告诉浏览器内容该怎么显示，只要记住常用标签的用法，做网页其实很简单。

学 HTML 前，你需要准备这些工具

工具	作用	新手推荐	为啥推荐它
编辑器	写 HTML 代码的地方	VS Code	免费、简单，有代码提示功能
浏览器	查看网页效果	Chrome 或 Edge	调试功能强，显示效果直观
文件夹	存放代码和图片等文件	自己建个 “我的网页” 文件夹	方便管理文件，不容易乱

兔子哥刚开始学的时候用的就是 VS Code，界面干净，输入标签时还会自动提示，新手不容易输错，强烈推荐刚开始用这个。

核心标签用法：这 10 个标签学会，能做简单网页

HTML 标签有很多，但新手先掌握这 10 个核心标签，就能应付大部分基础网页需求，每天记 2 个，几天就记熟了。

1. 文档结构标签：网页的 “骨架” 必须有

每个 HTML 文件都得有这几个标签，就像作文得有开头和结尾：
html

DOCTYPE html>  <html>  <head>  <title>我的第一个网页title>  head><body>  这里是网页显示的内容body>html>

这部分不用死记，新建文件时复制粘贴就行，重点是记住里的内容才会显示在网页上。

2. 标题标签：让文字变大变粗

用到表示不同级别标题，h1 最大最粗，h6 最小：
html

<h1>这是一级标题（最大）h1><h2>这是二级标题h2><h3>这是三级标题h3>

在网页里，标题标签会自动换行，并且上下有间距，比用普通文字醒目多了，做网页标题或小标题超好用。

3. 段落和换行标签：让文字分段

标签表示段落，

标签表示换行：
html

<p>这是第一段文字，用p标签包裹，段落之间会自动空一行。p><p>这是第二段文字<br>这里用br标签换了一行p>

别用多个

换行代替段落，用标签更规范，网页显示也更美观。

4. 链接标签：加个跳转功能

标签能做链接，点一下跳转到其他网页，href属性写跳转地址：
html

<a href="https://www.baidu.com">点我去百度a><a href="about.html">点我去关于页面a>

注意href后面的地址要用英文引号括起来，不然链接用不了，这是新手常错的地方。

5. 图片标签：给网页插图片

标签插图片，src写图片路径，alt是图片加载失败时显示的文字：
html

<img src="photo.jpg" alt="我的照片">  <img src="images/photo.jpg" alt="风景照">

图片路径一定要写对，不然网页会显示一个叉号，新手常把路径写错导致图片不显示。

实战案例：做个简单的个人介绍页，分 5 步走

光说不练假把式，咱们用学过的标签做个个人介绍页，步骤详细，跟着做保证成功。

步骤 1：新建文件和文件夹

在电脑上建个文件夹，起名 “我的个人页”；
打开 VS Code，点 “文件→打开文件夹”，选择刚建的文件夹；
右键文件夹→“新建文件”，起名 “index.html”（必须是.html 结尾）。

步骤 2：写基础结构，搭好骨架

在 index.html 里输入基础结构，这部分可以直接复制：
html

DOCTYPE html><html><head><title>我的个人介绍title>head><body>body>html>

步骤 3：加标题和基本信息

在里加标题、段落和图片，介绍自己的姓名、爱好：
html

<h1>你好，我是小明h1><p>大家好，我是一名大学生，喜欢编程和打篮球。p><p>这是我的照片：p><img src="me.jpg" alt="我的照片">

步骤 4：加兴趣列表和链接

用（无序列表）列兴趣，用加个博客链接：
html

<p>我的兴趣爱好：p><ul><li>编程li><li>打篮球li><li>看电影li>ul><p>我的博客：<a href="https://blog.example.com">点击访问a>p>

无序列表会自动在每项前面加圆点，比用段落罗列整齐多了。

步骤 5：保存并查看效果

按Ctrl+S保存文件；
右键文件→“复制路径”，粘贴到浏览器地址栏，回车；
浏览器里就能看到你的个人介绍页了，是不是很有成就感？

错误排查：新手做网页，最容易踩的 5 个坑

写 HTML 时出错很正常，兔子哥整理了常见问题，遇到了照着改就行。

1. 标签没闭合，网页显示乱

比如只写了没写，或忘了关。解决：每个标签用完及时闭合，VS Code 会用不同颜色提示未闭合的标签，注意看颜色。

2. 图片不显示，只看到叉号

大多是图片路径错了。解决：检查src后面的路径，图片和 HTML 文件在同一文件夹就直接写文件名；在子文件夹里要写 “文件夹名 / 文件名”，比如 “images/photo.jpg”。

3. 链接点了没反应

href属性写错了！要么没加引号，要么地址不对。解决：确保href="地址"格式正确，地址可以是网址或自己的 HTML 文件名。

4. 文字挤在一起，没分段

没正确用和

标签。解决：段落用包裹，需要换行的地方加

，别用空格或回车代替标签。

5. 特殊符号显示不出来，比如小于号、大于号

直接写<或>会被浏览器当成标签。解决：用特殊代码代替，比如<用<，>用>，兔子哥把常用的放下面了：

符号	代码	符号	代码
<	<	>	>
&	&	空格

自问自答：零基础学 HTML 常见问题

问：学 HTML 需要数学好吗？我数学不好能学吗？

答：完全不用！HTML 是标记语言，不是编程语言，不用算公式、写逻辑，记住标签用法就行。兔子哥数学高考才 70 分，照样能做网页，放心学。

问：除了 VS Code，还有其他简单的编辑器吗？

答：有！比如记事本也能写 HTML，但没代码提示容易错；新手还可以用 “Sublime Text” 或 “Notepad++”，都免费简单，不过兔子哥还是推荐 VS Code，功能全还免费。

问：学会 HTML 就能做漂亮的网页吗？

答：HTML 只是网页的骨架，要做漂亮的网页还需要学 CSS（美化）和 JavaScript（交互）。但 HTML 是基础，学好它再学 CSS 和 JS 会很顺，就像先学会走路再学跑步。

个人心得：学 HTML，动手写比光看教程重要 10 倍

兔子哥刚开始学的时候，看教程觉得啥都懂，一自己写就错，要么标签没闭合，要么图片路径不对，对着网页上的叉号发呆。但逼着自己每天写一个小页面，从简单的个人介绍到课程表，两周后突然就顺了 —— 原来标签用法没那么难，错多了就知道怎么避坑了。
很多新手怕犯错，总等着 “完全看懂” 再动手，其实 HTML 是 “做中学” 的学问。建议新手从每天写 5 个标签开始，先抄教程里的代码，运行成功后改改内容（比如换张图片、改个标题），慢慢积累信心。
现在就打开 VS Code，新建一个 HTML 文件，跟着案例做个个人介绍页。当你在浏览器里看到自己写的网页时，那种成就感会让你觉得 “原来做网页也不难”。记住，每个网页大神都是从写第一个标签开始的，你也可以，加油！

标签：浏览器说明书

本文地址： https://www.kfyz.com/html/351.html