JavaWeb第七天

最新推荐文章于 2024-05-11 20:27:12 发布

Prayer96

最新推荐文章于 2024-05-11 20:27:12 发布

阅读量153

点赞数

分类专栏： JavaＷeb 文章标签： html javaweb 软件架构前端 html5

本文链接：https://blog.csdn.net/Prayer96/article/details/113874279

版权

JavaＷeb 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

软件架构和HTML

1、软件架构

JavaWeb
　　使用Java语言开发基于互联网的项目
软件架构
　　C/S Client/Server 客户端/服务器端
　　　　在用户本地有一个客户端程序，在远程有一个服务器端程序
　　　　如：QQ 迅雷
　　　　优点：用户体验好
　　　　缺点：开发安装部署维护麻烦
　　B/S Browser/Server 浏览器端/服务器端
　　　　只需要一个浏览器，用户通过不同的网址（URL），可以访问不同的服务器程序
　　　　如：QQ邮箱百度
　　　　优点：开发安装部署维护简单
　　　　　　　只需要开发服务器端不需要安装，有浏览器就可以访问服务器
　　　　　　　部署服务器就可以维护时也只需要修改服务器
　　　　缺点：如果应用过大，可能会导致用户的体验受到影响
　　　　　　　对硬件要求过高服务器内存硬盘带宽用户带宽。。。
B/S架构详解
　　资源分类
　　　　静态资源使用静态网页开发技术发布的资源
　　　　　　特点：所有用户访问，得到的结果是一样的
　　　　　　如：图片文本视频音频 HTML CSS JavaScript
　　　　　　如果用户访问的是静态资源，服务器会直接将静态资源发送给浏览器，
　　　　　　浏览器内置了静态资源的解析引擎，可以展示静态资源
　　　　动态资源使用动态网页开发技术发布的资源
　　　　　　特点：所有用户访问，得到的结果可能不一样
　　　　　　如：jsp/servlet php asp
　　　　　　如果用户请求的是动态资源，服务器会执行动态资源，
　　　　　　转换为静态资源，再将静态资源发送给浏览器
静态资源
　　HTML 用于搭建基础网页，展示页面内容
　　CSS 用于美化页面，布局页面
　　JavaScript 控制页面的元素，使页面有一些动态的效果

2、HTML

HTML Hyper Text Markup Language 超文本标记语言
概念
　　最基础的网页开发语言
　　超文本
　　　　使用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
　　　　（即一个网页通过超链接连着另一个网页，形成的网络结构）
　　标记语言
　　　　由标签构成的语言 <标签名称> 如HTML XML
　　　　不是编程语言，没有逻辑性，写上就会被执行
快速入门
　　语法
　　　　(1)HTML文档后缀名 .html或.htm
　　　　(2)标签分类
　　　　　　围堵标签有开始标签和结束标签
　　　　　　自闭合标签开始标签和结束标签在一起

　　　　(3)标签可以嵌套
　　　　　　需要正确嵌套
　　　　(4)在开始标签中可以定义属性，属性用键值对表示，
　　　　　　值需要用引号引起来，单双都可以，最好始终一致
　　　　(5)标签不区分大小写，建议小写
标签学习
文件标签构成html的最基本的标签
　　html html文档的根标签
　　head 头标签用于指定html文档的一些属性，还可以引入外部资源
　　title 标题标签
　　body 体标签
　　<!DOCTYPE html>声明该文档为html5文档
　　lang属性
　　　　表明该html文档使用的是什么语言，用来告诉浏览器，
　　　　浏览器会将该语言和本地浏览器的默认语言进行比较
　　　　判断是否要提示用户翻译网页
　　指定语言这句可以不写
　　　　en 英语 zh-cn 中文
　　meta属性指定字符集不写默认GBK 改为UTF-8才可以显示中文
文本标签和文本有关的标签
　　
　　<h1></h1>到<h6></h6> 标题标签字号越来越小加粗换行
　　<p> 段落标签段落结束会换行，且和下一部分的文字产生间隔
　　<br />换行标签 html里文字的换行不会显示时不会真正地换行，
　　　　只会被解析为一个空字符可以写为

