⑴ 什麼是前端
前端又稱Web前端。前端即網站前台部分,運行在PC端,移動端等瀏覽器上展現給用戶瀏覽的網頁。前端是網頁給訪問網站的人看的內容和頁面。是為了網頁或者網頁應用,使用HTML,CSS以及JS代碼,用戶能夠看到並且和這些頁面進行交流。
前端官方的定義是前端就是網站前台部分,運行在PC端,移動端等瀏覽器上展現給用戶瀏覽的網頁。也就是前端是網頁給訪問網站的人看的內容和頁面。那前端開發顧名思義就是這些內容和頁面中代碼的實現。
前端開發的工作職責:
1、使用Div+css並結合Javascript負責產品的前端開發和頁面製作。
2、熟悉W3C標准和各主流瀏覽器在前端開發中的差異,能熟練運用DIV+CSS,提供針對不同瀏覽器的前端頁面解決方案。移動HTML5的性能和其他優化,為用戶呈現最好的界面交互體驗和最好的性能。
3、負責相關產品的需求以及前端程序的實現,提供合理的前端架構。改進和優化開發工具、開發流程、和開發框架。
4、與產品、後台開發人員保持良好溝通,能快速理解、消化各方需求,並落實為具體的開發工作;能獨立完成功能頁面的設計與代碼編寫,配合產品團隊完成功能頁面的需求調研和分析。
5、了解伺服器端的相關工作,在交互體驗、產品設計等方面有自己的見解。
⑵ 前端頁面是有哪三層構成,作用是
網頁分成三個層次,即:結構層、樣式層、行為層。
HTML:結構層 網頁的結構或內容層是該頁面的基礎HTML代碼。正如房屋的框架為房屋的其他部分構建了一個堅實 的基礎,HTML的堅實基礎創建了一個可以在其上創建網站的平台。 結構層用於存儲客戶想要閱讀或查看的所有內容。HTML結構可以包含文本和圖像,它包括訪問者用 於瀏覽網站的超鏈接。這是在符合標準的HTML5中編碼的,可以包括文本,圖像和多媒體(視頻,音頻等)。 網站內容的每個方面都應該在結構層中表示。這允許關閉JavaScript的客戶或無法查看整個網站的 CSS訪問許可權的客戶(如果不是所有功能)。
CSS:樣式層 該層指示結構化HTML文檔如何看待網站的訪問者,並由CSS(層疊樣式表)定義。這些文件包含有 關如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基於屏幕大小和設備更改站點顯示的 媒體查詢。 網站的所有視覺樣式都應位於外部樣式表中。您可以使用多個樣式表,但請記住,每個CSS文件都需 要HTTP請求才能獲取它,從而影響站點性能。
JavaScript:行為層 行為層使網站具有交互性,允許頁面響應用戶操作或基於一組條件進行更改。JavaScript是行為層最 常用的語言,但CGI和PHP也經常被使用。 當開發人員引用行為層時,大多數都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與 DOM(文檔對象模型)進行交互。在內容層中編寫有效的HTML對於行為層中的DOM交互非常重 要。在構建行為層時,應該像使用CSS一樣使用外部腳本文件來優化速度和性能。
⑶ 前端如何提升用戶體驗
AJAX
看到這里肯定有人忍不住笑出聲,的確這已經不算什麼新技術,但要讓我站在用戶的角度來評價網站技術上的變化中給訪問者帶來最大友好性的一項,我肯定會選AJAX。
記得在我剛剛開始學會上網時候,不管是注冊頁面還是登錄都是我最煩的,那時候網速又不快,打開一個注冊頁面就要幾秒時間,然後從上往下有幾十個選項要全部填滿,比如其中有一項讓我填寫「密碼保護問題」,這個設計簡直讓人想吃電腦,因為很多人一看這種問題應該都會和我一樣隨便寫幾個數字就提交,然後等幾秒載入完網頁提示「密碼保護問題」不允許有數字,同時之前填寫的十幾項數據全部清空需要重新再來一遍,再花幾分鍾寫完之後提交又提示不允許有字母,再來一遍,有時候還會提示字元太短太長有空格超時之類,總之如果你第一次注冊這種頁面,至少要花掉十幾分鍾,而且還是在重復做一件事。從網站運營者角度來看這也很煩,重復十幾分鍾填寫表單很容易就失去很多潛在用戶。
在AJAX的非同步請求出現之後,這種情況明顯的改善,給用戶的體驗感最明顯。用戶並不知道何時已經提交請求,就拿剛才表單的例子來說,如果每填寫一項都會在當前表單的最後提示具體錯誤類型(在用戶未點擊時已經非同步提交了請求並且用返回數據更新部分頁面),這就給用戶很直觀的提示,這種即時的互動讓訪問者能夠很直觀的感受到這是一個友好的網站。(當然用javascript也能做到部分表單驗證,這只是舉一個例子)。在不重新載入整個頁面,通過操作DOM來改寫小部分數據這點上也能給訪問者帶來極大的交互感,現在流行的微博就是最好的例子,在發送微博/評論/轉發之後用戶會發現不用刷新等待整個頁面載入,操作之後立刻會有小部分的頁面發生變化,雖然看起來微不足道,但對一個訪問者來說,這足以讓他們欣喜。
網頁字體
網站中所有的文字內容表達方式都是通過字體,合理的字體無疑會給用戶更好的體驗感。在業內來說豆瓣可能是對字體研究最多的一個網站,拿豆瓣讀書都來他們用Helvetica和Arial這兩種差別非常小的字體,這種非襯線字體很容易讓人一目瞭然同時富有一些科技感,豆瓣本身就是以圖片加上簡短語句組成,讓人能夠從字體中快速找到重心是設計的目標所在。
有人擔心非襯線用作正文對閱讀體驗有影響,實際上不難發現國外很多網站都用非襯線字體來處理正文,當然也不排除他們可能考慮的更多是英文。其實我還是非常喜歡非襯線體,它們看起來更富美感,而且如今大量的文字在互聯網上比較少見,一些活潑具有現代感的非襯線字體也逐漸被更多的開發者認同而且使用。
除去這些,字體還可以在選擇上再細分一些,記得曾經看過一篇統計,不同的字體會影響用戶對站點權威性的信賴程度。比方說在一個公司網站上大量使用類似於幼圓、Cursive一類字體,很容易讓訪問者不信任網站,當然如果是以娛樂為主的網站也不能過於嚴肅和簡朴,在使用時既要考慮到大眾用戶的接受程度,也要知道自己的網站是什麼定位,當然技術性的問題也不能忽略,像是火狐比IE區分sans-serif要更模糊一些,有的字體「O」和「0」、「L」和「1」容易讓人難以區分(代碼較多的站點需要考慮)等等,這樣綜合對比選擇得到的字體無疑能讓網站更有魅力,從而留下更多的用戶。順便一提,在使用字體時注意版權。
載入速度
很多用戶在還未見到你出色的設計和內容之前就已經離開了頁面,這是因為網站載入時間實在是太長,已使訪問者失去耐心。其實很多的訪客不關心腳本和圖片的載入順序,他們只要看到網站的整體結構能夠迅速的載入出來就可以開始瀏覽,即便是其他元素逐漸載入也可以接受,基於這點,我們可以使用很多延時載入的方法來使用戶更快的見到頁面。除此之外還有很多因素可能會對載入速度造成影響,也有逐一優化的辦法,這里就不再細述。
結構設計
不知道大家發現沒有,近來很多網站都喜歡把菜單fixed在頂部,只要這個菜單選擇項不是太多,訪客對這樣的固定菜單接受程度還是很高的,這只是設計中的一個小例子,相類似的有很多,比如在表單中以深淺顏色區分每一行,以提高可閱讀性;在激活窗口時為當前控制項添加一個邊框,使用戶能夠更建議的分辨自己在操作哪個窗口等等。很多的設計與排版方式都已經得到了大眾認可,可以作為網站設計時的參考。
網站結構設計的好看不好看對訪客來說雖然有影響,但也不至於立刻離開,而且即便是非常精緻的頁面卻對用戶不怎麼友好,想必也不會有多少人願意訪問。
舉個例子,以前我用好搜(360搜索)的時候總感覺怪怪的,沒有google和網路順手,研究了一段時間之後才發現好搜的的主頁搜索框比網路和google要低一些,Google到頂部固定菜單的距離是286px,網路是192px(未登錄238px),而好搜則是328px。相比之下,好搜的搜索框更趨向於屏幕中間,而網路與Google則是在屏幕中上方,對於已經常年習慣了網路和Google搜索的用戶來說,想要改變這個習慣來適應好搜多少有些困難,除此之外搜索框還有結果頁也有幾個問題不一一細述,360這樣做無外乎兩點,一個是不在乎/不知道/不關心用戶體驗,一個就是故意有所不同,想要培養自己的用戶習慣。(在我看來也不怎麼成功)
細節決定成敗
喬布斯的父親是個木匠,曾經教給喬布斯一個理念,就是櫥櫃的背面里層也要細致處理甚至是打磨光滑,即便用戶看不見。在理想主義的偉大試驗品「麥金塔」出世之後,有人甚至感嘆,就連電路板上的電路圖都能當作藝術品,的確如此,喬布斯就曾經開除一個對電路圖美學設計不滿的員工。一個偉大產品的誕生並不是一蹴而就的,必然經過了長期的沉澱積累與琢磨,但僅此依舊不能稱之為偉大,只能算成功。一個產品細節上的最後潤色可能才是決定它價值的關鍵。對於WEB開發者來說,更是如此。
⑷ java後台轉發jsp地址到到前端頁面的時候,前端頁面效果未載入是怎麼回事
F12開啟調試,檢查樣式和js是否被正常載入,有沒有出現404或者其他問題
⑸ 前端頁面有哪三層構成,分別是什麼作用是什麼
分成:結構層、表示層、行為層。
結構層(structural layer)
由 HTML 或 XHTML之類的標記語言負責創建。標簽,也就是那些出現在尖括弧里的單詞,對網頁內容的語義含義做出了描述,但這些標簽不包含任何關於如何顯示有關內容的信息。例如,P標簽表達了這樣一種語義:「這是一個文本段。」
表示層(presentation layer)
由 CSS 負責創建。 CSS對「如何顯示有關內容」的問題做出了回答。
行為層(behaviorlayer)
負責回答「內容應該如何對事件做出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域。
⑹ web前端頁面有哪三層構成,分別是什麼作用是什麼
最准確的網頁設計思路是把網頁分成三個層次,即:結構層、樣式層、行為層。
HTML:結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。
CSS:樣式層
該層指示結構化HTML文檔如何看待網站的訪問者,並由CSS(層疊樣式表)定義。
JavaScript:行為層
行為層使網站具有交互性,允許頁面響應用戶操作或基於一組條件進行更改
⑺ 前端頁面由哪些頁面構成,作用是什麼
前端頁面構成:
結構(HTML)、樣式(CSS)、邏輯(JavaScript)
⑻ 前端和後端可不可以都是nginx
nginx只能做數據的轉發與傳送,一般不用於運行後端的腳本,所以後端一般需要其他的伺服器如java用tomcat,然後做一層nginx代理網關
單靠nginx是無法運行java代碼
⑼ 小程序前端數據發送到controller層,controller層是什麼
controller就是一般MVC架構的控制器層,你可以理解為介面層,它負責處理請求,並發送相應的模型進行處理後以視圖返回給前端,具體參照網頁鏈接