HTML 新手入门超详细教程：零基础构建你的第一个网页

欢迎来到奇妙的网页开发世界！如果你对互联网充满好奇，想了解那些精美的网页是如何构建的，或者想亲手制作属于自己的网站，那么你来对地方了。本教程将从零开始，带你踏入 HTML 的大门，掌握构建网页骨架的基础知识。

别担心，即使你没有任何编程经验，也能轻松学会。HTML 是最基础的网页语言，它就像搭建房屋的框架，定义了网页内容的结构和组织方式。学会 HTML，就迈出了前端开发的第一步。

本文将深入浅出地讲解 HTML 的核心概念、常用标签和基本语法，并通过大量的代码示例，让你在实践中学习。准备好了吗？让我们开始这段令人兴奋的旅程吧！

什么是 HTML？

HTML 的全称是 HyperText Markup Language，即超文本标记语言。

超文本 (HyperText): 指的是一种非线性的阅读方式。在传统的文本阅读中，我们通常按照顺序阅读。而超文本允许你在文档中通过链接（Links）跳转到其他文档或文档中的不同位置，实现了信息的交叉引用和关联。你点击网页上的链接，就是在体验超文本的特性。
标记 (Markup): HTML 使用一系列的“标记”来告诉浏览器如何显示网页内容。这些标记由尖括号包围，例如 <p>、<h1>、<img> 等。它们用于描述文本、图片、链接、表格等各种页面元素的含义和结构。
语言 (Language): HTML 是一种标记语言，而不是一种编程语言。编程语言用于编写逻辑和执行计算（比如 JavaScript），而标记语言则用于描述文档的结构和内容。

简单来说，HTML 就是用来构建网页结构的语言。它定义了页面上有哪些内容（文字、图片、视频等），以及这些内容是如何组织和排列的。

HTML 与 CSS 和 JavaScript 的关系：

通常，一个完整的网页由三部分组成：

HTML: 负责网页的结构和内容（骨架）。
CSS (Cascading Style Sheets): 负责网页的样式和布局（衣服和装修）。它决定了网页看起来是什么样子，比如字体颜色、大小、元素的间距、背景等。
JavaScript (JS): 负责网页的行为和交互（肌肉和神经）。它让网页动起来，实现更复杂的功能，比如响应用户的点击、动态更新内容、动画效果等。

你可以把 HTML 比作一个人的骨架，CSS 是他的衣服和外貌，而 JavaScript 是他的行动和思考能力。学习网页开发，通常从 HTML 入手，然后学习 CSS，最后学习 JavaScript。

学习 HTML 需要什么？

非常简单！你只需要：

一个文本编辑器 (Text Editor): 用于编写 HTML 代码。你可以使用系统自带的记事本（Windows）或 TextEdit（Mac），但更推荐使用专业的代码编辑器，它们提供了语法高亮、代码补全等功能，能极大地提高你的效率。一些流行的免费代码编辑器包括：
- VS Code (Visual Studio Code) – 强烈推荐，功能强大且免费。
- Sublime Text
- Atom
- Notepad++ (Windows)
一个网页浏览器 (Web Browser): 用于打开和查看你的 HTML 文件。任何现代浏览器都可以，比如 Chrome、Firefox、Edge、Safari 等。

就是这样！没有复杂的安装过程，没有昂贵的软件。你现在就可以开始学习和实践了。

你的第一个 HTML 页面

让我们来创建你的第一个 HTML 文件。

步骤 1：打开你的文本编辑器

打开你选择的文本编辑器（比如 VS Code）。

步骤 2：输入基本的 HTML 结构

在编辑器中输入以下代码：

“`html

我的第一个网页

你好，世界！

这是我用 HTML 创建的第一个网页。

“`

步骤 3：保存文件

点击编辑器菜单中的“文件”->“保存”或“另存为”。

选择一个你容易找到的位置（比如桌面）。
文件名: 输入一个文件名，比如 index.html。文件名必须以 .html 或 .htm 结尾。 这是浏览器识别这是一个 HTML 文件的方式。
编码: 如果有选项，选择 UTF-8 编码。这可以确保你的网页能够正确显示各种语言的字符，避免乱码。在 VS Code 等编辑器中，通常默认就是 UTF-8。

