软件架构

C/S: Client/server 客户端/服务器端

在用户本地会有一个客户端的程序，在远程有一个服务器端程序。

例如，QQ，当你在QQ用户端程序输入用户名密码时，服务器端会判断你给出的数据是否存在。

优点：用户体验较好。用户将需要的数据提前下载到本地，客户端程序运行会更顺畅。

缺点：开发，安装，部署，维护较困难。

B/S ：Browser/Server 浏览器/服务器端

只需要一个浏览器，用户通过不同的URL可以访问不同的服务器程序。

优点：开发，0安装，部署，维护相对简单。

缺点：对硬件要求过高，如果应用过大，用户的体验可能会受到很大的影响。

B/S架构详解：

资源分类：

静态资源：

静态资源分类：

1.HTML:用于搭建基础网页，展现页面中的内容。

2.CSS：用于美化页面，布局页面。

3.javascript:控制页面的元素，让页面有一些动态的效果（并不是动态资源）

静态资源定义：使用静态网页开发技术发布的资源。

静态资源特点：

1.所有用户访问，得到的结果是一样的。

2静态资源.如：文本，图片，音频，视频，HTML，CSS，JAVAscript

3.如果用户请求的是静态资源，那么服务器会直接将静态资源发给浏览器，浏览器内置了静态资源的解析引擎，可以展现静态资源。

动态资源

动态资源定义：使用动态网页技术发布的资源

动态资源特点：

1.所有用户访问，得到的结果可能是不一样的（原因：用户访问时，会从服务器的数据库拿到数据）

2.动态资源如servlet/jsp

3.如果用户请求的是动态资源，那么服务器会执行动态资源，并将其转换为静态资源，再发送给浏览器。

示意图如下：

HTML

HTML：Hyper Text Markup Language 超文本标记语言

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

标记语言：

1.由标签构成的语言。如html,xml

2.标记语言不是编程语言。编程语言具有很强的逻辑性，可以控制它是否执行，标记语言没有逻辑性，只要写上内容就会执行。

HTML基础语法：

语法：

1.html文档后缀名.html或者.htm

标签分类：

1.围堵标签：有开始标签和结束标签。如<html></html>

2.自闭合标签：开始标签和结束标签在一起，如<br/>

标签可以嵌套：但是需要正确嵌套，不能"你中有我，我中有你"

在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可以）引起来。

html的标签不区分大小写，但是建议使用小写。

文件标签：

构成html最基本的标签

html: html文档的根标签

head: 头标签，用于指定html文档的一些属性，引入外部的资源。

title: 标题标签

body: 体标签

meta :用charset 说明编码

<!DOCTYPE html>：声明这是一个html5文档。

注释：

文本标签：

<br/>或者<br>:换行标签，因为直接在文本中换行是不支持的，换行会被解析成一个空字符。

<h1>-<h6>:标题标签，数字代表标题的大小，h1字体最大，数字越大字号越小。

<p>：段落p标签

<hr/>:自闭合标签，显示一条水平线。

<b>:字体加粗

<i>: 字体斜体

图片标签

<img/>:自闭合标签。src 属性指 "source"，源属性的值是图像的 URL 地址。

关于路径的知识点在代码注释中有记录。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!--在同一级的相对路径上直接写图片文件名字--><img src="img.jpg" /><!--在下一级的相对路径时，在src属性上加上一个"/"就可以找到下一级--><!--在上一级的相对路径时，在src属性上加上一个"../"就可以找到上一级--><img src="../image/img.jpg" /><!--相对路径的斜杠是向左的，绝对路径是向右的--><img src="chrome://newtab/images/il/jx_tmall.png" /><!--上面语句中的路径是从网络中取得绝对路径，只要有网络连接就可以访问-->
</body></html>

列表标签：

有序列表：

ol: order list,定义一个有序列表，li标识列表中的每一项，自动加上数字代表有序。

无序列表：

ul：定义一个无序列表，初始会有在项前面有圆点，li仍然标识列表中的每一项。

链接标签：

<a></a>：定义一个超链接

属性：

1.href:应该输入一个能够跳转的资源路径。

2.target: 当target = _self时表示在当前页面打开，当target = _blank表示在另一个窗口打开。

块标签：

<span></span>:文本信息在一行展示，称为行内标签，内联标签

