HTML 基础夯实：标签、属性与基本结构的学习进度（一）

一、开启 HTML 学习大门

在当今数字化时代，网页已成为信息传播和交互的重要载体，而 HTML 作为构建网页的基石，其重要性不言而喻。HTML，即超文本标记语言（HyperText Markup Language），它定义了网页的结构和内容，就如同建造房屋的蓝图，决定了网页的基本框架和布局。无论是简单的个人博客，还是复杂的电商平台，都离不开 HTML 的支撑。对于想要进入 Web 开发领域的人来说，掌握 HTML 是迈出的第一步，也是至关重要的一步。它不仅是学习其他前端技术（如 CSS 和 JavaScript）的基础，更是理解网页工作原理的关键。

在这段 HTML 基础学习之旅中，我收获颇丰，也遇到了不少挑战。现在，就来和大家分享一下我的学习进度和心得体会，希望能给同样在学习 HTML 的小伙伴们一些启发和帮助。

二、初窥 HTML：标签的奇妙世界

（一）基础标签认知

在 HTML 的学习过程中，我首先接触到的就是一系列基础标签，它们构成了网页的基本框架。<html>标签是 HTML 文档的根标签，所有其他 HTML 元素都包含在其中，就像是一个大容器，将整个网页的内容都包裹起来，宣告了这是一个 HTML 文档。<head>标签则包含了文档的元数据，如页面标题、字符编码、样式表链接等，虽然这些内容不会直接显示在页面上，但它们为网页的正确显示和功能实现提供了重要的信息，就如同幕后工作者，默默支持着网页的运行。<body>标签包含了网页的可见内容，如文本、图片、链接等，是我们真正展示网页内容的地方，用户在浏览器中看到的大部分内容都来自于<body>标签内部。这些基础标签相互配合，缺一不可，共同搭建起了网页的基本结构。例如：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>我的第一个网页</title>

</head>

<body>

<h1>欢迎来到我的网页！</h1>

<p>这是一段简单的介绍。</p>

</body>

</html>

在这个例子中，<html>标签定义了文档的开始和结束，<head>标签内设置了字符编码和页面标题，<body>标签中包含了一个一级标题<h1>和一个段落<p>，展示了网页的主要内容。

（二）文本与排版标签

文本与排版标签是我在学习过程中经常使用的，它们让网页的文本内容更加清晰、易读。<p>标签用于定义段落，它会在段落前后添加适当的空白，使文本段落之间有明显的区分，就像我们在写文章时会分段一样，让内容更有条理。例如：

<p>这是第一段内容，它可以包含各种文本信息，用于详细描述某个主题或传达某种观点。</p>

<p>这是第二段内容，与第一段相互独立，但又共同构成了网页的文本主体。</p>

<h1> - <h6>标签用于定义不同级别的标题，<h1>是最高级别的标题，通常用于表示页面的主要主题，字体较大且加粗，<h2> - <h6>依次递减，用于表示副标题或更低级别的内容层次，帮助用户快速了解页面的结构和内容重点。比如：

<h1>网页的主要标题</h1>

<h2>一级副标题，进一步阐述主要标题的相关内容</h2>

<h3>二级副标题，用于更详细地划分内容板块</h3>

<br>标签用于换行，当我希望在不创建新段落的情况下强制换行时，就会用到它，比如在诗歌、地址等需要特定换行格式的文本中非常实用。例如：

地址：北京市<br>海淀区<br>中关村大街1号

<hr>标签用于在页面中插入一条水平线，它可以将页面内容分隔成不同的部分，起到视觉上的分隔作用，使页面布局更加清晰。示例如下：

<p>这是水平线上面的内容。</p>

<hr>

<p>这是水平线下面的内容。</p>

（三）列表标签

列表标签在组织内容时非常有用，它可以使内容更加整齐、有序。有序列表<ol>会为每个列表项添加数字或字母序号，默认是数字序号，常用于展示有顺序要求的内容，如步骤、流程等。例如：

<ol>

<li>第一步：打开电脑</li>

<li>第二步：连接网络</li>

<li>第三步：打开浏览器</li>

</ol>

无序列表<ul>则使用项目符号（如圆点、方块等）来标记列表项，用于展示没有顺序要求的内容，如项目清单、选项列表等。示例代码如下：

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>橙子</li>

</ul>

自定义列表<dl>用于定义术语及其描述，<dt>标签用于定义术语，<dd>标签用于定义术语的描述内容，通常用于制作词汇表、定义列表等。比如：

<dl>

<dt>HTML</dt>

<dd>超文本标记语言，用于创建网页的标准语言。</dd>

<dt>CSS</dt>

<dd>层叠样式表，用于描述网页的样式和布局。</dd>

</dl>

（四）链接与图像标签

链接标签<a>及其href属性是实现网页之间跳转和页面内导航的关键。通过设置href属性的值为目标页面的 URL 地址，就可以创建一个超链接。例如：

