笔记-JavaWeb学习之旅6

程序员文章站 2022-03-06 21:07:31

表格标签： 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属性

表单项标签:

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

注册案例练习

<!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

css语法：

选择器{

属性1：属性值2；

属性2：属性值2；

....

}

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

选择器：

分类：

1.基础选择器

id选择器：选择具体的id属性值的元素，

元素选择器：选择具有相同标签名称的元素

类选择器：选择具有相同的class属性值的选择器

2.扩展选择器

选择所有元素：*{}

并集选择器：选择器1，选择器2{}

子选择器：筛选选择器1元素下的选择器2元素 ----》选择器1 选择器2{}

父选择器：筛选选择器2的的父元素选择器1----》选择器1>选择器2{}

属性选择器：选择元素名称，属性名=属性值的元素----》属性名称[属性名="属性值"]

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

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

属性：

字体，文本：font-size；字体大小，color-文本颜色 text-align：对齐方式 line-height：行高
背景：background
边框：border
尺寸：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

上一篇：骁龙865和骁龙765g哪个好

下一篇：红米10x和小米10青春版哪个好

笔记-JavaWeb学习之旅6

表格标签：

旅游网案列练习

html标签：表单标签

表单项标签:

input:可以通过type属性值，改变元素展示的样式

注册案例练习

2.select：下拉列表

3.textarea：文本域

css:cascading style sheets 层叠样式表

选择器：

属性：

盒子模型

es6学习笔记-proxy对象

C学习笔记（6）--- 共用体，位域深入

ES6学习笔记之正则表达式和字符串正则方法分析

Spring框架学习笔记（6）——阿里云服务器部署Spring Boot项目（jar包）

es6学习笔记之Async函数基本教程

MVC使用Memcache+Cookie解决分布式系统共享登录状态学习笔记6

Vue.js 学习笔记第6章表单与v-model

python 基础学习笔记（6）--函数（2）

pygame学习笔记（6）：完成一个简单的游戏

es6学习笔记之Async函数的使用示例

笔记-JavaWeb学习之旅6

表格标签：

旅游网案列练习

html标签：表单标签

表单项标签:

input:可以通过type属性值，改变元素展示的样式

注册案例练习

2.select：下拉列表

3.textarea：文本域

css:cascading style sheets 层叠样式表

选择器：

属性：

盒子模型

es6学习笔记-proxy对象

C学习笔记（6）--- 共用体，位域深入

ES6学习笔记之正则表达式和字符串正则方法分析

Spring框架学习笔记（6）——阿里云服务器部署Spring Boot项目（jar包）

es6学习笔记之Async函数基本教程

MVC使用Memcache+Cookie解决分布式系统共享登录状态学习笔记6

Vue.js 学习笔记 第6章 表单与v-model

python 基础学习笔记（6）--函数（2）

pygame学习笔记（6）：完成一个简单的游戏

es6学习笔记之Async函数的使用示例

Vue.js 学习笔记第6章表单与v-model