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 个组件，带样式、可搜索并有演示。