Skip to content

HTML

学习 HTML——为每个网页提供结构与内容的标记语言。

你将学到

  • HTML 是什么、标签做什么
  • HTML 文档的结构
  • 常见标签：标题、段落、列表、链接、图片
  • 属性如何为元素附加额外信息

概念讲解

HTML

HTML（HyperText Markup Language，超文本标记语言）描述网页的结构与内容。它不是编程语言——不会循环、不会分支。它是*标记*语言：你把文本包在标签里，声明"这是标题""这是段落""这是链接"。

标签与元素

标签是用尖括号包裹的关键字。多数标签成对出现——开标签和闭标签——中间的内容就是元素：

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

有些标签自闭合——里面没有内容，比如图片：

<img src="photo.jpg" alt="A cat" />

文档结构

每个 HTML 文档都遵循同一骨架：

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- 可见内容放这里 -->
  </body>
</html>

<head> 放元数据（标题、字符编码、链接的样式表），<body> 放用户能看到的一切。

属性

属性写在开标签里，为元素附加信息。链接需要目的地（href），图片需要来源（src）和替代文字（alt）：

<a href="https://example.com">Visit Example</a>
<img src="logo.png" alt="Company logo" />

语义化 HTML

现代 HTML 倾向用语义标签描述含义而非外观：<header>、<nav>、<main>、<article>、<footer>。它们帮助屏幕阅读器和搜索引擎理解你的页面结构。

示例代码

              <!DOCTYPE html>
<html lang="en">
  <body>
    <header>
      <h1>Recipe Book</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/recipes">Recipes</a>
      </nav>
    </header>

    <main>
      <article>
        <h2>Chocolate Chip Cookies</h2>
        <p>Prep time: <strong>15 minutes</strong></p>
        <ul>
          <li>2 cups flour</li>
          <li>1 cup sugar</li>
          <li>1 cup chocolate chips</li>
        </ul>
        <img src="cookies.jpg" alt="Fresh baked cookies" />
      </article>
    </main>

    <footer>&copy; 2024 Recipe Book</footer>
  </body>
</html>

语义标签（header、nav、main、article、footer）描述页面结构。ul/li 列表放配料；img 必须有 alt 以保证可访问性。

动手试一试

  • HTML Entity Encoder

    把 < 和 > 等特殊字符编码，让它们显示为文本而非被当成 HTML 解析。

  • HTML ↔ Markdown

    HTML 与 Markdown 互转——看结构如何在两种格式间映射。

常见错误

错误写法

忘记闭合标签或嵌套顺序错误。

正确做法

每个开标签都要有闭标签，且必须正确嵌套：<p><strong>text</strong></p>，而非 <p><strong>text</p></strong>。用 HTML 校验器查错。

错误写法

图片漏写 alt 属性。

正确做法

永远加 alt 文字。屏幕阅读器会读它，图片加载失败时也会显示。仅纯装饰图才用空 alt（alt=''）。

相关资源

相关代码片段

相关速查表

练习 HTML

2 个练习

练习 HTML

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误