java web学习1——基本概念、html标签、表单标签_javaweb1 下面( )是表单标签。 a.<hr> b. <front> c.<form> d.-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46185085/article/details/108014996

1.web概念概述

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

1.1软件架构分类

1.C/S: Client/Server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器端程序，例如：QQ，迅雷等。它的优点是用户体验好；其缺点，是开发、安装，部署，维护很麻烦。

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

1.2 B/S架构的资源

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

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

由此我们知道，我们要学习动态资源，必须先学习静态资源！

静态资源三剑客：

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

2. HTML

概念：是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

标记语言：没有任何逻辑、不是编程语言、写上就解析（而不是像编程语言，例如if-else，选择性执行，有逻辑）。
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言

2.1简单的语法

语法：

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

示例代码：

<html>
	
	<head>
		<title>title</title>
	</head>
	
	<body>
		<FONT color='red'>Hello World</font><br/>
		
		<font color='green'>Hello World</font>
	
	</body>

</html>

2.2标签学习

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

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

2.文本标签：和文本有关的标签。注意，这里文本标签中也会有一些属性可以设置，但是如果学了CSS之后，就不会使用html中的属性设置，而是只使用CSS的属性设置。

注释：
<h1> to <h6>：标题标签，h1~h6:字体大小逐渐递减；
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线
属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right：右对齐
<b>：字体加粗
<i>：字体斜体
<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. 数值%：占比相对于父元素的比例
<center>:文本居中
* 属性：
* color：颜色
* size：大小
* face：字体

2.3 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的案例简介</title>
</head>
<body>
<h1>
    案例简介
</h1>
<hr color="yellow">
<font color="red">这是我的案例！</font>这是我的<b><i>案例</i></b>    !

<p>
这是我的案例！这是我的案例！这是我的案例！第一段。
</p>
<p>
这是我的案例！这是我的案例！这是我的案例！第二段。
</p>
<p>
这是我的案例！这是我的案例！这是我的案例！第三段。
</p>
<p>
这是我的案例！这是我的案例！这是我的案例！第四段。
</p>
<hr color="yellow">

<font color="gray" size="2">
    <center>
        这是我的案例<br/>创建日期是2020年8月16日，星期天，&copy嗯嗯嗯嗯嗯
    </center>
</font>
</body>
</html>

2.4图片标签

img：展示图片

属性：src：指定图片的位置

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片学习</title>
</head>
<body>
    <img src="image/1a策略.png" align="right" alt="图片" width="200" height="400"/>
<!--alt属性的含有是，当图片无法显示时，则显示alt定义的文字-->

<!--相对路径
    以.开头的路径
    ./代表当前目录
    ../代表上一级目录
    若什么都不加，默认时代表当前目录-->
</body>
</html>

2.5 列表标签

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

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

<!--有序列表-->
    早上起床干的事情，有序列表
    <!--ol的属性type可以选择，是哪一种标签（123）或（ABC）
    ol的start属性，可以选择从第几个开始-->
    <ol type="A" start="5">
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ol>

    无序列表，圆点
    <ul type=disc>
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>

	无序列表，方点
    <ul type=square>
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>
    
	无序列表，空心圆点
    <ul type=circle >
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ul>
</body>
</html>

2.6. 链接标签

a:定义一个超链接

属性：
* href：指定访问资源的URL(统一资源定位符)
* target：指定打开资源的方式，可以有下两个值： _self:默认值，在当前页面打开；_blank：在空白页面打开。

代码：

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

<!--    超链接-->
    <a href="http://www.baidu.com">点我</a>
    <br>
    <a href="http://www.baidu.com" target="_blank">点我，我会在另一个新页面中打开</a>
    <br>

    <a href="./文本标签的学习.html">我会打开本地资源，文本标签页</a>
    <a href="mailto:我的邮箱@qq.com">我会打开邮箱软件，并且添加这个邮箱地址，准备发送</a>

    <br>
    <p>点击下面图片，跳转至网页的方式</p>
    <a href="http://www.baidu.com"><img src="image/模拟BS服务器分析.png"></a>
