JavaWeb基础

最新推荐文章于 2022-10-26 11:43:27 发布
最新推荐文章于 2022-10-26 11:43:27 发布
阅读量166 收藏 4
点赞数
分类专栏： Java 文章标签： html css web java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53529114/article/details/115289621
版权

Javaweb基础

1.web概念概述

1.1 Javaweb

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

1.2 软件架构

C/S架构：Client/Server 客户端/服务器端

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

如：QQ，微信，支付宝等

优点：用户体验好

缺点：开发、安装、部署、维护 麻烦

B/S架构：Browser/Server 浏览器/服务器端

只需要一个浏览器，用户通过不同网址（URL：统一资源定位器），客户访问不同的服务器端程序

优点：开发、安装、部署、维护 简单

缺点：如果应用过大，用户体验可能受到影响

​ 对硬件需求过高

1.3 B/S架构详解

资源分类：

  1. 静态资源

    使用静态网页技术发布的资源

    特点：

    所有用户访问，得到的结果一样

    如：文本，图片，音频，视频，HTML，css，JavaScript

    如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

  2. 动态资源

    使用动态网页技术发布的资源

    特点：

    所有用户访问，可能得到的结果不一样。

    如：jsp，servlet，php，asp…

    如果用户访问的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

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

静态资源：

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

 

2.HTML概述

2.1 HTML定义

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

HTML是用来写网页的，是设计页面的基础

文本：相当于记事本里写的文字，展示信息

超文本：超越了文本仅仅展示信息的功能范畴。泛指：图片、有样式的文字、点击能跳转页面的文字等

语言：工具

标记：标签

HTML是由标签所组成的语言，能展示超文本效果

标记语言不是编程语言

2.2 HTML案例

步骤：

  1. 创建文件，后缀名为html或htm
  2. 用记事本打开，并且编写文字
  3. 用浏览器打开，例如：火狐或IE等
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <font color="red">hello world</font>>
    </body>
</html>

2.3 HTML语言特征

格式：

<html>
	<head>
		<title>标题</title>
	</head>
	<body>需要展示给用户看的信息</body>
</html>

< html>标签就相当于Java类的大括号

< head>中存放的都是网页的说明性内容，例如：标题等

HTML文件扩展名为html或者htm。htm是老的命名规范，html是新的

HTML文件是由浏览器直接解析执行，无需编译，直接由上到下依次解析执行

HTML标签通常由开始标签和结束标签组成，例如：< font>内容体< /font>

HTML没有内容的标签称为空标签。仅由一个标签组成，例如< br/> 自关闭

HTML标签不区分大小写，为了方便阅读，建议使用小写

HTML标签是有属性的，格式为：属性名=“属性值”，属性值用引号（单引号、双引号）引起

HTML标签建议包裹嵌套，不建议交叉嵌套

