HTML入门指南：从零构建第一个网页

1. 初识HTML：从零开始构建你的第一个网页

作为一名刚接触前端开发的新手，第一次HTML作业往往既令人兴奋又充满挑战。HTML（HyperText Markup Language）是构建网页的基础骨架，就像建造房屋时的钢筋结构。虽然现在有各种前端框架和工具，但掌握HTML仍然是每个前端开发者必须打好的基本功。

我在2010年刚开始学习前端时，第一个HTML页面是在记事本里手写的。当时连DOCTYPE声明都经常写错，但正是这些基础练习让我对网页结构有了深刻理解。如今虽然工具更加先进，但HTML的核心概念依然未变。

2. HTML基础结构与元素解析

2.1 基本文档结构

每个HTML文档都遵循一个标准结构，这是网页的"宪法"。让我们拆解一个最简单的HTML5文档：

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个HTML页面！</p>
</body>
</html>

关键点解析：

• <!DOCTYPE html>：声明文档类型为HTML5，必须放在第一行
• <html>：根元素，lang属性指定页面语言（zh-CN表示简体中文）
• <head>：包含元信息，不会直接显示在页面上
• <meta charset="UTF-8">：指定字符编码，避免中文乱码
• <title>：浏览器标签页显示的标题
• <body>：所有可见内容都放在这里

注意：很多初学者会忽略meta viewport的设置，这会导致移动设备上显示异常。width=device-width, initial-scale=1.0确保页面能正确适应不同屏幕尺寸。

2.2 常用HTML元素详解

HTML提供了丰富的元素来构建页面内容。以下是新手必须掌握的核心元素：

1. 标题元素：<h1>到