糯米文學吧

請輸入關鍵字詞

熱門搜索排行

位置：首頁 > 設計 > 網頁設計

Web前端基礎總結 三篇

網頁設計2.27W

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

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 來源： 發佈時間：2008年4月28日

代碼篇

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

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

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

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

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

程序代碼：

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編程等等的，今天就收工了，謝謝捧場先！！！

Copyright 2007-2008 <a

href="">, All rights reserved. Powered By: domain

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

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

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

什麼叫結構化？

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

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

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

的基本類型：

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：

eln(!null, !undefined); // true,true

eln(null==false); // false

eln(undefined==false); // false

eln(undefined==null); // true

null instanceof Object //false

typeof null//Object

的類型轉換

手動的轉換有：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)

in屬性

四個參數：上右下左

三個參數：上、左右、下

兩個參數：上下、左右

一個參數：四周

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時非常有效。

和Span有何區別？

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

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

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

答：

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

nterval與setTimeout的區別？ 答：setTimeout方法是定時程序，也就是在什麼時間以後幹什麼。幹完了就拉倒。 setInterval方法則是表示間隔一定時間反覆執行某操作。

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

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

缺點：

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

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

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

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

標籤：web 三篇 前端

相關文章