2.4 标签学习

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

    1. html：html文档的根标签
    2. head：头标签。用于指定html文档一些属性，引入外部资源
    3. title：标题标签
    4. body：体标签
    5. <! doctype html>：html5中定义该文档是html文档

  2. 文本标签：和文本有关的标签

    1. 注释：< !-- 注释内容 -->

    2. <h1> to <h6>：标题标签，字体大小逐渐递减

    3. <p>：段落标签

    4. <br>:换行标签

    5. <hr>：展示一条水平线
	属性：
		color：颜色
		width：宽度
		size：高度
		align：对齐方式（默认居中center，左对齐left，右对齐right）

    6. <b>：字体加粗

    7. <i>：字体斜体

    8. <font>：字体标签
    属性：
    	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.数值%：占比相对于父元素的比例

    9. <center>:居中标签

    <!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>文本标签</title>
    </head>
        <body>
        <!-- 注释内容 -->
    
        <!-- br 换行 -->
        白日依山尽，<!--<br/>--><br>
        黄河入海流。<br>
    
        <!-- 标题标签-->
        HTML标题标签<br>
        <h1>HTML标题标签</h1>
        <h2>HTML标题标签</h2>
        <h3>HTML标题标签</h3>
        <h4>HTML标题标签</h4>
        <h5>HTML标题标签</h5>
        <h6>HTML标题标签</h6>
    
        <!--段落标签-->
        <p>
        这是一个有意思的html段落，让你眼界大开，进入新世界。这是一个有意思的html段落，让你眼界大开，进入新世界。这是一个有意思的html段落，让你眼界大开，进入新世界。这是一个有意思的html段落，让你眼界大开，进入新世界。
        </p>
        <p>
        这是一个有意思的html段落，让你眼界大开，进入新世界。
        </p>
        <p>
        这是一个有意思的html段落，让你眼界大开，进入新世界。
        </p>
    
        <!--hr 显示一条水平线-->
        <hr color="red" align="left" width="200" size="10">
        <hr>
    
        <!--加粗-->
        白日依山尽<br>
        <b>白日依山尽</b><br>
    
        <!--斜体-->
        <hr>
        白日依山尽<br>
        <i>白日依山尽</i><br>
        <hr>
    
        <!--字体标签-->
        <font color="red" size="20" face="楷体">白日依山尽</font><br>
        <font color="rgb(20,254,25)" size="18" face="楷体">白日依山尽</font><br>
        <font color="#0000ff" size="18" face="楷体">白日依山尽</font><br>
    
        <hr color="red" align="left" width="300" size="10">
        <hr color="red" align="left" width="50%" size="10">
    
        <!--center居中标签-->
        <center>
            <font color="#0000ff" size="18" face="楷体">白日依山尽</font><br>
        </center>
    </body>
</html>

  3. 图片标签

    1. <!--
	<img src="image/image01.jpg" width="100%" sizes="100%" align="center"/><br>
    相对路径
        以.开头的路径
            ./：代表当前目录  例如：./image/1.jpg
            ../：代表上一级目录
-->

  4. 列表标签

    1. 有序列表
      1. ol：
      2. li：
    2. 无序列表
      1. ul:
      2. li:

  5. 链接标签:

    1.  < a>:< a href="www.baidu.com">点我< /a>
     <!--
        target="_self" 在本页面打开链接（默认）
        target="_blank" 新建一个页面打开链接
    -->

    2. a:定义一个超链接

      1. 属性：

        href：指定访问资源的URL（统一资源定位符）

        target：指定打开资源的方式

        ​ _self：默认值，在当前页面打开

        ​ _blank：在空白页面打开

  6. 块标签：div和span

    1. span：文本信息在一行展示 行内标签 内联标签
    2. div：每个div占一整行 块级标签

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

    1. header：页眉
    2. footer：页脚

  8. 表格标签：

    1. table：定义一个表格
      1. width：宽度
      2. border：边框
      3. cellpadding：定义内容和单元格的距离
      4. cellspacing：定义单元格之间距离。如果定义为0，则单元格的线会合为一条
      5. bgcolor：背景色
      6. align：对齐方式
    2. tr：定义行
      1. bgcolor：背景色
      2. align：对齐方式
    3. td：定义单元格
      1. colspan：合并列
      2. rowspan：合并行
    4. th：定义表头单元格
    5. caption：表格标题
    6. thead：表示表格的头部分
    7. tbody：表示表格的体部分
    8. tfoot：表示表格的脚部分

2.5 简单案例

案例1：设计网页如下：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>公司简介</title>
    </head>
    <body>
    <h1>公司简介</h1>
    <hr color="#f87842">
    <p>
        <font color="red">HTML</font>的全称为<b><i>超文本标记语言</i></b>，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
    </p>
    <p>
        超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
    </p>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
    <hr color="#f87842">
    <p>
        <center>
            <font color="#a9a9a9" size="3" face="楷体" >©2021 Baidu 使用百度前必读 | 百科协议 | 隐私政策 | 百度百科合作平台 | 京ICP证030173号</font>
        </center>
    </p>
    </body>
</html>

案例2：设计网页如下：

