本文介绍了Web开发的两种架构模式B/S和C/S的区别，重点讲解了B/S架构下的静态资源和动态资源，以及HTML、CSS的基础概念和CSS与HTML的结合方式。还涉及了表单、CSS布局控制和前端框架等内容。
web概念概述
- javaweb :
多使用ava语言开发基于互联网的项目 - 软件架构︰
- C/S: Client/Server客户端/服务器端
- 在用户本地有一个客户端程序，在远程有一个服务器端程序
- 如:QQ，迅雷…
- 优点:
- 用户体验好
- 缺点:
- 开发、安装，部署，维护麻烦I
- B/S: Browser/ server浏览器/服务器端
- 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
- 优点:
- 开发、安装，部署，维护简单
- 缺点∶
- 如果应用过大，用户的体验可能会受到影响
- 对硬件要求过高
- C/S: Client/Server客户端/服务器端
- B/S架构详解
- 资源分类:
- 静态资源︰
- 使用静态网页开发技术发布的资源。
- 特点:
所有用户访问，得到的结果是—样的。
如:文本，图片，音频、视频，HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接符静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
- 动态资源︰
- 本使用动态附页及时发布的资源。
- 特点:
等所有用户访问，得到的结果可能不一样。
如: jsp/servlet,php,asp…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
- 静态资源∶
- HTML:用于搭建基础胡页，展示页面的内容
- css:用于美化页面，布局页面
- Javascript :控制页面的元素，让页面有一些动态的效果
HTML
- 概念∶是最基础的网页开发语言
- Hyper Text Markup Language超文本标记语言
- 超文本:
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. - 标记语言:
由标签构成的语言。<标签名称>如html, xml
标记语言不是编程语言
- 快速入门:
- 语法:
- html文档后缀名.html或者.htm
- 标签分为
- 用堵标签:有开始标签和结束标签。如< html> </ html>
- 自闭和标签:开始标签和结束标签在一起。如<br/ >
- 标签可以嵌套∶
需要正确嵌套，不能你中有我，我中有你
正确:< a>< b></ b></ a> - 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
- 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:html文档的根标签 * head :头标签。用于指定html文档的一些属性。引入外部的资源 * title ∶标题标签。 * body :体标签 * < !DOCTYPE html> : html5中定义该文档是html文档 -
文本标签:和文本有关的标签
* 注释:<l--注释内容--> * <h1> to <h6>:标题标签,h1~h6:字体大小逐渐递减 * <p>∶段落标签 * <br>∶换行标签 * <hr>:展示一条水平线 属性: color :颜色 width :宽度 size :高度 align :对齐方式 center :居中 left :左对齐 right :右对齐 * <b>:字体加粗 * <i>∶字体斜体 * <center>:文本居中 * <font> :字体标签 属性: color :颜色 size :大小 face :字体 属性定义: color : 1．英文单词: red,green,blue 2. rgb(值1,值2，值3):值的范围∶0~255如rgb(e,e,255) 3. #值1值2值3∶值的范围:O0~FF之间。如:#FFOOFF width : 1．数值: width="20’,数值的单位，默认是px(像素) 2．数值%:占比相对于父元素的比例 -
图片标签︰
* img :展示图片 属性: src:指定图片的位置 * 代码 <l--展示一张图片img--> <img src="image/jingxuan_2.jpg" align="right" alt="古镇” width="5oo” height="500" /> < l-- 相对路径 ./ ∶代表当前目录_./image/1.jPg ../ :代表上一级目录--> <img src=" . /image/ jiangwai_1.jpg"> <img src=" ../image/jiangwai_1.jpg"> -
列表标签∶
有序列表∶ * ol:列表biaoqian * li:列表项 无序列表: * ul:列表标签 * li:列表项 -
链接标签:
* a:定义一个超链接 属性: href :指定访问资源的URL(统一资源定位符) target :指定打开资源的方式 _self:默认值，在当前页面打开 _blank :在空白页面打开 -
div和span :
div:每一个div占满—整行。块级标签
span :文本信息在一行展示，行内标签内联标签 -
语义化标签:htm15中为了提高程序的可读性，提供了一些标签。
1. <header> :页眉 2. <footer> :页脚 -
表格标签:
- table:定义表格
- width:宽度
- border :边框
- cellpadding :定义内容和单元格的距离
- cellspacing:定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgeolor:背景色
- algn:对齐方式
- tr:定义行
- bgcolor:背景色
- align:对齐方式
- td.:定义单元格
- colspan:合并列
- rowspan:合并行王
- th:定义表头单元格
- < caption>:表格标题
- < thead>:表示表格的头部分
- < tbody> :表亲表格的体部分
- < tfoot>:表示表格的脚部分
- 如果某一行只有一个单元格，则使用< tr>< td></ td></ tr>
- 如果某一行有多个单元格，则使用
<tr> <td> <table></ table> </td> </tr>
- table:定义表格
-
表单标签
- 表单∶
- 概念:用于采集用户输入的数据的。用于和服务器进行交互。
- form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
* 属性︰ * action :指定提交数据的URL * method:指定提交方式 * 分类:—共7种，2种比较常用 * get : 1，请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2．请求参数大小是有限制的。 3．不太安全。 * post : 1．请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2．请求参数的大小没有限制。 3．较为安全。 *表单项中的数据要想被提交∶必须指定其name展性I
- 表单项标签∶
- input :可以通过type属性值，改变元素秦展示的样式
* type属性: * text :文本输入框，默认值 * placeholder :指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示侣息 * password :密码输入框 * radio:单选框 * 注意∶ 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值 * checkbox:复选框 * 注意: 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked禹性,可以指定默认值 * file :文件选择框 * hidden :隐藏域，用于提交—些信息。 * 按钮: * submit:提交按钮。可以提交表单 * button:普通按钮 * image :图片提交按钮 * src属性指定图片的路径 * label :指定输入项的文字描述信息 * 注意: 1. label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输人框获取焦点。 - select: 下拉列表
- 子元素: option，指定列表项
- textarea :文本域
- cols:指定列数，每一行有多少个字符
- rows :默认多少行。
- input :可以通过type属性值，改变元素秦展示的样式
- 表单∶
-
CSS：页面美化和布局控制
- 概念: cascading style sheets层叠样式表
- 层叠:多个样式可以作用在同一个html的元素上，同时生效
- 好处︰
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
- CSS的使用:css与html结合方式
- 内联样式
在标签内使用style民性指定css代码 如:<div style="color : red; " >hello css</div> - 内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码 如∶ <style> div{ color: blue; } </style> <div>hello css</div> - 外部样式
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;. .. } 选择器:筛选具有相似特征的元素 注意:每一对属性需要使用;隔开，最后一对属性可以不加; - 选择器：筛选具有相似特征的元素
分类∶- 基础选抨器
1. id选择器︰选择具体的id属性值的元秦,建议在一个html页面中id值唯一 语法: #id属性值{} 2. 元秦选择器∶选择具有相同标签名称的元秦 语法: 标签名称{} 注意:id选择器优先级高于元素选择器 3. 类选择器∶选择具有相同的class属性值的元秦。 语法: .class属性值{} 注意:类选择器选择器优先级高于元秦选择器 - 扩展选择器
1. 选择所有元秦: 语法:*{} 2. 并集选择器∶ 语法：选择器1,选择器2{ } 3. 子选择器∶筛选选择器1元素下的选择器2 语法: 选择器1 选择器2{} 4. 父选择器∶筛选选择器2的父元素选择器1 语法: 选择器1>选择器2{} 5. 属性选择器︰选择元秦名称,属性名=属性值的元素 语法: 元素名称[属性名="属性值"]{} 6. 伪类选择器:选择—些元素具有的状态 语法: 元素:状态{} 如: 标签<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：右浮动
- 字体、文本
扫一扫
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
