前端一阶段小知识-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46440394/article/details/118148326

一、什么是WEB应用

WEB：需要用浏览器浏览的网页
WEB应用程序：基于浏览器运行浏览的应用程序
B/S（浏览器/服务器）
优点：不用下载、不占内存、跨平台、维护性强
缺点：速度慢
C/S（客服端/服务器）
优点：速度慢
缺点：要下载、占内存、不跨平台、维护性差

二、 WEB应用开发流程
1. 需求分析(销售、售前经理、产品经理、项目经理、需求分析师、功能顾问)
需要分析什么：
（1）网站类型
根据呈现内容：推广展示、机构企业、电子商务、多媒体互动、综合门类、搜索引擎】、
根据技术：固定分辨率：网页宽度的像素点的是固定的，不足时左右留白，超出时设置为滚动条；瀑布流式：不需要点击“下一页”实现翻页，随滚动条自动翻页； 响应式：与固定式相反
根据布局：流式布局、水平方向布局、垂直方向布局

（2）用户群体：用户年龄、选择素材、网站布局、颜色搭配、用户体验及页面交互动效、功能便捷
<1>.通过不同的颜色划分板块
<2>.文字板块：注意标题与正文的区别、字体、字号、颜色、间距的区别
<3>.商品板块（图片）的列表排列【列表式、大图式排列】：注重素材的处理
<4>.颜色搭配：注重点睛色

（3）市场价值分析与竞品分析

（4)业务功能：一个页面（页面分为一级、二级、三级页面）上可以有多个功能，一个功能可以体验在多个页面上

（5）业务流程
2. 设计（UI设计、原型设计、交互设计、架构设计）
3. 编码（前端、后端）
4. 测试（自动化测试）
5. 维护（项目实施、产品维护）

三、网页基本结构
头部：header
内容：content
尾部：footer
广告：banner
网页的常见布局
1.封面型：只有一屏，常用语官网等展示的内容少
2.“国”字型：“方方正正”的头-内容-尾部式结构
3.拐角型
4.标题正文型
5.左右框架型
6.上下框架
7.综合变化

PS
像素：图片的基本组成单位
是相对单位分辨率不同，像素的大小不同
像素越多图片越清晰，但图片相对越大
图层：一张张叠加放置在一起，最终显示合成效果
变换
1.抠图
Ctrl+j:复制图层
Ctrl+alt+z:撤销多步
Ctrl+shift+i:反选
Ctrl+d:取消选区
填充背景色：ctrl+delete
填充前景色：alt+delete

磁性套索工具主要用于扣取颜色差别大的图片
魔棒工具主要用于颜色相近的图片

2.裁剪
将图片转换为智能对象后ctrl+t放大缩小图片后不改变图片清晰度
栅格化图层与智能对象的区别：智能大小放大缩小图片不会失真

3.仿章工具
选择仿章工具，调整好大小后按下Alt（对应背景颜色的地方）然后进行文字擦除主要用于擦除文字

4.切片
Ctrl+shift+alt+s存储为web格式
Web格式有：
1.Png：压缩比高于gif 压缩、无损支持透明可存储为PNG8(最多展示256色)和PNG24（最多展示1600万） IE6不支持PNG-24透明
2. jpg(jpeg) ：高清大图多数都是用jpg 压缩、图像有损文件尺寸较小、下载速度快不支持透明、不支持动画
3.gif:支持透明可以是进制图片也可以是动图 “体型”小但质量不高色域不广，只支持256色 IE6能够支持背景图像，适用于多种操作系统

WEB
1.企业计算机应用
哑终端
C/S client/Sever软件
B/S browser/Sever网站，基于浏览器

2.Bs架构分为四部分
浏览器（客户端）
http协议
网页
Web服务器
3.工作流程
（1）用户在浏览器上输入网址/域名(域名：IP+端口号（80）)
（2）回车发起一个http请求
（3）服务器必须是启动的，服务器根据请求进行响应
（4）响应回来是代码，故需要浏览器进行解析
（5）显示一个网页
4.网页
W3C国际万维网联盟（W3C协议）

   结构（HTML  XHTML）
   样式（CSS）
   行为（Javascript）
   倡导结构、样式、行为分离

5.WEB服务器（指运行网页的软件）
Java语言:tomacat
Php语言:apache
Asp语言:iis
Nodejs语言:nodejs

6.浏览器
内核：webkit（google safri ）
trident(IE1-6) proto(已废弃)
webkit下的blink(Firefix)
外壳

7.http协议（语言）
TCP协议（可靠三次握手四次挥手）

8.网页
静态网页：不与服务器端进行交互不与数据库打交道
动态网页：

HTML
1. xml语法规则
（1）标签与属性全部小写
（2）标签必须闭合
（3）标签顺序要一致
（4）写属性时要写值，不能单写
2. html文件的后缀
（1）.htm:DOC操作系统，只支持3位
（2）.html:
（3）.shtml:ssl技术提高了安全性
3. html术语
元素：标签开始到标签结束，包含内容的一个整体结构
标签：标签名
属性：修饰说明标签
SEO：搜索引擎优化

4. 标签的分类
双标签：有开始有结束 <head></head>
单标记:开始和结束在一起 <img/>

5. 网页的代码基本结构

</header>
<main>
    <setion></setion>

    <setion></setion>

    <setion></setion>
</main>

<footer>

</footer>

6. DOCTYPE模式

过渡模式：Transitional
严格模式：Strict
框架集：FramSet

思维结构图：
在这里插入图片描述