image-20210328103841640

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息表</title>
</head>
<body>
    <table width="50%" align="center" border="1" cellspacing="0">
        <caption>学生成绩表</caption>
        <tr align="center">
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>小龙女</td>
            <td>女</td>
            <td>100</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>杨过</td>
            <td>男</td>
            <td rowspan="2">90</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>金轮法王</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>总成绩</td>
            <td colspan="3">190</td>
        </tr>
    </table>
</body>
</html>

案例3：旅游网站首页

1、确定使用table来完成布局

2、如果某一行只有一个单元格，则使用< tr>< td>< /td>< /tr>

3、如果某一行有多个单元格，则使用嵌套table

<tr>
    <td>
        <table></table>
    </td>
</tr>

2.6 表单标签

表单：用于采集用户输入数据的。用于和服务器进行交互

使用的标签：form

form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
            属性：
                action：指定提交数据的URL
                method：指定提交方式
                    分类：一共7种，2种常用
                        get：
                            1.请求参数会在地址栏中显示，会封装到请求行中
                            2.请求参数大小是有限的
                            3.不太安全
                        post：
                            1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议后讲解）
                            2.请求参数大小没有限制
                            3.较为安全

            表单项中的数据想要被提交，必须指定其name属性

表单项标签：

input：可以通过type值，改变展示的样式

  type属性：

    text：文本输入框，默认值

      placeholder：指定输入框的提示信息，当输入框内容发生变化，会清空提示信息

​    password：密码输入框

​    radio：单选框

​    注意：

     1、要想使多个单选框实现单选效果，则多个单选框name属性值必须一致

     2、一般会给每个单选框提供value值，指定其被选中后提交的值

​     3、checked属性，可以指定默认值

    checkbox：复选框

    注意：

     1、一般会给每个单选框提供value值，指定其被选中后提交的值

     2、checked属性，可以指定默认值

​    file：文件选择框

​    hidden：隐藏域，用于提交一些信息

    按钮：

​      submit：提交按钮，可以提交表单

      button：普通按钮

      image：图片提交按钮

      src属性指定图片路径

    label的for属性值一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点

select：下拉列表

  子元素：option 指定列表项

textarea：多行文本标记（文本域）

  cols：指定列数，指定每一行有多少个字符

  rows：默认多少行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签</title>
</head>
<body>

<form action="#" method="get">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username" placeholder="请输入用户名"> <br>
    密码：<input type="password" name="password" placeholder="请输入密码"> <br>
    性别：<input type="radio" name="sex" value="男" checked>男
         <input type="radio" name="sex" value="女"> 女 <br>
    爱好：<input type="checkbox" name="hobby" value="movie"> 电影
        <input type="checkbox" name="hobby" value="music"> 音乐
        <input type="checkbox" name="hobby" value="game"> 游戏
        <input type="checkbox" name="hobby" value="shopping"> 购物
        <br>
    图片：<input type="file" name="filename">
        <br>
    隐藏域：<input type="hidden" name="id" value="aaa" >
        <br>
    取色器：<input type="color" name="color">
        <br>
    日期：<input type="date" name="brithday">
        <br>
    生日：<input type="datetime-local" name="datetime">
        <br>
    邮箱：<input type="email" name="email">
        <br>
    年龄：<input type="number" name="age">
        <br>

    省份：<select name="provice">
            <option>--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>成都</option>
        </select>
        <br>
    文本域：<textarea name="text" cols="30" rows="5"></textarea>
        <br>
    <input type="submit" value="登录">
    <input type="button" value="按钮">
    <input type="image" src="../image/image_icon01.png">
</form>
</body>
</html>

显示效果：

image-20210328160704613

2.7 简单案例

使用所学表单知识编写代码设计简单注册页面，如下：

image-20210328190911408

