HTML教程：为初学者打造你的第一个网页
Source: Dev.to
TL;DR
大多数初学者在编写 HTML 时会浪费数小时，却不了解支撑每个网页的唯一结构规则。本指南将带你了解必备标签、它们存在的原因以及如何像拼乐高一样将它们拼接在一起——但让你的页面真正在移动设备上工作的技巧呢？那隐藏在后面的章节里，而大多数教程根本不提及。
为什么初学者在 HTML 上会挣扎（并非你想的那样）
这里说句实话：HTML 并不难。但它通常的教学方式？简直残忍。
- 大多数入门资源在第一天就给你塞进 50 个标签，要求你像背字典一样记住它们。
- 于是你开始复制自己不懂的代码，页面看起来怪怪的，你悄悄怀疑自己是不是不适合做网页开发。
其实适合你。只需要一个更好的起点。
初学者在 HTML 上挣扎的真正原因并不是标签本身——而是不了解为什么会有这些标签，以及它们是如何相互配合的。一旦弄明白了，这一切都会顺理成章。
现在就来解决这个问题吧。
什么是 HTML，实际上？
HTML 代表 超文本标记语言。忘掉花哨的名字吧。可以这么想：
- 如果一个网页是一座房子，HTML 就是砖块、墙壁和房间。
- CSS 给墙面上漆并挑选家具。
- JavaScript 让灯光开关。
HTML 是 结构。就是这么简单。结构永远是你首先要搭建的东西。
每个 HTML 页面由 标签 组成——用尖括号包裹的带标签的指令，如 <p>。大多数标签成对出现：一个开始标签和一个结束标签。
<p>
This is a paragraph.
</p><p> 打开它。</p> 关闭它。两者之间的内容就是正文。简单。
每个 HTML 页面都需要的骨架
在编写任何标题或段落之前，每个 HTML 页面都以以下完整骨架开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
</body>
</html>结构解析
<!DOCTYPE html>– 告诉浏览器使用现代的 HTML5 规范。省略它会让浏览器自行猜测，而它经常猜错。<html lang="en">– 包裹整个页面。lang="en"向搜索引擎和屏幕阅读器指明内容的语言（对 SEO 很重要）。<head>– 隐形的控制室。<head>中的内容不会显示在页面上，但它控制着所有后台行为：<meta charset="UTF-8">– 确保特殊字符（é、ñ、😄）能够正确显示。<meta name="viewport" ...>– 初学者最常忽略的一行。 没有它，页面在手机上会出现放大且布局错乱的情况。仅仅三行代码就能让站点对移动设备友好。<title>– 显示在浏览器标签页以及 Google 搜索结果中的文字。
<body>– 真正的内容区域。所有可见的内容（标题、段落、图片、链接等）都放在这里。
您将使用的标签 90 % 的时间
您不需要记住每一个 HTML 标签——只需掌握实际会用到的即可。
标题 — 您的广告文字
<h1>This is your biggest headline</h1>
<h2>This is a section title</h2>
<h3>This is a subsection</h3>标题从 <h1>（最大）到 <h6>（最小）依次递减。**经验法则：**每个页面只使用一个 <h1>。Google 会关注这一点。
段落 — 您的文本块
<p>
This is where you write your content. Each paragraph gets its own tag.
</p>链接 — 您的瞬移器
<a href="https://drivecoding.com" target="_blank">Visit Drive Coding</a>href– 目标 URL。target="_blank"– 在新标签页中打开链接（非常方便）。
图片 — 您的视觉甜点
<img src="path/to/image.jpg" alt="A description of the photo"><img>为自闭合标签——不需要结束标签。- 必须始终提供
alt文本。它有助于视觉障碍用户 以及 提升 SEO。
列表 — 您的有序托盘
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Learn HTML first</li>
<li>Then CSS</li>
<li>Then JavaScript</li>
</ul>90 % 初学者常犯的错误
大多数初学者的 HTML 写得像一大段文字——没有结构、没有逻辑，标签随处乱放。于是他们会疑惑为什么页面显得杂乱无章。
解决办法是语义化 HTML——使用能够描述内容意义的标签，而不仅仅是描述外观。
<article>
<h1>My Blog Post Title</h1>
<section>
<h2>Section Title</h2>
<p>Content goes here...</p>
</section>
</article>像 <header>、<nav>、<section>、<article>、<aside> 和 <footer> 这样的标签可以告诉浏览器和搜索引擎每块内容的具体作用，从而提升可访问性、SEO 和可维护性。
关键要点
- 每个 HTML 页面都需要完整的骨架：
<!DOCTYPE html>、<html>、<head>和<body>。 - viewport 元标签不是可选的——省略它会影响移动端用户体验。
- 实际构建页面只需要大约 10 个标签。
- 语义化标签不仅是最佳实践——它们直接影响你的 SEO。
- 图片的
alt属性是一举两得：提升可访问性 以及 搜索排名。
想要获取包含更多示例、实战个人资料卡项目以及语义化与非语义化 HTML 完整对比的完整指南吗？请阅读 Drive Coding 的全文：
HTML Tutorial for Beginners – Your Complete Introduction to HTML Basics
原始发布于
https://drivecoding.com/html-tutorial-for-beginners-your-complete-introduction-to-html-basics/