HTML 教程
最简单的起步方式：复制带有 Lily 类名钩子的语义化 HTML，加一份样式表，然后发布。纯文件，凡是能运行 HTML 的地方都能用。
你将构建什么
一个小型联系表单——带标签的输入框、提交按钮，以及真实的键盘和屏幕阅读器行为——先是不带样式的版本，再加上样式，大约 10 分钟完成。
开始之前
你只需要一个浏览器和一个文本编辑器。仅此而已。（git 有助于获取组件文件，但你也可以在浏览器里从 GitHub 上复制它们。）
第 1 步——获取代码
git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless
每个组件都是 components/ 中的一个独立文件——
button.html、text-input.html，依此类推——文件头部的注释说明了它的 HTML 标签、类名钩子、键盘行为和无障碍约定。这些文件就是组件库——复制你需要的，直接开始即可。
第 2 步——你的第一个组件
打开 components/button.html，或者直接写出标记——类名钩子就是约定：
<button class="button" type="button">
Save
</button>
因为它是真正的 <button>，键盘焦点、Enter 和 Space 激活，以及隐含的按钮角色都已经是正确的。
第 3 步——组合一个小表单
<form class="form">
<div class="field">
<label class="label" for="name">Full name</label>
<input class="text-input" type="text" id="name" name="name" required />
</div>
<div class="field">
<label class="label" for="email">Email</label>
<input class="email-input" type="email" id="email" name="email" required />
</div>
<button class="button" type="submit">Save</button>
</form>
请注意这个模式：每个控件都关联它的 <label for>，使用最具体的输入类型，并且恰好带有一个 kebab-case 类名钩子。
检查你的成果：在浏览器中打开页面。它看起来很朴素——这正是预期：样式还在后面。按下 Tab：焦点会依次经过每个控件，标签会被朗读，提交也能正常工作。行为已经完成；外观由你决定，这就是下一步。
第 4 步——添加样式
针对这些钩子编写 CSS：
.button {
background: #2563eb;
color: #fff;
padding: 0.75rem 1.5rem;
border: 0;
border-radius: 0.5rem;
}
.text-input,
.email-input {
padding: 0.5rem 0.75rem;
border: 2px solid #6b7280;
border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }或者完全不用手写 CSS——链接 45 套现成主题之一，同样的标记就会焕然一新：
<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />第 5 步——进一步探索
- 仓库的测试在真实浏览器中运行：
pnpm install && pnpm test（WebDriverIO）。 - 每个组件都有 Storybook：
pnpm run storybook。 - HTML+CSS+JS 示例应用展示全部 571 个组件，带样式、可搜索并有演示。