JavaWeb第七天

软件架构和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="data: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="data: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="data:image/top_banner.jpg" alt="" align="center" width="100%"></td></tr><!--        第2行--><tr><td><table width="100%" align="center"><tr><td><img src="data:image/logo.jpg" alt=""></td><td><img src="data:image/search.png" alt=""></td><td><img src="data: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="data:image/banner_3.jpg" alt="" align="center" width="100%"></td></tr><!--        第5行--><tr><td><img src="data:image/icon_5.jpg" alt="">黑马精选<hr color="orange"></td></tr><!--        第6行--><tr><td><table width="95%" align="center"><tr><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;899</font></td><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;899</font></td><td><img src="data:image/jiangxuan_1.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;899</font></td><td><img src="data: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="data:image/icon_6.jpg" alt="">国内游<hr color="orange"></td></tr><!--        第8行--><tr><td><table width="95%" align="center" ><tr><td rowspan="2"><img src="data:image/guonei_1.jpg" alt="" height="108%"></td><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td></tr><tr><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td><td><img src="data:image/jiangxuan_2.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td><td><img src="data: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="data:image/icon_7.jpg" alt="">境外游<hr color="orange"></td></tr><!--        第10行--><tr><td><table width="95%" align="center" ><tr><td rowspan="2"><img src="data:image/jiangwai_1.jpg" alt="" height="103%"></td><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td></tr><tr><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td><td><img src="data:image/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店住宿+接送机）</p><font color="red">&yen;699</font></td><td><img src="data: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="data: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 指定提交的URLmethod 指定提交的方式 常用get/postget 请求参数会在地址栏中显示，会封装到请求行中请求参数大小有限制不太安全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（已选中）,要让服务器知道用户选中了哪一项要指定value3、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>