HTML5作为现代网页开发的核心技术之一，已经广泛应用于各种类型的网页设计中，包括趣味调查表。本文将深入探讨HTML5在制作趣味调查表中的应用，并通过具体的源代码示例揭示其背后的奥秘。

HTML5基础结构

HTML5为网页开发提供了更加丰富的标签和元素，使得网页设计更加灵活和强大。以下是一个简单的HTML5文档结构，它构成了一个基本网页的框架。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>趣味调查表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>趣味调查表</h1>
    </header>
    <section>
        <form action="/submit-survey" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" required>
            
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" required>
            
            <label for="gender">性别：</label>
            <select id="gender" name="gender" required>
                <option value="male">男</option>
                <option value="female">女</option>
                <option value="other">其他</option>
            </select>
            
            <label for="hobby">爱好：</label>
            <input type="text" id="hobby" name="hobby" required>
            
            <input type="submit" value="提交">
        </form>
    </section>
    <footer>
        <p>感谢您的参与</p>
    </footer>
</body>
</html>

CSS样式设计

CSS用于美化网页，为HTML元素添加样式。以下是一个简单的CSS样式文件，用于定义调查表的外观。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em;
}

section {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

input[type="text"],
input[type="number"],
select {
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

input[type="submit"] {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #4cae4c;
}

JavaScript交互性

JavaScript用于增加网页的交互性。以下是一个简单的JavaScript脚本，用于在用户提交表单时进行简单的验证。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        var name = document.getElementById('name').value;
        var age = document.getElementById('age').value;
        if (name === '' || age === '') {
            alert('姓名和年龄不能为空！');
            event.preventDefault();
        }
    });
});

将上述代码保存为HTML文件、CSS文件和JavaScript文件，并确保它们位于同一目录下。在浏览器中打开HTML文件，你将看到一个完整的趣味调查表。

总结

通过上述示例，我们可以看到HTML5在制作趣味调查表中的应用。HTML5提供了丰富的标签和元素，CSS用于美化页面，而JavaScript则增加了交互性。这些技术的结合使得网页开发更加高效和有趣。