DAY02-HTML5列表表格表单




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 列表、表格和表单</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>HTML5 列表、表格和表单</h1>
 
    <!-- 无序列表 -->
    <h2>我的爱好:</h2>
    <ul>
        <li>足球</li>
        <li>游泳</li>
        <li>编程</li>
    </ul>
 
    <!-- 有序列表 -->
    <h2>菜单:</h2>
    <ol>
        <li>面包</li>
        <li>奶泡</li>
        <li>水果奶奶</li>
    </ol>
 
    <!-- 定义列表 -->
    <h2>词汇表:</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>级联样式表</dd>
    </dl>
 
    <!-- 表格 -->
    <h2>成绩单:</h2>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>数学</td>
            <td>95</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>语文</td>
            <td>85</td>
        </tr>
    </table>
 
    <!-- 表单 -->
    <h2>用户信息:</h2>
    <form action="">
        姓名: <input type="text" name="name"><br>
        密码: <input type="password" name="password"><br>
        年龄: <input type="number" name="age"><br>
        生日: <input type="date" name="birthday"><br>
        爱好: <input type="checkbox" name="hobby" value="football">足球
              <input type="checkbox" name="hobby" value="swimming">游泳<br>
        性别: <input type="radio" name="gender" value="male">男
              <input type="radio" name="gender" value="female">女<br>
        所在地: <select name="city">
                    <option value="shanghai">上海</option>
                    <option value="beijing">北京</option>
                    <option value="guangzhou">广州</option>
                </select><br>
        留言: <textarea name="message" rows="4" cols="50">
                </textarea><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

这段代码展示了如何在HTML5中创建列表（无序、有序和定义）、表格和表单。每个元素都有适当的语义化标签，并遵循了HTML5的规范。表单中包含了各种输入元素，如文本输入、密码输入、数字输入、日期选择、复选框、单选按钮、选择框和文本区域。这是学习Web开发的基础知识，对于初学者来说具有很好的教育价值。

DAY02-HTML5列表表格表单

评论已关闭

推荐阅读