首页 JavaWeb

# web 概念概述

# JavaWeb：

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

# 软件架构：

# C/S: Client/Server 客户端 / 服务器端

  • 在用户本地有一个客户端程序，在远程有一个服务器端程序

    ​ 如：QQ，迅雷...

    • 优点： 用户体验好
    • 缺点： 开发、安装，部署，维护 麻烦

# B/S: Browser/Server 浏览器 / 服务器端

  • 只需要一个浏览器，用户通过不同的网址 (URL)，客户访问不同的服务器端程序
  • 优点：
    1. 开发、安装，部署，维护 简单
  • 缺点：
    1. 如果应用过大，用户的体验可能会受到影响
    2. 对硬件要求过高

# B/S 架构详解

  • 资源分类（服务器端）：
    1. 静态资源：
      • 使用静态网页开发技术发布的资源。
      • 特点：
        • 所有用户访问，得到的结果是一样的。
        • 如：文本，图片，音频、视频，（HTML,CSS,JavaScript）
        • 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
    2. 动态资源：
      • 使用动态网页技术发布的资源。
      • 特点：
      • 所有用户访问，得到的结果可能不一样。
      • 如：jsp/servlet,php,asp...
      • 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

我们要学习动态资源，必须先学习静态资源！

# 静态资源：

  • HTML：用于搭建基础网页，展示页面的内容
  • CSS：用于美化页面，布局页面
  • JavaScript：控制页面的元素，让页面有一些动态的效果

# HTML

# 概念

​ 是最基础的网页开发语言，用于搭建基础网页，展示页面的内容

  • Hyper Text Markup Language 超文本标记语言
    • 超文本:
      • 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
    • 标记语言:
      • 由标签构成的语言。<标签名称> 如 html，xml
      • 标记语言不是编程语言

# 语法：

  1. html 文档后缀名 .html 或者 .htm
  2. 标签分为
    1. 围堵标签：有开始标签和结束标签。如 <html> </html>
    2. 自闭和标签：开始标签和结束标签在一起。如 <br/> 换行标签
    3. 标签可以嵌套：
      需要正确嵌套，不能你中有我，我中有你 <a><b></b></a>
    4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号 (单双都可) 引起来
    5. html 的标签不区分大小写，但是建议使用小写。

# 标签学习：

打关键字，然后 ctrl + j 快捷出 或 Table 键

# 文件标签

构成 html 最基本的标签

* html:html文档的根标签
	* head：头标签。用于指定html文档的一些属性。引入外部的资源
	* title：标题标签。
	* body：体标签
	* <!DOCTYPE html>：html5中定义该文档是html文档

# 文本标签

和文本有关的标签

  • 注释：<!-- 注释内容 -->

  • 标题标签: <h1> to <h6>：

  • h1~h6: 字体大小逐渐递减，带换行

  • 段落标签: <p>

  • 换行标签 : <br>

  • 展示一条水平线 : <hr>

  • color：颜色

  • width：宽度

  • size：高度

    • align：对其方式
      center：居中
      left：左对齐
      right：右对齐

  • <b>：字体加粗

  • <i>：字体斜体

  • <font>: 字体标签
    属性：
    color：颜色
    size：大小
    face：字体

  • 文本居中:<center>

  • 属性定义：
    color：

  1. 英文单词：red,green,blue

  2. rgb (值 1，值 2，值 3)：值的范围：0~255 如 rgb (0,0,255)

    #值 1 值 2 值 3：值的范围：00~FF 之间。如： #FF00FF

  3. width：

    数值：width='20' , 数值的单位，默认是 px (像素)

    数值 %：占比相对于父元素的比例

公司简介

<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑马程序员简介</title>
</head>
<body>
<h1> 公司简介</h1>
<hr color="#ffd700">
<p>
    <font color="#FF0000">"中关村黑马程序员训练营"</font>
    是由<b> <i>传智播客</i></b>联合中关村软件园委托传智播客进行教致力于服务各大而企业招不到优秀人才的困扰。
