Web前端基礎總結

時間：2024-07-16 07:50:53 Web Services

Web前端基礎總結三篇

　　前端工作總結篇一：前端開發心得

Web前端基礎總結三篇

　　從事前端開發工作1年多了，從最初的DIV+CSS學起，到現在學到html5、css3、javascript，jquery等等，我覺得前端要學的技術太多了，很多人認為前端開發要掌握的技能簡單，就是網頁制作，其實不然，前端開發是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，現在最新的高級版本是HTML5、CSS3，以及SVG等。JavaScript作為最難的語言之一，許多編程高手也不敢妄自菲薄、自封精通。

　　關于兼容性的問題我相信對于每個做前端開發的人來講是一個很頭疼的問題，互聯網目前主流瀏覽器有IE6789，Firefox，Chrome，Opera，Safari，遨游，包括國內主流的搜狗，騰訊 TT，360等等；從內核上講主要有IE的，遨游版IE，safari，firefox以及opera的，這些都是大家常見的。所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，用戶用什么瀏覽器來查看同一網站，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。這個時候就需要針對不同的瀏覽器寫不同的CSS，這個過程叫CSS hack。雖然我們寫代碼都要求按照標準，不寫hack代碼，但實際工作中為了兼容主流瀏覽器，hack代碼是免不了的，所以這也應該是每個前端開發人員必備的技能。

　　前端的開發工具很多，比較常見的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我現在在使用webstorm，強大的提示功能可以幫助我們很快的熟悉并掌握網頁布局,檢查錯誤等。調試代碼的工具我使用的Firebug。Firebug是網頁瀏覽器Mozilla firefox 下的一款開發類插件，它集HTML查看和編輯、Javascript控制臺、網絡狀況監視器于一體，是開發JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。Firebug也是一個除錯工具。用戶可以利用它除錯、編輯、甚至刪改任何網站的CSS、HTML、Dom 以及Javascript代碼。

　　以上是自己做前端開發的一點心得，它所涵蓋的知識面遠遠不止這些，我也在不斷的學習，不斷地豐富自己，希望自己能在前端這個職位上開闊自己的一片天地！

　　前端工作總結篇二：WEB前端開發經驗總結

　　這里跟大家談談個人對WEB前端開發的一些經驗（當然都是個人的一些理解，有什么地方說的欠妥或不對的地方還請包含和指正），這里我就從WEB標準開始吧。

　　WEB標準是什么？

　　說是WEB標準，不過我這里主要是對XHTML1.1 和 CSS2.1的一些經驗總結。因為WEB含蓋的內容實在是太多了，“WEB標準”是一系列標準的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以這里要跟大家指出來一下，WEB標準不是我們所說的DIV+CSS。剛剛上面提到了――DIV+CSS，這里要說明下，這樣說其實是不正確的。DIV+CSS準確的說法（個人的理解）應該是：采用W3C推薦的WEB標準中的XHTML1.1結合CSS2.0樣式表制作頁面的方法，DIV應該指的是XHTML標簽，而CSS顯示是指的CSS樣式表了。

　　采用WEB標準開發的好處

　　那么W3C為什么會推薦這樣的頁面制作方法呢？下面我們就簡單的看看采用WEB標準開發（個人理解的）相對以前TABLE布局的優勢有哪些？

　　1、節約運營成本

　　看看我們的WEB標準制作方法是如何做到的？

　　采用WEB標準制作，我們可以做到表現很形式的分離，我們用XHTML來表現（數據），用CSS來控制（頁面元素呈現的）形式。寫的好的頁面，XHTML代碼中基本上都是用戶要看的數據，還其他修飾性的東西，全部由我們的CSS來控制。這樣一來我們的（XHTML）頁面的體積就大大減小了，這樣你在帶寬上的費用就會大家降低了，這個怎么降低的，你可以想象一下，YAHOO的首頁小1K，100W個人一起訪問，那么帶寬節約了多少？而且可以更充分的利用帶寬。

　　而我們的CSS控制了，所有的頁面元素的樣式，現在想改網站的整體風格，你只需要花幾分鐘修改一下一個CSS文件，就可以輕松搞定了。維護的成本也下來了，省了不少錢了吧？還有，你開這個頁面的速度會快很多啊，一個讓你等半分鐘的頁面，除非里面的信息對你很有用，不然我們大家基本都沒有太多的時間去用來等待的。

　　2、對用戶友好更友好，且有機會獲得更多的用戶

　　現在來說說用戶友好。首先我想把我們的用戶來分下類。

　　第一類：普通用戶（每個訪問我們網站的人）；

　　第二類：搜索引擎；

