新手如何学习HTML代码？（附免费在线资源）

将您的想法变为现实并不总是那么容易。

您可能有一个完美的愿景，但与您的开发人员分享它具有挑战性。想法可能会在翻译中丢失，您的网站可能会错过标记。

更糟糕的是，您可能需要立即进行编辑，而没有时间在发布前返回给您的开发人员。

这就是为什么学习HTML如此重要的原因。凭借适当的HTML知识和技能，您可以熟练地构建和编辑网站，使您的愿景成为现实。

这篇文章将向您展示学习HTML需要做什么，以及为什么将它包含在您的工具包中至关重要。

1. 什么是HTML？
2. 为什么要学习HTML
3. 谁需要学习HTML？
4. 学习HTML可以找到什么工作？
5. 学习HTML有多难？
6. HTML入门基础知识点
7. 学习HTML的最佳方式
8. 你应该从HTML中学到什么

什么是HTML？

HTML代表HyperText Markup Language。它是用于在标准浏览器中显示文档和各种创作的语言。

HTML（超文本标记语言）是由蒂姆-伯纳斯-李（Tim Berners-Lee）创建的一种标准标记语言，是每个网站的基础，也是最流行的编程语言之一。

HTML 代码告诉浏览器如何组织和显示文本、图像和链接等内容。

由于 HTML 是在线内容的基础，因此学习 HTML 是一项非常有价值的技能。

虽然你完全可以在没有代码的情况下设计网站，但了解 HTML 可以帮助你从头开始定制网页。你可以用它来组织每个网站元素，包括图片、文本和表格等动态元素。

世界各地的企业都使用它来支持移动应用程序、软件和网站——几乎占所有网站的92.8%。

学习 HTML 将为您和您的企业带来无数机会。通过了解基本的 HTML，您将能够编写网站代码并调整脚本。

起初，用 HTML 编写似乎很复杂。看看在这个 HTML 编辑器中编写的 HTML 代码行：

HTML是一种独特的编码语言，需要高级知识。

现在对您来说可能没有意义，但是一旦您参加了HTML课程，您很快就会开始掌握它。

随着您学习和理解HTML所需的结构，您将能够立即回忆起HTML快捷方式。

在上面的示例中，您可以看到代码是为HTML页面编写的，包括页眉、标题和正文。括号内的标签开始给出文档结构，而实际内容可以添加在它们之间。

总的来说，标签和内容被视为一个元素。理解HTML的第一步是学习所有最常用的标签以及它们的作用。

例如，<p>标签表示一个段落。添加<p>以开始一个新段落，然后开始输入您的内容，如下所示：

了解不同的标签如何形成元素是学习HTML的关键一步。

所有开始标签都需要一个匹配的结束标签。您可以在标记前使用反斜杠编写结束标记。例如，要结束一个段落，您可以</p>在内容之后加上。

这只是一个标签的一个例子。还有数百个其他标签可以帮助您制作更多动态项目。您将标签放在一起的顺序和方式是您的网页或资产的结构和样式将如何变得生动。

一些最受欢迎的标签包括：

• <H1> – 第一个标题文本大小
• <b> – 加粗文本
• <i> – 斜体文本
• <a href=> – 添加指向文档的链接
• <font size="+3"> – 将字体增加到特定大小

一旦您开始学习HTML，这些标签将成为您的第二天性。您将能够准确地回忆出您需要哪一个，而无需查找它们。

这就是程序员在编写代码时动作如此之快的原因。他们知道标签以及如何将它们组合在一起以在他们的脑海中创建动态的HTML编码资产。

您可能会想，“我不能雇人为我编写网站代码吗？” 虽然答案是肯定的，但仍有很多理由让您学习 HTML。

让我们来看看为什么学习HTML是一项宝贵的时间投资的几个最重要的原因。

为什么要学习HTML

简而言之：HTML是您每天与之交互的大多数网站的基础。甚至这个网页也是一个HTML文档。

它在网络上如此流行，以至于您至少应该了解HTML结构的基础知识。你永远不知道它什么时候会派上用场。

了解它会帮助你成为一个更加精明的商务人士、营销人员、产品开发人员和设计师。

当你理解HTML时，你可以做很多事情。扎实的HTML基础将使您从创作到编辑与其他创始人、员工和竞争对手区分开来。

通过了解基本的HTML，您将能够：

• 构建您自己编码的自定义网站
• 在网站上托管资产
• 检查站点并了解它们是如何构建的
• 编码其他资产，包括基本软件、应用程序等
• 无需开发人员即可管理站点编辑

