一.web概念概述

JavaWeb：
使用Java语言开发基于互联网的项目

做什么：做网页，其架构有;
C/S: Client/Server 客户端/服务器端
是：在用户本地有一个客户端程序，在远程有一个服务器端程序
优点：对于用户来说相对体验感好；缺点：开发、安装，部署，维护麻烦

B/S: Browser/Server 浏览器/服务器端
是：只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：开发、安装，部署，维护简单；缺点：对于稍微大型一点的应用，网络传输不是那么好，用户体验变差，又对计算机硬件要求过高

资源分类：
动态资源：使用动态网页及时发布的资源
解释：所有用户访问，得到的结果可能不一样。* 如：jsp/servlet,php,asp…如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。

静态资源：使用静态网页开发技术发布的资源
解释：所有用户访问，得到的结果是一样的。*如：文本，图片，音频、视频, HTML,CSS,JavaScript，如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。

二.HTML(Hyper Text Markup Language 超文本标记语言)

语法：

<html>
			<head>
				<title>title</title>
			</head>
			...
			<body>
			</body>
	
</html>

标签：
1.分类:自闭和标签：开始标签和结束标签在一起。如
;围堵标签：有开始标签和结束标签。如 .

2.文件标签：构成html最基本的标签

html:html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签。
body：体标签

3.文本标签

：字体加粗
：字体斜体
:字体标签…

4.图片标签:

5.列表标签

有序列表：
- ol:
- li:
无序列表：
- ul:
- li:

5.链接标签
点我

6语义化标签：html5中为了提高程序的可读性，提供了一些标签。

：页眉
：页脚

7.表格标签

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
- ：表格标题
- ：表示表格的头部分
- ：表示表格的体部分
- ：表示表格的脚部分

8.表单标签
做什么：用于收集用户输入的西湖菊，用户和服务器进行交互
form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：
* action：指定提交数据的URL
* method:指定提交方式
* get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
* post：
1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数的大小没有限制。
3. 较为安全。
注意：表单项中的数据要想被提交，就必须指定其属性

表单项标签，input：可以通过type属性值，改变元素展示的样式
	placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	
	submit：提交按钮。可以提交表单
	label：指定输入项的文字描述信息
	select: 下拉列表

3.CSS(Cascading Style Sheets 层叠样式表)

1.好处：
多个样式可以作用在同一个html的元素上，同时生效
功能强大
将内容展示和样式控制分离
降低耦合度。解耦
让分工协作更容易
提高开发效率

2.css语法：
(1)选择器 {
属性名1:属性值1;
属性名2:属性值2;
…
}
(2)选择器:筛选具有相似特征的元素
每一对属性需要使用；隔开，最后一对属性可以不加
选择器：筛选具有相似特征的元素
1. 基础选择器
1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法：#id属性值{}
2. 元素选择器：选择具有相同标签名称的元素
* 语法：标签名称{}
* 注意：id选择器优先级高于元素选择器
3. 类选择器：选择具有相同的class属性值的元素。
* 语法：.class属性值{}
* 注意：类选择器选择器优先级高于元素选择器
2. 扩展选择器：
1. 选择所有元素：
* 语法： *{}
2. 并集选择器：
* 选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
* 语法：选择器1 选择器2{}
4. 父选择器：筛选选择器2的父元素选择器1
* 语法：选择器1 > 选择器2{}

		5. 属性选择器：选择元素名称，属性名=属性值的元素
			* 语法：  元素名称[属性名="属性值"]{}
		6. 伪类选择器：选择一些元素具有的状态
			* 语法： 元素:状态{}
			* 如： <a>
			* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态

(3)属性
	字体、文本
		* font-size：字体大小

color：文本颜色
text-align：对其方式
line-height：行高
盒子模型：控制布局
margin：外边距
padding：内边距
* 默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大
* float：浮动
- left
- right

