前端技術：用來開發和實現客戶端產品的技術

一、前端技術分類

1、分類

① APP：Android、iOS、Windows Phone

②?網頁：Html、CSS、JavaScript

③ 桌面應用：Windows、Mac OS、Linux

2、職能分類

①?移動開發工程師：Android、iOS

②?web前端開發工程師：H5

③?桌面客戶端開發工程師：Windows、Mac

二、Android及iOS技術特點及應用

1、應用特點

Android應用特點： ① 安裝文件擴展名為.apk

② 手機尺寸多樣化，適配工作量大

③ 系統開源，可定制化開源

④ 應用市場碎片化嚴重，多渠道

⑤ 手機硬件跨度大，應用支持情況多樣

iOS應用特點：① 安裝文件擴展名為.api

② 手機尺寸相對單一，適配工作適中

③ 系統封閉，不可定制化系統

④ 官方指定應用市場，單一渠道

⑤ 手機硬件差異小，應用支持情況統一

2、基本控件UI控件：構成產品界面的基本元素，根據作用及操作不同，區分為不同種類的控件

Android基本控件:

① 按鈕：Button

② 文本展示框：TextView

③ 文本輸入框：EditText

④ 圖片展示框：ImageView

⑤ 列表展示容器：ListView

⑥ 表格展示容器：GridView

iOS基本控件：

① 按鈕：UIButton

② 文本展示框：UILabel

③ 文本輸入框：UITextField

④ 圖片展示框：UIImageView

⑤ 列表展示容器：UITableview

⑥ 表格展示容器：UICollectionView

3、界面布局界面布局：各種UI控件按照一定的布局規則組合在一起，構成一個獨立的產品界面。

布局原理應用與產品設計

① 產品設計時考慮每一個控件的邊界屬性(文本的最長展示范圍，不同屏幕尺寸的適配)；

② 內容型控件需指明內容對齊方式(文本展示框內容的對齊方式，圖片拉伸方式)；

UI控件三要素

大小、位置、外觀(內容)

4、適配所有的顯示問題，最終都歸結為 適配問題。產品經理需要了解適配原理，通過適配方案反向推出能降低適配難度的設計原型。

適配類型

① 界面布局適配

等比縮放(適合圖片類)；

高度不變，水平間距縮小(適合設計組件，如搜索框)

② 應用素材適配

Android：點9圖，常應用于對話框背景圖片中。

iOS：@2x、@3x

屏幕分辨率知識匯總屏幕的清晰程度由屏幕分辨率和屏幕尺寸大小共同決定

① 屏幕尺寸：屏幕對角線的長度，單位是英寸，1英寸=2.54厘米

② 屏幕分辨率：在橫向寬度，豎向高度像素點數，單位是px，1px=1個像素點(像素是沒有物理大小的，能變大，能變小。同一個設備，像素個數是固定的)

③ 屏幕像素密度(PPI)：屏幕每英寸上的像素點數，單位是dpi

④ 像素(px)是設計師的最小設計單位，點(pt)是ios最小的開發單位

5、IOS & 安卓交互區別

三、前端主要語言? 只會基本的HTML/CSS, 可以將設計圖轉化為HTML/CSS, 俗稱切圖

? 懂一些Javascript，主要是使用現成的框架，jQuery，Bootstrap等等

? 知道jQuery，Bootstrap的局限，在需要時可以直接編寫原生JS/CSS

? 對JS/CSS非常了解，熱衷于利用瀏覽器的各種最新特性實現各種炫酷效果

? 可以根據需要寫出封裝良好的JS類庫或者開發框架

1、Html：超文本標記語言

搭建網頁的基礎語言，以標簽形式表示網頁組成元素，通過瀏覽器解析還原成視覺頁面

2、CSS：層疊樣式表

給頁面裝飾的衣服，定義統一樣式風格，給Html頁面元素進行展示樣式渲染。

3、Javascript

實現頁面交互、動效

4、jQuery

Javascript庫，主要面向查詢(Query)。簡單理解，就是javascript里面那些需要用一行行代碼實現的在jQuery里面可以直接打包成模塊，調取對應的接口使用，模塊化的使用方式讓開發者可以很快就開發出酷炫的頁面。

5、Bootstrap

Bootstrap也是對Javascript進行封裝，它在jQuery的基礎上進行更加人性化的完善，其實就是更方便了。它有很多現成的組件，比如導航欄、下拉菜單、按鈕，都定義好了樣式和交互，直接成套拿來用就行了。

四、靜態頁面和動態頁面分靜態網頁和動態網頁的共同之處。首先，它們的目標都是呈現內容給用戶；其次，內容都是用超文本標記語言(HTML)表示的

?靜態頁面：htm、html、shtml、xml；

?動態頁面：asp、jsp、php、perl、cgi；

1)靜態頁面

① 開發技術

HTML或XML即可完成靜態頁面制作

② 優點

· 托管沒有任何要求

· 不需要編譯，相應速度快

· 搜索引擎容易識別

· 網站更安全，減少攻擊

③ 缺點

· 內容固定，交互性差，維護復雜

2)動態頁面

① 開發技術

· HTML+JavaScript(Node.js)

· HTML+PHP

· HTML+ASP.NET(或ASP)

·?HTML+JSP

· HTML+CGI(早期的動態網頁技術)

② 優點

· 維護方便，基本能實現各種需求

· 查詢信息方便，能存儲大量數據

③ 缺點

· 需要專業技術人員提供維護保障數據庫的安全和保密性

· 不利于搜索引擎收錄

· 制作成本高

五、Html 5 和 Native應用Html 5應用：通過網頁Web技術實現的客戶端產品，具備輕量化、易維護的特點。

Native應用：通過各移動平臺技術實現的客戶端產品，具備體驗好、功能豐富的特點。

混合應用：結合Html 5 和 Native 應用混合實現，在Native中嵌套H5頁面代替部分功能，具備動態擴展、高靈活性的特點。

六、產品經理如何將技術應用到產品設計中

1、設計產品原型時，結合產品思維與實現思維；

2、組件化設計思路，從開發角度思考問題，設計可復用產品模塊；

3、明確技術邊界，基于現有技術設計產品原型；

總結

以上是生活随笔為你收集整理的标记页面区分渠道php,PM必懂的前端知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。