HTML 文档结构¶

HTML 语法与元素参考：MDN HTML 文档；规范定义见 WHATWG HTML Standard。

HTML 文档由元素、属性和文本组成。元素定义界面的内容与层级，属性用于标识元素、引用资源或配置行为；CSS 根据元素及其属性设置布局和样式。

文档骨架¶

建议使用完整的 HTML 文档结构：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Player Panel</title>
  <link rel="stylesheet" href="../styles/main.css">
</head>
<body>
  <main class="player-panel">
    <h1>Player</h1>
    <p>Level 1</p>
  </main>
</body>
</html>

lang 用于声明文档内容的语言，例如中文使用 zh-CN，英文使用 en。¹

元素与标签¶

大多数元素由开始标签、内容和结束标签组成：

<p>Player information</p>

这里的 p 是元素名称，Player information 是文本内容。元素可以包含其他元素：

<div class="player-panel">
  <h1>Player</h1>
  <p>Level 1</p>
</div>

div 是容器，h1 和 p 是其子元素。缩进用于表达源文件的层级，不代替实际的标签嵌套。

常见元素¶

元素名称不决定最终布局。容器尺寸、排列方向、间距和颜色应通过 CSS 设置，参见布局与尺寸与 CSS 样式。

空元素¶

meta、link、img 和 input 等为空元素，不包含子内容，也不写结束标签。例如：

<link rel="stylesheet" href="../styles/main.css">
<img src="../images/avatar.png" alt="Player avatar">

图片示例中的文件需已同步到资产目录。路径相对于引用它的 HTML 文件解析，见资源路径。

属性¶

属性写在开始标签内，通常采用 名称="值" 的形式。属性值统一使用引号，多个属性之间以空格分隔。

<div id="player-panel" class="panel compact">
  <span class="player-name">Player</span>
</div>

• id 标识当前文档中的特定元素，同一文档内应保持唯一。
• class 为元素指定一个或多个类名，多个类名用空格分隔，可由多个元素共用。
• href、src 等属性引用外部文件或资源。

对应的 CSS 选择器示例：

#player-panel {
  padding: 24px;
}

.player-name {
  color: #55b7ff;
}

#player-panel 匹配具有相应 id 的元素，.player-name 匹配具有相应类名的元素。HTML 中不需要在 id 或 class 的值前添加 # 或 .。

文本与特殊字符¶

文字直接写在元素内部。需要在文字中显示 < 或 & 等具有 HTML 语法含义的字符时，使用字符引用：

<p>Health &lt; 100</p>
<p>Weapons &amp; Armor</p>

这两行分别显示 Health < 100 和 Weapons & Armor。常用写法包括 <（<）、>（>）、&（&）和 "（双引号）。

默认的 HTML 空白处理会合并连续空格和换行。不要依靠源文件中的空格数量或空行进行排版；段落、间距与换行方式应通过合适的元素和 CSS 设置。

注释使用 <!-- ... -->，不作为页面文字显示：

<!-- Player summary -->
<p>Level 1</p>

元素嵌套与页面组织¶

先按内容关系分组，再为需要独立布局或样式的区域设置类名。例如：

<main class="player-panel">
  <div class="player-summary">
    <h1 class="player-name">Player</h1>
    <p class="player-level">Level 1</p>
  </div>
  <div class="player-actions">
    <button>View inventory</button>
  </div>
</main>

player-summary 与 player-actions 是同级区域，分别包含信息和操作。保持开始、结束标签正确配对，避免交叉嵌套；例如，不应将 div 等块级内容放入 p 元素中。

与数据绑定的关系¶

普通 HTML 可以用于静态界面。需要显示业务数据、按条件显示元素或重复生成列表时，再使用 Markup UI 的绑定语法。绑定声明依附于现有文档结构，不需要另建一套 HTML 文档。

相关说明：数据绑定概述、条件绑定。