　　<hr />
　　　　属性
　　　　　　color 颜色
　　　　　　width 宽度
　　　　　　size 高度
　　　　　　align 对齐方式
　　　　　　　　left 左对齐
　　　　　　　　right 右对齐
　　　　　　　　center 居中对齐
　　<b> 字体加粗
　　<i>斜体
　　<center> 居中标签
　　<font> 字体标签
　　　　属性
　　　　　　color 颜色
　　　　　　size 大小
　　　　　　face 字体
　　　　属性定义
　　　　　　color 颜色
　　　　　　　　英文单词 red green blue
　　　　　　　　rgb(红色值,绿色值,蓝色值) rgb(0,0,255)
　　　　　　　　十六进制 #红色值绿色值蓝色值 #00FF00
　　　　　　width 宽度
　　　　　　　　单位默认px（像素） width=“20”
　　　　　　　　使用占比 width=“20%”
图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!-- 图片加载失败显示alt的值 -->
    <!--    src一般用相对路径，即.开头的路径，./表示当前目录，image文件夹与当前的图片标签.html在同一级，-->
    <!--    则可以通过./image/***.img或image/***.img来找到图片，不写./默认就是当前目录-->
    <!--    ../表示上一级目录-->
    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="300" />
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <!-- 有序列表 ol li -->
    <!-- type属性指定序号样式 start属性指定序号起始位置-->
    <ol type="a" start="3">早上起床干的事情
        <li>睁眼</li>
        <li>穿衣服</li>
        <li>洗漱</li>
        <li>吃早餐</li>
    </ol>
    <!-- 无序列表 ul li -->
    <!-- type属性指定序号样式 圆点disc默认 方框square 圆圈circle start属性指定序号起始位置-->
    <ul type="circle">早上起床干的事情
        <li>睁眼</li>
        <li>穿衣服</li>
        <li>洗漱</li>
        <li>吃早餐</li>
    </ul>
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <!-- 超链接 -->
    <!-- href属性指定访问资源的URL（统一资源定位符），为空写* -->
    <!-- target属性指定打开资源的方式 默认_self在本页打开 _blank打开新页面 -->
    <a href="#">点击</a>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://mail.qq.com" target="_blank">qq邮箱</a>

    <!-- 打开本地资源 -->
    <a href="5_列表标签.html">列表标签</a>

    <!-- 打开本地安装的邮件客户端 收件人写为1023291266@qq.com -->
    <a href="mailto:1023291266@qq.com">联系我们</a>

    <!-- 与img标签结合使用 -->
    <a href="https://www.wechat.com"><img src="image/jiangxuan_1.jpg" /></a>
</body>
</html>

块标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
    <!-- 标签没有任何样式 可以与CSS一起使用 -->
    <!-- span 文本信息在一行显示 称为行内标签或内联标签 用于包裹文本信息 -->
    <span>今天</span>
    <span>明天</span>
    <!-- div 一个占满一行 块级标签 -->
    <div>今天</div>
    <div>明天</div>
</body>
</html>

语义化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 语义化标签没有任何样式，是HTML5中为了增加程序的可读性增加的标签，可以与CSS一起结合使用 -->
    <header>页面头部文本信息</header>
    <footer>页面尾部文本信息</footer>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--    HTML中的表格分为行和单元格，每行定义n个单元格-->
    <!--    table表格 tr行 td单元格 th表头-->
    <!--    cellpadding属性指定单元格内元素与单元格边缘的距离 0为元素顶着单元格
            cellspacing属性指定单元格间的距离 0为单元格之间的由两条合并为一条
            align属性指定表格的对齐方式 center为水平居于body中间-->
    <!--    thead tbody tfoot 表示表格的头身 脚部分 没有样式 增强程序可读性 便于与CSS结合使用-->
    <!--    rowspan属性合并行 colspan属性合并列 -->
    <table border="1" width="200" cellpadding="0" cellspacing="0" bgcolor="#a9a9a9" align="center">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>01</td>
                <td>张三</td>
                <td>18</td>
            </tr>
            <tr>
                <td>02</td>
                <td>李四</td>
                <td>19</td>
            </tr>
        </tbody>
        <tfoot align="center">
            <tr>
                <td>03</td>
                <td>王五</td>
                <td>20</td>
            </tr>
        </tfoot>
    </table>
    <hr />
    <table align="center" cellpadding="0" cellspacing="0" border="1" width="500" height="200">
        <caption>学生成绩表</caption>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody align="center">
                <tr>
                    <td>1</td>
                    <td>小龙女</td>
                    <td>女</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>杨过</td>
                    <td>男</td>
                    <td rowspan="2">90</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>金轮法王</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>总成绩</td>
                    <td colspan="3">190</td>
                </tr>
            </tbody>
    </table>
</body>
</html>

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合案例</title>
</head>
<body>
    <!--    使用table布局旅游网站首页-->
    <!--    如果一行只有一个单元格，则使用一个tr里一个td-->
    <!--    如果一行有多个单元格，则使用使用一个tr里一个td里嵌套一个table-->
    <table width="100%" align="center">
        <!--        第1行-->
        <tr>
            <td>
                <img src="image/top_banner.jpg" alt="" align="center" width="100%">
            </td>
        </tr>
        <!--        第2行-->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td>
                            <img src="image/logo.jpg" alt="">
                        </td>
                        <td>
                            <img src="image/search.png" alt="">
                        </td>
                        <td>
                            <img src="image/hotel_tel.png" alt="">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--        第3行-->
        <tr>
            <td>
                <table width="100%" align="center" bgcolor="orange" height="50">
                    <tr>
                        <td><a href="*">首页</a></td>
                        <td><a href="https://www.baidu.com"></a>门票</td>
                        <td><a href="*"></a>酒店</td>
                        <td><a href="*"></a>香港车票</td>
                        <td><a href="*"></a>出境游</td>
                        <td><a href="*"></a>国内游</td>
                        <td><a href="*"></a>港澳游</td>
                        <td><a href="*"></a>抱团定制</td>
                        <td><a href="*"></a>全球自由行</td>
                        <td><a href="*"></a>收藏排行榜</td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--        第4行-->
        <tr>
            <td>
                <img src="image/banner_3.jpg" alt="" align="center" width="100%">
            </td>
        </tr>
        <!--        第5行-->
        <tr>
            <td>
                <img src="image/icon_5.jpg" alt="">黑马精选
                <hr color="orange">
            </td>
        </tr>
        <!--        第6行-->
        <tr>
            <td>
                <table width="95%" align="center">
                    <tr>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--        第7行-->
        <tr>
            <td>
                <img src="image/icon_6.jpg" alt="">国内游
                <hr color="orange">
            </td>
        </tr>
        <!--        第8行-->
        <tr>
            <td>
                <table width="95%" align="center" >
                    <tr>
                        <td rowspan="2">
                            <img src="image/guonei_1.jpg" alt="" height="108%">
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--        第9行-->
        <tr>
            <td>
                <img src="image/icon_7.jpg" alt="">境外游
                <hr color="orange">
            </td>
        </tr>
        <!--        第10行-->
        <tr>
            <td>
                <table width="95%" align="center" >
                    <tr>
                        <td rowspan="2">
                            <img src="image/jiangwai_1.jpg" alt="" height="103%">
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--        第11行-->
        <tr>
            <td>
                <img src="image/footer_service.png" alt="" width="100%" align="center">
            </td>
        </tr>
        <!--        第12行-->
        <tr>
            <td align="center" bgcolor="orange" height="50">
                <font color="gray" size="2">
                    江苏传智播客教育技术股份有限公司 版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
                </font>
            </td>
        </tr>
    </table>
</body>
</html>

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--    表单标签用于收集用户输入数据，与服务器交互-->
    <!--    form标签 定义表单范围
            属性 action 指定提交的URL
                method 指定提交的方式 常用get/post
                    get 请求参数会在地址栏中显示，会封装到请求行中
                        请求参数大小有限制
                        不太安全
                    post 请求参数不会在地址栏中显示，会封装在请求体中
                         请求参数大小没有限制
                         比较安全
            注意：表单项中的数据要想被提交，必须指定表单项的name属性 name属性的值会被拼接到提交的URL中
    -->
    <!--    input标签 输入框
                属性 type 指定元素展示的样式
                        text文本输入框
                        password 密码输入框
                        radio 单选框
                        checkbox 复选框
                        file 文件选择框
                        hidden 隐藏域
                        submit 提交按钮
                        button 普通按钮
                        image 图片提交按钮 图片作为按钮背景 src属性指定图片路径
                        color 取色器
                        tel 手机号 只能用于移动端 点击后弹出数字键盘
            select 下拉列表
            textarea 文本域 多行文本
    -->
    <form action="#" method="get">
        <!--用户名 密码 这几个字使用label标签包裹，for属性与输入框id对应 指定输入框的文字描述信息 点击用户名之后光标会定位到输入框中-->
        <!--placeholder属性中的值是输入框中的提示信息 输入值之后会消失-->
        <label for="username">用户名：</label> <input type="text" name="username" placeholder="请输入用户名" id="username"><br>
        <label for="password">密码：</label><input type="password" name="password" placeholder="请输入密码" id="password"><br>
        <!--注意：1、要想让多个单选框实现单选或多个复选框实现复选，name要一致
                 2、仅仅指定name=gender提交的数据只有gender=on（已选中）,
                    要让服务器知道用户选中了哪一项要指定value
                 3、checked="checked"或checked默认选中
        -->
        性别：<input type="radio" name="gender" value="man">男
             <input type="radio" name="gender" value="woman" checked>女 <br>
        爱好：<input type="checkbox" name="hobby" value="basketball">篮球
             <input type="checkbox" name="hobby" value="football" checked>足球
             <input type="checkbox" name="hobby" value="pingpong" checked>乒乓球 <br>
        头像：<input type="file" name="headimg"> <br>
        <!--隐藏域不会像输入框显示在页面上，但会提交其中的数据-->
        隐藏域：<input type="hidden" name="secret" value="1234567">
        <input type="submit" value="提交" name="submit">
        <input type="button" value="普通按钮" name="button">
        <input type="image" value="图片提交按钮" name="image" src="../../../JavaWeb/day08-css/img/regbtn.jpg"> <br>
        <!--不写name 取色器的颜色不会被提交-->
        取色器：<input type="color" name="color"> <br>
        生日：<input type="date" name="birth"> <br>
             <input type="datetime-local" name="day"> <br>
        <!--会对输入的邮箱做一些基本的正则化校验 如是否包含@-->
        邮箱：<input type="email" name="email"> <br>
        年龄：<input type="number" name="age"> <br>
        省份：<select name="province" id="province">
                <option value="">请选择</option>
                <option value="1" selected>福建</option>
                <option value="2">浙江</option>
                <option value="3">广东</option>
                <option value="4">江苏</option>
                <option value="5">江西</option>
                <!--这里value使用数字因为有些浏览器提交的数据不支持中文-->
             </select> <br>
        自我描述：<textarea name="describe" id="describe" cols="30" rows="10"></textarea>
    </form>

</body>
</html>

表单练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<body>
    <form action="#" method="get">
        <table border="1" cellspacing="0" cellpadding="0" width="500" height="400" align="center">
            <tbody align="center">
            <tr>
                <td>
                    <label for="username">用户名</label>
                </td>
                <td colspan="2">
                    <input type="text" name="username" id="username" placeholder="请输入用户名">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="username">用户名</label>
                </td>
                <td colspan="2">
                    <input type="password" name="password" id="password" placeholder="请输入密码">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="username">邮箱</label>
                </td>
                <td colspan="2">
                    <input type="email" name="email" id="email" placeholder="请输入邮箱">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="name">姓名</label>
                </td>
                <td colspan="2">
                    <input type="text" name="name" id="name" placeholder="请输入姓名">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="phone">手机号</label>
                </td>
                <td colspan="2">
                    <input type="number" name="phone" id="phone" placeholder="请输入手机号">
                </td>
            </tr>
            <tr>
                <td>
                    <label>性别</label>
                </td>
                <td colspan="2">
                    <input type="radio" name="gender" id="man" value="man" checked> 男
                    <input type="radio" name="gender" id="woman" value="woman"> 女
                </td>
            </tr>
            <tr>
                <td>
                    <label for="birthday">出生日期</label>
                </td>
                <td colspan="2">
                    <input type="date" name="birthday" id="birthday">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="checkcode">验证码</label>
                </td>
                <td>
                    <input type="text" name="checkcode" id="checkcode">
                </td>
                <td>
                    <img src="../../../JavaWeb/day08-css/img/verify_code.jpg" alt="">
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit" value="注册">
                </td>
            </tr>
            </tbody>

        </table>
    </form>
</body>
</html>