Web概念引入
JavaWeb:使用Java语言开发基于互联网的项目
软件架构:
-
C / S
client / Server:客户端 / 服务器端 ,如:qq
优点:用户体验好
缺点:开发,安装,部署,维护麻烦 -
B / S
Browser / Server:浏览器 / 服务器端
只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
优点:开发,安装,部署,维护简单
缺点:如果应用过大,用户体验可能会受到 影响;对硬件要求过高 -
B / S 架构详解:
静态资源:使用静态网页开发技术发布的资源
特点:所有用户访问,得到的结果是一样的 ,如:文本,图片,音频,视频,Html,CSS,JavaScript
如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,浏览器中内置了静态资源的解析引擎,可以直接显示静态资源
动态资源:使用动态网页及时发布的资源
特点:所有用户访问,得到的结果可能不一样,如:jsp,servlet,php,asp…
如果用户请求的是动态资源,服务器会执行动态资源,转换为静态资源,再发送给浏览器
- 我们要学习动态资源,必须先学习静态资源
HTML:用于搭建网页基础,展示页面的内容
CSS:用于美化页面,布局页面
JavaScript:控制页面的元素,展示动态效果
HTML概念
HTML(Hyper Text Markup Language):超文本标记语言
超文本:用超链接的方法,将各种不同空间的文本信息组织在一起的网状文本
标记语言:由标签构成的语言 <标签名称> 如:html, xml
标记语言不是编程语言
表单及表单元素
表单的概念:用于采集用户输入的数据,用于和服务器进行交互
form:用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围
一些属性:
- action:指定提交数据的URL
- method:指定提交方式,一共七种,两种比较常用
1.get:
请求参数会在地址栏中显示,会封装到请求行中
请求参数大小是有限制的,不太安全
2.post:
请求参数不会在地址栏中显示,会封装在请求体中
请求参数的大小无限制,较为安全
表单项中的数据要想被提交,必须指定其name属性
input
,表单项标签,可以通过type属性值,改变元素展示的演示
<form>
用户名:<input name = "username"><br/>
密码:<input name = "password"><br/>
<input type="submit" value="登录">
</form>
文本框
<input type="text" >
密码框
<input type="password" >
下拉选择
<select name = "province">
<option value = "" >--请选择--</option>
<option value = "北京" >北京</option>
<option value = "上海" >上海</option>
<option value = "西安" >西安</option>
</select>
单选按钮
性别:<input type="radio" name = "gender" value = "male">男
<input type="radio" name = "gender" value = "female">女
1.要想让多个单选框实现单选的效果,多个单选框的name属性值必须一致
2.一般会给每一个单选框提供value属性,指定其被其选中后提交的值
3.checked属性,可以指定默认值
复选框
爱好:<input type="checkbox" name = "hobby" value = "java">Java
<input type="checkbox" name = "hobby" value = "学习">学习
<input type="checkbox" name = "hobby" value = "睡觉">睡觉
文本域
<textarea cols="20" rows="5" name = "text"></textarea>
- cols:指定列数,每一行有多少个字符
- rows:默认多少行
隐藏表单
hidden:隐藏域,用于提交一些信息
<input type="hidden" name = "id" value = "aaa">
文件选择框
file:文本选择框,可以用来选择图片等
<input type="file" name = "file">
按钮
- submit:提交按钮,可以提交表单
- button:普通按钮
- image:图片提交按钮
src
:指定图片路径
<input type = "submit" value = "登录">
label
指定输入项的文字描述信息
<label for="username">用户名:</label>
<input type="text" name="username" id = "username" placeholder="请输入用户名"><br/>
注意:Label的for属性一般会和input 的 id 属性值对应。如果对应了,则点击label区域,会让input输入框获取焦点。
表格
<table>
<caption>学生信息表</caption>
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
图片
<img src="···.jpg" width="480" height="270">
超链接
<a href="https://baidu.com">点击</a>
列表
无序列表:
<ul>
<li>内容</li>
</ul>
有序列表:
<ol>
<li>内容</li>
</ol>
div & span
<div>你好</div>
<span>你好</span>
div换行,span不换行
以上为个人学习笔记,参考自黑马教程。