JavaWeb的一些理解

2021/12/11 22:48:16

编程Tag： 属性标签表单页面提交指定 javaweb 理解一些

本文主要是介绍JavaWeb的一些理解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

WEB概述

WEB是什么

WEB，在英语中web即表示网页的意思，它用于表示Internet主机上供外界访问的资源。

Internet上的资源分类

Internet上供外界访问的Web资源分为：

静态web资源（如html 页面）：指web页面中供人们浏览的数据始终是不变。

动态web资源：指web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同。

静态web资源开发技术

Html、CSS、javaScript

常用动态web资源开发技术：

JSP/Servlet、ASP、PHP等

在Java中，动态web资源开发技术统称为Javaweb，我们课程的重点也是教大家如何使用Java技术开发动态的web资源，即动态web页面。

CS、BS之争

B/S: Browser-Server 浏览器服务器模型 WEBQQ 网页游戏
优点: 不需要下载客户端程序, 使用浏览器可以直接访问. 程序的升级操作是在服务器端进行的. 浏览器只需要刷新页面就可以看到升级后的效果
缺点: 浏览器具有一定的局限性, 页面的展示能力仍然是很差. 所有的页面数据都需要从服务器实时的获取, 所以对网速的依赖很高
C/S: Client-Server 客户端服务器模型 QQ LOL
优点: 客户端可以任意的设计, 页面的展示能力就可以很强. 由于大量的资源都已经保存在了客户端, 和服务器交互的仅仅是一些变化的数据, 所以对网速的依赖很低
缺点: 第一次使用时需要下载客户端程序, 一旦程序需要升级操作, 所有的客户端程序都需要升级. 在有些场景中是不能被接受的.
===============================================
二、HTML
2.1.HTML是什么
超文本标记语言最基础的网页语言 W3C
HTML不是一门编程语言而是一门标记语言
HTML是用标记(标签/元素)来描述网页内容的
HTML是文档的一种

-------------------------------------------
2.2.HTML的结构
<!DOCTYPE HTML>
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
<!DOCTYPE HTML>用来指定当前页面所遵循的html的版本,不写默认是html5.0
<HEAD>头部分用来存放html页面的基本属性信息,优先被加载
<BODY>体部分用来存放页面数据,是可见的页面内容

<title></title>指定网页的标题
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用来指定浏览器用什么编码解析当前页面

-------------------------------------------
2.3.HTML语法
html标签分为开始标签和结束标签,如果标签内没有修饰的内容, 开始标签和结束标签可以合并为一个自闭标签
如: <br/> <hr/> <meat/>

标签通常都可以具有属性, 属性与属性值用"="连接, 属性的值可以用双引号、单引号引起来或者不用引号, 一般会用双引号引起来



html中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示
如果非要输入空格,可以用转义字符来替代  
如果非要输入换行,可以用 <br/> 来代替

***转义字符
< <
> >
" "
' '
空格  

-------------------------------------------
2.4.font标签
用来指定文本的字体/大小/颜色
color:指定字体颜色
值可以指定为颜色名如:red
或十六进制的颜色值如:#000000
或 rgb三原色值如:rgb(255,255,255)

-------------------------------------------
2.5.标题标签
指定特定样式字体的一组标签 (掌握)
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
属性:
align:指定文本的排列
left
center
right
justify

-------------------------------------------
2.7.列表标签
定义列表
<dl> 包裹定义列表
<dt> 列表的标题项
<dd> 列表的内容项、

有序列表
<ol> 开启有序列表
<li> 定义列表中的项
属性：
start:规定列表从第几项开始
type:定义列表数字的格式
1,a,A,i,I
无序列表
<ul> 定义一个无序列表
<li> 定义列表中的项
属性:
type:定义项目符号的类型
disc square circle

-------------------------------------------
2.8.img标签 -- 图像标签
<img src="图片的路径" alt="代替图像显示的文本"/>
必选属性:
src:图片的路径
alt:代替图像显示的文本
可选属性:
width:宽度 px %
height:高度 px %
border:边框的宽度 px

