HTML与CSS学习-c

最新推荐文章于 2021-02-21 16:46:21 发布

陈湛ans

最新推荐文章于 2021-02-21 16:46:21 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/qq_43086138/article/details/104931061

版权

学习课程：是黑马程序员前端入门视频教程 HTML5+CSS3-简单有趣好玩-pink老师

主要内容这位老哥都记录下来了，写的很好，正好当笔记看了，就不重复在写了。主要是记录学习过程。
HTML与CSS学习

https://blog.csdn.net/weixin_46170034/category_9694451.html

demo3学习
主要记了HTML里的表格标签，列表标签和表单标签
自己动手做了一遍。

效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>及时当勉励，岁月不待人</h1>
    <form>
    <table align="left" border="0">
        <!-- 第一行 -->
        <tr>
            <td>性别</td>
            <td><input type="radio" name="sex" id="man"><label for="man"><img src="nan.png" width="20"/>男</label>
                <input type="radio" name="sex" id="nv" ><label for="nv"><img src="nv.png" width="20"/>女</label></td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                <option>--选择年份--</option>
                <option>1999</option>
                <option>2000</option>
                <option>2001</option>
              </select>
            
                <select>
                <option>--选择月份--</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
              </select>
            
                <select>
                <option>--选择日--</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
              </select>
            </td>
        </tr>

        <!-- 第3行 -->
        <tr>
            <td>所在地区</td>
            <td> <input type="text" value="北京思密达"></td>
        </tr>

        <!-- 第4行 -->
        <tr>
            <td>婚姻状况</td>
            <td><input type="radio" name="hunyin" id="weihun"><label for="weihun">未婚</label>
                <input type="radio" name="hunyin" id="yihun"><label for="yihun">已婚</label>
                <input type="radio" name="hunyin" id="lihun"><label for="lihun">离婚</label></td>
        </tr>

        <!-- 第5行 -->
        <tr>
            <td>学历</td>
            <td> <input type="text" value="幼儿园"></td>
        </tr>

        <!-- 第6行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
            <input type="checkbox" name="lx">妩媚的    
            <input type="checkbox" name="lx">可爱的
            <input type="checkbox" name="lx">小鲜肉
            <input type="checkbox" name="lx">老腊肉
            <input type="checkbox" name="lx">都喜欢
            </td>
        </tr>
         <!-- 第7行 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <!-- <input type="text" value="自我介绍"> -->
                <textarea>自我介绍 </textarea>
            </td>
        </tr>
         <!-- 第8行 -->
        <tr>
            <!-- 多加的这一对td标签使得下面的内容与第二列表对其 -->
            <td></td>
            <!-- <td><input type="button" value="免费注册"></td>这是提交按钮可不是button，错了！！！！！注意 -->
            <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包起来，不然会跑到上面 -->
        <tr>
            <td></td>
            <td>
            <h2>我承诺</h2>
            <ul>
                <li> 年满18周岁，未婚</li>
                <li> 抱着严肃的态度</li>
                <li> 认真寻找另一半</li>
            </ul></td>
        </tr>
</table>
</form>


</body>
</html>

陈湛ans

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS学习-c

学习课程：是黑马程序员前端入门视频教程 HTML5+CSS3-简单有趣好玩-pink老师主要内容这位老哥都记录下来了，写的很好，正好当笔记看了，就不重复在写了。主要是记录学习过程。HTML与CSS学习https://blog.csdn.net/weixin_46170034/category_9694451.html...
复制链接

扫一扫