目录
1 web概念
JavaWeb：使用Java语言开发基于互联网的项目
软件架构：
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序 如：QQ，迅雷...
* 优点： 1. 用户体验好
* 缺点： 1. 开发、安装，部署，维护 麻烦
2. B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点： 1. 开发、安装，部署，维护 简单
* 缺点： 1. 如果应用过大，用户的体验可能会受到影响 2. 对硬件要求过高
B/S架构详解：
B/S架构资源分类：
1. 静态资源：使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源： 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
静态资源：
* HTML：用于搭建基础网页，展示页面的内容
* CSS：用于美化页面，布局页面
* JavaScript：控制页面的元素，让页面有一些动态的效果
2 HTML
Hyper Text Markup Language 超文本标记语言，是最基础的网页开发语言
- 超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
- 标记语言: 由标签构成的语言。<标签名称> 如 html，xml 标记语言不是编程语言
html文档后缀名 .html 或者 .htm
.HTML标签分为：围堵标签和自闭合标签
- 1. 围堵标签：有开始标签和结束标签。如 <html> </html>
- 2. 自闭合标签：开始标签和结束标签在一起。如 <br/>
在标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来，html的标签不区分大小写，但是建议使用小写。
3 常用特殊字符表
4 标签学习
4.1 文件标签
- html:html文档的根标签
- <!DOCTYPE html>：html5中定义该文档是html文档
- head：头标签。用于指定html文档的一些属性。引入外部的资源
- title：标题标签。
- body：体标签
4.2. 文本标签
- 注释：<!-- 注释内容 -->
- 标题标签 <h1> to <h6> * h1~h6:字体大小逐渐递减
- 段落标签 <p>
- 换行标签 <br>
- 展示一条水平线<hr>
属性：color：颜色 width：宽度 size：高度 align：对其方式 center：居中 left：左对齐 right：右对齐
- 字体加粗 <b>
- 字体斜体<i>
- 字体标签<font>
- 文本居中 <center>
属性： color：颜色 size：大小 face：字体
属性定义：
color： 1. 英文单词：red,green,blue 2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255) 3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
width： 1. 数值：width='20' ,数值的单位，默认是 px(像素) 2. 数值%：占比相对于父元素的比例
列：文本标签练习
列： 公司简介练习
4.3 图片标签
相对路径：./：代表当前目录 ./image/1.jpg ../:代表上一级目录
<!--展示一张图片-->
<img src="image/jiangxuan_1.jpg">
<img src="./image/jiangxuan_1.jpg">
<img src="image/jiangxuan_2.jpg" align="right" alt="冲浪" width="300"><hr>
<img src="image/jiangxuan_3.jpg" align="right" alt="冲浪" width="500"><hr>4.4 列表标签
4.5 链接标签
<a>标签,定义一个超链接
常用属性：
- href：指定访问资源的URL(统一资源定位符)
- target：指定打开资源的方式 （_self:默认值，在当前页面打开 _blank：在空白页面打开）
使用方法1：通过href属性，通过超链接打开另一个文档或网页
<a href="http://www.baidu.com" target="_self" >点我2</a> <br>
<a href="http://www.baidu.com" target="_blank">点我3</a> <br>
<a href="http://www.baidu.com" >点我4</a> <hr>
<a href="2_文本标签.html" >点我11</a> <br>
<a href="./2_文本标签.html">点我12</a>
<a href="mailto:513613271@qq.com">联系我们</a>使用方法2：通过name属性，创建文档内部的一个书签（锚）
<!--锚点：必须在内容足够多的情况下才有效-->
<a href="#signup">[新用户注册帮助]</a>
。。。。。
<a name="signup"><h3>新用户注册</h3></a>4.6 块标签
- div:每一个div占满一整行。块级标签
- span：文本信息在一行展示，行内标签 内联标签
<span>1、在天愿作比翼鸟，在地愿为连理枝。</span>
<span>2、东边日出西边雨，道是无晴却有晴。</span>
<div> 3、东边日出西边雨，道是无晴却有晴。</div>
<div> 4、东边日出西边雨，道是无晴却有晴。</div>4.7 表格标签
表格标签： <table>
表格标签常用属性：
- width：宽度 border：边框
- bgcolor：背景色 align：对齐方式
- cellpadding：定义内容和单元格的距离 cellspacing：设置单元格与单元格之间的间距。如果指定为0，则单元格的线会合为一条
- <caption></caption>：表格标题
- <th></th>表头标签
- <tr></tr>行标签（属性：bgcolor：背景色 align：对齐方式）
- <td></td>列标签 （属性： colspan：合并列 rowspan：合并行）
- <thead>：表示表格头标签
- <tbody>：表示表格主体
- <tfoot>：表示表格脚标签
4.8 列：旅游网首页练习
<body>
<table bgcolor="gray" width="95%" align="center">
<!-- 第1行 -->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="image/icon_1.jpg" width="100%" alt="">
</td>
<td>
<img src="image/search.png" alt="">
</td>
<td>
<img align="right" src="image/hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第3行 -->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height="45" >
<td>
<a href="">首页</a>
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
<td>
门票
</td>
</tr>
</table>
</td>
</tr>
<!-- 第4行 轮播图 -->
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
</td>
</tr>
<!-- 第5行 黑马精选-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
商品精选
<hr color="#ffd700" >
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 国内游 -->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="#ffd700" >
</td>
</tr>
<!-- 第8行 -->
<tr>
<td>
<table align="center" width="95%" >
<tr>
<td rowspan="2" >
<img height="100%" src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 境外游 -->
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
境外游
<hr color="#ffd700" >
</td>
</tr>
<!-- 第10行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行 -->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!-- 第12行 -->
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
江旅游网技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</body>
扫一扫
3963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
