十二、HTML 标签综合实例

114 阅读1分钟

1. 学生信息表

<table border="1" width="300px" height="60px">
        <caption>
            <h3>学生信息表</h3>
        </caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>课程</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>01</td>
            <td rowspan="2">张三</td>
            <td>语文</td>
            <td>98</td>
        </tr>
        <tr>
            <td>02</td>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td>综合</td>
            <td colspan="3">优秀</td>
        </tr>
    </table>

image.png

2. 表单

<body>
    <div>
        <h2>岁月不败美人</h2>
        <hr>
    </div>
    <form>
        <div>
            昵称: <input type="text" placeholder="请输入昵称">
        </div>
        <br>
        <div>
            性别:<input type="radio" id="man"><label for="man"></label>
            <label><input type="radio" checked></label>
        </div>
        <br>
        <div>
            家庭住址:
            <select>
                <option>北京</option>
                <option>湖南</option>
                <option selected>西安</option>
            </select>
        </div>
        <br>
        <div>
            爱好:
            <label><input type="checkbox" checked>跳舞</label>
            <label><input type="checkbox">阅读</label>
            <label><input type="checkbox" checked>唱歌</label>
            <label><input type="checkbox">书法</label>
        </div>
        <br>
        <div>
            个人简介:
            <br>
            <br>
            <textarea cols="50" rows="10"></textarea>
        </div>
        <br>
        <div>
            <h3>已读书籍</h3>
            <ol>
                <li>图解微行为</li>
                <li>山海经</li>
                <li>狂飙等</li>
            </ol>
        </div>
        <br>
        <button type="submit">免费注册</button>
        <button type="reset">重置</button>
    </form>
</body>

image.png