随着HTML的使用不断增长，从长远来看，决定学习HTML甚至可以带来回报。

例如，看看这个图表，看看这些年来HTML的使用是如何增加的，而XHTML，一种较旧的标记语言，已经减少了：

HTML和XHTML语言使用图表

HTML 是网络的基本构件。所有网站都使用 HTML 或其衍生工具。在使用 WordPress 中的 Divi 或 Gutenberg 等工具，或为营销活动创建电子邮件模板时，了解 HTML 将为您带来超强的能力。HTML 对于可访问性非常重要，因为它提供了语义结构，而辅助技术正是依靠这种结构为残疾用户有效地导航和解释网页内容。

HTML 对于搜索引擎优化非常重要，因为搜索引擎也使用这种语义结构来轻松抓取和索引您的网站，从而帮助提高网站在搜索结果中的可见度和排名。

了解 HTML 可以为您打开通往科技行业众多职业机会的大门。根据美国劳工统计局（Bureau of Labor Statistics）的数据，2022-2032 年间，网络开发人员的就业率预计将增长 16%，远高于所有职业的平均增长速度。这项基本技能不仅是网络开发的必备技能，也是数字营销、用户体验/用户界面设计和内容管理等职位的必备技能。

熟悉 HTML 可帮助您创建、修改和修复网站，而无需每次更改或出现问题都依赖专业开发人员。这样既能节省时间和金钱，又能更好地控制网站的外观和功能。

了解 HTML 还能为学习 CSS（层叠样式表）和 JavaScript 等其他基本编程语言做好准备。

这些语言与 HTML 相互配合，可以创建动态的交互式网站。

熟练掌握 HTML 会让你在同行业中脱颖而出，尤其是那些不要求编码技能的行业。作为创始人、营销人员或非技术人员，如果能创建和修改网站内容，你将脱颖而出。

凭借对HTML的深刻理解，您可以将自己定位为几乎任何职位的竞争候选人。如果您自己是一名企业家，则可以使用这些技能来改善您的业务。

谁需要学习HTML？

如果您在此页面上找到了自己，那么您很可能是学习HTML的绝佳人选，而且也是将从中受益的人。

在您犹豫之前，请知道您的年龄和技能水平无关紧要。从创始人到实习生，每个人都将从学习HTML中受益。

没有多少人有HTML的经验，所以从头开始是可以的。拥抱学习新事物的兴奋，让你的好奇心飙升。

如果您了解HTML，就会为您打开一个新世界。您可以通过创建响应式网站、应用程序等来将您的想法变为现实。

HTML将帮助人们从事各种工作职能：

• 营销人员 – 了解如何更改网站
• 产品开发 ——对产品的交互式渲染进行编码
• 客户服务 – 帮助查找订单和编码自定义消息
• 设计师 – 在网络上托管他们的创作并了解他们将如何被描绘
• 销售人员– 自动化潜在客户数据过滤器，启动冷电子邮件等。
• 创始人– 对他们的产品或网站进行编辑，并以更具体的方式分享他们对HTML丰富资产的愿景

如您所见，学习HTML有很多好处，而且知识可以影响多个不同的业务部门。

您是否希望改变您的日常工作？考虑将学习HTML作为一项可以为公司提供的新技能。

有大量的工作，当你了解HTML，你可以得到。

学习HTML可以找到什么工作？

通过学习HTML，您可以使自己对几乎任何组织都具有独特的价值。

让我们面对现实：任何组织都需要有人可以在您的网站上灭火。

您不会在一夜之间成为一名软件开发人员，但学习HTML将使您走上成为一名软件开发人员的正确道路。

HTML编码知识是世界各地雇主都需要的专业技能。软件开发人员是最常见的使用HTML的工作之一。

在过去几年中，对软件开发人员的需求不断增长。预计到2024年将需要2870万软件开发人员：

未来几年，软件开发人员的需求将继续增长。

如果您学习HTML，您可以成为许多不同的软件开发人员。使用HTML技能集，您可以获得以下工作：

• 前端开发人员 – 对用户与之交互的网站部分进行编码
• 后端开发人员– 对内容管理器输入资产的内容管理系统 (CMS) 进行编码，以便它们出现在前端
• 全栈开发人员——对网站的前端和后端进行编码

对成为Web开发人员不感兴趣？别担心。还有很多其他工作可以从您的HTML知识中受益。

HTML知识将使您成为一个全面的、更具市场潜力的工作前景。您自然会找到不同的方法在公司的各个部门使用您的技能。

对任何公司来说，即使只是一点HTML的基础知识也可以成为一项资产。您将了解人们在谈论什么以及如何向团队成员解释技术理念。