<a href="https://www.example.com">访问示例网站</a>

这段代码会在页面上显示一个文本为 “访问示例网站” 的链接，用户点击该链接就会跳转到Example Domain这个网址。还可以使用target属性来指定链接的打开方式，如target="_blank"表示在新窗口中打开链接。

图像标签<img>用于在网页中插入图片，src属性指定图片的路径，alt属性用于提供图片的替代文本，当图片无法加载时，就会显示alt属性中的文字，这对于提高网页的可访问性非常重要。比如：

<img src="image.jpg" alt="美丽的风景图片">

此外，还可以通过width和height属性来设置图片的宽度和高度，以适应网页的布局需求。

三、深入探索：HTML 属性的奥秘

（一）属性的基本概念

在 HTML 中，属性就像是元素的 “说明书”，为 HTML 元素提供了附加信息，让元素能够展现出更多样的功能和特性。属性总是以名称 / 值对的形式出现，紧跟在元素的开始标签中，位于标签名之后，属性名和属性值之间用等号 “=” 连接，属性值需要用引号（单引号或双引号均可）括起来。例如，在<a href="Example Domain">点击访问</a>这个链接标签中，“href” 是属性名，“Example Domain” 是属性值，它指定了链接的目标地址，告诉浏览器当用户点击这个链接时应该跳转到哪里。属性的存在丰富了 HTML 元素的表现力，使网页能够实现更复杂的交互和展示效果。

（二）常见属性详解

style 属性：主要用于定义元素的内联样式，直接在 HTML 元素中设置样式属性，如颜色、字体大小、边距等。例如，<p style="color: blue; font-size: 18px;">这是一段蓝色、字体大小为18px的文本。</p>，通过 “style” 属性，我们可以快速地为段落设置特定的样式，使文本以我们期望的方式展示在页面上。不过，过多使用内联样式会使代码的维护变得困难，通常建议将样式集中在 CSS 文件中进行管理。

id 属性：为 HTML 元素提供了一个唯一的标识符，在整个 HTML 文档中，每个元素的 “id” 值都应该是独一无二的。它常用于通过 CSS 或 JavaScript 来精确地选择和操作特定的元素。比如，<div id="myDiv">这是一个具有唯一id的div元素</div>，在 CSS 中可以使用 “#myDiv” 来为这个特定的 “div” 元素设置样式，在 JavaScript 中可以通过document.getElementById('myDiv')来获取这个元素并进行各种操作，如修改其内容、添加事件监听器等。

src 属性：常见于<img>、<script>、<iframe>等标签中，用于指定资源的路径。对于<img>标签，如<img src="images/picture.jpg" alt="美丽的花朵">，“src” 属性指定了图片的源文件地址，浏览器根据这个地址去加载并显示图片；对于<script>标签，<script src="script.js"></script>，“src” 属性指定了外部 JavaScript 文件的路径，浏览器会加载并执行该脚本文件，为网页添加交互功能。

href 属性：主要用于<a>标签，用于指定链接的目标地址，可以是网页、文件、电子邮件地址等。例如，<a href="Example Domain">访问示例网站</a>，“href” 属性定义了超链接的目标 URL，用户点击链接时，浏览器会导航到指定的地址。此外，还可以使用相对路径来链接同一网站内的不同页面，如<a href="about.html">关于我们</a>，表示链接到当前目录下的 “about.html” 页面。

alt 属性：是<img>标签特有的属性，用于提供图像的替代文本描述。当图像由于某种原因（如网络问题、文件路径错误等）无法加载时，浏览器会显示 “alt” 属性中的文本，以帮助用户了解该图像的大致内容。例如，<img src="image.jpg" alt="风景图片">，如果 “image.jpg” 无法正常加载，用户将看到 “风景图片” 这几个字，这对于提高网页的可访问性和搜索引擎优化非常重要，搜索引擎可以通过 “alt” 属性的内容来理解图片的含义，从而更好地对网页进行索引和排名。

（三）属性的使用注意事项

属性值的引号使用：属性值应始终写在引号内，单引号和双引号均可使用，这两种方式在大多数情况下是等效的。例如，<a href='Example Domain'>链接</a>和<a href="Example Domain">链接</a>都能正确定义一个链接。但当属性值本身包含双引号时，为了避免冲突，就需要使用单引号来包裹属性值，如<a href='Example Domain"page=1"'>特殊链接</a>；反之，若属性值包含单引号，则使用双引号包裹，<a href="Example Domain'page=1'">特殊链接</a> 。

属性的大小写敏感性：属性和属性值对大小写不敏感，例如，<img src="image.jpg" alt="图片">和<IMG SRC="IMAGE.JPG" ALT="图片">在功能上是完全相同的。然而，为了遵循 HTML 的规范和提高代码的可读性，建议统一使用小写形式来书写属性和属性值，这样可以使代码风格更加一致，也便于其他开发者阅读和维护代码。