欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

笔记-JavaWeb学习之旅6

程序员文章站 2022-06-19 16:47:49
表格标签: table:定义表格 width :宽度 border:边框 cellpadding:定义内容和单元格的距离了 cellspacing:定义单元格之间的距离 bgcolor:背景色 tr:定义行 有属性可以定义背景色,对齐方式等 td:定义单元格 colspan: 合并列 rowspan ......
表格标签:

table:定义表格

width :宽度

border:边框

cellpadding:定义内容和单元格的距离了

cellspacing:定义单元格之间的距离

bgcolor:背景色

tr:定义行 --- 有属性可以定义背景色,对齐方式等

td:定义单元格 -----colspan: 合并列 rowspan:合并行

th:定义表头单元格

: 表格标题

: 表示表格的头部分

:表示表格的体部分

: 表示表格的脚部分

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>表格标签</title>
</head>
<body>
    <!--borer边框-->
    <!--width 表格宽度-->
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#006400">
        <thead> <!--表示表格头部分,不会在页面中有任何的样式-->
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>

        <tbody><!--表示表格的身体部分-->
        <tr bgcolor="#b22222">
            <td>1</td>
            <td>小龙女</td>
            <td>100</td>
        </tr>
        </tbody>

        <tfoot>
        <tr>
            <td>2</td>
            <td>杨过</td>
            <td>50</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>
旅游网案列练习
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>旅游网</title>
</head>
<body>
    <table  width="100%" align="center">
        <!--第一行-->
        <tr>
            <td>
                <img src="tupian/image/top_banner.jpg" width="100%" alt="">
            </td>
        </tr>
        <!--第二行-->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td>
                            <img src="tupian/image/logo.jpg" alt="">
                        </td>

                        <td>
                            <img src="tupian/image/search.png" alt="">
                        </td>

                        <td>
                            <img src="tupian/image/hot_tel.jpg" alt="">
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
        <!--第三行-->
        <tr>
            <td>
                <table width="100%" align="center" bgcolor="#ffd700">
                    <tr align="center" height="45">
                        <td>
                            <a href="https://www.cnblogs.com/train99999/">首页</a>
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            酒店
                        </td>
                        <td>
                            香港车票
                        </td>
                        <td>
                            出境游
                        </td>
                        <td>
                            国内游
                        </td>
                        <td>
                            港澳游
                        </td>
                        <td>
                            报团定制
                        </td>
                        <td>
                            全球*行
                        </td>
                        <td>
                            收藏排行榜
                        </td>

                    </tr>
                </table>
            </td>
        </tr>
        <!--第四行-->
        <tr>
            <td>
                <img src="tupian/image/banner_3.jpg" alt="">
            </td>
        </tr>
        <!--第五行-->
        <tr>
            <td>
                <img src="tupian/image/icon_5.jpg" alt="">
                精选
                <hr color="#ffd700">
            </td>
        </tr>
        <!--第六行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td>
                            <img src="tupian/image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第七行-->
        <tr>
            <td>
                <img src="tupian/image/icon_6.jpg" alt="">
                国内游
                <hr color="#ffd700">
            </td>
        </tr>
        <!--第八行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="tupian/image/guonei_1.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>

                    <tr>

                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第九行-->
        <tr>
            <td>
                <img src="tupian/image/icon_7.jpg" alt="">
                *游
                <hr color="#ffd700">
            </td>
        </tr>
        <!--第十行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="tupian/image/jiangwai_1.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>

                    <tr>

                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第十一行-->
        <tr>
            <td>
                <img src="tupian/image/footer_service.png" width="100%">
            </td>
        </tr>
        <tr>
            <td align="center" bgcolor="#ffd700">
                <font color="gray" size="2">
                    嘻嘻嘻嘻嘻有限公司
                    版权所有copyright 2006-2019&copy;,all right reserverd 苏icp备16007882
                </font>
            </td>
        </tr>
    </table>
</body>
</html>

笔记-JavaWeb学习之旅6

html标签:表单标签

表单:用于采集用户输入的数据,用于和服务器进行交互

from :用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围

from标签有两个属性:

action--指定提交数据的url,

method:指定提交的方式,提交方式有七种,有两种比较常用,一个是get,一个是post,

get:请求参数会在地址栏中显示,请求参数大小有限制,不安全

post:请求参数不会在地址栏中显示,请求参数大小无限制,安全

表单中的数据要想被提交,必须指定name属性

表单项标签:
  1. input:可以通过type属性值,改变元素展示的样式

    type属性:

    text:文本输入框,type属性的默认值

    password:密码输入框,指定该属性时会隐藏输入的文本

    radio:单选框,要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样,一般会个每一个单选框提供value属性,指定其被选中后提交的值,checked属性,可以指定默认值

    checkbox:复选框,一般会给每一个单选框提供value属性,指定被选中后提交的值,checked属性,可以指定默认值

    hidden:隐藏域

    按钮:submit(提交按钮,可以提交表单),button(普通按钮),image(图片提交按钮)

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>表单项标签</title>
    </head>
    <body>
        <form>
            用户名:<input type="text" name="username" placeholder="请输入用户名"><br>
            密码:<input type="password" name="password"><br>
            性别:<input type="radio" name="gender" value="male"> 男
                <input type="radio" name="gender" value="female">女<br>
            爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
                <input type="checkbox" name="hobby" value="java"> java
                <input type="checkbox" name="hobby" value="game"> 游戏
                <br>
            图片:<input type="file" name="file"><br>
            生日:<input type="datetime-local" name="birthday"><br>
            邮箱:<input type="email" name="email"><br>
            <input type="submit" value="登录">
    
    
        </form>
    </body>
    </html>
    笔记-JavaWeb学习之旅6