　　采用WEB標準開發的頁面，結構清晰，頁面體積小，瀏覽器兼容性好。普通用戶訪問的時候，頁面打開速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問（顯示）頁面，且頁面的結構清晰，要找的數據可以很方便的瀏覽到。

　　而對搜索引擎來說，一個好的采用WEB標準開發的頁面，都是做過SEO優化的，它訪問起來很友好，很容易理解你的頁面中哪里是標題（H1~H6標簽），哪里是段落（p標簽），哪里是段落里要強調的內容（strong標簽）等，它可以很容易的分析出來。而一個SEO好的站點，大家都知道，被搜索引擎收錄的機會更多，這個也意味著您的網站會被更多的普通用戶訪問到，給你的站點帶來更多的用戶。

　　一個能幫我們省下大筆費用，提高工作效率。同時又能夠提高頁面瀏覽速度，對用戶友好，甚至能夠不花錢宣傳，就能給你帶來更多用戶的技術。你說你會不會去使用它？這個也正式我們的W3C推薦使用WEB標準開放網站的原因啊。而這個技術也得到了我們廣大用戶的認可，所以您現在需要學習WEB標準啊。溫習完了基礎課程，現在正式開始講XHTML和CSS的技巧了。

　　合理的布局

　　有朋友會開始問了，怎么一開始就開始講合理的布局了呢?前面我們提到了一些知識點――“結構清晰、SEO優化、頁面體積小、XHTML代碼中基本上都是用戶要看的數據”。這些東西，都是我們做了合理布局的結果。而且我個人覺得，我們采用WEB標準制作的一切都是從這個知識點開始的，所以我這里就先來說這個話題。

　　那么大家又會開始問，怎樣的一個頁面，才算是合理的布局的呢？這個問題問題問得好，也是我們大家剛開始學用WEB標準的問得最多的問題之一，我也曾經常被這個問題所困擾，這里就說說我對合理布局的一些理解。

　　在開始講合理布局的頁面要達到的要素前，我們還是用個實例來講解會更直觀些。先來看看這個圖片：不錯，這個是一個文章詳細頁，沒有左右兩欄布局，不過這里我重點要講的是合理的布局，在稍后的文章中我會詳細的介紹浮動元素。好，回到剛才的話題，大家看到了這個頁面了。

　　我這里先把代碼寫給大家看看（省略了部分代碼）：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"domain 來源：domain.com 發布時間：2008年4月28日

　　代碼篇

　　之前整理發表了《XMLHTTPRequest的屬性和方法簡介》,它Ajax要使用的核心的技術之一，現在就來實際運用它。這個Ajax標簽導航，是我很久前就寫的一個腳本，很實用的（還被很多網站收錄了哦），現在拿它來做實例講解吧！當然個人能力有限，有什么不對的地方還請多包含!

　　效果大家看到了，核心功能有：

　　1、將當前選中標簽以特殊的樣式顯示

　　2、將異步加載的頁面信息顯示到指定的DOM節點中

　　我們來看看處理腳本的代碼吧：

　　程序代碼：ajaxtab.js

　　id="news"- news就是我們的導航標簽的ID；

　　id="newsCnt"- newsCnt就是我們要寫入信息的目標DOM節點；

　　class="first" - first當前(第一個)標簽的樣式；

　　id="news-0" - news-0 通過”-“分開，我們就分別可以得到news(導航標簽ID)，0（標簽[li]在導航標簽中的索引值）

　　網站重構 - 超鏈接

　　- 標簽間的分割線

　　我羅列的這些東西，相信大家開始看出了些頭緒了，呵呵，不過別急！在我們看處理的腳本之前，先讓我們來看看導航標簽的樣式，主要是看看我們對分割線的處理(一點CSS處理的技巧)。

　　本來想偷個懶，讓大家看我上邊說的那篇文章，想想也就是Ctrl+C&Ctrl+V,都貼出來吧！呵呵！！！

　　不過還沒有完，最后要說的就是innerHTML這個特性，這里我們還要感謝微軟啊，innerHTML就是它的專利，我們就是用它來改變指定DOM內的HTML字符串的，而不用刷新頁面。詳細的信息大家還是google

　　一下吧，我也要休息下啊！！喝口茶先！！^-^！

　　以上講了這么多，我們最后來看看，我們這個ajax標簽導航都用到了那些技術吧：

　　XHTML

　　CSS

　　Javascript

　　DOM

　　XMLHttpRequest對象

　　innerHTML

　　還有XML，我們這個例子沒有涉及到。東西雖小，包含的（web前端開發）知識可是都用到了啊，我把我會的點東西都端出來了（要失業了），呵呵！

