Web简介
Web概念概述
javaweb:使用java语言开打基于互联网的项目(使用B/S架构)
软件的架构
C/S:Client/Server 客户端/服务器端
- 在用户本地有一个客户端,在远程有一个服务器端
如:QQ,迅雷等
优点:用户体验好
缺点: 开发、安装、部署、维护麻烦
B/S:Browser/Server 浏览器/服务器
- 只需要一个浏览器,用户通过不同的网址(url),客户访问不同的客户端程序
优点:开发、安装、部署、维护简单
缺点:如果应用过大,用户的体验可能会受到影响。对硬件要求过高
B/S 架构详解:
资源的分类:
静态资源:
使用静态网页开发技术发布的资源
特点:
所有用户访问得到的结果一样
如:文本、图片、音频、时评,HTML,CSS,JavaScript
如果用户请求的时静态资源,那么服务器会直接将静态资源发送给浏览器,浏览器内置了静态资源的解析器,可以展示静态资源
动态资源:
使用动态网页及时发布的资源
特点:
所有用户访问,得到的结果不一样
如:jsp/servlet/php.asp…
如果用户请求的时动态资源,那么服务器会执行动态资源,转换为静态资源,发送给浏览器。
我们学习动态资源,必须要先学习静态资源
静态资源:
html:用于搭建基础网页,展示页面的内容
css:用于美化页面,布局页面
javascript:控制页面的元素,让页面有一些动态的效果
HTML
1、HTML概念介绍
概念:是最基础的网页开发语言,Hyper Text Marker Language 超文本标记语言
- 超文本:
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。 - 标记语言:
由标签构成的语言:<标签的名称>如HTML、XML
标记语言不是编程语言
2、快速入门:
2.1 语法
- html后缀名 .html 或者.htm
- 标签j介绍:
- 围堵标签 :有开始标签和结束标签
根标签<html></html>
头标签<head></head>
标题标签<title></title>
<font color = "red"> </font>
- 自闭合标签:开始标签和结束标签在一起
如:<br/>
- 围堵标签 :有开始标签和结束标签
- 标签不可以嵌套:不能你中有我,我中有你
- 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双引号都可以)引起来
- 标签不区分大小写,但是建议使用小写
代码:
<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>
:html5中定义该文档为html文档
2、文本标签:和文本有关的标签
注释:<!-- 内容 -->
<h1> to <h6>
:标题标签,字体大小逐渐递减
<p>
:段落标签
<br>
:换行
<hr>
:展示一条水平线
注:有一些属性:
- color:改变颜色
- width:改变宽度
- size:改变高度
- align:对齐方式
- center
- left
- right
<b>
:字体加粗
<i>
:字体斜体
<font>
:字体标签
<center>
:居中标签
注:有一些属性:
- color:颜色
- size:大小
- face:字体
* 属性定义:
color定义的几种方式:
1. 英文单字:red,green,blue
2. rgb(值1,值2,值3):值的范围0~255(很多浏览器不支持了)
3. #值1值2值3:值的范围00~FF之间
width定义的几种方式:
1. 数值:width=“20”,数值的单位,默认时px(像素)
2. 数值%:占比相对于父元素的比例
3、图片标签:在页面上显示图片的标签
展示图片
<img src="指定图片的链接" align="" alt="加载失败显示的信息" width="宽度" height="高度"/>
<!--
相对路径
以.开头的路径
./:代表当前目录 ./image/1.jpg
../:代表上一-级目录
--!>
4、列表标签:
有序列表
<ol type=""> type 可以设置序号的样式
<li></li>
</ol>
无序列表
<ul type=""> type 可以设置圆点的样式
<li></li>
</ui>
5、链接标签:
a:定义一个超链接
<a href="超链接或者是malto:邮箱" target="指定打开资源的方式,新网页是跳转还是在本页打开" >点我</a>
target属性:_self:默认值,在当前页面打开_blank:在空白页面打开
和<img>标签结合使用:
<a href="链接"><img src="图片链接"></a>
div和span标签:结合CSS使用的标签
<span></span>:文本信息在一行展示,行内标签,内联标签
<div></div>:每一个div占满一整行。会自动换行,块级标签
语义化标签:html5中为了提高程序的可读性,提供了一些标签。结合CSS使用
<header></header>:标识头
<footer></footer>标识尾
6、表格标签:
table:定义一个表格
border:边框
width: 宽度
cellpadding:定义单元格之间的距离
cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线和为一条。
bgcolor:背景色
align:对齐方式
tr:定义行
bgcolor:背景色
align:对齐方
td:定义单元格
bgcolor:背景色
align:对齐方
colspan:合并行
rowspan:合并列
th:定义表头单元格
caption:表格标题
thead:表示表格的头部分
tbody:表示表格的体部分
tfoot:表示表格的尾部分
表单标签 from
HTML 标签:表单标签
表单概念:用于采集用户输入的数据的。和服务器进行交互。
使用的标签:from:用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围
属性:
- action:指定提交数据的URL
- method:指定提交方式
分类:一共7种,2种比较常用
get:
请求参数会在地址栏中显示。会封装到请求行中
请求参数的大小是由限制的
不太安全
post:
请求参数不会在地址栏中显示,会封装在请求体中
请求参数的大小是没有限制的
较为安全
表单项中的数据要想被提交:必须指定其name属性
<form action="" method="">
用户名:<input name="username"><br>
密码:<input name="password"/><br>
<input type="submit" value="登陆"/>
</form>
表单项标签:
1、input:可以通过type属性值,改变元素展示的样式
-
type属性:
- text:文本输入框
- placehoder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息。
- password:密码框(密文显示)
- radio:单选框
注意:
- 要想让多个单选框实现单选的效果,则多个单选框name的属性值必须一样。
- 一般会给每一个单选框提供value属性,指定其被选中后提交的值
- checked属性,可以指定默认值
- checkbox:复选框
一般会给每一个单选框提供value属性,指定其被选中后提交的值
checked属性,可以指定默认值 - file: 文件选择框
- hidden:隐藏域,用于提交一些数据
-
按钮:
-
submit:提交form表单
-
button:普通按钮
-
image:图片提交按钮
- src:属性指定图片的路径
lable:指定输入项的文字描述信息
注意:
label 的for属性值一般会和input 的 id 属性值对应。如果对应了,点击label 区域,会让input输入框获取焦点
-
<form action="" method="post">
<label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码:<input type="password" name="password" value="请输入密码"/><br>
性别:<input type="radio" name="gender" vulue="male" checked="checked"/>男
<input type="radio" name="gender" value="female" />女
爱好:<input type="checkbox" name="hobby" value="shoping"/>逛街
<input type="checkbox" name="hobby" value="java" checked="checked"/>java
<input type="checkbox" name="hobby" value="computer"/>游戏
<br>
图片:<input type="file" name="file"/>
隐藏域:<input type="hidden" name="id" value="aaa"/><br />
取色器:<input type="color" name="color" /><br />
生日:<input type="date" name="birthday" /><br />
生日:<input type="datetime-local" name="birthday" /><br />
邮箱:<input type="email" name="email" /><br />
数字:<input type="number" name="age" /> <br />
<input type="submit" value="登陆"/>
<input type="button" value="一个按钮" /><br />
<input type="image" src="1.png" />
</form>
2、select:下拉列表
- name:指定提交的值
- 子元素:option:指定列表的项
3、textarea:文本域
- cols:指定列数,每一行有多少字符
- row:默认多少行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>公司简介</h1>
<hr color="red"/>
<p><font color="red">字体为红色</font><b><i>斜体加粗</i></b>这是一个段落</p>
<p>这又是一个段落</p>
<hr color="red"/>
<font color="red" size="-1" face="Courier New, Courier, monospace"><center>这行字居中,并且改变了颜色</center></font>
<center<font color="red" size="-1" face="Courier New, Courier, monospace">这行字居中,并且改变了</font></center>
<img src="1.png" align="rigth" alt="学习截图" width="200" height="200">
<img src="1.png"/>
<table border="1" width="50%" cellpadding="0" cellspacing="0">
<caption>学生成绩单</caption>
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>99</td>
</tr>
</tbody>
<tr>
<td>2</td>
<td>李四</td>
<td>100</td>
</tr>
<tfoot>
<tr>
<td>3</td>
<td>王五</td>
<td>98</td>
</tr>
</tfoot>
</table>
<br/>
<table border="1" width="50%" cellpadding="0" cellspacing="0">
<caption>学生成绩单</caption>>
<tr>
<th rowspan="2">编号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>张三</td>
<td>99</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">李四</td>
</tr>
</table>
<br/>
<form action="" method="post">
<label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码:<input type="password" name="password" value="请输入密码"/><br>
性别:<input type="radio" name="gender" vulue="male" checked="checked"/>男
<input type="radio" name="gender" value="female" />女
爱好:<input type="checkbox" name="hobby" value="shoping"/>逛街
<input type="checkbox" name="hobby" value="java" checked="checked"/>java
<input type="checkbox" name="hobby" value="computer"/>游戏
<br>
图片:<input type="file" name="file"/>
隐藏域:<input type="hidden" name="id" value="aaa"/><br />
取色器:<input type="color" name="color" /><br />
生日:<input type="date" name="birthday" /><br />
生日:<input type="datetime-local" name="birthday" /><br />
邮箱:<input type="email" name="email" /><br />
数字(年龄):<input type="number" name="age" /> <br />
省份:<select name="province">
<option>请您选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">郑州</option>
</select><br />
自我介绍:<textarea cols="20" rows="5" name="description"></textarea><br />
<input type="submit" value="登陆"/><br />
<input type="button" value="一个按钮" /><br />
<!--<input type="image" src="1.png" />-->
</form>
</body>
</html>