网页设计是一项既有趣又有挑战性的技能，而HTML（HyperText Markup Language）作为网页设计的基石，是每一个网页设计师和开发者的必修课。在本教程中，我们将带你一步步从零开始，了解HTML的基础知识，并帮助你打造你的第一个网页。
什么是HTML？
HTML，即超文本标记语言，是一种用于创建网页的标准标记语言。它描述了一个网页的结构和内容，而不涉及如何显示这些内容（这是CSS的职责）。HTML文档由一系列的元素组成，每个元素都包含在尖括号< >中。
HTML的基本结构
一个简单的HTML文档通常包含以下基本结构：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个网页。</p>
</body>
</html>
分析上述代码：
<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。<html>：根元素，所有HTML内容都应写在这个元素内。<head>：包含元数据，如文档的标题。<title>：定义网页的标题，它将显示在浏览器的标签页上。<body>：包含网页的可见内容。<h1>：定义一级标题。<p>：定义段落。
HTML的基本元素
标题元素
标题元素<h1>到<h6>用于定义不同级别的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- ... -->
<h6>六级标题</h6>
段落元素
段落元素<p>用于定义段落。
<p>这是一个段落。</p>
列表元素
HTML支持无序列表、有序列表和定义列表。
- 无序列表使用
<ul>元素，列表项使用<li>元素。 - 有序列表使用
<ol>元素，列表项同样使用<li>元素。 - 定义列表使用
<dl>元素，术语使用<dt>元素，定义使用<dd>元素。
<!-- 无序列表 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
链接元素
链接元素<a>用于创建链接。
<a href="https://www.example.com">访问示例网站</a>
图像元素
图像元素<img>用于在网页中插入图像。
<img src="image.jpg" alt="图片描述">
创建你的第一个网页
现在你已经了解了HTML的基本结构、元素和属性，是时候创建你的第一个网页了。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个网页。</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<a href="https://www.example.com">访问示例网站</a>
<img src="image.jpg" alt="这是一张图片">
</body>
</html>
保存以上代码为index.html，然后在浏览器中打开它，你就能看到你的第一个网页了！
总结
通过本教程，你已经掌握了HTML的基础知识，并成功创建了你的第一个网页。这只是一个开始，接下来，你可以学习CSS来美化你的网页，以及JavaScript来使网页具有交互性。祝你在网页设计的道路上越走越远！