Java第二十二天（html表单标签和css）

迷南。 2022-10-02 00:53 150阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

1.html表单标签

![cb1813e1d98dea9923c86de66648b9b5a8c.jpg][]

![8948d8827c7c38fca9cab19ea73a2a0354c.jpg][]

![a23b174dc3b62385808b80a79847f64f42c.jpg][]

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>注册表单</title>  
    </head>  
    <body>  
          
        <form action="\#" method="get">  
              
            隐藏字段：<input type="hidden" name="id" />  
            姓名：<input type="text" name="username"   
                size="40px" required="required" maxlength="5" placeholder="请输入中文用户名"/>  
            <br/>  
            密码：<input type="password" name="password"   
                size="40px"required="required" maxlength="16" placeholder="请设置密码"/>  
            <br/>  
            确认密码：<input type="password" name="repassword"   
                size="40px"required="required" maxlength="16" />  
            <br/>  
              
            性别：<input type="radio" name="sex"  value="boy" checked="checked"/>男  
                <input type="radio" name="sex"  value="girl"/>女  
            <br/>  
              
            爱好：<input type="checkbox" name="hobbies"  value="运动"/>运动  
            <input type="checkbox" name="hobbies"  value="美食"/ checked="checked">美食  
            <input type="checkbox" name="hobbies"  value="美妆"/>美妆  
            <input type="checkbox" name="hobbies"  value="电影"/>电影  
            <input type="checkbox" name="hobbies"  value="旅游"/>旅游  
            <input type="checkbox" name="hobbies"  value="摄影"/>摄影  
            <input type="checkbox" name="hobbies"  value="唱歌"/>唱歌  
            <br/>  
            头像：<input type="file" /><br/>  
              
            籍贯：<select name="province">  
                <option>-请选择-</option>  
                <option value="北京">北京</option>  
                  
                <option value="上海" selected="selected">上海</option>  
                <option value="湖北">湖北</option>  
                <option value="安徽">安徽</option>  
                <option value="河南">河南</option>  
            </select><br/>  
              
            自我介绍：<textarea placeholder="请输入内容" name="自我介绍"></textarea><br/>  
              
            普通按钮：<input type="button" value="" />  
            重置：<input type="reset" name="一键重置"/>  
              
            <input type="submit" value="提交表单"/>  
        </form>  
    </body>  
</html>

2.html和css

span和div的区别

![4ba280df8a73457117b6c5fc4e528c5cb05.jpg][]

![07c2bd96cd8ccc934dd4b24b55e3488115e.jpg][]

实际使用中注意区分div和span的不同

![196b74910575ae0314edeef937bb2e6f664.jpg][]

![bb78d9a99a021e772ab6f3e4d6bc7f1fc68.jpg][]

<!DOCTYPE html>  
<html>

<head>  
        <meta charset="UTF-8">  
        <title>某某官网首页</title>  
        <style type="text/css">  
            \#top \{  
                background-color: black;  
                width: 1509px;  
                height: 598px;  
                margin: auto;  
            \}  
              
            \#top1 \{  
                  
                width: 1508px;  
                height: 90px;  
                float: left;  
            \}  
              
            .top-s \{  
                padding-top: calc(10px);  
                text-align: center;  
                  
                width: 500px;  
                height: 79px;  
                float: left;  
            \}  
              
            \#top2 \{  
                  
                width: 1508px;  
                height: 402px;  
                float: left;  
            \}  
              
            \#top2\_left \{  
                  
                width: 1125px;  
                height: 400px;  
                float: left;  
            \}  
              
            \#top2\_right \{  
                  
                width: 375px;  
                height: 400px;  
                float: left;  
            \}  
              
            \#top3 \{  
                  
                width: 1508px;  
                height: 95px;  
                float: left;  
            \}  
              
            .top3\_s \{  
                padding-top: calc(10px);  
                text-align: center;  
                  
                width: 249px;  
                height: 84px;  
                float: left;  
            \}  
            ul li\{  
                display: inline;  
                font-size: calc(4);  
                font: "微软雅黑";  
                color: lightgrey;  
            \}  
        </style>  
    </head>

</html>

转载于:https://my.oschina.net/u/4110331/blog/3058488

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/90cc2efa06784fe48d42add3307384b9.png
[cb1813e1d98dea9923c86de66648b9b5a8c.jpg]: /images/20220113/1ca626c2a263445cb04b8e77efbd0c71.png
[8948d8827c7c38fca9cab19ea73a2a0354c.jpg]: /images/20220113/8bfa835b07d847b3986dcc252750cbc3.png
[a23b174dc3b62385808b80a79847f64f42c.jpg]: /images/20220113/ea4d99f1c285433db96bb0b3c123d4da.png
[4ba280df8a73457117b6c5fc4e528c5cb05.jpg]: /images/20220113/bac1780f3d5646b7bfc156121d3ac536.png
[07c2bd96cd8ccc934dd4b24b55e3488115e.jpg]: /images/20220113/e1795df9cbde4b6592bda7f99cc3076c.png
[196b74910575ae0314edeef937bb2e6f664.jpg]: /images/20220113/aa998bbcb9824416b4da9d44d31cd4ab.png
[bb78d9a99a021e772ab6f3e4d6bc7f1fc68.jpg]: /images/20220113/21c96319d401414faa1fc9da1b67dfbd.png