　　當然我很喜歡跟大家多交流，以后有時間，我們在來談談CSS的HACKS技巧，Javascript DOM編程等等的，今天就收工了，謝謝捧場先！！！

　　看出來什么沒有？（代碼是很多）可能大家已經發現，整個頁面里基本上都是用戶要看的數據，其中只包含了很少（必要）的布局(XHTML)標簽（請允許我這么說）。整個頁面基本都是由最基礎的h1~h6、p、ul、ol、li、form、div標簽來實現的。

　　說到這里就要講到我在前面提到的“結構清晰、SEO優化、頁面體積小、XHTML代碼中基本上都是用戶要看的數據”，看看我的這個例子做到了沒有？

　　結構清晰--也就是我們常說的，XHTML標簽要結構化（語意化）。

　　什么叫結構化？

　　由于個人認為這個知識點是十分重要的，所以請允許我在這里多羅嗦幾句，我們采用WEB標準的方法制作頁面的優勢就體現在頁面結構清晰。我們以前用table布局的時候，我們的表現（數據）和形式（布局樣式）是混在一起的，有很多冗余的數據混雜在一起，而大家再看看我上面給大家展示的代碼，很明顯，結構十分清晰。

　　說了半天，還是沒有說什么是結構化，什么才是結構清晰啊？不要急。還記得我剛才提到的那幾個標簽嗎？

　　前端工作總結篇三：Web前端基礎總結

　　1.Js的基本類型：

　　Undefined:只有一個值undefined，它是變量未被賦值時的值，在JS中全局對象有一個undefined屬性表示undefined，事實上undefined并非JavaScript的關鍵字，可以給全局的undefined屬性賦值來改變它的值。 Null:只有一個值null,但是JavaScript為它提供了一個關鍵字null來表示這個唯一的值。Null類型的語義是“一個空的對象引用”。

　　Number:NaN是其一個特殊的屬性值，typeof NaN // “number”);

　　String:其正式解釋是一個16位無符號整數類型的序列，它實際上用來表示以UTF-16編碼的文本信息。 Boolean:有兩種取值true和false。0、NaN、空字符串、null、undefined轉化為false，其余的全部為true。

　　Object:最為復雜的類型就是Object，它是一系列屬性的無序集合，Function是實現了私有屬性[[call]]的Object，JavaScript的宿主也可以提供一些特別的對象。typeof

　　*'3','344'+//‘Object’

　　關于null和undefined：null是關鍵字；undefined不是關鍵字，undefined是Global對象的一個屬性。

　　運算時null與undefined都可以被類型轉換為false，但不等值于false：

　　document.writeln(!null, !undefined); // true,true

　　document.writeln(null==false); // false

　　document.writeln(undefined==false); // false

　　document.writeln(undefined==null); // true

　　null instanceof Object //false

　　typeof null//Object

　　2.JS的類型轉換

　　手動的轉換有：Number(x);Boolean(x);String(x);以及parseInt,parseFloat,toString,valueOf等等。

　　自動的轉換：如果“+”操作符的一個操作數是字符串，則會將另一個操作數轉換為字符串，一元操作符“*”、“-”將操作數轉換為數字，一元操作符“！”將操作數轉換為布爾值并取反。

　　‘hello’+5 // ‘hello5’

　　‘hello’+null // ‘hellonull’

　　‘5’*5//25

　　‘hello’*5//NaN

　　X+””//等價于String(x)

　　+X 或者 X-0//等價于Number(X)

　　!!X//等價于Boolean(X)

　　3.margin屬性

　　四個參數：上右下左

　　三個參數：上、左右、下

　　兩個參數：上下、左右

　　一個參數：四周

　　4.關于float問題，浮動元素后跟非浮動元素的情況。后邊非浮動元素若為行內元素且因為定位產生重疊時，行內元素邊框、背景和內容都在該浮動元素“之上”顯示，若為塊級元素且因為定位產生重疊時，該塊級元素邊框和背景在該浮動元素“之下”顯示，只有內容在浮動元素“之上”顯示。【有示例】。

　　Clear屬性規定元素的哪一側不允許其他浮動元素。clear 屬性定義了元素的哪邊上不允許出現浮動元素。在

　　CSS1 和 CSS2 中，這是通過自動為清除元素（即設置了 clear 屬性的元

　　素）增加上外邊距實現的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。

　　5.絕對定位、相對定位與浮動定位

　　絕對定位：absolute生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

　　相對定位：relative生成相對定位的元素，相對于其正常位置進行定位。設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

　　浮動定位：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

　　示例代碼就是最外層的div是relative，里面的就是absolute。