</p>
<p>目前，“中关村黑马程序员训练营”已成长为行业“学员质量好”的移动开发高端训练基地</p>	
<hr color="#ffd700">
<font color="gray" size="2">
<center>
江苏传智播客教育科技股份有限公司<br>
版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
</center>
 </font>	
</body>
</html>
# 图片标签
img：展示图片
属性：
src：指定图片的位置
<!-- 展示一张图片 img-->
   <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
    <!-- 相对路径
          以。开头的路径
          ./：代表当前目录  ./image/1.jpg
          ../: 代表上一级目录
     -->
   <img src="./image/jiangwai_1.jpg">
   <img src="../image/jiangwai_1.jpg">
# 列表标签
  • 有序列表：
    ol:
    早上起床干的事情
    <ol type="A">
    <li> 睁眼睛 </li>
    <li> 看手机 </li>
    <li> 床衣服 </li>
    </ol>
  • 无序列表： 同上
    ul:
    li:
# 链接标签：
  • a: 定义一个超链接
    属性：
    href：指定访问资源的 URL (统一资源定位符)
    target：指定打开资源的方式
    _self: 默认值，在当前页面打开
    blank：在空白页面打开
  • 代码：
    <!-- 超链接 a-->_
    <a href="http://www.itcast.cn">
# div 和 span：
  • div: 每一个 div 占满一整行。块级标签
  • span：文本信息在一行展示，行内标签 内联标签
# 语义化标签
html5 中为了提高程序的可读性，提供了一些标签。<footer>：页脚 <footer>：页脚
# 表格标签
  • table：定义表格
  • width：宽度
  • border：边框
  • cellpadding：定义内容和单元格的距离
  • cellspacing：定义单元格之间的距离。如果指定为 0，则单元格的线会合为一条、
  • bgcolor：背景色
  • align：对齐方式
  • tr：定义行
  • bgcolor：背景色
  • align：对齐方式
  • td：定义单元格
  • colspan：合并列
  • rowspan：合并行
  • th：定义表头单元格
  • <caption>：表格标题
  • <thead>：表示表格的头部分
  • <tbody>：表示表格的体部分
  • <tfoot>：表示表格的脚部分
## 案例：旅游网站首页
见例题
单行单列用
<tr>
    <td>
    </td>
</tr>
# 表单标签
表单：
  1. 概念：用于采集用户输入的数据的。用于和服务器进行交互。
  2. form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 +
    属性：
​ action：指定提交数据的 URL
​ method: 指定提交方式
分类：一共 7 种，2 种比较常用
  1. get：
    请求参数会在地址栏中显示。会封装到请求行中 (HTTP 协议后讲解)。
    请求参数大小是有限制的。
    不太安全。
  2. post：
​ 请求参数不会再地址栏中显示。会封装在请求体中 (HTTP 协议后讲解)
​ 请求参数的大小没有限制。
​ 较为安全。
表单项中的数据要想被提交：必须指定其 name 属性
# 表单项标签
  • input：可以通过 type 属性值，改变元素展示的样式
  • type 属性：
    * text：文本输入框，默认值
	 placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	

  • password：密码输入框
  • radio: 单选框
    注意：
    1. 要想让多个单选框实现单选的效果，则多个单选框的 name 属性值必须一样。
    2. 一般会给每一个单选框提供 value 属性，指定其被选中后提交的值
    3. checked 属性，可以指定默认值 checked 或 checked="checked";
      • checkbox：复选框
    注意：
    1. 一般会给每一个单选框提供 value 属性，指定其被选中后提交的值
      1. checked 属性，可以指定默认值
      • file：文件选择框
      • hidden：隐藏域，用于提交一些信息。
      • 按钮：
    • submit：提交按钮。可以提交表单
    • button：普通按钮
    • image：图片提交按钮
      src 属性指定图片的路径
      • label：指定输入项的文字描述信息
      注意：

      • label 的 for 属性一般会和 input 的 id 属性值 对应。如果对应了，则点击 label 区域，会让 input 输入框获取焦点。
        <label for="username">用户名</label>
        <input type="text" name="username" placeholder="请输入用户名" id="username">
      • select: 下拉列表
        子元素：option，指定列表项
        省份<select name="province">
          <option>--请选择--</option>
          <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">天津</option>
          <option value="4" selected>陕西</option>
           </select><br>
