前端学习日志-day2

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 265 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #html5

前端同时被 3 个专栏收录

22 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

学习

14 篇文章

订阅专栏

一些本人的碎碎念

因为看病耽误了一天，今天才上线学，今天学的内容的pink老师的h5基础篇下篇，对h5有了大概了解。预计明天再写一些h5基础页面代码回顾这两天学习的内容，后天开css。

有时候光看代码能看懂，自己写的时候就发现部分问题，希望之后学习的途中好好记录。

之后会发一些今天写的实战页面代码。

实战代码

先听了pink老师说的页码的具体结构：

第一部分：小标题，采用h4

第二部分：大框采用表格标签（说真的，还真没想到能这样使）

每行的第一个单元格采用文本或无，第二个单元格有表单标签（偏多）、最后一个单元格采用无序列表。

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-注册页面</title>
</head>

<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="500">
        <!-- 第一行 -->
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="sex" checked="checked" id="nan"><img src="images/man.jpg"><label
                    for="nan">男</label>
                <input type="radio" name="sex" id="nv"><img src="images/women.jpg"><label for="nv">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>
                生日：
            </td>
            <td>
                <select>
                    <option name="year" selected="selected">-请输入年-</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                </select>
                <select>
                    <option name="mouth" selected="selected">-请输入月-</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select>
                    <option name="day" selected="selected">-请输入日-</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>
                所在地区
            </td>
            <td>
                <input type="text" name="local" value="北京">
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>
                婚姻状况
            </td>
            <td>
                <input type="radio" name="marry" checked="checked">未婚
                <input type="radio" name="marry">已婚
                <input type="radio" name="marry">离婚
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>
                学历
            </td>
            <td>
                <input type="text" name="edu" value="博士">
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>
                喜欢的类型
            </td>
            <td>
                <input type="checkbox" name="type">妩媚的
                <input type="checkbox" name="type">可爱的
                <input type="checkbox" name="type">小鲜肉
                <input type="checkbox" name="type">老腊肉
                <input type="checkbox" name="type">都喜欢
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>
                自我介绍
            </td>
            <td>
                <textarea name="introduce" rows="2" cols="20">自我介绍
                </textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" name="zhuce" value="免费注册">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="argee" checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>

</html>

实现结果图：（封面也有）