步骤 4：在浏览器中打开文件

找到你刚才保存的 index.html 文件，双击它。你的默认网页浏览器将会打开这个文件，并显示页面的内容。

你应该能看到一个标题“你好，世界！”和一段文字“这是我用 HTML 创建的第一个网页。”。

恭喜你！你已经成功创建并查看了你的第一个 HTML 页面。

解读第一个 HTML 页面

现在，让我们一行一行地解释刚才的代码：

<!DOCTYPE html>: 这被称为文档类型声明。它告诉浏览器当前文档是 HTML5 版本。这是现代网页的标准写法，几乎所有 HTML 页面都应该以它开头。
<html>: 这是 HTML 页面的根元素，它包裹着整个页面的内容。所有的 HTML 代码都写在 <html开头的标签 和 </html>结尾的标签 之间。
<head>: 头部元素。它包含了关于 HTML 页面的一些元信息（meta-information），这些信息不会直接显示在页面上，但对浏览器、搜索引擎等非常重要。头部元素中可以包含页面的标题、字符集、样式表链接、脚本链接等。
<meta charset="UTF-8">: 这是一个元信息标签，用于指定页面的字符编码为 UTF-8。强烈建议在所有 HTML 页面中都包含这一行，以避免中文字符显示问题。
<title>我的第一个网页</title>: 这是页面的标题标签。它定义了显示在浏览器窗口标题栏或标签页上的文字。
<body>: 主体元素。它包含了网页的实际内容，所有你在浏览器中看到的东西，比如文本、图片、链接、表格等，都放在 <body> 标签内部。
<h1>你好，世界！</h1>: 这是一个标题标签。<h1> 表示一级标题，是最高级别的标题。HTML 提供了六级标题，从 <h1> 到 <h6>。
<p>这是我用 HTML 创建的第一个网页。</p>: 这是一个段落标签。<p> 用于定义一个文本段落。

标签 (Tags) 和元素 (Elements)

标签 (Tag): 由尖括号包围的关键词，如 <p>、</p>、<h1>。标签通常成对出现，分为开始标签（Opening Tag）和结束标签（Closing Tag）。结束标签在关键词前有一个斜杠 /。
元素 (Element): 从开始标签到结束标签之间的所有内容，包括开始标签和结束标签本身，以及它们之间的内容。例如，<p>这是一个段落。</p> 就是一个完整的段落元素。
空元素 (Empty Elements): 有些标签是“自闭合”的，它们不需要结束标签，因为它们不包含内容。例如，<br>（换行）、<img>（图片）、<hr>（水平线）。有时也会写成 <br/>、<img/>，尤其是在早期的 XHTML 标准中，但在 HTML5 中，更推荐简洁的 <br> 写法。

常用 HTML 标签详解

现在我们来学习一些最常用的 HTML 标签，它们是构建网页内容的基础。

1. 标题标签 (`<h1>` 到 `<h6>`)

HTML 提供了六个级别的标题，用于组织页面内容的层级结构。<h1> 是最高级别的标题，<h6> 是最低级别的。

“`html

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

“`

通常，一个页面只有一个 <h1> 标签，表示页面的主标题。其他标题用于划分页面的不同部分和子标题。搜索引擎也会根据标题标签来理解页面的内容结构。

2. 段落标签 (`<p>`)

<p> 标签用于定义一个文本段落。浏览器会自动在段落的上方和下方添加一些空白。

“`html

这是第一个段落的文本内容。

这是第二个段落的文本内容。每个段落都应该放在独立的 <p> 标签中。

“`

3. 换行标签 (`<br>`)

<br> 标签用于在文本中插入一个强制的换行。它是一个空元素，不需要结束标签。

“`html

这是一段文字，
我在这里强制换行了。
这一行在换行符之后。

“`

注意：不要使用 <br> 标签来创建段落之间的间距，应该使用 CSS 来控制元素的样式和间距。<br> 只用于在文本流中进行简单的换行。

4. 水平线标签 (`<hr>`)