营销、商业智能和产品开发都可以从HTML中受益。以下是您可以在每个学科中获得的一些工作：

• 电子邮件营销经理– 您可以创建对最终收件人更具视觉吸引力的富含HTML的电子邮件
• 营销运营经理– 通常需要HTML来添加集成以确保客户数据的安全传递
• 数据科学/SQL 管理员——您可以运行HTML脚本来合成大量数据和模型
• 商业智能管理器——您可以使用HTML模块来发掘客户数据中的趋势和见解
• 产品经理——您可以使用HTML来构建、测试和编码新产品

如果这些工作听起来很有趣，您应该考虑花时间学习HTML。但请不要误会：学习HTML可能是一项具有挑战性的任务。

它可能不是你马上就能理解的。相反，您可能必须努力确保您了解正在学习的新语言的每个组成部分。

但是，对HTML有一个体面的理解到底有多难？让我们来看看新学生应该期待什么。

学习HTML有多难？

学习HTML需要练习、练习、再练习，就像任何新技能一样。

您使用HTML的方法应该类似于您学习一门新语言的方法。从了解您开始时没有任何先验知识开始。即使是最有经验的工人也会感到羞愧。

但是，一旦您意识到您对这种新语言一无所知，您就可以开始深入研究并发现它的真正含义。

随着您的学习，HTML对您来说将变得更加明显，您可以继续学习每节课，这些课会相互结合。

很快，您将能够将复杂的元素组合在一起，并制作出视觉上令人惊叹的HTML页面和应用程序。

学习HTML需要多长时间？

该过程可能需要一段时间。如果它很容易，每个人都会理解HTML。

这确实是一项专业技能，您需要花时间学习才能确保慢慢理解所有内容。

有一些简短的课程可以在短短几天或一个月内教您HTML的基础知识。但是，您不会在一夜之间成为软件开发人员。

彻底了解HTML可能需要数月或数年才能了解您需要了解的所有内容。

HTML入门基础知识点

既然知道了学习 HTML 的好处，你可能会想知道从哪里开始。好消息是，你不需要花哨的软件或昂贵的课程就能开始学习。

你只需要一个基本的软件设置，包括一台装有网络浏览器的电脑和一个在线代码编辑器（如记事本或 TextEdit），就可以开始你的开发之旅了。

第 1 步：了解 HTML 结构的基础知识

HTML 文档由一系列元素组成，每个元素周围都有开头和结尾标记，告诉浏览器它包含哪些内容。

• 开头标记是将元素名称写在角括号内，如下所示： <p>.
• 内容存在于标签中，比如一个段落或一些文本。
• 结束标记与此类似，但在元素名称前加了一个斜线，如下所示： </p>.

下面是一个例子，说明 HTML 结构中的基本块级元素如何在网页上显示段落。

在 HTML 代码中打开一个标签时，必须同样关闭它。

在学习 HTML 的过程中，了解常见元素和复杂元素是如何共同创建网页结构的至关重要。

一个典型的 HTML 文档包括

• 顶部的 <!DOCTYPE html> 声明，用于指定所使用的 HTML 版本
• 包含整个文档的 <html> 元素
• 一个 <head> 元素，用于存放页面标题和样式表链接等元数据
• 包含页面所有可见内容的 <body> 元素

下面是一个 HTML 文档结构的简单代码片段：

请注意每个元素都有一个开头标签和一个相应的结尾标签，以及这些元素是如何相互嵌套以创建文档结构的。

第 2 步：学习结构和内容的基本HTML元素

重点掌握构成大多数网页的基础元素。这些元素可以帮助你合理安排内容结构，使人类和搜索引擎更容易理解。

需要掌握的一些基本 HTML 元素包括锚元素，它有助于创建互动教程和链接到在线教程：

• 标题 (<h1>至<h6>)：标题是基本的块级元素，有助于为内容创建层次结构。
• 段落 (<p>)：段落将文本分成可读的小块，就像你在本页看到的间隔文字一样。
• 列表类型(<ul>和<ol>):  无序列表（<ul> ）是一种项目列表（或无编号列表），用于创建项目要点；有序列表 (<ol>) 用于创建编号列表。这些列表中的项目用 <li></li> 标记括起来。
• 链接 (<a>)：锚元素是核心交互元素之一，可创建指向其他页面或网站的动态链接。要添加链接，请使用 href 属性，如 href = “link”，这是基本链接属性之一。
• 表格 (<th> <tr><td>)：这些元素可以帮助你创建基本表格，其中 “th” 代表表头，”tr” 代表表格行，”td” 代表表格数据。您可以根据需要创建任意数量的表格，浏览器会自动在屏幕上创建表格。
• 图像 (<img>)：图片元素可增加视觉趣味性并支持内容。请包含有意义的 alt 文本，以便于访问。