笔记-JavaWeb学习之旅6

注册案例练习
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
            <td><label for="username">用户名</label></td>
            <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="username" id="password"></td>
            </tr>
            <tr>
                <td><label for="email">email</label></td>
                <td><input type="email" name="username" id="email"></td>
            </tr>
            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="username" id="name"></td>
            </tr>
            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="username" id="tel"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="gender"  value="male">男
                    <input type="radio" name="gender"  value="female">女</td>
            </tr>
            <tr>
                <td><lable for="date">出生年月</lable></td>
                <td><input type="date" name="date" id="date"></td>
            </tr>
            <tr>
                <td><lable for="checkcode">验证码</lable></td>
                <td><input type="text" name="date" id="checkcode">
                    <img src="verify_code.jpg">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>

        </table>
    </form>
</body>
</html>
2.select:下拉列表

子元素:option,指定列表项

3.textarea:文本域

cols:指定列数,每一行有多少个字符

rows:默认多少行

css:cascading style sheets 层叠样式表

css的使用:css与html结合方式

1.内联样式:在标签内使用style属性指定css代码

2.内部样式:在head标签内,定义style标签,style标签的标签体内容就是css代码

3.外部样式:定义css资源文件,在head标签内,定义link标签,引入外部的资源文件

笔记-JavaWeb学习之旅6

笔记-JavaWeb学习之旅6

笔记-JavaWeb学习之旅6

css语法:

选择器{

​ 属性1:属性值2;

​ 属性2:属性值2;

​ ....

}

选择器:挑选具有相似特征的元素

选择器:

分类:

1.基础选择器

  1. id选择器:选择具体的id属性值的元素,
  2. 元素选择器:选择具有相同标签名称的元素
  3. 类选择器:选择具有相同的class属性值的选择器

2.扩展选择器

  1. 选择所有元素:*{}

  2. 并集选择器:选择器1,选择器2{}

  3. 子选择器:筛选选择器1元素下的选择器2元素 ----》选择器1 选择器2{}

  4. 父选择器:筛选选择器2的的父元素选择器1----》选择器1>选择器2{}

  5. 属性选择器:选择元素名称,属性名=属性值的元素----》属性名称[属性名="属性值"]

  6. 伪类选择器:选择一些元素具有的状态----》元素:状态{}

    状态:link:初始化状态 visited:被访问过的状态 active:正在访问的状态 hover;鼠标悬浮的状态

属性:
  1. 字体,文本:font-size;字体大小,color-文本颜色 text-align:对齐方式 line-height:行高
  2. 背景:background
  3. 边框:border
  4. 尺寸:width:宽度,height:高度
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        p{
            color:green;
            font-size:30px;
            text-align:center;
            line-height: 100px;

            border: 1px solid pink;
        }
        div{
            border: 1px solid;
            height: 200px;
            width: 200px;
            background: url("img/1_adam_4k.jpg" );
        }
    </style>
</head>
<body>
    <p>云想衣裳花想容</p>
    <div></div>
</body>
</html>
盒子模型

margin:外边距 padding:内边距

float:浮动(left,right)

css注册案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        *{
            margin:0px;
            padding: 0px;
            box-sizing:border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #eeeeee ;
            /*让div背景白色*/
            /*让div水平居中*/
            background: white;
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{

            float:left;
            margin:15px;
        }
        .rg_center{
            border:1px solid red;
            float: left;
            width:450px;

        }
        .rg_right{

            float: right;
        }
        .p_reg{
            color:#ffd026;
            font-size:20px;
        }
        .p_ur{
            color:#a6a6a6;
            font-size:20px;
        }
        .td_left{
            width:100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#tel,#name,#birthday,#checkcode{
            width:251px;
            height:32px;
            border:1px solid #a6a6a6;
            border-radius:5px;
            padding-left:10px
        }
        #btn_sub{
            width:150px;
            height:40px;
            background: #ffd026;
            border:1px solid;
        }
    </style>
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p class="p_reg">新用户注册</p>
            <p class="p_ur">user register</p>
        </div>

        <div class="rg_center">
            <table>
                <tr>
                    <td class="td_left"><label for="username">用户名</label></td>
                    <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                </tr>

                <tr>
                    <td class="td_left"><label for="password">密码</label></td>
                    <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                </tr>

                <tr>
                    <td class="td_left"><label for="email">email</label></td>
                    <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                </tr>

                <tr>
                    <td class="td_left"><label for="name">姓名</label></td>
                    <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                </tr>

                <tr>
                    <td class="td_left"><label for="tel">手机号</label></td>
                    <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                </tr>

                <tr>
                    <td class="td_left"><label>性别</label></td>
                    <td class="td_right">
                        <input type="radio" name="gender" value="male"> 男
                        <input type="radio" name="gender" value="female"> 女
                    </td>
                </tr>

                <tr>
                    <td class="td_left"><label for="birthday">出生日期</label></td>
                    <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                </tr>

                <tr>
                    <td class="td_left"><label for="checkcode" >验证码</label></td>
                    <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                        <img src="img/verify_code.jpg">
                    </td>
                </tr>


                <tr>
                    <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                </tr>
            </table>
        </div>

        <div class="rg_right">
            <p >已有账号?<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>

笔记-JavaWeb学习之旅6