HTML 和 CSS 怎么入门？用报名页面练布局与表单

HTML 和 CSS 入门可以从一张报名页面开始：先用 HTML 表达内容，再用 CSS 安排布局，最后检查窄屏和表单行为。你可能已经记住很多标签，却不知道怎样把它们组织成一个能用的页面。原因通常是练习只停留在单个属性，没有连接到一个完整任务。

一张报名页面练结构、布局与输入

本文做一张学习活动报名页，包含介绍卡片、姓名输入和课程选择。示例使用浏览器原生功能，无需框架或构建工具；保存为 index.html 就能打开。页面只在本地展示确认文字，没有把报名数据提交到服务器。完成后你会知道哪些事情属于结构、哪些属于样式，以及页面看起来正常后还要检查什么。

一、先画内容结构，再决定怎么排

HTML 像页面的内容清单，CSS 像清单在屏幕上的摆放方式。表单还是表单，不能为了颜色好看就用普通文字块代替按钮。先写标题、介绍、标签和输入框，再处理间距，结构出错时才不会被大量样式掩盖。

报名页面的核心路径是“读活动说明—填姓名—选方向—确认”。对应到元素，主标题用 h1，页面主体用 main，输入区域用 form，每个字段使用 label。label 的 for 与输入控件的 id 配对，点击文字时能把焦点交给控件。

你可以对照 HTML 教程熟悉这些标签。不要仅用占位提示替代标签：用户开始输入后占位文字会消失，而标签仍应告诉用户这一栏要填什么。

二、练习一：完整页面先能打开