添加到 HTML 标签中的一些常见属性包括 class 属性、 id属性和 src 属性。这些属性可识别页面上可在多个地方出现的 HTML 元素。

例如，如果要标识页面上有作者姓名的段落，可以这样写：“…………”：

在为元素设计样式时，可以使用此 ID 选择单个元素并添加所需的样式。

这些核心元素以及一些复杂的元素和类属性，将帮助你创建结构合理、有意义的 HTML 页面，而且易于阅读和浏览。

学习HTML的最佳方式

学习HTML的最佳方法是指导练习。它可以在新兵训练营（面对面或在线）或带有指导模块。

一个模块提供视频教学、讲座和指导练习的混合。有些甚至会在每节课结束时进行测试。

模块是实用的，因为它们使学生能够按照自己的节奏学习，并在课程中采取动手实践的方法。

这是一个正在运行的模块的示例：

使用HTML模块，您可以自我检查您的工作，以确保您走在正确的轨道上。

理想情况下，您应该登录一个模块，学习有关HTML的特定课程，然后进行练习作业以测试您新开发的技能。

随着时间的推移，这些教训应该相互借鉴。

您希望确保您所学习的媒介提供应用问题来测试您的技能。

它将帮助您理解您正在学习的概念和语言。

既然您知道应该如何以及为什么应该学习HTML，那么让我们来看看一些可以免费使用的最佳HTML程序。

HTML教育之旅中最关键的第一步是选择适合您的正确程序。

市场上有很多不同的程序。你应该找到一种适合你的学习风格的方法并致力于它。

下面，我们概述了一些您可以在学习中使用的最佳免费HTML资源。

1. 观看 YouTube 教程

作为一个完全的初学者，学习 HTML 的最简单方法之一就是观看在线教程。许多网站都提供循序渐进的指南，涵盖 HTML 基础知识，帮助你基本熟悉这门语言。

请观看 YouTube 上由 Programming with Mosh 制作的快速 HTML 入门视频，以快速了解相关知识。在短短一个小时内，这段视频解释了标签、属性等关键概念，以及如何构建网页。

如果您想深入学习， Traversy Media 的《TML Crash Course For Absolute Beginners》是一个不错的选择。这一系列视频全面涵盖了 HTML 元素，并向你展示了如何创建标题、段落和列表等页面内容。

您也可以观看免费的来自免费 CodeCamp 的 HTML 教程。

YouTube 上的免费 HTML 教程种类繁多，很容易就能找到与你的学习风格和技能水平相匹配的教程，帮助你掌握实用技能。

2. 学习免费的在线 HTML 课程

教程有助于学习 HTML 基础知识，而在线课程则提供详细的教程。它们提供结构化的课程、实践练习，并能跟踪你的学习进度。

以下是一些优秀的免费 HTML 学习资源：

Codecademy

Codecademy

Codecademy有许多免费程序可以为您提供所需的技术技能。超过5000万学生使用Codecademy学习基本的HTML和编码。

该公司相信它已经“完善”了学生学习编码的方式。该计划涉及三个不同的支柱：边做边学，获得即时反馈，并将您的学习付诸实践。这些将塑造您通过动手指导的方法发现HTML的方式。

该公司甚至提供论坛、聊天、章节和活动，以在您的教育之旅中获得更多帮助。您可以通过他们的界面实时聊天或在在线论坛上发布问题。

如果您在网上结识了志同道合的人，您甚至可以在Codecademy认可的活动中结识他们。通过将社区与实践学习相结合，Codecademy将自己与其他人区分开来。

Learn-HTML.org

Learn-HTML.org

Learn-HTML.org 是您需要了解的有关HTML的一切的可靠来源。Learn-HTML.org上有很多可以深入了解的内容，这是一个免费的在线模块课程，将带您逐步进入编码世界。

该站点为 HTML 初学者提供教程，向他们展示如何从头开始构建HTML和CSS站点。教程从基础开始，随着课程的继续而变得更加紧张和复杂。

课程包括从基本元素、链接、图像、按钮、导航栏、表单、视频、响应式网页设计、应用程序缓存、本地存储、拖放等所有内容。

如果您需要有关网站上特定元素的额外帮助，该网站是一个很好的资源。您可以轻松找到教程并获取有关要构建的特定小部件的宝贵信息。