<hr> 标签用于在页面中绘制一条水平线，表示内容的主题或分节的变化。它也是一个空元素。

“`html

第一部分的内容。

第二部分的内容。

“`

5. 文本格式化标签

HTML 提供了一些标签用于对文本进行格式化，改变其显示效果或语义。

<strong> 和 <b>: 用于加粗文本。
- <strong> 表示文本具有“重要”的语义（强调内容的意义）。
- <b> 表示文本只是在样式上加粗，没有额外的语义（纯粹的视觉效果）。
  在实际开发中，推荐使用 <strong>，因为它更符合语义化的原则，对可访问性和搜索引擎优化更有利。
<em> 和 <i>: 用于斜体文本。
- <em> 表示文本具有“强调”的语义。
- <i> 表示文本只是在样式上斜体，没有额外的语义（比如外语词汇、技术术语等）。
  同样推荐使用 <em> 来表示强调。

“`html

这是一个重要的词语。
这是一个仅仅加粗的词语。

这是一个需要强调的句子。
这是一个外语词汇或技术术语。

“`

<u>: 下划线（不推荐，容易与链接混淆，通常用 CSS 实现）。
<del>: 删除线。
<ins>: 插入文本（通常显示为下划线）。
<sup>: 上标。
<sub>: 下标。

“`html

这段文字有下划线 (通常用 CSS)。
~~这段文字被删除了~~。
这段文字被插入了。

E=MC²
H₂O

“`

6. 列表标签

列表是网页中常用的组织方式，HTML 提供了有序列表和无序列表。

无序列表 (<ul> 和 <li>): 列表项前通常显示为项目符号（圆点、方块等）。<ul> 表示无序列表，<li> 表示列表项。

html <p>我喜欢的水果：</p> <ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> </ul>
有序列表 (<ol> 和 <li>): 列表项前通常显示为数字或字母。<ol> 表示有序列表，<li> 表示列表项。

html <p>学习 HTML 的步骤：</p> <ol> <li>打开文本编辑器</li> <li>编写 HTML 代码</li> <li>保存文件</li> <li>在浏览器中打开</li> </ol>
嵌套列表: 列表内部可以嵌套其他列表，以创建多级列表。

html <ul> <li>主要分类 1 <ul> <li>子分类 1.1</li> <li>子分类 1.2</li> </ul> </li> <li>主要分类 2 <ol> <li>子分类 2.1</li> <li>子分类 2.2</li> </ol> </li> </ul>

7. 链接标签 (`<a>`)

链接（或称超链接）是 HTML 最核心的功能之一，它将不同的网页或资源连接起来，构成了互联网。<a> 标签用于创建链接。

<a>: 锚点标签，用于创建链接。
href 属性: 这是 <a> 标签最重要的属性，它指定了链接指向的目标 URL（统一资源定位符）。

“`html

访问一个示例网站。

打开谷歌搜索 (在新标签页打开)。

联系我 (创建邮件链接)。

“`

链接类型：

外部链接: 指向其他网站的链接，如 https://www.google.com。
内部链接: 指向同一网站内其他页面的链接，使用相对路径或绝对路径。例如，如果你的网站根目录下有一个 about.html 文件，你可以用 <a href="/about.html">关于我们</a>（绝对路径，从网站根目录开始）或 <a href="../about.html">关于我们</a>（相对路径，根据当前文件位置）。
页面内部链接: 指向同一页面中特定位置的链接。你需要在这个位置设置一个目标锚点，通常通过元素的 id 属性来实现。
1. 给目标元素添加一个 id 属性，例如 <h2 id="section1">第一部分</h2>。
2. 创建链接，href 属性值为 # 加上目标 id，例如 <a href="#section1">跳转到第一部分</a>。
target 属性: 指定链接在何处打开。
- _self (默认值): 在当前窗口或标签页打开。
- _blank: 在新的窗口或标签页打开。
- _parent: 在父框架中打开（用于框架集）。
- _top: 在整个窗口中打开（用于框架集）。

8. 图片标签 (`<img>`)

<img> 标签用于在网页中插入图片。它是一个空元素。

