表格与表单 - HTML & CSS 基础

← 返回课程HTML & CSS 基础 › 第 4 关

进度 0%

第 4 关：表格与表单

HTML/CSS入门

📖 本课目标

本关属于《HTML & CSS 基础》第 4 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

表格与表单
创建数据展示和用户输入界面

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 HTML/CSS，浏览器内无法真正执行该语言。当前「运行」输出为演示结果，请在本地环境中编译运行以验证代码。

main.pytest.py

# 表格与表单
# 创建数据展示和用户输入界面

def create_table(headers, rows):
    html = '<table border="1">\n  <thead>\n    <tr>\n'
    for h in headers:
        html += f'      <th>{h}</th>\n'
    html += '    </tr>\n  </thead>\n  <tbody>\n'
    for row in rows:
        html += '    <tr>\n'
        for cell in row:
            html += f'      <td>{cell}</td>\n'
        html += '    </tr>\n'
    html += '  </tbody>\n</table>'
    return html

# 成绩表格
print("=== 成绩表 ===")
table = create_table(
    ["姓名", "语文", "数学", "英语", "平均分"],
    [
        ["小明", "92", "95", "88", "91.7"],
        ["小红", "88", "90", "95", "91.0"],
        ["小刚", "85", "92", "87", "88.0"],
    ]
)
print(table)

# 登录表单
print("\n=== 登录表单 ===")
form = """
<form action="/login" method="POST">
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" placeholder="请输入密码" required>
  
  <label>
    <input type="checkbox" name="remember"> 记住我
  </label>
  
  <button type="submit">登录</button>
</form>
"""
print(form)

# 常用 input 类型
print("--- 常用 input 类型 ---")
types = ["text", "email", "password", "number", "date", "color", "file", "range"]
for t in types:
    print(f'  <input type="{t}">')

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 4 关：表格与表单

HTML/CSS · 入门 · 《HTML & CSS 基础》

表格与表单
创建数据展示和用户输入界面

本关为 HTML/CSS，浏览器无法真正编译运行，请在本地环境验证代码。