HTML入门指南：从零开始认识网页结构

HTML是构建万维网的基础。无论你是想创建个人博客、企业官网，还是复杂的前端应用，掌握HTML都是第一步。本文将以简洁明了的方式，带你快速了解HTML的核心概念。

一、什么是HTML？

HTML，全称超文本标记语言​ (HyperText Markup Language)，是用于创建网页的标准标记语言。
我们可以这样理解它的名字：

• 超文本：指的是“超链接”。链接是网页的核心特性，通过点击链接，我们可以从一个页面跳转到另一个页面，形成互联的网络。
• 标记语言：意味着它使用一系列“标签”来“标记”或定义网页内容的结构和含义。学习HTML，本质上就是学习各种标签及其属性的用法。
  一些重要的基础认知：
• HTML代码是写在以 .html为后缀的文本文件中的。
• HTML标签不区分大小写，但行业规范和最佳实践都推荐使用小写。
• 编写代码时，请确保输入法处于英文状态，以避免符号错误。

二、HTML的版本发展

HTML自1991年诞生以来，经历了多个版本的迭代。如今，我们学习和使用的核心是 HTML5，它于2012年正式定稿，带来了丰富的语义化标签和对多媒体内容的原生支持。

三、HTML的基石：标签与元素

1. 标签的类型

HTML标签主要分为两种：

• 双标签：成对出现，有开始标签和结束标签，内容写在中间。

<p>这是一个段落</p>
<!-- 开始标签 - 内容 - 结束标签 -->

• 单标签：自身闭合，没有单独的结束标签。/可以省略。

<br>  或 <br/>  <!-- 换行标签 -->
<hr>  或 <hr/>  <!-- 水平线标签 -->

2. 元素

在HTML中，“标签”和“元素”这两个术语通常可以互换使用。例如，我们既可以说“

标签”，也可以说“p元素”。

3. 标签的嵌套

标签可以相互嵌套，形成一个层次结构，这对于组织复杂内容至关重要。

<p>
    <span>这里是被嵌套的内容</span>
</p>

• 代码缩进：为了结构清晰，推荐对嵌套的子级代码进行缩进（通常按Tab键）。
• 父子关系：在上例中，p标签是span标签的父标签，span标签则是p标签的子标签。

四、为标签增添细节：属性

属性为HTML标签提供了额外的信息或设置。

• 位置：属性必须写在开始标签内。
• 构成：属性由“属性名”和“属性值”组成。
• 语法：属性名=“属性值”。属性值必须用引号（单双引号皆可）包围。
• 多个属性：一个标签可以有多个属性，属性之间用空格隔开，顺序无关。

<p align="center" title="这是一个提示框">这段文字将被居中显示。</p>

感谢阅读这份HTML入门指南！前端开发的世界广阔而有趣，HTML是你探索它的第一把钥匙。

读者互动：

• 如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
• 如果觉得文章有帮助，欢迎点赞鼓励。
• 想与我共同进步，欢迎关注我的技术账号。

💬 感谢各位读者的支持与关注！期待与大家一起在前端开发的道路上共同进步！🎉