-------------------------------------------
2.9.超链接 -- <a> 锚
用于指向当前位置以外的资源
(1) 用于创建指向另外一个文档的超链接
(2) 用于在当前页面的不同位置之间进行跳转
重要属性:
href: 所指向资源的URL
name: 指定锚的名字
target: 指定浏览器打开目标URL的方式。
_blank 在新窗口中打开目标url
_self 在当前窗口中打开目标url

-------------------------------------------
2.10.表格标签 -- <table>
<table> 定义一个HTML表格
<tr> 定义表格中的行
<td> 定义表格中的单元格
<th> 定义表格中的表头
table的重要属性:
border 边框宽度
cellspacing 单元格之间的空白
cellpadding 边框与单元格内容之间的距离
bgcolor 背景颜色
bordercolor 边框颜色
width 宽度
align 对齐方式
tr重要属性:
align 对齐方式
bgcolor 背景颜色
th/td重要属性:
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨的列数
rowspan 可竖跨的行数
<caption> 定义表格的标题

-------------------------------------------
2.11.表单
(1)浏览器向服务器发送数据的方式, 有两种
a)利用超链接向服务器发送数据 -- 请求参数
在超链接的后面拼接上要发送的请求参数, 链接和请求参数之间用?分割, 参数名和参数值用 = 连接, 多个参数之间用 & 分割, 可以存在多个同名的参数

b)利用表单向服务器发送数据
利用HTML中的<form>标签以及一些表单项标签, 用户可以输入数据, 通过提交表单发送数据给服务器

(2)form标签
必须存在的属性:
action: 指定表单发送的目标URL地址
可选的属性:
method: 指定以何种方式发送表单
http协议指定了7种提交方式, 其中5种不用, 只用GET提交和POST提交
只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST")才是POST提交，其他提交都是GET提交．

GET提交和POST提交的区别：
主要区别体现在数据传输方式的不相同
a)GET提交: 请求参数会赋在地址栏后进行传输
这种方式发送的数据量有限, 最大不超过1kb(或4kb)
数据显示在地址栏, 安全性差

b)POST提交: 请求参数在底层流中传输
这种方式发送的数据量无限制
地址栏上看不到数据, 比较安全

-------------------------------------------
2.13.表单中的项
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它
(1)<input> 输入框
重要属性:
type属性
文本框 text 输入的文本信息直接显示在框中

密码框 password 输入的文本以圆点或者星号的形式显示

单选框 radio 进行单项的选择如性别选择多个radio的name属性相同会被当作一组来使用必须用value为选项指定提交的值

复选框 checkbox 进行多项选择，爱好的选择。多个checkbox具有相同的name属性时会被当作一组来使用必须用value为选项指定提交的值

隐藏字段 hidden 如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中

提交按钮 submit 实现表单提交操作的按钮可以通过value属性指定按钮显示的文字

重置按钮 reset 重置表单到初始状态

按钮 button 普通按钮, 没有任何功能需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。

文件上传项 file 提供选择文件进行上传的功能。

图像 image 利用一张图片替代提交按钮的功能, 不常用

name属性
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它. 另外name属性的值是可以重复的

value属性可以给input输入框设置一个初始值

readonly属性
使当前输入项变为只读,不能修改,但是提交时仍会被提交

disabled
使当前输入项不可用,不能修改值,也不会被提交

size属性
指定当前输入框的宽度

checked属性
指定单选框/复选框被选中

(2) <textarea> 文本域
属性:
rows 指定文本域的行数(高度)
cols 指定文本域的列数(宽度)
readonly 只读
disabled 禁用

(3) <select> <option>
select 提供下拉选择功能
option 下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
重要属性:
name: 下拉列表的名称
size: 设置下拉选项中可见选项的个数
disabled 禁用下拉选框
multiple 是否支持多选
-------------------------------------------
14.注册表单练习
略

这篇关于JavaWeb的一些理解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！