HTML基础语法入门教程

📚📚 编程教程 · 适合初学者

本教程将带你从零开始学习HTML基础语法，包含标签结构、常用元素和语义化等内容。

🎯🎯教程目标

掌握HTML标签的基本结构
学会使用常用HTML元素
理解语义化标签的重要性
能够编写简单的HTML页面

📋📋前置知识

本教程适合零基础学习者，无需编程经验。只需要准备好学习热情和一台电脑即可开始！

💻💻第一个HTML页面

HTML是网页的骨架，让我们从最简单的页面结构开始。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎学习HTML！</h1>
    <p>这是我的第一个HTML页面。</p>
</body>
</html>

代码解释： <!DOCTYPE html> 声明文档类型，<html> 是根元素，<head> 包含元数据，<body> 是可见内容。

📖📖常用HTML标签

文本标签

用于组织和格式化文本内容。

<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落</p>
<strong>加粗文本</strong>
<em>斜体文本</em>
<span>内联文本</span>

列表标签

用于创建有序和无序列表。

<!-- 无序列表 -->
<ul>
    <li>项目一</li>
    <li>项目二</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

💡💡学习提示

💡💡标签嵌套

确保标签正确嵌套，先打开的标签后关闭。<p><strong>文本</strong></p> 是正确的，而 <p><strong>文本</p></strong> 是错误的。

✅语义化标签

使用语义化标签如 <header>、<nav>、<main>、<footer> 等，提高代码可读性和SEO效果。

⚠️常见错误

忘记闭合标签、属性值不加引号、标签大小写混乱（HTML不区分大小写，但建议使用小写）。

✏✏️动手练习

练习题目

创建一个个人简介页面，包含以下内容：

使用h1标签显示你的名字
使用p标签写一段自我介绍
使用ul列表显示你的兴趣爱好
添加strong标签强调重要信息

提示

记得添加必要的元数据标签，如 <meta charset="UTF-8"> 确保中文正确显示。

📝📝本章总结

掌握了HTML文档的基本结构
学会了常用文本和列表标签
理解了标签嵌套和闭合的重要性
能够创建简单的HTML页面

🎉🎉🎉 恭喜完成HTML基础语法学习！下一章我们将学习CSS选择器。

本教程内容仅供参考，学习过程中遇到问题欢迎在评论区留言讨论。

HTML学习手册