　　6.關于DOM元素

　　利用DOM，JS可以相對簡單地尋找、訪問和操縱HTML元素，從而動態地改變HTML頁面的內容和外觀。節點常用的屬性有parentNode, childNodes, firstChild, lastChild,

　　previousSibling, nextSibling。

　　7.關于函數

　　定義順序：函數的定義與其他的語句的定義不再同一個時間軸上面，計算機在開始執行語句之前，會先查找所有的function的定義，然后保存。所以在函數后面定義的調用語句可以調用到定義在前面的函數。

　　局部變量與全局變量：局部變量只適合于函數的參數和函數內部已var關鍵字定義的變量。如果沒有定義同名的局部變量，函數內部則可能訪問全局變量。

　　閉包：首先要知道在js中，函數在一旦定義的時候就會產生自己的一個作用域，而此后這個函數的執行也是要依賴于這個作用域的。閉包的最常用的編程模式就是在一個函數中嵌套另一個函數，然后將這個嵌套的函數作為返回值返回，當然外部函數中的局部變量也就存在于這個返回函數的作用域中的，這樣就起到了對局部變量的一個訪問控制。但是缺點在于增大了內存的開支。而且其所派生的子類將不能訪問其私有屬性，破壞了繼承性。因此還是需要三思而行。閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的保護函數內部的變量，另一個就是讓在內存中維持變量。

　　我寫的閉包主要用于實現一些插件，因為有一些變量需要避免被全局變量污染。

　　可選參數：Js不會限制傳入函數的參數數目。如果傳入的參數過多，多余的參數會被忽略掉。如果過少，缺失的參數會默認為undefined。

　　apply和call的區別：相同點:兩個方法產生的作用是完全一樣的。

　　不同點:方法傳遞的參數不同，apply(obj,[arg1,arg2..]) call(obj,arg1,arg2)

　　原型：所有對象都有一個原型，對象可以共享其原型的屬性，但是這種共享是單向的，即原型的屬性影響對象，改變對象確不會影響到原型。原型污染：使用for/in遍歷對象的時候，會同時得到本來的屬性和原型的屬性，可以使用HasOwnPorperty方法來判斷。

　　匿名函數：一般用來寫已加載就需立即執行的函數。同時為了避免受全局變量的影響，在一個不是很熟悉的頁面增加Javascript時非常有效。

　　8.Div和Span有何區別？

　　答：兩者最明顯的區別在于DIV是塊元素，而SPAN是行內元素(也譯作內嵌元素)。所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行，

　　當然這一點也可以通過設置display（block,inline,inline-block）來改變。

　　9. CSS+DIV開發Web頁面的優勢有哪些？

　　答：

　　1） CSS+DIV，這個網頁設計模式中，DIV承擔了網頁的內容，CSS承擔了網頁的樣式。這樣就使網頁的內容和樣式的分離開來。有利于頁面的維護升級。有助于提高搜索引擎親和力（快速找到需要的數據，而不是像在TABLE中一層層的查找）有助于頁面的重構(換皮膚如blog，直接套用另外一套樣式就可以實現，而不用改動網頁腳本。)

　　10.setInterval與setTimeout的區別？答：setTimeout方法是定時程序，也就是在什么時間以后干什么。干完了就拉倒。 setInterval方法則是表示間隔一定時間反復執行某操作。

　　11.Ajax及其優缺點：答：Asynchronous JavaScript and XML”（異步JavaScript和XML)。在瀏覽器中使用js進行服務器的請求與響應，使得可以在不更新整個頁面的前提下維護數據。其名字中的xml并非指只支持xml這一種文本格式，xml只是一個選擇而已，其他還可以是表單與json。這樣做只是xml流行時的遺跡。

　　優點：使用Ajax的最大優點就是可以實現頁面的局部刷新，提高用戶體驗質量。其他優點有使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力。

　　缺點：

　　1.干掉了back按鈕。因為在未刷新頁面的時候是無法使用back按鈕的。

　　2.安全問題，將一些數據、邏輯暴露在了前臺。

　　3.對搜索引擎的支持較弱。

　　4.違背了Url資源定位的初衷。

【Web前端基礎總結】相關文章：

web前端實訓總結（通用6篇）02-02

web前端應聘自我介紹02-25

網易web前端開發師面試問答的經歷08-19

web前端學習心得體會范文01-09

Web Service的開發與應用基礎07-12

web前端開發工程師工作的崗位職責01-23

web前端工程師實習心得體會09-29

Web Workers加速移動Web應用07-01

web實訓總結（精選7篇）01-07

web瀏覽創作效果精選08-01