<div></div>:每一个div占满一整行，块级标签

语义化标签

html5当中为了提高程序的可读性，提供了一些标签。

<header></header>：表示头部，增加可读性，用该标签来控制css样式

<footer></footer>:表示文本尾部

表格标签

html中对表格的操作时，行是基本单位

table:定义表格

tr:定义行

td:定义单元格

th:定义表头单元格

表单标签

用于采集用户输入的数据的。用于和服务器进行交互。

<form></form> :用于定义表单的。可以定义一个范围，范围代表了采集用户数据的范围。

form标签中的属性：

action :指定提交数据的URL

method :指定提交的方式，例如post,get

注意：表单项中的数据想要被提交，必须指定name属性

表单项

input :可以通过type属性来改变元素展现的样式

type属性：

text :文本输入框

password :密码输入框

radio:单选框

注意：

1.要想让多个单选框实现单选的效果，则多个单选框的name属性必须一样

2.单复选框一般会给每一个单选框提供value属性，指定其被选中后提交的值

3.可以使用checked来指定默认值

checkbox :复选框

file :文件选择框，可以提交文件到服务器

hidden :用于提交信息

submit :提交按钮，可以提交表单

button:一个按钮，会和javascript结合实现动态效果

image :通常用src指定图片的路径，可以用于提交

color :取色器，也可以提交。

data/datatime-local :前者只有年月日，后者有小时和分钟

value属性：通常用来指定被选中后给服务器提交的值

placehooder属性:它的值可以给框附加提示信息，只要点击后就消失。

select属性: 下拉列表，要加name才能提交

option:给出选项

textarea 属性:文本域

cols:定义每行字符数

rows:定义行数

CSS

概念：Cascading Style Sheets:层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

好处：

1.控制样式功能强大

2.将内容的展示与样式控制分离，降低了耦合度，让分工协作更容易，提高开发的效率

CSS的使用

即css与html的结合方式

内联样式：

在标签内使用style属性指定css代码

代码演示：

<body><div style="color: blue;">你好呀，世界</div>
</body>

这种方式并不推荐使用，这种将样式仍然嵌入在文本中，并没有达到样式的控制和文本分离的效果。

内部样式：

在head标签中，定义style标签，style标签的标签体内容就是css代码

<head><style>div {color: blue;}</style>
</head><body><div>你好呀，世界</div>
</body>

外部样式：

步骤：

1.定义css资源文件

2.在head标签内，定义Link标签，引入外部的资源文件

注意：

三种方式，css作用范围越来越大，第一种方法不常用

外部样式还有另外一种写法。

在html文件中定义Link标签，其他的代码省略...

<head><link rel="stylesheet" href="helloword.css">
</head>

还有另一种方式：

<head><style>@import "helloword.css";</style>
</head>

定义css文件

div {color: aquamarine;
}

CSS基本语法

格式：

选择器 {

属性名1：属性值1；

.......

}

选择器：筛选具有相似特征的元素

注意：每一对属性需要使用分号隔开，最后一对属性可以不加分号。

选择器

基本选择器：

1.id选择器：选择具体的id属性值的元素

语法：#id属性值{ }

2.元素选择器：选择具有相同标签名称的元素

语法：标签名称{ }

注意：id选择器优先级高于元素选择器

3.类选择器：选择具有相同的class属性值的元素

语法： .class属性值 {}

注意：类选择器优先级高于元素选择器

id选择器用法：

<head><style>#div1{color: pink}</style>
</head><body><div id="div1">你好呀，世界</div><span >开始学习css。。。</span>
</body>

元素选择器使用演示：

<head><style>span {color: pink}</style>
</head><body><div id="div1">你好呀，世界</div><span>开始学习css。。。</span>
</body>

类选择器用法：

<head><style>.div1 {color: pink}</style>
</head><body><div class="div1">你好呀，世界</div><span>开始学习css。。。</span>
</body>

扩展选择器

1.选择所有元素：

语法： *{}

2.并集选择器器：

语法：* 选择器1，选择器2{ }

3.子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1 选择器2{ }

4.父选择器：筛选选择器2的父元素1

语法：选择器1>选择器2

5.属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名="属性值"]

6.伪类选择器：选择一些元素具有的状态

语法：元素：状态 {}