什麼是web前端

時間 2019-12-07

標籤什麼 web 前端欄目 HTML 简体版

原文原文鏈接

前端簡介

Web前端開發工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過5年。Web前端開發是從網頁製做演變而來的，名稱上有很明顯的時代特徵。隨着人們對用戶體驗的要求愈來愈高，前端開發的技術難度愈來愈大，Web前端開發工程師這一職業終於從設計和製做不分的局面中獨立出來。 javascript

早期的前端其實就是Table佈局，後來發展到所謂的Div + CSS網站重構，再到如今的讓人眼花繚亂的各類各樣的新技術，Web前端技術發展是很是快速的，所以選擇了前端這個行業就意味着不停的學習吧。讓咱們先看看張克軍繪製的前端知識體系結構： css

前端開發的核心是HTML + CSS + JavaScript。本質上它們構成一個MVC框架，即HTML做爲信息模型（Model），CSS控制樣式（View），JavaScript負責調度數據和實現某種展示邏輯（Controller）。 html

HTML

1. 標籤的分類

1. 標籤表示一個元素

2. 按性質劃分: Block-Level和Inline-Level

3. 按語義劃分:

Headings: h1, h2, h3, h4, h5, h6
Paragraphs: p
Text Formatting: em, strong, sub, del, ins, small
Lists: ul, li, ol, dl, dt, dd
Tables: table, thead, tbody, tr, th, td
Forms and Input: form, input, select, textarea
Others: div, span, a, img,
HTML5: header, footer, article, section

2. XHTML

XHTML 於2000年的1月26日成爲 W3C 標準。W3C 將 XHTML 定義爲最新的HTML版本。XHTML 將逐漸取代 HTML。XHTML是經過把 HTML 和 XML 各自的長處加以結合造成的。XHTML 語法規則以下：前端

屬性名和標籤名稱必須小寫
屬性值必須加引號
屬性不能簡寫
用 Id 屬性代替 name 屬性
XHTML 元素必須被正確地嵌套
XHTML 元素必須被關閉

3. 標籤的語義化

爲表達語義而標記文檔，而不是爲了樣式，結構良好的文檔能夠向瀏覽器傳達儘量多的語義，不管是瀏覽器位於掌上電腦仍是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義，即便是在老的瀏覽器，或是在被用戶關閉了 CSS 的現代瀏覽器中。同時結構良好的HTML代碼也有助於搜索引擎索引你的網站。 java

不要使用table佈局，table是用來表格顯示的。
不要處處濫用div標籤，div是用來分塊用的。
不要使用樣式標籤，如font, center, big, small, b, i，樣式能夠用CSS來控制，b和i能夠用strong和em來代替。
不要使用換行標籤<br />和空格來控制樣式，請用CSS。
儘可能不要使用內聯CSS

CSS

1. CSS基礎知識

層疊和繼承
優先級
盒模型
定位
浮動

2. CSS進階

CSS Sprite
瀏覽器兼容性
IE HasLayout和Block Format Content
CSS Frameworks
CSS3
CSS性能優化
LESS and SASS

CSS Sprite

CSS Sprite主要用於前端性能優化的一種技術，原理是經過將多張背景圖片合成在一張圖片上從而減小HTTP請求，加快載入速度。 node

瀏覽器兼容性

絕大部分狀況下咱們須要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本很是多，IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari。 jquery

IE HasLayout和Block Format Content

IE HasLayout是一個 Internet Explorer for Windows的私有概念，它決定了一個元素如何顯示以及約束其包含的內容、如何與其餘元素交互和創建聯繫、如何響應和傳遞應用程序事件、用戶事件等。這種渲染特性能夠經過某些 CSS 屬性被不可逆轉地觸發。而有些 HTML 元素則默認就具備」layout」。目前只有IE6和IE7有這個機率。BFC是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。這個其實和瀏覽器的兼容性有關，由於絕大部分的兼容性問題都是它們引發的。參考：CSS BFC和IE Haslayout介紹 git

CSS Framework

CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網格佈局、表單樣式、通用規則等代碼塊,用於簡化web前端開發的工做，提升工做效率。目前常見框架有： angularjs