将下面内容保存为 index.html。示例把结构、样式和少量交互放在同一文件，方便第一次运行；熟悉后再拆成独立文件。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>编程狮报名页面练习</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; font: 16px/1.6 sans-serif; background: #fff7f0; color: #30261f; }
  main { max-width: 900px; margin: 32px auto; padding: 0 20px; }
  .layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .card { min-width: 0; background: white; padding: 24px; border-radius: 16px; }
  h1 { font-size: 28px; }
  label { display: block; margin-top: 16px; }
  input, select, button { width: 100%; font: inherit; padding: 10px; }
  input, select { border: 1px solid #806a5a; border-radius: 6px; }
  button { margin-top: 20px; background: #a64200; color: white; border: 0; border-radius: 6px; }
  :focus-visible { outline: 3px solid #1266aa; outline-offset: 3px; }
  @media (max-width: 640px) { .layout { grid-template-columns: 1fr; } }
</style>
<main>
  <h1>选择你的第一个页面练习</h1>
  <div class="layout">
    <section class="card">
      <h2>活动说明</h2>
      <p>用一个本地报名表，练习结构、布局与输入检查。</p>
      <p>本页不联网提交，不收集真实报名数据。</p>
    </section>
    <form class="card" id="signup">
      <h2>填写练习资料</h2>
      <label for="name">姓名</label>
      <input id="name" name="name" required maxlength="30" autocomplete="name">
      <label for="track">学习方向</label>
      <select id="track" name="track">
        <option>HTML 结构</option>
        <option>CSS 布局</option>
      </select>
      <button type="submit">确认练习</button>
      <p id="message" role="status"></p>
    </form>
  </div>
</main>
<script>
  const form = document.querySelector('#signup');
  const nameInput = document.querySelector('#name');
  const track = document.querySelector('#track');
  const message = document.querySelector('#message');
  nameInput.addEventListener('input', () => nameInput.setCustomValidity(''));
  form.addEventListener('submit', event => {
    event.preventDefault();
    const name = nameInput.value.trim();
    if (!name) {
      nameInput.setCustomValidity('请输入非空姓名');
      nameInput.reportValidity();
      return;
    }
    message.textContent = `${name}，你选择了 ${track.value}。`;
  });
</script>
</html>

打开后先不要改颜色，检查两个区域是否都有标题，姓名标签能否聚焦输入框，按钮是否位于表单内。把 CSS 暂时禁用，页面应仍有合理的阅读顺序。这能检验结构是否依赖视觉位置才能被理解。

三、练习二：理解布局为何能缩到手机宽度

宽屏时 layout 使用两列网格，两个 1fr 把可用空间平均分配。gap 提供列间距，外层 main 限制最大宽度。卡片不靠固定像素宽度撑开，所以整体可以随窗口缩放。

窄于六百四十像素时，媒体查询把网格改成一列。断点不是手机型号列表，而是页面两列开始拥挤的位置。你可以拖动浏览器窗口，观察文字什么时候难读，再决定项目是否需要别的断点。

box-sizing 设为 border-box，使元素声明的宽度包含内边距与边框。输入控件宽度是父容器可用宽度，不会再因 padding 多出一截。min-width 为零则允许网格项目在受限空间内收缩，避免某些长内容撑破列宽。

相关属性可以结合 CSS 教程阅读。不要同时用大量绝对定位和手工偏移拼页面；窗口一缩小，这些位置往往没有共同的约束关系。

检查宽度	预期布局	重点观察
三百二十像素	一列	页面无横向滚动
八百像素	两列	卡片与表单不重叠
放大文字后	内容自然增高	按钮与提示不被裁切

四、练习三：表单能填写，还要能拒绝无效输入

required 会阻止真正的空字符串提交，但一串空格可能仍被当作有内容。因此示例在提交时 trim，去除首尾空白，再检查是否为空。失败时设置自定义提示，用户再次输入后清掉旧提示，避免已经修正的数据仍被旧状态挡住。

submit 事件绑定在 form 上，用户点按钮和按回车都能走同一条处理路径。preventDefault 阻止浏览器默认提交，本例才会停留在本地页面显示确认文字。它并不是“阻止事件冒泡”的替代方法。

确认信息使用 textContent，把输入作为文本展示。姓名中即使包含尖括号，也不应被当作 HTML 解释。这里仅完成浏览器端练习；如果未来接入服务器，服务端还必须再次验证输入，不能把浏览器校验当成可信边界。

最后用键盘 Tab 逐个移动焦点。焦点框应清晰可见，顺序应与视觉阅读顺序一致。不要为了视觉简洁删掉 outline 而不给替代样式；鼠标能点到，不等于键盘用户也能顺利完成表单。

从可读内容到可操作页面：本地确认 ≠ 服务端保存；真实接入后仍需服务端校验

总结

在开发者工具中选中姓名输入框，观察盒模型面板的内容宽度、内边距和边框。临时取消 border-box，再比较控件右边缘与卡片内容区，能直观看到宽度计算为什么影响溢出。修改样式只是实验，完成后恢复原值，不要把调试状态当成最终页面。

还可以把活动说明改成长段文字。两张卡片高度可以不同，不应该依赖给所有区域写死相同高度来对齐。文字变多时容器应随内容伸展，表单确认提示出现后也应把下面的内容向下推。如果文字被遮住，优先检查固定高度、隐藏溢出或绝对定位，而不是缩小字号掩盖问题。

HTML 和 CSS 的配合可以从这张报名页看清：HTML 决定内容与控件关系，CSS 决定布局和可读性，少量 JavaScript 补充输入规则和本地反馈。三部分各司其职，修改时才能知道该到哪里找问题。

你的下一步练习可以是增加一个邮箱字段。先补标签与合适的输入类型，再检查窄屏布局，最后测试空值与正常值。不要一开始就接后台；先让结构、响应式布局和键盘操作形成完整闭环。

延伸学习

HTML 速查手册可用于核对标签与属性。
HTML 与 CSS 基础实战适合继续练习页面结构与布局组合。
HTML5 表单控件说明可补充表单属性的使用场景。

常见问题

Q：为什么打开页面后没有联网提交？

这是本地交互示例，提交事件被拦截后只写入页面文字。接入真实服务需要设计接口、处理错误状态，并在服务端验证数据。

Q：把断点写成六百四十像素适用于所有页面吗？

不适用。它只针对这张两栏页面。内容长度、字体和卡片数量改变后，应在实际拥挤的位置重新选择断点。

Q：表单验证通过能证明数据安全吗？

不能。浏览器检查帮助用户及时发现输入问题，但请求可以绕过页面发出。服务端仍需按自己的规则检查字段类型、长度与权限。

技术依据：MDN 表单验证说明。