</body>
</html>

2.7块标签，div和span

div:每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签，内联标签

这两个一般用在CSS中的控制。

2.8语义化标签

html5中为了提高程序的可读性，提供了一些标签。

：页眉
：页脚

也是之后结合CSS使用的。

2.9表格标签

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

<thead>
<tbody>
<tfoot>
这三个属性没有任何显示的表示，只是为了让代码的逻辑变得更加清晰。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    border线的类型，类型为1；width，表格的宽度，占body的百分之50-->
<!--    cellpadding，字与表的线的距离；cellspacing，表格中两条线之间的距离，为0则合为一条-->
<!--bgcolor，背景色；align，对齐方式-->

    <table border="1" width="50%" cellpadding="0" cellspacing="0">
        <caption>这是一个表，我是表标体</caption>
        <tr>
<!-- th是定义表头单元格，此时字体会加粗，会居中-->
<!-- 合并行，占两行-->
            <th rowspan="2">编号</th>
            <th>姓名</th>
            <th>成绩</th>

        </tr>

        <tr>
            <td>白利群</td>
            <td>90</td>
        </tr>

        <tr>
            <td>2</td>
<!--合并列，占两列-->
            <td colspan="2">白展堂</td>
        </tr>
    </table>
</body>
</html>

2.10案例，旅游网站首页

1. 确定使用table来完成布局	
2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
3. 如果某一行有多个单元格，则使用
	<tr>
		<td>
			<table></table>
		</td>
	</tr>

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游网</title>
</head>
<body>
<!--    最外层的table，用于整个页面的布局-->
    <table width="100%" align="center">
<!--        第一行-->
        <tr>
            <td>
                <img src="image/top_banner.jpg" alt="" width="100%">
            </td>
        </tr>
<!--        第二行-->
        <tr>
            <td>
                <table>
                    <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="#9acd32" align="center" height="45">
                        <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>
<!--        第五行 -->
        <tr>
            <td>
                <img src="image/icon_5.jpg" alt="">
                这是精选
                <hr color="yellowgreen">
            </td>
        </tr>
<!--        第六行-->
        <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>
                        <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>
        <!--        第七行 -->
        <tr>
            <td>
                <img src="image/icon_6.jpg" alt="">
                这是国内游
                <hr color="yellowgreen">
            </td>
        </tr>
<!--        第八行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="image/guonei_1.jpg" alt="">

                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 899</font>
                        </td>
                    <tr>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 899</font>
                        </td>
                    </tr>
                    </tr>
                </table>
            </td>
        </tr>
        <!--        第九行 -->
        <tr>
            <td>
                <img src="image/icon_7.jpg" alt="">
                这是国内游
                <hr color="yellowgreen">
            </td>
        </tr>
        <!--        第十行-->
        <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="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 1244</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 1244</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 1244</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 1244</font>
                        </td>
                    <tr>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 1244</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 1244</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 1244</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚，五天4晚自由行（国内游）</p>
                            <font color="red">&yen; 1244</font>
                        </td>
                    </tr>
                    </tr>
                </table>
            </td>
        </tr>
<!--        第十一行-->
        <tr>
            <td>
                <img src="image/footer_service.png" alt="" width="100%">
            </td>
        </tr>
<!--第十二行-->
        <tr>
            <td align="center" bgcolor="#9acd32" height="40">
                <font color="gray" size="2">
                    这是结尾结尾结尾这是结尾结尾结尾这是结尾结尾结尾
                </font>
            </td>
        </tr>
    </table>
</body>
</html>

2.11 html表单标签

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

标签关键字form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。

属性：
* action：指定提交数据的URL
* method：指定提交方式

提交方式method分类：一共7种，2种比较常用：

get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
post：
1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数的大小没有限制。
3. 较为安全。

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

2.12 表单项标签

表单项标签input，可以通过type属性值，改变元素展示的样式。type的可选属性常用的有：text、password、radio、checkbox、file、hidden、按钮（提交按钮submit、按钮button、图片按钮image ）。