General Assembly Dash

General Assembly Dash

General Assembly Dash是一个流行的网站，可以开始学习HTML的基础知识。这个免费的在线课程利用项目来帮助您理解HTML概念。

该程序非常适合需要HTML基础概述的初学者或需要进修课程的中级人员。

在同一课程中，您还将学习HTML5、CSS3和Javascript。它将使您能够制作具有多种布局和用户事件的精美网站。

您可以在General Assembly的介绍性课程之外继续您的教育。该公司提供广泛的教育课程和资源，以便更详细地了解HTML和其他相关主题。

MIT OpenCourseware

MIT OpenCourseware

麻省理工学院为想要从该国领先的技术大学学习的有进取心的学生提供开放课件课程。这些课程由为在线内容做出贡献的著名教师和学生设计。

这些课程的形式类似于微型在线大学课程。您将能够观看视频讲座、查看讲义、完成作业和项目、查看成绩单并参加考试以测试您的技能。

完成后，您可以查看解决方案并查看您的执行情况。它是补充您的 HTML 研究的极好资源。与大学和付费课程中教授的内容一样，这些内容对学生免费。

3. 实践、实践、实践

与任何新技能一样，动手实践是学习 HTML 和掌握这些基础技能的最佳途径。当你学习了一些入门教程并对基础知识感到得心应手后，就可以挑战自己，从头开始构建简单的网站。

CodePen 等平台提供了一个基本的工作环境，让你可以尝试使用 HTML、CSS 和 JavaScript 代码。

CodePen 还内置了格式化代码的工具，点击 Analyze HTML 可以检查错误：

在简单的在线编辑器中，您可以编写 HTML、CSS 和 JS，并在预览窗格中查看输出结果。

以下是一些在项目中使用动态和多媒体元素的实践想法：

1. 创建个人简介页面 使用标题、段落、列表和图片创建“关于我”页面。包含社交媒体资料或其他相关网站的链接。
2. 编排博客文章： 选取一篇博文样本，使用标题、段落、列表和引号等适当的 HTML 元素进行标记。添加相关内容或外部资源的链接。
3. 构建现代导航元素： 使用无序列表和锚元素创建菜单。尝试使用嵌套列表创建下拉菜单。

一旦你对单个元素的使用感到得心应手，就可以创建一些结合多个元素的小项目，并要求你考虑页面的整体结构和布局。例如

• 创建一个包含配料、说明和成品菜肴图片的食谱页面。
• 创建一个包含图片、说明和“立即购买”按钮的网店产品页面。
• 设计一个作品集页面，展示你的项目、技能和联系信息。

为了获得更真实的体验，可以考虑在电脑上建立本地开发环境。这包括安装网络服务器（如 Apache 或 Nginx）、数据库（如 MySQL）和服务器端脚本语言（如 PHP）–统称为 “堆栈”。

本地环境准备就绪后，您就可以开始从头开始或通过修改现有代码来构建网站。这种动手实践对于将 HTML 知识应用到实际场景中非常宝贵。

在这一阶段，目标是练习使用 HTML 来有效地结构和呈现内容，而不必担心视觉设计或高级功能。重点是编写简洁、符合语义的 HTML，并按逻辑组织代码。

相关：想要学习 WordPress？从这里开始

你应该从HTML中学到什么

一旦您学习了HTML，您的Web开发教育就不会停止。还有很多东西需要学习来增强您的HTML知识并使其更有用。

您还应该学习的另外两种语言包括CSS和Javascript。

CSS（或级联滑动表）是一种编程语言，它更侧重于文档的样式，而不是像HTML那样的裸露结构。

CSS和HTML的知识一起可以使您成为熟练的开发人员。

Javascript是另一种您应该学习以提高技能的编程语言。它是一种编程语言，可让您制作动态内容。您可以动画图像或使不同的多媒体元素在屏幕上飞舞。

Javascript将使任何网站对最终用户更具吸引力，并可能增加他们在您网站上的时间。

小结

学习HTML感觉像是一项事业。您需要了解您要完成的工作的基础知识，并找到满足您需求的正确程序。

通常，您会感觉自己正在学习一门全新的语言。这就是为什么花时间对正确的计划进行适当投资如此重要的原因。

值得庆幸的是，市场上的许多免费选项可以通过课程、教程和指导模块帮助您成为HTML专家。无论您选择哪种方式，您都可以立即解开HTML的秘密。

学完HTML了吗？这只是您Web开发之旅的开始。阅读我们关于要学习的最佳编程语言的文章，进一步取得进步。