C/S架构
在用户本地有一个客户端程序，远程有一个服务器端程序
优点：用户体验好
缺点：
安装，部署麻烦
B/S架构Browser/Server浏览器服务器端
只需要一个浏览器，用户可以通过不停的网址，客户访问不同的服务器端chengxu
优点：开发安装部署简单
缺点：如果应用过大，用户的体验可能受到影响，对硬件要求过高
架构详解：
资源分类：
静态资源：
使用静态网页开发技术发布的资源
特点：
所有用户访问，得到的一样的结果
如“文本，图片，音频，视频HTML，CSS，JS
如果用户请求的是静态资源，那么服务器会将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源
动态资源：
使用动态网页开发技术发布的资源
特点：
所用用户访问，得到的结果可能不一样
如：jsp/servlet,php,asp...
如果用户请求的是动态资源，服务器或执行动态资源，转换为静态资源，再发送给浏览器
举例：买车，可以吧车当做静态资源，如果无人购车超市，直接买车走人，
动态资源是：相当于买车的销售，会根据不同的用户推荐不同的车
要学习动态资源，必须先学习静态资源
静态资源：
HTML:用于搭建基础网页，展示页面的内容
CSS:用于美化页面，布局页面
JavaScript:控制页面的元素，让页面有一些动态的效果
Html可以看做车架底盘
CSS可以看做车漆等装饰
JS可以看做是发动机变速箱，控制汽车的一些组件
HTML
概念：：最基础的网页开发语言
超文本标记语言
超文本：超文本是用个超链接的方法，将各种不同空间的文字信息祖师在一起的网状文本
标记语言：
有标签构成的语言
标记语言不是编程语言
语法：
1.html文档的后缀名.html
HTML编写的内容可以被浏览器解析
2.标签分类：
围堵标签：又开始开始和结束标签
自闭和标签：开始标签和结束标签在一起<br/>
3.标签可以嵌套:
需要正确嵌套，不能你中有我，我中有你
错误：
4.在开始标签中可以定义属性，属性是由键值对构成，值需用引号引起来
5.html不区分大小写，建议小写
<html>
<head>
<title>
title
</title>
</head>
<body>
<font color='red'>Hello world</font><br/>
<font color='green'>Hello world</font>
</body>
</html>
标签的学习：
文件标签：构成html最基本的标签
html: 文档的跟标签
head:头标签，用于指定HTML文档的属性，引入外部的资源
title：定义标题标签
body：体标签
<!DOCTYPE>？定义文档类型
<meta charser="utf-8">
文本标签：和文本有关的标签
注释：<!--注释内容 -->
<h1>to<h6>：标题标签，大小逐渐变小
<p>：段落标签
<br>：换行标签
<hr>：显示一条水平线
属性：color：颜色
width: 宽度
size 高度
align:对齐方式
left:左对齐
<b>:字体加粗
<i>：字体斜体
<font>：字体标签
* face字体，color，size大小
* 属性的定义：
color：
1.英文单词：red，green，blue
2.rgb（值1，值2，值3）：范围0-255
3.#值1值2值3：值得范围00~FF之间
width：宽度
1.数值：width='20'数值的单位，默认是px（像素）
2.数值%：占比相当于父元素的比例
<center>居中
图片标签：
img：宽度:width 高度:height
./代表当前目录
../代表上一级目录
列表标签:
有序列表
<ol type="A"></ol>
<li>内容</li>
无序列表
<ul></ul>
链接标签：
把一段文字或者图片包裹起来，然后点击文字图片后实现跳转
属性：
* href：指定访问资源的
<a href="超链接地址">点</a>
* target： 指定的打开资源的方式
<a href="超链接地址" target="_blank">点</a>在空白页面打开
_self当前页面打开
<a href="mailto:邮件地址">联系我们
<a href="">
语义化标签：html5中为了提高程序的可读性
* table：定义表格
width:宽度
* border:边框
* cellpadding：定义内容和单元格之间的距离
* cellspacing：定义单元格之间的距离，如果指定为0，那么就是合为一条
* bjcolor：背景颜色
* align：对齐方式
* tr：定义行
* td：定义单元格
* colspan合并列
* rowspan合并行
* th：定义表头单元格
* <caption>表格标题
* <thead>表示表格的头部分
* <tbody>体部分
* <tfoot>脚部分
###Html标签：表单标签
* 表单
*概念： 用于采集用户输入的数据，用于和服务器进行交互
form：用于定义表单，可以定义一个范围，方位代表用户的数据范围
* 属性：
* action：用于提交数据的url
* method：指定提交方式
分类：
一共7中，两种常用
get：
1.请求的参数会在地址栏中显示
2.请求擦书大小是有限制的，不安全
post：
1.请求的参数大小没限制，较为安全
2.不会在地址栏中显示，会封装在请求体重
* 表单项中的数据要被提交，必须制定其name属性
* 表单项标签：
*input：可以通过type属性改变元素展示的形式
placeholder：指定输入狂的提示信息，当输入框信息改变，会覆盖这个提示信息
type属性
* text:文本输入框
* password：密码输入框
* radio：单选框
要想让多个单选框实现单选，多个name属性必须一致
value要指定好
* chexkbox复选框
* checked默认选中
* label：指定输入项的文字描述信息：
* file 文件<input type="file" name="file">
* 隐藏域：hidden用于提交一些信息
* 按钮：
* submit:用于提交
* button一个按钮
* <input type="image" src="" >图片提交按钮，可以用src指定图片的属性
* 取色器<input type="color" name=color>
<label for="u">姓名：</label><input name="username" placeholder="请输入用户名" id="u"><br>
*select：下拉列表
option指定列表项
province 省份
*textarea：文本域
<textarea cols="20" rows="5" name="des">
cols指定列数，
rows指定行数
## CSS页面美化和布局控制
1. 概念：Cascading Style Sheets 层叠样式表
3. css的使用：css与html结合
1.内连样式
2.内部样式
* 在head标签内，定义style标签
* <style>
* div{
* color:blue
* }
* </style>
3.外部样式
* 定义css资源文件
* 在head标签内，定义link标签
** 如：
<link rel="stylesheet" href="路径">
<div>hello css
>123中方式，作用范围越来越大
4.css语法
* 格式：
* 选择器{
* 属性名1，属性值1；
* 。。。
* }
* 选择器：筛选具有相似特征的元素
* 注意每一对属性需要用分号隔开
5.css选择器
* 分类
1.基础选择器 id选择器》类选择器》元素选择器
* id选择器：选择具体id属性值的元素：建议在一个html页面中id值唯一
语法：#id属性值{}
* 元素选择器：选择具有相同标签名称的元素
语法：标签名称
注意：id选择器的优先级要高于元素选择器
* 类选择器：选择具有相同的class属性值的元素
语法：.class属性值{}
类选择器优先级高于元素选择器
<style>
p{
color:orange;
}
#p1{
color:red;
}
.cls1{
color:blue;
}
</style>
2.扩展选择器
* 选择所有元素
语法 *{}
* 并集选择器：
语法：选择器1，选择器2{}
* 后代选择器：筛选选择器1下面的所有的选择器2元素
语法：选择器1 选择器2{}
* 子选择器：筛选选择器1的下一级选择器2：只筛选子选择器，
语法：选择器1》选择器2{}
* 属性选择器：选择元素名称，属性名=属性值得元素
* 语法：元素名称[属性名称=“属性值”]{}
* 伪类选择器：选择一些元素具有的状态
* 语法：元素：状态{}
6.属性
1.字体、文本
* font-size:字体大小
* color
* text-aligh:对齐方式
* line-height行高
2.背景
3.边框
* border:设置边框，复合属性
4.尺寸
* width宽度
* height高度
5.盒子模型
* margin外边距
* padding内边距
注意：默认情况下内边距会影响盒子的大小
box-sizing:border-box设置盒子属性不动
* float：浮动
left
right
|
|
收藏
淘帖
踩