实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册信息</title>
</head>
<body>
<table border="1" align="center" width="400">
    <tr>
        <td>用户名</td>
        <td><input type="text" name="username" placeholder="请输入用户名"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="password" name="password" placeholder="请输入密码"></td>
    </tr>
    <tr>
        <td>Email</td>
        <td><input type="email" name="email" placeholder="请输入Email"></td>
    </tr>
    <tr>
        <td>姓名</td>
        <td><input type="text" name="username" placeholder="请输入真实姓名"></td>
    </tr>
    <tr>
        <td>手机号</td>
        <td><input type="text" name="username" placeholder="请输入手机号"></td>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="sex"> 男
            <input type="radio" name="sex"> 女
        </td>
    </tr>
    <tr>
        <td>出生日期</td>
        <td><input type="date" name="birthday"></td>
    </tr>
    <tr>
        <td>验证码</td>
        <td>
            <input type="text" name="text">
            <img src="../image/image_yan01.jpg" width="50">
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="submit" name="regist" value="注册">
        </td>
    </tr>
</table>
</body>
</html>

 

3.CSS

3.1 概念

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

层叠：多个样式可以作用在同一个html的元素上，同时生效

3.2 优点

1、功能强大

2、将内容展示和样式控制分离

​ 降低耦合度。解耦

​ 让分工协作更容易

​ 提高开发效率

3.3 CSS使用

css与html结合方式：

  1. 内联样式

    1. 在标签内使用style属性指定css代码 例如：< div style=“color: red;”>helloworld< /div>
    2. 不推荐使用

  2. 内部样式

    1. 在head标签内定义style标签，style标签体的内容就是css代码

    2. 例如：

      <style>
    div{
        color: blue;
    }
</style>
<div>helloworld</div>

  3. 外部样式

    1. 定义css资源文件

    2. 在head标签内,定义style标签，引入外部资源文件

    3. a.css文件：
    div{
        color: green;
    }
<link rel="stylesheet" href="a.css">
<div>helloworld</div>

注意：1，2，3种方式，css作用范围越来愈大。

​ 1方式不常用，后期常用2，3两种方式

​ 3种格式可以写为：

<style>
    @import "a.css";
</style>

3.4 CSS语法

格式：

格式：
选择器{
	属性名1:值1;
	属性名1:值1;
	...
}

选择器：筛选具有相似特征的元素

注意：每一对属性值需要加分号“;”隔开，最后一对可以不加

3.5 选择器

基础选择器：
    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：鼠标悬浮状态

基础类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: #89fff0;
        }

        div{
            color: darkorange;
        }
        .class1{
            color: #0088f9;
        }
    </style>
</head>
<body>
    <!--
        基础选择器：
            1. id选择器：选择器具体的id属性值的元素，建议在一个html页面id值唯一
                语法：#id属性值{}

            2. 元素选择器：选择具有相同标签名称的元素
                语法：标签名{}
                注意：id选择器优先级高于元素选择器

            3. 类选择器：选择具有相同class属性值的元素
                语法：.class属性值{}
                注意：类选择器优先级高于元素选择器
    -->

    <div id="div1">study css</div>
    <div class="class1">study html</div>

    <p class="class1">class选择器</p>

</body>
</html>

扩展类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color: red;
        }
        div >p {
            border: 1px solid;
            color: blue;
        }
        input[type="text"]{
            border: 3px solid;
        }
        a:link{
            color: red;
        }
        a:hover{
            color: forestgreen;
            font-size: 20px;
        }
        a:active{
             color: gold;
        }
        a:visited{
              color: gray;
        }
    </style>
</head>
<body>
    <!--扩展选择器-->
    <div>
        <p>study html</p>
    </div>
    <p>study css</p>
    <div>aaa</div>
    <input type="text">
    <br>
    <input type="password">
    <br>

    <a href="#">link</a>
</body>
</html>