<img>: 图片标签。
src 属性: 指定图片文件的路径或 URL。
alt 属性: 指定图片的替代文本。当图片无法显示时，或者对于使用屏幕阅读器的用户来说，会显示或读出这段文本。强烈建议为所有图片添加有意义的 alt 属性，这对可访问性（Accessibility）和搜索引擎优化（SEO）非常重要。
width 和 height 属性: 指定图片的宽度和高度（以像素为单位，也可以使用百分比）。虽然可以在 HTML 中设置图片尺寸，但更推荐使用 CSS 来控制图片的样式和布局。

“`html

下面是一张图片：

使用网络图片：

“`

图片路径：

相对路径: 图片文件相对于当前 HTML 文件的位置。
- image.jpg: 图片在当前文件同一目录下。
- images/image.jpg: 图片在当前文件所在目录下的 images 文件夹中。
- ../image.jpg: 图片在当前文件所在目录的上一级目录中。
绝对路径: 从网站根目录开始的路径（以 / 开头），或完整的 URL（以 http:// 或 https:// 开头）。

9. 语义化标签 (Semantic HTML)

早期，人们主要使用 <div> 和 <span> 这两个通用容器标签来构建网页布局，然后用 CSS 给它们赋予样式。虽然功能上可行，但这不利于搜索引擎理解页面结构，也不利于屏幕阅读器等辅助设备解析页面内容。

HTML5 引入了许多语义化标签，它们的名字本身就带有含义，能够更清晰地描述页面不同区域的作用。使用语义化标签有诸多好处：

可读性: 代码结构更清晰，易于开发者理解和维护。
可访问性: 辅助技术（如屏幕阅读器）能更好地理解页面结构，为残障用户提供更好的体验。
SEO: 搜索引擎更容易理解页面内容和结构，可能有利于网站排名。

一些常见的 HTML5 语义化标签：

<header>: 定义文档或节的页眉。通常包含网站 Logo、标题、导航等。
<nav>: 定义导航链接的区域。
<main>: 定义文档的主要内容。一个页面只应有一个 <main> 标签。
<article>: 定义独立的、自包含的内容，如一篇博客文章、新闻报道、论坛帖子等。理论上，<article> 内部的内容脱离上下文也应该能独立理解。
<section>: 定义文档中的一个节。通常用标题 (<h1> 到 <h6>) 来标识每个 <section> 的主题。它不像 <article> 那样强调内容的独立性，更多是用于组织文档结构。
<aside>: 定义页面主体内容之外的内容，如侧边栏、广告、相关链接等。
<footer>: 定义文档或节的页脚。通常包含版权信息、联系方式、链接等。

“`html

语义化页面示例

我的网站标题

一篇精彩的文章

文章的内容从这里开始…

文章的一个子部分

子部分的内容…

“`

使用这些语义化标签可以使你的 HTML 代码更加清晰、有组织，并且对辅助技术更加友好。

10. 通用容器标签 (`<div>` 和 `<span>`)

<div>: 块级通用容器。用于对文档中的一组内容进行分组，以便使用 CSS 进行样式设置或通过 JavaScript 进行操作。<div> 元素默认会独占一行。
<span>: 内联通用容器。用于对文本或其他内联元素的一小部分进行标记，以便使用 CSS 进行样式设置或通过 JavaScript 进行操作。<span> 元素不会独占一行，它只占据自身内容所需的空间。

“`html

这是一个 div 容器

div 常常用于布局和分组块级元素。

这是一段包含红色文字的段落。
span 常常用于对文本中的一小部分进行样式设置。

`` *(注意：上面的style` 属性是直接在 HTML 中应用 CSS 样式，这在实际开发中不推荐，样式应该写在单独的 CSS 文件中。这里只是为了演示效果。)*

尽管有了语义化标签，<div> 和 <span> 仍然非常有用，特别是当你需要一个没有特定语义的容器来进行布局或样式控制时。

11. HTML 属性 (Attributes)

我们之前已经接触了一些属性，比如 href、src、alt、target、id、charset。属性提供了关于 HTML 元素的额外信息。

