web概念概述
JavaWeb:
使用Java语言开发基于互联网的项目
软件架构
1. C/S:Client/Server 客户端/服务器端
在用户本地有一个客户端程序 ,在远程有一个服务器端程序
优点:1.用户体验好
缺点:1.安装,开发,维护,部署麻烦
2. B/S:Browser/Server 浏览器/服务器
只需要一个浏览器,用户通过不同的网址(url),客户访问不同的服务器端程序
优点:1.开发,安装,部署,维护简单
缺点:1.如果应用过大,用户的体验可能会受到影响
2.对硬件要求过高
B/S架构详解
资源分类:
1.静态资源:
使用静态网页开发技术发布的资源
特点:所有用户访问,得到的结果是一样的。如:文本,图片,音频,视频,HTML,CSS,JavaScript。如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源。
2.动态资源:
使用动态网页及时发布的资源
特点:所有用户访问,得到的结果可能不一样。如:Jsp/servlet,php,asp... 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器。
我们要学习动态资源,必须先学习静态资源!
静态资源:
HTML:用于搭建基础网页,展示页面的内容
CSS:用于美化页面,布局页面
JavaScript:控制页面的元素,让页面有一些动态的效果
HTML
1.概念:是最基础的网页开发语言
Hyper Test Markup Language 超文本标记语言
超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本
标记语言:由标签构成的语言。<标签名称>如 html,xml
标记语言不是编程语言。
2.快速入门
语法:
1.html文档后缀名 .html 或者 .htm
2.标签分为:
围堵标签:有开始标签和结束标签。如
自闭合标签:开始标签和结束标签在一起。如
3.标签可以嵌套:需要正确嵌套,不能你中有我,我中有你
错误例子:
<a><b></a></b>
正确例子:
<a><b></b></a>
4.在标签中可以定义属性,属性是由键值对构成,值需要用引号(单双引都可)引起来。
5.html的标签不区分大小写,但是建议小写。
代码:
<html>
<head>
<title>this is a title</title>
</head>
<body>
<font color = 'red'>Hello World</font><br/>
<font color = 'green'>Hello World</font>
</body>
</html>
3.标签学习
文件标签:构成html最基本的标签
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
HelloWorld
</body>
</html>
<!--
html:html文档的根标签。
head:头标签。用于指定html文档的一些属性。引入外部的资源。
title:标题标签。
body:体标签。
<!DOCTYPE>:html中定义该文档是html文档
-->
文本标签:和文本有关的标签
<!-- 注释内容 -->
<h1> to <h6><!-- 标题标签 h1~h6字体大小逐渐递减 -->
<p><!-- 段落标签 -->
<br><!-- 换行标签 -->
<hr><!-- 展示一条水平线 属性:color(颜色),width(宽度),size(高度),align(对齐方式 center,left,right)-->
<b><!-- 字体加粗 -->
<i><!-- 字体斜体 -->
<font><!-- 字体标签 属性:color(颜色),size(大小),face(字体)-->
<center><!-- 文本居中 -->
<!-- 属性定义:
属性定义:
color:
1. 英文单词:red,green,blue
2. rgb(value1,value2,value3):value 范围:0~255 如 rgb(0,0,255)
3. #value1value2value3:00~FF 如:#FF00FF
4.
width:
1. 数值:width='20' , 数值的单位,默认是px(像素)
2. 数值%:占比相对于父元素的比例
-->
<font color="FF00FF" size="16" face="楷体">颜色展示</font>
3.图片标签:
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- img 图片标签 -->
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
<!-- 相对路径
以.开始的路径
./:代表当前目录 ./image/jingxuan_2.jpg
../:代表上级一目录-->
<img src="./image/jiangxuan_1.jpg"/>
</body>
</html>
4.列表标签:
有序列表:
<ol>
<li>xxx</li>
</ol>
无序列表
<ul>
<li>xxx</li>
</ul>
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!-- 有序列表 ol-->
早上起床干的事情
<ol type="A" start="5"><!-- type:序号类型 start:序号起始 -->
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>
<!-- 无序列表 ul-->
早上起床干的事情
<ul >
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
早上起床干的事情
<ul type="circle">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
早上起床干的事情
<ul type="square">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
</body>
</html>
5.链接标签:
<a></a>
<!-- 定义一个超链接
属性
href:指定访问资源的url(统一资源定位符)
target:指定打开资源的方式
_self:默认值,在当前页面打开
_blank:在空白页面打开
-->
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!-- 超链接 a-->
<a href="http://www.baidu.com">点我</a>
<br>
<a href="http://www.baidu.com" target="_self">点我</a>
<a href="http://www.baidu.com" target="_blank">点我</a>
<br>
<a href="./5_列表标签.html">列表标签</a>
<a href="mailto:xxxxxxx@XXXX.XX">联系我们</a>
<br>
<a href="http://www.baidu.com"><img src="image/jiangxuan_1.jpg"/></a>
</body>
</html>
6.div和span(块标签):
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<!--
div:每一个div占满一整行。块级标签
span:文本信息在一行展示,行内标签 内联标签
-->
<span>XXXXX</span>
<span>XX</span>
<br>
<div>XXXXXX</div>
<div>XX</div>
</body>
</html>
7.语义标签:
html5中为了提高程序的可读性,提供了一些标签
<header></header><!-- 页眉 -->
<footer></footer><!-- 页脚 -->
8.表格标签:
<table></table><!-- 定义表格
width:宽度
border:边框
cellpadding:定义内容和单元格的距离。
cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条。
bgcolor:背景色。
align:对齐方式
-->
<tr></tr><!-- 定义行
bgcolor:背景色
align:对齐方式
-->
<td></td><!-- 定义单元格
colspan:合并列
rowspan:合并行
-->
<th></th><!-- 定义表头单元格
-->
<caption><!-- 表格标题 -->
<thead></thead><!-- 表示表格的头部分 -->
<tbody></tbody><!-- 表示表格的体部分 -->
<tfoot></tfoot><!-- 表示表格的脚部分 -->