HTML入门知识如何学？教程该从哪开始学？-建站教程-锦华智联科技

第一部分：HTML 入门知识

在开始写代码之前,我们需要先理解一些核心概念，这就像学开车前，你得知道方向盘、油门、刹车是干嘛的。

（图片来源网络，侵删）

什么是 HTML？

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

超文本：它不仅仅是普通的文本，它可以包含图片、链接、音频、视频，甚至可以跳转到页面中的其他部分（锚点），这种“可以点击、可以跳转”的文本就是超文本。
标记语言：它不是一种编程语言（Python 或 Java），因为它没有逻辑判断、循环等复杂功能，它的作用是“标记”或“描述”内容的结构和含义，你告诉浏览器：“这是一级标题”、“这是一个段落”、“这里有一张图片”。

简单比喻： 如果把创建一个网页比作盖房子，

HTML 就是房子的钢筋骨架和结构，它定义了哪里是客厅（<header>），哪里是卧室（<article>），哪里是门（<a> 链接）。
CSS (层叠样式表) 是房子的装修和粉刷，它决定了墙壁的颜色、家具的样式、房间的布局。
JavaScript 是房子的智能家居系统，它负责实现交互功能，比如自动开关灯、调节温度等。

HTML 的最新版本是 HTML5，它引入了更多语义化的标签和强大的功能，是现代 Web 开发的基石。

HTML 的基本结构

一个标准的 HTML 文件（后缀名为 .html 或 .htm）有一个固定的骨架，我们来看一下最简单的 HTML 页面：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到 HTML 世界！</h1>
    <p>这是一个段落。</p>
</body>
</html>

我们来逐行解析这个骨架：

<!DOCTYPE html>：文档类型声明，它告诉浏览器这个页面是使用 HTML5 标准编写的，这是必须的，并且必须放在第一行。
<html lang="zh-CN">...</html>：根元素，所有其他的 HTML 元素都包含在这个标签之内。lang="zh-CN" 属性用于指定页面的语言是中文（中国），这对搜索引擎和屏幕阅读器很重要。
<head>...</head>：头部，它包含了页面的元数据，即那些不会直接显示在页面内容中，但浏览器和搜索引擎需要的信息。
- <meta charset="UTF-8">：字符编码声明。UTF-8 是一个通用的字符编码，可以显示世界上几乎所有语言的文字。强烈建议始终使用它。
- <meta name="viewport" ...>：viewport（视口）标签，它告诉浏览器如何控制页面的尺寸和缩放，对于响应式设计（让页面在手机和电脑上都能良好显示）至关重要。
- <title>...</title>：会显示在浏览器的标签页上，也是搜索引擎结果中显示的标题。
<body>...</body>：主体，这是所有的容器，比如标题、段落、图片、链接等，都将写在这里。

HTML 的核心概念

a. 标签

HTML 由一系列的组成，它们通常成对出现，由一个开始标签和一个结束标签组成。

开始标签：<标签名>，<p>
结束标签：</标签名>，</p>
自闭合标签：有些标签（如 <img>, <br>, <hr>, <input>）不需要包裹内容，因此没有结束标签，在 HTML5 中，可以直接写成 <img ... /> 或 <img ...>。

b. 元素

一个元素由开始标签、内容和结束标签共同组成。

元素示例：<p>这是一个段落。</p> 整个部分就是一个段落元素。

c. 属性

属性为 HTML 元素提供额外的信息，它们总是写在开始标签内部。

（图片来源网络，侵删）

格式：属性名="属性值"

在 <a> 标签中： <a href="https://www.google.com" target="_blank">访问 Google</a>

href：定义链接的目标地址。
target="_blank"：定义在哪个窗口打开链接。_blank 表示在一个新的浏览器标签页中打开。

第二部分：HTML 入门教程

我们已经了解了基本知识,让我们动手来写一些代码吧！

准备工作：你需要的工具

你只需要两样东西：

一个文本编辑器：Notepad（Windows 自带）、TextEdit（Mac 自带）可以，但强烈推荐使用更专业的编辑器，它们有语法高亮、自动补全等功能，能极大提高效率。
- 推荐：Visual Studio Code (VS Code) (免费、强大、插件丰富)、Sublime Text、Atom。
一个浏览器：Chrome、Firefox、Edge、Safari 等，用来查看你写的网页效果。

第一步：创建你的第一个 HTML 文件

打开你的文本编辑器（VS Code）。
新建一个文件,将上面“基本结构”中的代码复制进去。
点击“文件” -> “另存为”，将文件命名为 index.html。注意：后缀名必须是 .html。
用浏览器打开这个 index.html 文件，你应该能看到一个只包含“欢迎来到 HTML 世界！”的空白页面，标签页上显示着“我的第一个网页”，恭喜你！