仍是一個比較出名和特殊的框架是Twitter的Bootstrap。Bootstrap是快速開發Web應用程序的前端工具包。它是一個CSS和HTML的集合，它使用了最新的瀏覽器技術，給你的Web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。它是基於Less開發的。不支持IE6，在IE7和IE8裏效果也不咋地。 github

CSS3

雖然CSS3尚未正式成爲標準，可是包括IE9+, chrome, Firefox等現代瀏覽器都支持CSS3。CSS提供了好多之前須要用JavaScript和切圖才能搞定的功能，目前主要功能有：

圓角
多背景
@font-face
動畫與漸變
漸變色
Box陰影
RGBa-加入透明色
文字陰影

CSS性能優化

CSS 代碼是控制頁面顯示樣式與效果的最直接「工具」，可是在性能調優時他們一般被 Web 開發工程師所忽略，而事實上不規範的 CSS 會對頁面渲染的效率有嚴重影響，尤爲是對於結構複雜的 Web 2.0 頁面，這種影響更是不可磨滅。因此，寫出規範的、高性能的 CSS 代碼會極大的提升應用程序的效率。參考CSS性能優化探討

LESS和SASS

LESS和SASS都是 CSS 預處理器，用來爲 CSS 增長一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。

SASS基於Ruby開發。LESS既能夠在客戶端運行，也能夠藉助Node.js或者Rhino在服務端運行。

JavaScript

1. JavaScript基礎知識

數據類型
變量
表達式與運算符
控制語句
函數
異常
OO
事件
BOM
閉包

2. JavaScript進階

DOM
JSON
AJAX
JavaScript Frameworks
HTML5
前端模板
前端MVC
模塊化開發
JavaScript單元測試
JavaScript設計模式
NodeJS
ES5

DOM

DOM即文檔對象模型，HTML DOM 定義了訪問和操做HTML文檔的標準方法。幾乎全部的現代瀏覽器都能很好的支持DOM了。

JSON

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，易於人閱讀和編寫，同時也易於機器解析和生成。是目前事實上數據交換的標準格式，幾乎全部語言都支持JSON，比XML強太多了。

AJAX

AJAX即「Asynchronous JavaScript and XML」（異步JavaScript和XML)，AJAX並不是縮寫詞，而是由Jesse James Gaiiett創造的名詞，由Google發揚光大。用於建立更好更快以及交互性更強的 Web 應用程序的技術。

JavaScript Frameworks

JavaScript Frameworks能夠極大簡化咱們JavaScript編程的工做量，它主要提供瞭如下幾個主要功能： DOM操做，跨瀏覽器兼容性，以及程序架構。固然像jQuery它自己其實並非一個框架，它是一個庫(lib)。目前主流的框架或庫有以下幾個：

以上都是一些重量級的框架或者庫，仍是小巧的庫也是強烈推薦的，好比Underscore

HTML5

HTML5同CSS3相似，即雖然沒有成爲標準，可是主流的瀏覽器都支持了。HTML5不是HMTL，雖然也提供了一些新標籤，可是它的主要用途仍是JavaScript。HTML5主要提供如下功能：

本地音頻視頻播放
Canvas/SVG
地理信息
硬件加速
本地運行
本地存儲
從桌面拖放文件到瀏覽器上傳
語義化標籤，Form表單

前端模板

前端模板主要是爲了解決複雜的數據拼接問題，能夠將模板語言轉換化爲HTML結構，能夠大大簡化工做量，同時代碼的可維護性獲得很大的提升。目前比較主流前端模板有：

前端MVC

Web應用的功能愈來愈強，Javascript代碼也愈來愈多，大量的JS代碼要以何種架構來組織就成了一個亟待解決的問題，因而就有人把傳統的MVC架構移植到前端來解決這些問題。目前主流前端MVC框架主要有如下這些：

TodoMVC用上面全部的MVC框架寫了同一個示例代碼「Todo List」，是個學習對比MVC框架的好地方。

模塊化開發

其實如今JavaScript模塊化是個很熱門的東西了，主要特色是「模塊化開發，按需加載「。這其中CommonJS組織定義了AMD的規範用來規範瀏覽器端的模塊定義。RequireJS和SeaJS是實現了AMD的兩個優秀的框架。詳見：http://www.weakweb.com/articles/341.html

JavaScript單元測試