textarea：文本域
cols：指定列数，每一行有多少个字符
rows：默认多少行。
自我描述<textarea cols="20" rows="5" name="discribe"></textarea>
# CSS：页面美化和布局控制
概念： Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个 html 的元素上，同时生效
# 好处
  1. 功能强大
  2. 将内容展示和样式控制分离
    降低耦合度。解耦
    让分工协作更容易
    提高开发效率
# CSS 与 html 结合方式
# 内联样式
在标签内使用 style 属性指定 css 代码
如：<div style="color:red;">hello css</div>
# 内部样式
在 head 标签内，定义 style 标签，style 标签的标签体内容就是 css 代码
如：
<style>
div{
     color:blue;
}
</style>
<div>hello css</div>
# 外部样式
  1. 定义 css 资源文件。
  2. 在 head 标签内，定义 link 标签，引入外部的资源文件
    如： a.css 文件：
    div{
    color:green;
    }
    <link rel="stylesheet" href="css/a.css">
    <div>hello css</div>
    <div>hello css</div>
  • 注意：
    1,2,3 种方式 css 作用范围越来越大
    1 方式不常用，后期常用 2,3
    第 3 种格式可以写为：
<style>
        @import "css/a.css";
    </style>
# css 语法
  • 格式：
    选择器 {
    属性名 1: 属性值 1;
    属性名 2: 属性值 2;
    ...
    }
  • 选择器：筛选具有相似特征的元素
  • 注意：
    • 每一对属性需要使用；隔开，最后一对属性可以不加；
# 选择器
筛选具有相似特征的元素
分类：
# 基础选择器
  1. id 选择器：选择具体的 id 属性值的元素。建议在一个 html 页面中 id 值唯一
    语法：#id 属性值 {}
  2. 元素选择器：选择具有相同标签名称的元素
    语法： 标签名称 {}
    注意：id 选择器优先级高于元素选择器
  3. 类选择器：选择具有相同的 class 属性值的元素。
    语法：.class 属性值 {}
    注意：类选择器选择器优先级高于元素选择器
# 扩展选择器
  1. 选择所有元素：
    语法： *{}
  2. 并集选择器：
    选择器 1, 选择器 2 {}
  3. 基础选择器子选择器：筛选选择器 1 元素下的选择器 2 元素
    语法： 选择器 1 选择器 2 {}
  4. 父选择器：筛选选择器 2 的父元素选择器 1
    语法： 选择器 1 > 选择器 2 {}
  5. 属性选择器：选择元素名称，属性名 = 属性值的元素
    语法： 元素名称属性名 ="属性值"{}
  6. 伪类选择器：选择一些元素具有的状态
    语法： 元素：状态 {}
    如： <a> 超链接
    * 状态：
    * link：初始化的状态
    * visited：被访问过的状态
    * active：正在访问状态
    * hover：鼠标悬浮状态
# 属性
  1. 字体、文本
  • font-size：字体大小
  • color：文本颜色
  • text-align：对其方式
  • line-height：行高
    1. 背景 * background：
    2. 边框 * border：设置边框，符合属性
    3. 尺寸
      • width：宽度
      • height：高度
    4. 盒子模型：控制布局
* margin：外边距
* padding：内边距
	* 默认情况下内边距会影响整个盒子的大小
	* box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小
* float：浮动
	* left
	* right
# 注册页面案例
见代码例题
 更新于