第二步：学习常用标签并实践

我们在 <body> 标签内添加更多内容，来感受一下 HTML 的魅力。

标题和段落

HTML 提供了 6 个级别的标题标签，从 <h1>（最重要）到 <h6>（最不重要）。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<p>这是一个普通的段落，段落是由一个或多个句子组成的，浏览器会自动在段落前后添加一些外边距。</p>
<p>这是另一个段落。</p>

链接

使用 <a> 标签创建超链接。

<!-- 链接到外部网站 -->
<a href="https://www.w3.org/html/" target="_blank">HTML 官方教程</a>
<!-- 链接到本站点的其他页面 (假设有一个 about.html 文件) -->
<a href="about.html">关于我们</a>
<!-- 链接到页面内的某个位置 (锚点) -->
<p><a href="#section2">跳转到第二部分</a></p>
...
<h2 id="section2">第二部分</h2>

href="#section2" 中的表示这是一个页面内的锚点链接。
id="section2" 为这个 <h2> 元素设置了一个唯一的标识符，作为锚点的目标。

图片

使用 <img> 标签插入图片，这是一个自闭合标签。

<!-- src 是图片的路径，alt 是图片的替代文本 -->
<img src="https://www.w3schools.com/html/pic_mountain.jpg" alt="一张山景照片" width="300">

src：图片的源路径，可以是网络 URL，也可以是你本地的图片文件路径（如 images/my-photo.jpg）。
alt：非常重要！当图片无法加载时，会显示这段文字，它对屏幕阅读器（视障用户使用）至关重要，用于描述图片内容。

列表

HTML 有两种常见的列表：无序列表和有序列表。

无序列表：项目符号是圆点。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

有序列表：项目符号是数字。

<ol>
  <li>第一步：打鸡蛋</li>
  <li>第二步：热锅倒油</li>
  <li>第三步：倒入蛋液</li>
</ol>

语义化标签 (HTML5 的亮点)

HTML5 引入了许多语义化标签，让代码结构更清晰，对搜索引擎和开发者都更友好。

<header>
    <h1>网站头部</h1>
    <nav>导航菜单</nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>这里是文章内容...</p>
    </article>
    <aside>
        <h3>侧边栏</h3>
        <p>一些相关链接或广告...</p>
    </aside>
</main>
<footer>
    <p>&copy; 2025 我的网站. 保留所有权利.</p>
</footer>

<header>：页面或区域的头部。
<nav>：导航链接区域。
<main>：页面的主要内容。
<article>：独立的文章内容。
<aside>：侧边栏或与主要内容相关但独立的内容。
<footer>：页面或区域的底部。

第三步：将所有内容组合起来

将上面所有示例代码整合到你的 index.html 的 <body> 标签中，保存文件，然后用浏览器刷新看看效果，你会看到一个结构清晰、内容丰富的网页雏形。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <a href="#">首页</a> | <a href="#">lt;/a> | <a href="#">联系</a>
        </nav>
    </header>
    <main>
        <h2>文章标题</h2>
        <p>这是一个段落，你可以在这里写下任何你想分享的内容。</p>
        <p>这是另一个段落。</p>
        <h3>我的爱好</h3>
        <ul>
            <li>编程</li>
            <li>阅读</li>
            <li>旅行</li>
        </ul>
        <h3>学习步骤</h3>
        <ol>
            <li>学习 HTML</li>
            <li>学习 CSS</li>
            <li>学习 JavaScript</li>
        </ol>
        <p><a href="#bottom">跳转到页面底部</a></p>
    </main>
    <footer id="bottom">
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>
</html>

总结与下一步

恭喜你！你已经完成了 HTML 的入门学习，掌握了：

HTML 的基本概念和作用。
HTML 文件的标准结构。
常用的 HTML 标签（标题、段落、链接、图片、列表）。
HTML5 的语义化标签。

你应该做什么？

多练习：尝试自己创建几个不同主题的页面，比如你的个人介绍、喜欢的电影列表等。
学习 CSS：HTML 只负责结构，网页的美观全靠 CSS，学习如何使用 CSS 来改变颜色、字体、布局，让你的网页变得漂亮起来。
学习 JavaScript：当你想让网页“动”起来，实现交互效果（如表单验证、轮播图、弹出框）时，就需要学习 JavaScript 了。

HTML 是 Web 开发的基石，打好这个基础至关重要，祝你学习愉快！