可是隨着單元測試的普及，尤爲是敏捷開發的推進，涌現了許多優秀的JavaScript單元測試框架，見詳細列表。全部的這些框架基本上都能對Javascript代碼進行很好的測試，固然UI部分的代碼測試同樣比較麻煩，可是咱們能夠經過精心構造咱們的測試代碼來測試部分UI代碼。主流的測試框架以下：

目前jQuery的全部代碼都是經過QUnit進行測試的，而且將測試代碼放在Github上了，你們感興趣能夠參考一下。詳見：JavaScript單元測試框架介紹

JavaScript設計模式

好多設計模式是能夠應用於JavaScript的，好比常常用到的事件處理的觀察者模式，所以設計模式是提高編碼層次的必學技術。

NodeJS

NodeJS如今是比較火熱的，其最大的貢獻就是把JavaScript移植到服務器端了，這樣前端和後端就可使用一樣的技術，方便統一開發。並且NodeJS是非阻塞調用的，在特定領域性能是很是強勁的。並且這是前端開發人員進軍後臺開發的好機會，進而先後端統一開發，但又不用去學習其它後臺開發語言。

ES5

ES5就是ECMAScript 5，也就是最新的JavaScript規範，對以前的JavaScript做了不少改進，增長了好多新的特性，好比JSON，並且現代主流瀏覽器都開始支持ES5了，仍是很是有必要學習一下的。

Others

下面是一些和HTML, CSS, JavaScript沒有直接關係，可是對於前端開發一樣很是重要的一些技術。

Http1.1
Web移動開發
前端安全
跨域處理
調試工具
SEO
A/B test
可用性/可訪問性
前端流程/部署
正則表達式
編輯器
瀏覽器插件開發
瀏覽器原理

Http1.1

HTTP對於前端開發來講仍是很重要的，好比最簡單的GET，POST方式，Request/Response 頭部，狀態碼等。

Web移動開發

如今移動開發很是很是流行了，而開發方式通常是native的方式或者Web方式，做爲前端開發人員來講天然是去學習Web移動開發了。PhoneGap是必學的，前端層面的框架如jQueryMobile, Sencha Touch, jQTouch等都是不錯的選擇。

前端安全

隨着前端技術的發展,安全問題已經從服務器悄然來到了每個用戶的的面前，盜取用戶數據, 製造惡意的能夠自我複製的蠕蟲代碼,讓病毒在用戶間傳播,使服務器當掉. 更有甚者可能會在用戶不知以爲狀況下,讓用戶成爲攻擊者,這絕對不是駭人聽聞。富客戶端的應用愈來愈廣，前端的安全問題也隨之增多。常見的攻擊方法有：

XSS，跨站腳本攻擊(Cross Site Script)。它指的是惡意攻擊者往Web頁面裏插入惡意html代碼，當用戶瀏覽該頁之時，嵌入的惡意html代碼會被執行，從而達到惡意用戶的特殊目的。
CSRF(Cross Site Request Forgery)，跨站點僞造請求。顧名思義就是經過僞造鏈接請求在用戶不知情的狀況下，讓用戶以本身的身份來完成攻擊者須要達到的一些目的。
cookie劫持，經過獲取頁面的權限，在頁面中寫一個簡單的到惡意站點的請求，並攜帶用戶的cookie 獲取cookie後經過cookie 就能夠直以被盜用戶的身份登陸站點。

跨域處理

同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操做另一個域的絕大部分屬性和方法。所謂的跨域處理就是處於不用域之間的腳步互相調用，目前有不少方法來處理它。

調試工具

前端的調試工具不少，好比Firebug，Webkit核心的web inspector, IE的iedeveloper。HTTP相關的fiddler, httpwatch等，還有格式化代碼的jsbeatutifier，它有助於閱讀壓縮處理過的JavaScript代碼。IETester能夠模擬全部的IE版本，是調試IE兼容性的好工具。

SEO

前端開發人員不少時候仍是須要了解搜索引擎優化的。

A/B test

A / B測試的核心就是：肯定兩個元素或版本（A和B）哪一個版本更好，你須要同時實驗兩個版本。最後，選擇最好的版本使用。

可用性/可訪問性