type属性“text”：文本输入框，是默认值。文本输入框后，有一个特有的属性值，placeholder，它能指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。
password：密码输入框，密文显示。
radio:单选框
* 注意：
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值
checkbox：复选框
* 注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息。
按钮：
- submit：提交按钮。可以提交表单
- button：普通按钮
- image：图片提交按钮
  - src属性指定图片的路径
label：指定输入项的文字描述信息
注意：label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

<!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" placeholder="请输入用户名" id="username"><br>
        密码:<input type="password" name="password" placeholder="请输入密码"><br>
        性别:<input type="radio" name="gender" value="male"> 男
            <input type="radio" name="gender" value="female" checked> 女
            <br>
        爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
            <input type="checkbox" name="hobby" value="java" checked> Java
            <input type="checkbox" name="hobby" value="game"> 游戏
        <br>
        选择一个图片，以备提交：<input type="file" name="file">
        <br>
        隐藏域:<input type="hidden" name="id" value="aaa"> <br>
        取色器:<input type="color" name="color"><br>
        日期date:<input type="date" name="birthday"> <br>
        日期datetime-local:<input type="datetime-local" name="birthday2"> <br>
        邮箱:<input type="email" name="email"><br>
        年龄（数字):<input type="number" name="age"> <br>
        <br>
        <input type="submit" value="提交按钮submit：登录"> <br>
        <input type="button" value="普通按钮button"><br>
        <input type="image" src="img/regbtn.jpg"><br>
</form>

</body>
</html>

2.13 表单项标签2：select和textarea

select: 下拉列表
- 子元素：option，指定列表项
- 注意：select标签后要记得添加name，否则不会提交数据；option后面的value，可以简化提交的指定数据；selected表示默认选中。
textarea：文本域
- cols：指定列数，每一行有多少个字符
- rows：默认多少行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
   省份：<select name="province">
       <option value="">--请选择-- </option>
       <option value="1">北京</option>
       <option value="2">上海</option>
       <option value="3" selected>广州</option>
   </select><br>
<!--            selected表示默认选中-->
   <br>
   自我描述（文本域):
       <textarea cols="20"  rows="5" name="des"></textarea>
</form>
</body>
</html>

2.14综合案例——表单实现注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单案例_注册页面</title>
</head>
<body>
<!--    定义表单-->
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
                <td>
                    <lable for="username">用户名：</lable>
                </td>
                <td>
                    <input type="text" name="username"  id="username" placeholder="请输入用户名">
                </td>
            </tr>
            <tr>
                <td>
                    <lable for="password">密码：</lable>
                </td>
                <td>
                    <input type="password" name="password"  id="password" placeholder="请输入密码">
                </td>
            </tr>
            <tr>
            <td>
                <lable for="email">邮箱：</lable>
            </td>
            <td>
                <input type="email" name="email"  id="emial" placeholder="请输入邮箱">
            </td>
            </tr>
            <tr>
                <td>
                    <lable for="name">姓名：</lable>
                </td>
                <td>
                    <input type="text" name="name"  id="name" placeholder="请输入姓名">
                </td>
            </tr>
            <tr>
                <td>
                    <lable for="tel">手机号：</lable>
                </td>
                <td>
                    <input type="text" name="tel"  id="tel" placeholder="请输入手机号">
                </td>
            </tr>
            <tr>
                <td>
                    <lable for="gender">性别：</lable>
                </td>
                <td>
                    <input type="radio" name="gender"  id="gender" value="male"> 男
                    <input type="radio" name="gender" id="gender" value="female"> 女
                </td>
            </tr>
            <tr>
                <td>
                    <lable for="bir">出生日期：</lable>
                </td>
                <td>
                    <input type="date" name="bir"  id="bir" placeholder="请输入生日">
                </td>
            </tr>
            <tr>
                <td>
                    <lable for="checkcode">验证码：</lable>
                </td>
                <td>
                    <input type="text" name="checkcode"  id="checkcode">
                    <img src="verify_code.jpg">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="注册" id="btn">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>