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
|
|