属性通常写在元素的开始标签中。
属性以名称/值对的形式出现，例如 name="value"。
属性值应该始终包含在引号中（推荐使用双引号 "，尽管单引号 ' 也是允许的）。

例如：

<a href="url">...</a>: href 是属性名，url 是属性值。
<img src="image.jpg" alt="description">: src 和 alt 都是属性。
<p class="highlight">...</p>: class 属性用于指定元素的 CSS 类。
<div id="main-content">...</div>: id 属性用于唯一标识页面上的一个元素。

一些全局属性几乎可以用于任何 HTML 元素：

id: 为元素提供一个唯一的标识符。
class: 为元素指定一个或多个类名（用于 CSS 样式或 JavaScript 操作）。
style: 为元素直接应用内联 CSS 样式（不推荐用于复杂的样式）。
title: 为元素提供额外的“工具提示”信息，当鼠标悬停在元素上时显示。
lang: 指定元素的语言。

“`html

鼠标悬停在这里看看提示。

这是一个具有 id 和 class 属性的 div。

“`

12. HTML 注释 (``)

注释是写在代码中用于解释说明的文本，它们不会在浏览器中显示。注释对于开发者来说非常有用，可以帮助你和你的团队理解代码的作用和意图。

“`html

这是页面的内容。

`` 注释以` 结束。

13. HTML 表格 (`<table>`, `<tr>`, `<th>`, `<td>`)

表格用于以行和列的形式组织数据。

<table>: 定义一个表格。
<tr>: 定义表格中的一行（Table Row）。
<th>: 定义表头单元格（Table Header）。表头单元格通常显示为粗体并居中，用于描述列的内容。
<td>: 定义标准单元格（Table Data）。

“`html

姓名	年龄	城市
张三	30	北京
李四	25	上海

“`

表格还有其他更复杂的结构标签，如 <thead>（表头组）、<tbody>（表体组）、<tfoot>（表脚组）、<caption>（表格标题）等，以及 colspan 和 rowspan 属性用于合并单元格，但对于初学者，掌握基本的结构就足够了。

14. HTML 表单 (`<form>`, `<input>`, `<label>`) (基础概念)

表单用于收集用户输入的数据，比如登录框、注册表单、搜索框等。表单涉及用户界面元素和数据提交到服务器的过程，相对复杂一些。这里只介绍最基础的部分。

<form>: 定义一个 HTML 表单。
- action 属性：指定表单数据提交到哪个 URL。
- method 属性：指定提交表单数据的方式（通常是 GET 或 POST）。
<input>: 定义一个输入控件。这是一个非常重要的标签，其类型由 type 属性决定。它是空元素。
- type="text": 单行文本输入框。
- type="submit": 提交按钮。
- 还有很多其他类型，如 password, checkbox, radio, email, date, file 等等。
- name 属性：指定输入控件的名称，提交数据时会用到。
- value 属性：指定输入控件的初始值或按钮上显示的文本。
- placeholder 属性：提供输入框的提示文本。
<label>: 定义表单控件的标签。使用 <label> 并通过其 for 属性关联到输入控件的 id，可以提高表单的可访问性。用户点击标签时，关联的输入控件会获得焦点。

“`html

“`

这只是表单的冰山一角，表单还可以包含 <textarea>（多行文本框）、<select>（下拉列表）、<button> 等标签，以及各种验证和交互，这些将在你深入学习 HTML 和 JavaScript 后进行。

实践：创建一个简单的网页

现在，让我们综合运用学到的一些知识，创建一个稍微复杂一点的页面。

打开你的文本编辑器，输入以下代码，并保存为 my_page.html：

“`html

我的第一个综合页面

欢迎来到我的页面！

关于我

我是一个正在学习 HTML 的新手。
网页开发的世界非常有趣！
我相信通过不断的学习和实践，我能掌握更多的技能。

学习中的插画

我的爱好

我有很多爱好，以下是一些：

阅读
运动
1. 跑步
2. 游泳
3. 篮球
听音乐
学习新的编程知识

“`