3.6 属性

  1. 字体、文本
    1. font-size：字体大小
    2. color：颜色
    3. text-align：对齐方式
    4. line-height：行高
  2. 背景
    1. background：
  3. 边框
    1. border：设置边框，复合属性
  4. 尺寸
    1. width：宽度
    2. height：高度
  5. 盒子模型：控制布局
    1. margin：外边距
    2. padding：内边距
      1. 默认情况下内边距会影响盒子大小
      2. box-sizing: border-box;设置盒子属性，让width和height就是盒子最终大小
    3. float：浮动
      1. left
      2. right
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p{
            color: blue;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            /*
                边框
            */
            border: 2px solid red;
        }
        div{
            border: 1px solid red;
            /*
                尺寸
            */
            height: 200px;
            width: 300px;
            background: url("../image/image_log01.png") no-repeat center;
        }
    </style>
</head>
<body>
    <p>学习网页设计</p>
    <div> sss </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            border: 3px red solid;
            height: 200px;
            width: 300px;
            float: left;
        }
        .div1{
            border: 2px blue solid;
            height: 150px;
            width: 200px;
            /*padding: 23px; 会改变盒子大小*/
            /*设置盒子属性，让width和height就是盒子最终大小*/
            box-sizing: border-box;
            padding: 22px;
        }
        .div2{
            border: 1px gold solid;
            height: 100px;
            width: 150px;
            /*margin: 25px;*/
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

3.7 简单案例

使用CSS设计注册页面，如下：

image-20210328213931458

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .div1{
            width: 100%;
            height: 600px;
            border: red 1px solid;
            background: url("../image/image07.jpg");
        }
        .div2{
            width: 60%;
            height: 90%;
            border: 5px #eeeeee solid;
            background-color: antiquewhite;
            /*margin-left: 15%;*/
            margin: auto;
            margin-top: 2%;
        }
        .div31{
            float: left;
            /*border: 1px red solid;*/
            width: 21%;
            height: 80%;
            margin-left: 5%;
            margin-top: 2%;
        }
        .div32{
            float: left;
            /*border: 1px red solid;*/
            width: 50%;
            /*height: 80%;*/
            /*margin-left: 5%;*/
            margin-top: 2%;
        }
        .div33{
            float: right;
            /*border: 1px red solid;*/
            width: 18%;
            height: 80%;
            margin-top: 2%;
            margin-right: 1%;
        }
        .p1{
            font-size: 20px;
            color: gold;
        }
        .p2{
            font-size: 20px;
            color: gray;
        }
        .p3{
            font-size: 12px;
        }
        .t_left{
            width: 100px;
            text-align: right;
            height: 40px;
        }
        .t_right{
            padding-left: 40px;
        }
        #username,#password,#email,#name,#phone,#birthday{
            width: 250px;
            height: 30px;
            border: 1px solid #a6a6a6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 150px;
            height: 30px;
            border: 1px solid #a6a6a6;
            border-radius: 5px;
        }
        #img_check{
            height: 30px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 100px;
            height: 30px;
            background-color: #ffd026;
            border: 1px solid #ffd026;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<div class="div1">
    <div class="div2">
        <div class="div31">
            <p class="p1">新用户注册</p>
            <p class="p2">USER REGISTER</p>
        </div>
        <div class="div32">
            <table>
                <tr>
                    <td class="t_left"><label for="username"><p>用户名</p></label></td>
                    <td class="t_right"><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td class="t_left" ><label for="password"><p>密码</p></label></td>
                    <td class="t_right"><input type="text" id="password" name="username" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td class="t_left" ><label for="email"><p>Email</p></label></td>
                    <td class="t_right"><input type="text" id="email" name="email" placeholder="请输入Email"></td>
                </tr>
                <tr>
                    <td class="t_left" ><label for="name"><p>姓名</p></label></td>
                    <td class="t_right"><input type="text" id="name" name="username" placeholder="请输入真实姓名"></td>
                </tr>
                <tr>
                    <td class="t_left" ><label for="phone"><p>手机号</p></label></td>
                    <td class="t_right"><input type="text" id="phone" name="username" placeholder="请输入用手机号"></td>
                </tr>
                <tr>
                    <td class="t_left" >性别</td>
                    <td class="t_right">
                        <input type="radio" name="sex" > 男
                        <input type="radio" name="sex" > 女
                    </td>
                </tr>
                <tr>
                    <td class="t_left" >出生日期</td>
                    <td class="t_right">
                        <input type="date" id="birthday" name="birthday">
                    </td>
                </tr>
                <tr>
                    <td class="t_left" >验证码</td>
                    <td class="t_right">
                        <input type="text" name="key" id="checkcode">
                        <img src="../image/image_yan01.jpg" width="50px" id="img_check">
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                    <input type="submit" id="btn_sub" name="btn" value="注册"></td>
                </tr>
            </table>
        </div>
        <div class="div33">
            <p class="p3">已有账号？<a href="#">立即登录</a></p>
        </div>
    </div>