可用性指的是：產品是否容易上手，用戶可否完成任務，效率如何，以及這過程當中用戶的主觀感覺可好，是從用戶的角度來看產品的質量。可用性好意味着產品質量高，是企業的核心競爭力。

可訪問性：上網用戶中那些視力受損的人，經過屏幕閱讀器使用鍵盤命令將網頁的內容讀給他們聽。以語義化的HTML（結構和表現相分離的HTML）編寫的網頁文件，就可讓此類用戶更容易導航，且網頁文件中的重要信息也更有可能被這些用戶找到。

能夠經過逐步強化你的網站功能，同時對支持性進行測試。運用「漸進加強」和「平穩退化」原則開發網站。

正則表達式

估計絕大部分的編程語言都會用到它，當處理字符串時能夠極大的簡化你的工做。必學啊。

編輯器

人人都有本身喜歡的編輯器，從前端的角度看，Eclipse + Aptana, Notepad++, VIM都是不錯的選擇。我我的比較喜歡用Notepad++,簡潔，快。

前端流程/部署

當前端項目比較複雜時，咱們就應該考慮引入自動構建，自動化部署等技術了。可使用JSLint來對JavaScript進行語法檢查，用CSSLint或CSS Validator檢查CSS語法，用JSMin或YUI Compressor對JavaScript代碼進行壓縮，可使用JSDoc/YUIdoc進行文檔自動化生成，使用Jasmine/JsTestDriver進行自動化單元測試，可使用Ant/Maven/Make進行自動構建部署。

瀏覽器插件開發

瀏覽器是咱們的工做平臺，在上面開發插件是頗有趣的，不少時候也是頗有用的。

瀏覽器原理

前端工做絕大部分都是運行在瀏覽器上面，因此瞭解瀏覽器原理有助於更深刻的理解各類技術的原理，工做過程。

溝通能力

優秀的前端工程師須要具有良好的溝通能力，由於你的工做與不少人的工做息息相關。在任何狀況下，前端工程師至少都要知足下列四類客戶的需求。

1. 產品經理——這些是負責策劃應用程序的一羣人。他們可以想象出怎樣經過應用程序來知足用戶需求，以及怎樣經過他們設計的模式賺到錢（希望如此）。通常來講，這些人追求的是豐富的功能。
2. UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一向性以及總體的好用性。他們熱衷於流暢靚麗但並不容易實現的用戶界面。
3. 項目經理——這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間（uptime）——應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標每每是儘可能保持事情的簡單化，以及不在升級更新時引入新問題。
4. 最終用戶——固然是應用程序的主要消費者。儘管咱們不會常常與最終用戶打交道，但他們的反饋意見相當重要；沒人想用的應用程序毫無價值。最終用戶要求最多的就是對我的有用的功能，以及競爭性產品所具有的功能。

那麼，前端工程師應該最關注哪些人的意見呢？答案是全部這四類人。優秀的前端工程師必須知道如何平衡這四類人的需求和預期，而後在此基礎上拿出最佳解決方案。因爲前端工程師處於與這四類人溝通的交匯點上，所以其溝通能力的重要性不言而喻。若是一個很是酷的新功能由於會影響前端性能，必須刪繁就簡，你怎麼跟產品經理解釋？再好比，假設某個設計若是不改回原方案可能會給應用程序形成負面影響，你怎麼才能說服UI設計師？做爲前端工程師，你必須瞭解每一類人的想法從何而來，必須能拿出全部各方都能接受的解決方案。從某種意義上說，優秀的前端工程師就像是一位大使，須要時刻抱着外交官的心態來應對每一天的工做。

如何提升前端技術

Github是一個優秀的代碼託管網站，咱們能夠在上建立咱們我的的項目，同時也是學習的好地方，咱們能夠關注其它優秀的項目。JSFiddle是一個web開發人員的練習場，一個能夠在不少方面應用的工具。咱們能夠用他來在線編輯一些HTML,CSS,javascript片斷。你編輯的代碼能夠與其餘人分享，或嵌入你的博客等
閱讀優秀的開源代碼
參加前端聚會
關注技術發展趨勢，瞭解最新的行業技術，能夠經過訂閱知名博客，閱讀技術新聞獲取
寫博客/記筆記，能夠進行知識積累。博客能夠本身買空間或者各大知名博客網站。筆記的話好比evernote，有道筆記等。