将上面的代码保存为 my_page.html，然后在同一个文件夹下准备一张名为 learning.jpg 的图片（或者修改 <img> 标签中的 src 属性为你自己的图片路径）。双击 my_page.html 在浏览器中打开，看看效果吧！尝试点击链接，你会发现“关于我”和“我的爱好”链接会让你跳转到页面内部对应的位置，“MDN HTML 文档”和“W3Schools HTML 教程”链接会在新标签页打开对应的网站，“给我发送邮件”链接会打开你的邮件客户端。

通过这个例子，你已经能够构建一个包含标题、段落、图片、列表、链接、语义化结构（header, main, article, section, aside, footer）的基础网页了。

HTML 进阶方向

掌握了 HTML 的基础标签和结构后，你可以继续深入学习以下内容：

更高级的表单控件: 下拉列表 (<select>, <option>), 多行文本框 (<textarea>), 文件上传 (<input type="file">) 等。
HTML5 新特性: <video>, <audio>, <canvas>, 地理位置信息 API 等。
Web Components: 构建可复用的自定义元素。
HTML 校验: 使用 W3C Markup Validation Service 等工具检查你的 HTML 代码是否符合标准。

但最重要的是，学完 HTML 基础后，你应该立即开始学习 CSS！CSS 会让你的网页告别朴素，变得漂亮和有吸引力。然后是 JavaScript，让你的网页具有交互性。

总结与下一步

恭喜你！你已经迈出了网页开发的第一步，掌握了 HTML 这个基石。我们学习了：

HTML 的定义和作用。
构建第一个 HTML 页面的基本步骤和结构。
常用标签的使用，如标题、段落、列表、链接、图片。
语义化 HTML 的重要性。
HTML 属性和注释。
表格和表单的基础概念。
以及通过一个综合示例将这些知识融会贯通。

记住，学习编程和标记语言最好的方法就是实践。不断地编写代码，尝试不同的标签和属性，修改示例，创建自己的小项目。

现在，你可以：

巩固 HTML 基础: 多加练习前面提到的标签和示例。
开始学习 CSS: 学习如何美化你的 HTML 页面，控制颜色、字体、布局等。
探索 JavaScript: 学习如何让你的网页动起来，响应用户的操作。
构建自己的小网站: 从一个简单的个人主页或博客开始，逐步构建更复杂的项目。
查阅文档: 将 MDN Web Docs 和 W3Schools 作为你的学习伴侣，它们是权威且详细的参考资料。

网页开发是一个不断学习和探索的过程，充满乐趣和挑战。只要你保持好奇心和动手能力，你就能创造出令人惊叹的网页作品。

祝你学习顺利，享受用代码创造的乐趣！

HTML 新手入门超详细教程：零基础构建你的第一个网页

什么是 HTML？

学习 HTML 需要什么？

你的第一个 HTML 页面

你好，世界！

解读第一个 HTML 页面

常用 HTML 标签详解

1. 标题标签 (<h1> 到 <h6>)

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

2. 段落标签 (<p>)

3. 换行标签 (<br>)

4. 水平线标签 (<hr>)

5. 文本格式化标签

6. 列表标签

7. 链接标签 (<a>)

8. 图片标签 (<img>)

9. 语义化标签 (Semantic HTML)

一篇精彩的文章

文章的一个子部分

10. 通用容器标签 (<div> 和 <span>)

这是一个 div 容器

11. HTML 属性 (Attributes)

12. HTML 注释 ()

13. HTML 表格 (<table>, <tr>, <th>, <td>)

14. HTML 表单 (<form>, <input>, <label>) (基础概念)

实践：创建一个简单的网页

关于我

我的爱好

HTML 进阶方向

总结与下一步

1. 标题标签 (`<h1>` 到 `<h6>`)

2. 段落标签 (`<p>`)

3. 换行标签 (`<br>`)

4. 水平线标签 (`<hr>`)

7. 链接标签 (`<a>`)

8. 图片标签 (`<img>`)

10. 通用容器标签 (`<div>` 和 `<span>`)

12. HTML 注释 (``)

13. HTML 表格 (`<table>`, `<tr>`, `<th>`, `<td>`)

14. HTML 表单 (`<form>`, `<input>`, `<label>`) (基础概念)