HTML 教程

纯干货教学,从零开始学习 HTML

HTML 基础

🚀 继续你的 HTML 学习之旅!

很好!你已经完成了 HTML 简介部分,现在我们将深入学习 HTML 的基础知识。这部分内容将帮助你理解如何构建一个完整的 HTML 文档,是你成为 Web 开发者的重要一步。

HTML 文档结构

一个基本的 HTML 文档结构如下:

💡 学习小贴士

HTML 文档的结构就像一棵树,<html> 是根节点,<head><body> 是它的子节点。这种层级结构使得 HTML 文档组织清晰,易于理解。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>页面标题</title> 
</head> 
<body> 
    <!-- 页面内容 --> 
</body> 
</html> 

DOCTYPE 声明

<!DOCTYPE html> 声明位于 HTML 文档的第一行,用于告诉浏览器这是一个 HTML5 文档。

HTML 根元素

<html> 标签是 HTML 文档的根元素,包含了整个 HTML 文档的内容。

HEAD 部分

<head> 标签包含了文档的元数据,如标题、字符集、CSS 链接等。

  • <title> - 定义文档的标题
  • <meta> - 定义文档的元数据
  • <link> - 链接外部资源,如 CSS 文件
  • <script> - 嵌入或链接 JavaScript 代码

BODY 部分

<body> 标签包含了文档的可见内容,如文本、图像、链接等。

HTML 注释

HTML 注释用于在代码中添加说明,不会在浏览器中显示。

<!-- 这是一个 HTML 注释 -->

HTML 空白

HTML 会自动忽略多余的空白和换行。

HTML 实体

HTML 实体用于显示特殊字符,如 <、>、& 等。

实体名称 实体编号 显示结果 描述
&lt; &#60; < 小于号
&gt; &#62; > 大于号
&amp; &#38; & 和号
&quot; &#34; " 引号
&apos; &#39; ' 撇号
&nbsp; &#160;   不间断空格

✅ 检查你的理解

到目前为止,你应该掌握:

  • HTML 文档的基本结构
  • DOCTYPE 声明的作用
  • head 部分和 body 部分的区别
  • HTML 标签的语法
  • 如何添加 HTML 注释
  • HTML 空白的处理方式
  • 常用 HTML 实体的使用

🌟 太好了!你已经掌握了 HTML 基础知识

你现在已经了解了 HTML 文档的基本结构和语法规则,这是构建网页的基础。接下来,我们将学习 HTML 元素和属性,这些是 HTML 的核心概念,将帮助你创建更加丰富和复杂的网页。

记住,实践是学习的关键。尝试创建一个简单的 HTML 文档,包含你所学的所有元素,这将帮助你巩固所学的知识。

继续加油!你正在稳步前进!🚀