</div>
</body>
</html>
qq_53529114
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
别再说你不会！javaweb开发实例大全代码
m0_57983911的博客
07-13 546
第一篇：SpringBoot面试篇 1.1 35常见SpringBoot知识点 问题一：Spring Boot、Spring MVC 和 Spring 有什么区别？ 问题二：什么是自动配置？ 问题三：什么是 Spring Boot Stater ？ 问题四：你能否举一个例子来解释更多 Staters 的内容？ 问题五：Spring Boot 还提供了其它的哪些 Starter Project Options？ 问题六：Spring 是如何快速创建产品就绪应用程序的？ 问题七：创建
java Web常用基本操作代码
带着梦想飞翔
12-30 193
1.Struts2中文件保存 [code="java"] //设置文件的三个属性，并且提供set方法 (此处省略) private File newsAttach; private String newsAttachFileName; private String newsAttachContentType; if (newsAttach != null) {// 附件非空...
java基本代码html_JavaWeb基础HTML
weixin_29447621的博客
02-28 443
1.什么是HTML？HTML是一种超文本标记语言超文本：比普通文本功能更加强大标记语言：使用一组标签对内容进行描述的语言。不是编程语言，直接被浏览器所解析。2.HTML能用来干什么？HTML用来编写网页，平时上网通过浏览器我们看到的大部分页面都是由HTML编写的网页内容包括：HTML代码、CSS代码、JavaScript代码等内容。HTML代码：用于展示需要显示的数据CSS代码：使显示的数据更加好...
JavaWeb开发实战经典（基础篇）源码
08-14
魔乐科技李兴华老师的Java Web开发实战经典（基础篇）源代码及附录工具。欢迎免费下载。
Java Web基础登陆注册代码
09-24
这是个Java Web基础登陆注册代码，对于初学者来说是个好的学习资源。
javaweb基础
06-25
这个“javaweb基础”课程可能是传智播客推出的一系列教学资源，旨在帮助初学者掌握JavaWeb开发的基础知识。 在JavaWeb开发中，主要涉及以下关键知识点： 1. **Servlet**: Servlet是JavaWeb中最基础的组件，它是...
Javaweb基础概念
最新发布
02-13
Javaweb基础概念
Java/JavaWeb基础知识源码
09-23
涵盖Java、JavaWeb各位方面的知识 代码看起来通俗易懂... Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。...
javaweb基础系统.zip
05-10
JavaWeb基础系统是一个涵盖Web开发基础知识的项目，主要利用Java语言和MVC（Model-View-Controller）设计模式来构建。MVC模式是Web应用程序架构中的一个经典模式，它将业务逻辑、数据处理和用户界面分离开来，使得...
Java Web开发入门很简单源代码
01-30
本书15章，分5篇。第1篇为准备篇，主要为Java Web开发概述，并手把手带领读者一块搭建Java Web开发环境；第2篇为基础篇，主要介绍HTML、CSS、JavaScript、Servlet、JSP和JavaBean等Java Web开发所需的基础知识，并对这些基础知识进行练习和领悟；第3篇为提高篇，介绍当前流行的SSH开发框架，并带领读者对SSH框架进行整合，最后介绍了Ajax和jQuery；第4篇为实践篇，通过3个具体实例了解Java Web开发流程；第5篇为扩展篇，主要是对移动Web开发领域的扩展。
JavaWEB之Jsp基础知识总结_慕课手记
dhhccsb16357的博客
03-26 224
理论 第一章 javaWEB基础 1、桌面应用程序一般分为两种 B/S（Browser/Server）客户端浏览器和服务器 C/S（Client/Server）客户端和服务器端 2、WEB开发指的是 开发部署在远程服务器上的应用程序，该应用程序可以用浏览器访问 WEB应用是基于HTTP(Hyper text transfer protcol ，超...
javaweb初学者常用代码集合
sinat_肖旭东的博客
07-30 1166
1..javaweb的代码在没学 框架知识之前，有很多的复写的代码 package com.xt.utils; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLEx
学通JAVAWEB——Java Web基础篇
H215919719的博客
10-26 419
JSP是Java Server Pages的缩写，是由Sun公司于1999年6月推出的技术，通过在传统的HTML中插入JSP脚本代码从而构成JSP页面。JSP是基于Java Servlet及整个Java体系的Web开发技术，可以利用这一技术来构建安全的、跨平台的动态Web站点。JPS目前在不断进行更新和优化。JSP具有如下主要特点。
“Java前端基础：探索Web开发的基础知识“
热门推荐
光就是羁绊之力，它会再度被某人继承，散发出耀眼的光。
01-14 1万+
1、Javaweb 1.1 基本概念 web开发： web，代表网页（网站）的意思，比如www.baidu.com 静态web： 列如静态web页面设计使用的：html，css。 静态web性质：提供给所有人看的数据始终不会发生变化。 动态web 比如：淘宝、网易云、几乎所有的网站都使用动态web。 它提供给所有人看到的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同。 技术栈：Servlet/JSP，ASP，PHP。 在Java中，动态web资源开发的技术称为Javaw
详细javaweb基础
小罗的博客
10-22 986
1. 概念：Tomcat 服务器是一个免费的开源的轻量级Web 应用服务器(Java编写的)，是开发和调试JSP 程序的首选。2. 作用：能够根据客户端的请求来启动并运行我们编写的数据逻辑代码。
Javaweb基础介绍
代码啥东东
02-07 496
Javaweb执行流程 1.启动服务器（Tomcat）； 2.客户端通过浏览器发送HTTP协议请求（底层通过TCP协议创建出信道），把信息发送到服务端，服务器到web对应的目录下，把请求交给控制层的组件； 3.控制组件（servlet）对请求分析完交给业务组件； 4.业务组件对请求做处理，如果需要与外部信息交互，就把信息交给持久层；如果不要就返回控制层一个转向信息； 5.持久层完成和...
写给大忙人看的JavaWeb基础
qq_51931200的博客
11-15 663
JavaWeb核心 一、Javaweb入门 1、Tomcat文件夹介绍 webapps作用： 用于发放网站 tomcat的核心配置文件： server.xml 2、常见请求状态码 200：请求响应成功 3xx：请求重定向 4xx： 404：找不到资源 5xx： 500：服务器代码错误 3、maven解决资源导出失败 <!--在build中配置resources，来防止我们资源导出失败的问题--> <build> <resources> <
javaweb学习笔记
BIAUTUMN的博客
08-03 97
*应实验室老师要求，开始自学javaweb。返校之前复习了上学期学习的Java， 返校后开始根据jw从入门到精通开始学习。 * 1.HTML 1’标记 html；head；title；body； br；（换行）p（段落）；h1-n（标题，数字越小级别越高，字体越大）；center；（居中） <html> <head> <title>html页面</title> </head> <body>
javaweb基础学习
09-14
欢迎您对JavaWeb基础学习的兴趣。如果您是初学者，我可以为您提供一些入门的建议和学习资源。以下是一些建议： 1. Java基础知识：在学习JavaWeb之前，首先需要掌握Java的基础知识，包括面向对象编程、控制流、集合...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值