以下是我的练习。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        /*
        1. 字体、文本
            * font-size：字体大小
            * color：文本颜色
            * text-align：对其方式
            * line-height：行高
	    2. 背景
            * background：
	    3. 边框
            * border：设置边框，符合属性
	    4. 尺寸
            * width：宽度
            * height：高度
	    5. 盒子模型：控制布局
            * margin：外边距
            * padding：内边距
                * 默认情况下内边距会影响整个盒子的大小
                * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小
            * float：浮动
                * left
                * right
          */
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            /*不改变其大小，设置内边距*/
        }
        /*
        背景图片*/
        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
        }
        /*
        最大的div界面
        */
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 0px solid #EEEEEE;
            /*
            背景颜色*/
            background: url("image/lakesi.jpg");
            /*
            外边距*/
            margin: auto;
        }
        /*
        左边界面
        */
        .left{
            /*
            float 浮动
            margin：外边距
            */
            float: left;
            margin: 15px;
        }


        .left > p:first-child{
            color:#FFD026;
            font-size: 20px;
        }

        .left > p:last-child{
            color: #EEEEEE;
            font-size: 20px;

        }


        /*
        中间界面
        */
        .center{
            float: left;
            margin: 30px;

        }

        /*
        右边界面
        */
        .right{
            float: right;
            margin: 15px;
        }
        .right > p:first-child{
            font-size: 15px;
            color: #FFD026;

        }
       /* .right p a{
            color: pink;
        }*/

        /*
        对于中间部分，使用右对齐
        */
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }

        /*
        对于中间部分，右边方框
        */
        .td_right{
            padding-left: 20px
        }

        /*
        对于边框字体设置
        属性选择器：选择元素名称，属性名=属性值的元素
        */
        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }

        /*
        验证码输入框长度设定
        */
        #checkcode{
            width: 110px;
        }

        /*
        图片设定
        */
        #img_check{
            height: 32px;
            vertical-align: middle;
        }

        /*
        按钮大小，颜色设定
        */
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: darkgray;
            border-radius: 5px;
            padding-left: 10px;
            border: 1px solid #FFD026 ;
        }

        /*伪类选择器：选择一些元素具有的状态，以下都是*/
        /*初始化*/
        p a:link{
            color: pink;
        }

        /*正在被访问*/
        p a:active{
            color: crimson;
        }
        /*被访问过*/
        p a:visited{
            color: #FFD026;
        }
        /*鼠标悬浮状态*/
        p a:hover{
            color: chartreuse;
        }
    </style>
</head>
<body>
<div class="rg_layout">
    <!-- 第一个模块-->
    <div class="left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>

    <!--第二个模块-->
    <div class="center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" method="post">
                <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 id="img_check" src="img/verify_code.jpg" width="70px" height="15">
                        </td>
                    </tr>


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

            </form>


        </div>

    </div>

    <!--第三个模块-->
    <div class="right">
        <p>已有账号?<a href="#" >立即登录</a></p>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>丽江旅游网</title>
</head>
<body>
<table width="100%" align="center">
    <!-- 第一行-->
    <tr>
        <td>
            <img src="image/top_banner.jpg" width="100%" alt="">
        </td>
    </tr>
    <!-- 第二行-->
    <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>
    <!-- 第三行-->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr  bgcolor="#ff7f50" align="ceter" height="46">
                    <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>
                    <td>
                        <a href="">全云南游</a>
                    </td>
                    <td>
                        <a href="">收藏排行榜</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- 第四行-->
    <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">&yen; 899</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>大理洱海五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>大理洱海五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>大理洱海五天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="#ffd700" >
        </td>
    </tr>
    <!-- 第8行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <!-- 合并单元格  rowspan合并两行-->
                    <td rowspan="2">
                        <img src="image/guonei_1.jpg" alt="">
                    </td>

                    <!-- 第一行只有三个-->
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>

                <!-- 第二行也只有三个-->
                <tr>
                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- 第9行 -->
    <tr>
        <td>
            <img src="image/icon_7.jpg.jpg" alt="">
            涑河古镇游
            <hr  color="#ffd700" >
        </td>
    </tr>
    <!-- 第10行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <!-- 合并单元格  rowspan合并两行-->
                    <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">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>

                <!-- 第二行也只有三个-->
                <tr>
                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- 第11行-->
    <tr>
        <td>
            <img src="image/footer_service.png" width="100%" alt="">
        </td>
    </tr>
    <!-- 第12行 -->
    <tr>
        <td align="center" bgcolor="#ffd700" height="40">
            <font color="gray" size="2">
                丽江旅游文化股份有限公司
                版权所有Copyright 2006-2018&copy;, All Rights Reserved 云ICP备16007882
            </font>
        </td>
    </tr>
</table>
</body>
</html>