文章目录
一、Web概念
javaweb:使用JAVA语言开发基于互联网的项目
软件架构
C/S(客户端/服务器端)
在用户本地有一个客户端程序,在远程有一个服务器端程序
优点:用户体验好
缺点:安装,开发、维护、部署麻烦
B/S(浏览器/服务器端)
只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
优点:安装,开发、维护、部署比较简单
缺点:1、如果应用过大,用户的体验可能会受影响
2、对硬件要求过高
网络通信三要素
IP:电子设备(计算机)在网络中的唯一标识
端口:应用程序在计算机中的唯一标识。0~65536
传输协议:规定了数据传输的规则
tcp协议:安全协议,三次握手,速度稍慢
udp:不安全协议,速度快
二、 B/S架构详解
资源分类
1、静态资源
使用静态网页开发技术发布的资源。
特点:
1、所有用户访问,得到的结果是一样的。
如:文本,图片,音频、视频, HTML,CSS,JavaScript
2、如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,
可以展示静态资源
HTML(超文本标记语言)
用于搭建基础网页,展示页面的内容,是最基础的网页开发语言
超文本: 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
标记语言: 由标签构成的语言,标记语言不是编程语言
语法:html文档后缀名 .html或者 .htm
2. 动态资源
使用动态网页及时发布的资源。
特点:
1、所有用户访问,得到的结果可能不一样。
如:jsp/servlet,php,asp...
2、如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
三、 HTML标签
标签分为
围堵标签:有开始标签和结束标签
自闭合标签:开始标签和结束标签在一起。如<br/>
标签可以嵌套,需要正确嵌套,不能你中有我,我中有你
正确:<a><b></b></a>
错误:<a><b></a></b>
在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可以)引起来
<font color="red">你好</font><br>
html的标签不区分大小写,但是建议使用小写
文件标签
文件标签是构成htnl最基本的标签。
标签 | 描述 |
---|---|
html | html文档的根标签 |
head | 头标签。用于指定html文档的一些属性。引入外部的资源 |
title | 标题标签 |
body | 体标签 |
<!DOCTYPE> | html5中定义该文档是html |
文本标签
文本标签是和文本有关的标签。
标签 | 描述 |
---|---|
< !–注释内容–> | 注释 |
< h1 >to< h6> | 标题标签(h1~h6字体大小逐渐递减) |
< br> | 换行标签 |
< hr> | 显示一条水平线 |
< b> | 字体家粗 |
< i> | 字体倾斜 |
< font> | 字体标签 |
< center> | 文本居中 |
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--展示一张图片 img-->
<img src="image/jiangxuan_2.jpg"/>
</body>
</html>
列表标签
有序列表:
<body>
<!--有序列表 ol-->
<ol type="A" start="2">
<li>开冰箱门</li>
<li>放入大象</li>
<li>关冰箱门</li>
</ol>
无序列表
<!--无序列表 ul-->
<ul type="A" start="2">
<li>开冰箱门</li>
<li>放入大象</li>
<li>关冰箱门</li>
</ul>
超链接标签
< a> < /a>:定义一个连接标签
属性:
href:指定访问资源的URL(统一资源定位符)
target:指定打开资源的方式
_self:默认值,在当前页面打开
_blank:在空白页面打开
块标签
div | 没有任何样式,每一个div占满一整行(块级标签) |
---|---|
span | 没有任何样式,文本信息在一行展示,行内标签 内联标签(行内标签) |
表格标签
标签 | 描述 |
---|---|
table | 定义表格 |
width | 宽度 |
border | 边框 |
cellpadding | 定义内容和单元格的距离 |
cellspacing | 定义单元格之间的距离。如果指定为0,则单元格的线会合为一条 |
bgcolor | 背景色 |
align | 对齐方式 |
tr | 定义行 |
bgcolor | 背景色 |
align | 对齐方式 |
td | 定义单元格 |
colspan | 合并列 |
rowspan | 合并行 |
th | 定义表头单元格 |
< caption> | 表格标题 |
< thead> | 表示表格的头部分 |
< tbody> | 表示表格的体部分 |
< tfoot> | 表示表格的脚部分 |
表单标签
表单标签用于采集用户输入的数据的。用于和服务器进行交互
form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围。
属性:
action:指定提交数据的URL
method:指定提交方式
分类:
get:1、请求参数会在地址栏中显示。会封装到请求行中
2、请求参数的长度是有限制的
3、不太安全
post:1、请求参数不会在地址栏中显示。会封装在请求体中
2、请求参数的大小没有限制
3、较为安全
<form action="#" method="get">
用户名:<input name="username"><br>
密码:<input name="password"><br>
<input type="submit" value="登录">
</form>
表单项中的数据要想被提交,必须指定其name属性
表单项标签
input:可以通过type属性值,改变元素展示的样式
select: 下拉列表,子元素:option,指定列表项
textarea:文本域,cols:指定列数,每一行有多少个字符。rows:默认多少行
案例:
<form action="#" method="get">
<label for="username">用户名</label> :<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码:<input type="radio" 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">java
<input type="checkbox" name="hobby" value="game">游戏<br>
头像:<input type="file" name="file">
<br>
<input type="submit" value="登录"><br>
隐藏域:<input type="hidden" name="id" value="aaa"><br>
取色器:<input type="color" name="color"><br>
</form>
四、CSS层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效。
作用:用于美化页面,页面布局
好处:功能强大。将内容展示和样式控制分离,降低耦合度,解耦,让分工协作更容易,提高开发效率。
CSS与html结合方式
内联样式
在标签内使用style属性指定css代码
<div style="color: red;">hello css</div>
内部样式
在head标签内,定义style标签,style标签的标签体内容就是css代码
<style>
div{
color: blue;
}
</style>
外部样式
1、定义css资源文件
2、在head标签内,定义link标签,引入外部的资源文件
a.css文件:
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
* 注意:
* 1,2,3种方式 css作用范围越来越大
* 1方式不常用,后期常用2,3
* 3种格式可以写为:
<style>
@import "css/a.css";
</style>
css语法
-
格式:
选择器 { 属性名1:属性值1; 属性名2:属性值2; ... }
注意: 每一对属性需要使用;隔开,最后一对属性可以不加;
选择器:筛选具有相似特征的元素
选择器
分类:
基础选择器
-
id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法:#id属性值{} -
元素选择器:选择具有相同标签名称的元素
* 语法: 标签名称{}
* 注意:id选择器优先级高于元素选择器 -
类选择器:选择具有相同的class属性值的元素。
* 语法:.class属性值{}
* 注意:类选择器选择器优先级高于元素选择器
扩展选择器 -
选择所有元素:
* 语法: *{} -
并集选择器:
* 选择器1,选择器2{} -
子选择器:筛选选择器1元素下的选择器2元素
* 语法: 选择器1 选择器2{} -
父选择器:筛选选择器2的父元素选择器1
* 语法: 选择器1 > 选择器2{} -
属性选择器:选择元素名称,属性名=属性值的元素
* 语法: 元素名称[属性名=“属性值”]{} -
伪类选择器:选择一些元素具有的状态
* 语法: 元素:状态{}
* 如: < a>
* 状态:
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
属性
属性 | 描述 |
---|---|
font-size | 字体大小 |
color | 文本颜色 |
text-align | 对齐方式 |
line-height | 行高 |
background | 背景 |
border | 设置边框,符合属性 |
width | 宽度 |
height | 高度 |
margin | 外边距 |
padding | 内边距 |
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
* float:浮动
* left
* right