初窥 HTML 世界：入门教程，领略网页构建之美

前端

2024-01-10 12:33:07

在探索 HTML 的奇妙世界时，让我们继续我们之前的旅程，深入了解 HTML 中的基本标签。这些标签是网页构建的基础，就像乐谱中的音符，构成了整个网页的骨架。

语义标签：网页结构的基石

HTML 中的语义标签定义了网页中不同元素的含义和用途。它们不仅有助于构建清晰易读的网页，还对搜索引擎优化 (SEO) 至关重要。

<header> 和 <footer>： 定义页面的头部和尾部。
<nav>： 指定导航菜单区域。
<main>： 包含页面主体内容。
<section>： 划分页面中的不同部分。
<article>： 表示独立的文章或内容块。

这些标签通过提供有关页面内容的上下文信息来增强网页的可访问性和可用性。

结构标签：构建网页的框架

结构标签为网页元素提供了物理结构，控制着它们的布局和外观。

<div> 和 <span>： 用作通用容器，可对元素进行分组或应用样式。
<p>： 表示段落。
<ul> 和 <ol>： 创建无序列表和有序列表。
<table>： 创建表格。
<form>： 创建表单。

这些标签允许您控制元素在页面上的位置、大小和对齐方式，从而创建有组织且美观的网页。

练习时间：构建一个简单的网页

为了巩固您的理解，让我们尝试构建一个简单的网页。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <header>
    <h1>欢迎来到我的网页</h1>
  </header>
  <main>
    <p>这是我的第一个网页，我很高兴与你分享。</p>
    <ul>
      <li>HTML 很有趣</li>
      <li>它很容易学习</li>
      <li>我可以创建自己的网页</li>
    </ul>
  </main>
  <footer>
    <p>感谢您的访问！</p>
  </footer>
</body>
</html>