Frontend Academy · 课时

文档结构：DOCTYPE、html、head、body

从零编写有效的 HTML5 文档：DOCTYPE 声明、html 根元素、存放元数据的 head，以及存放内容的 body。

第 1 / 4 课13 个步骤

文档结构：DOCTYPE、html、head、body 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

每个 HTML 文档都有相同的骨架

有效的 HTML5 文档总是以 DOCTYPE 声明开头，包含一个 html 根元素，并在其中包含用于元数据的 head 部分和用于可见内容的 body 部分。理解这一结构是第一步。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

DOCTYPE 声明

<!DOCTYPE html>不是 HTML 标签，而是指示浏览器以标准模式渲染页面的指令。如果没有它，浏览器会退回到“怪异模式”，导致页面渲染不一致。请始终将它放在第 1 行。

<html> 元素和 lang 属性

<html>元素是文档的根元素。添加一个语言属性来声明页面所使用的语言。屏幕阅读器会利用它选择正确的发音引擎，搜索引擎则会利用它提供本地化结果。

<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">

<head> 元素

<head>包含元数据——即关于页面的信息，而不是页面内容本身。head 中的任何内容都不会直接显示给用户，但会影响浏览器和搜索引擎处理页面的方式。

字符编码和视口元标签

<meta charset="UTF-8">会告诉浏览器使用 UTF-8 解码文件，从而支持所有国际字符。<meta name="viewport">可让响应式设计在移动设备上正常工作。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> 元素

<title>中的文本会显示在浏览器标签页、书签和搜索引擎结果中。请将它控制在简洁的长度（50–60 个字符），准确描述页面内容，并将品牌名称放在末尾。

<title>Getting Started with HTML | CoddyKit</title>

链接 CSS 和字体

在 head 内使用<link>链接外部样式表。请使用rel="stylesheet"和正确的目标地址。Google 字体及其他字体服务也通过这种方式链接。

<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

<body> 元素

页面上所有可见内容都位于<body>中：标题、段落、图像、按钮、表单和脚本。body 中的内容就是用户看到并与之交互的内容。

脚本标签：放置位置

请将<script src="app.js" defer></script>放在<head>中。defer属性会并行下载脚本，并在 HTML 完全解析后执行，这是最安全的默认选择。

<head>
  <script src="app.js" defer></script>
</head>

HTML 中的注释

使用向 HTML 添加说明。注释不会显示给用户，但在源代码视图中可见。您可以使用注释解释意图、标记部分内容，或在调试期间暂时停用代码。

<!-- Navigation section -->
<nav>
  ...
</nav>
<!-- End navigation -->

验证：W3C 验证器

将 HTML 粘贴到validator.w3.org中即可检查错误。有效的 HTML 可以减少跨浏览器不一致性，帮助屏幕阅读器正确解析页面，也是专业开发水平的体现。

快速检查

<meta charset="UTF-8">标签应该放在哪里？

在交互式课程中回答

回顾：HTML 文档骨架

每个 HTML 文件都需要： → → （字符编码、视口、标题、CSS 链接）→ （所有可见内容）。这一骨架可确保跨浏览器一致性、可访问性以及正确的搜索引擎索引。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答