其他分享
首页 > 其他分享> > HTML(Basic) Chapter2(Pink) 综合案例

HTML(Basic) Chapter2(Pink) 综合案例

作者：互联网

文章目录

HTML图像标签示例

功能：利用之前所学的所有表格表单的知识，做一个综合的用户信息收集表

文件内部目录

1

HTML源代码（demo.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- crtl+k可以直接折叠 -->

    <h4>青春不常在，抓紧谈恋爱</h4>
    
    <table width = "500">
        <tr>
            <!-- 第一行 -->
            <td>性别:</td>
            <td>
                
                <label for="nan"><img src="images/man.jpg"> 男</label>
                <input type="radio" name="sex" id="nan">

                <label for="nv"><img src="images/women.jpg"> 女</label>
                <input type="radio" name="sex" id= "nv">

            </td>
        </tr>

        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                </select>

                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>

                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </td>
        </tr>

        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" 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" value="博士后"></td>
        </tr>

        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love">  可爱的
                <input type="checkbox" name="love">  小鲜肉
                <input type="checkbox" name="love">  老腊肉
                <input type="checkbox" name="love">  小萝莉
                <input type="checkbox" name="love">  都喜欢
            </td>
        </tr>

        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介
                </textarea>
            </td>
        </tr>

        <!-- 第八行 -->
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>

         <!-- 第九行 -->
         <tr>
            <td></td>
            <td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
        </tr>

        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>

        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁，单身</li>
                    <li>抱着严肃认真的态度</li>
                    <li>真诚地寻找另一半</li>
                </ul>
            </td>
        </tr>


    </table>

</body>
</html>

最终效果

最终效果

写在最后

注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程 这一课程的学习记录，主要供自己的学习分享

各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！ ＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知

标签：Pink,示例,--,demo,html,Chapter2,HTML,源代码
来源： https://blog.csdn.net/LeungSr/article/details/118710653