使用HTML创建表单
给表单加样式，不改变字段含义
先看一条CSS规则：选择器找到元素，花括号内写“属性: 值”。
<style>
label { display: block; margin-top: 12px; }
input { font: inherit; padding: 8px; border: 1px solid #64748b; }
input:focus-visible { outline: 3px solid #2563eb; }
</style>
<label for="nickname">报名昵称</label>
<input id="nickname" name="nickname" type="text">| 规则 | 本例作用 |
|---|---|
| label { display: block; } | 标签单独占一行；不是HTML语义发生改变。 |
| padding / border | 增加内部空间并明确控件边界。 |
| font: inherit | 继承外层字体，保持控件文字协调。 |
| :focus-visible | 在需要可见焦点提示时突出当前位置，如键盘操作。 |
CSS改善外观，不能代替label、name或required。完整选择器与盒子模型在后续课系统学习。