web前端每月工作總結(jié)

web前端每月工作總結(jié)篇一：web前端學(xué)習(xí)總結(jié)(精華版)

Web總結(jié)

一.名詞解釋

1.橫切

在固定頁(yè)面的寬度(按柵格化進(jìn)展)并且對(duì)高度沒有限制的容器稱為一個(gè)標(biāo)準(zhǔn)橫切

2.留白

兩個(gè)容器或碎片之間的上、下、左、右的空白間隔

3.繼承

元素可以從其父級(jí)元素中獲得一些可為自己使用的屬性或值。

4.圖片定位

把圖片元素放置到一個(gè)靜態(tài)的、相對(duì)的、絕對(duì)的、或固定的位置中，利用CSS中對(duì)圖片進(jìn)展遮罩屬性，多用于頁(yè)面中的修飾圖

5.底圖

頁(yè)面中在標(biāo)簽中使用的背景圖

6.齊底(圖)線

用于區(qū)分橫切或碎片完畢的線或圖

7.頁(yè)面構(gòu)造

頁(yè)面的根底框架，由橫切、布局元素組成

8.焦點(diǎn)區(qū)(圖)

最易注意的區(qū)域

9.導(dǎo)航

在頁(yè)面中具有導(dǎo)向性的鏈接集合

10.頭圖

頁(yè)面主題圖片

11.間距

碎片或文字間的間隔

12.行高

文字段落中行與行之間的間隔

13.首行縮進(jìn)

文字段落首行縮進(jìn)

14.浮動(dòng)

使被定義的區(qū)域脫離正常的頁(yè)面文檔流

15.碎片

由文字、圖片組合成的內(nèi)容區(qū)域

16.通欄廣告

與頁(yè)面內(nèi)容區(qū)同寬的廣告區(qū)域

17.功能按鈕

具有交互屬性的按鈕

18.私有款式

當(dāng)前頁(yè)面獨(dú)立使用的款式，不具備公用性

19.程度(垂直)居中

在頁(yè)面中的某個(gè)元素處于父級(jí)的上下或左右的一樣間隔

20.標(biāo)準(zhǔn)頭(尾)

定義一樣的頁(yè)面頭或尾元素集合

二.文本格式化

1.段落：p

2.斜體：address〔聯(lián)絡(luò)信息〕em〔強(qiáng)調(diào)〕i〔突出不同〕cite〔引用〕dfn〔首次定義術(shù)語(yǔ)〕

3.粗體：strong〔重要〕b〔提醒〕

4.圖片塊：figure

5.引述文段，段落縮進(jìn)：blockquote

6.背景顏色：mark

7.虛線下劃線：abbr

8.上標(biāo)下標(biāo)：sub/sup

9.下劃線：ins

10.刪除線：del〔標(biāo)記已刪除內(nèi)容〕s〔標(biāo)記不準(zhǔn)確內(nèi)容〕

11.等寬字體：code

12.預(yù)格式化：pre

13.字號(hào)減小，表注釋：small

14.時(shí)間：time

15.換行：br

16.html5定義區(qū)塊：headernavarticlesectionasidefooterdivspan

三.表單表格

1

2.表單元素的組織：

3.創(chuàng)立各種框:

注：text→password/url/tel/email

Id:為了讓對(duì)應(yīng)的標(biāo)簽識(shí)別，添加CSS

Name：為了讓效勞器和腳本識(shí)別，通常與id設(shè)為一樣

Size：文本框大小

Maxlength：能輸入的最大字符數(shù)

Pattern：正那么表達(dá)式

4.添加標(biāo)簽：

5.單(多)選按鈕：

北京

上海

注：id各自唯一，name必須一樣。checked：默認(rèn)選擇

6.下拉框：

北京

上海

成都

注：size:選擇框的高度multiple：允許多項(xiàng)選擇selected：默認(rèn)選擇用對(duì)選擇框進(jìn)展分組

7.上傳文件：

注：size：輸入途徑和文件名的字段的寬度

8.禁用表單元素：

9.創(chuàng)立提交按鈕：

創(chuàng)立帶圖像的提交按鈕：點(diǎn)擊這里創(chuàng)立圖像按鈕：

Submit→reset重置

10.文本區(qū)域：請(qǐng)?jiān)诖溯斎胱址?/p>

11.表格:

..

..

..

四.文本格式化

1.{font：〔斜體粗體小型大寫字母〕字體大小(必有)行距字體集〔必有〕;}

2.文本背景：{background：#focurl〔1.jpg〕repeat-xscroll00；}

3.字間距：word-spacing:12px;

4.字偶距：letter-spacing:12px;

5.縮進(jìn)增加：text-indent:12px;

6.小型大寫字母:font-variant:small-caps;

7.文本對(duì)齊：text-align:left；適用于block，inline-block

8.單詞大小寫:text-transform:capitalize(單詞首字母大寫)/uppercase(大寫)/lowercase(小寫)

9.文本上的線：text-decoraion:underline/overline/line-through;

11.空格：white-space:pre(顯示所有空格回車)/nowrap〔非斷行空格〕；

12.h3—16px;h5—12px;verdana,Geneva,sans-serif;

13.列表屬性：li{list-style:url(1.jpg)insidesquare;}

五.CSS布局

1.width：不包括padding，border，margin；max-width設(shè)置外圍限制；

2.浮動(dòng)：float:left;去除浮動(dòng)：clear:both;

3.設(shè)置邊框：border:dotted4pxred;(dotted點(diǎn)狀、dashed虛線、solid實(shí)線)

4.使元素對(duì)齊：vertical-align:baseline/middle/text-bottom..

5.顯示：display:black/inline/inline-block;

6.顯示：visibility:visible/hiddle;

7.相對(duì)定位：{position:relative;top:5px;}相對(duì)于該元素的原始位置

8.絕對(duì)定位：{position:absolute;top:5px;}相對(duì)于body或離他最近定位的祖先元素

9.三維位置：{z-index:50;}越大的在最上面

10.廠商前綴：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)

11.創(chuàng)立圓角：

{-moz-border-radius-topleft:50px;

-webkit-border-top-left-radius:50px;

border-top-left-radius:50px;}(左上角,角的半徑是50px)

{border-radius:50px;}(所有角簡(jiǎn)寫)

12.創(chuàng)立橢圓角：{13.創(chuàng)立圓形：{14.文本加陰影：{text-shadow:2px5px5px#999;}x/y/模糊半徑

15.元素加陰影：{(-moz-/-webkit-)box-shadow:(inset內(nèi)陰影)2px5px5px#999;5px10px2px#555(多重陰影);}

16.多重背景：{background:#000url(1.png)50%102%no-repeat,#222url(2.png)12px-150pxrepeat-x;}

17.透明度：{opacity:.5;}0→1透明→不透明

18.漸變背景：{background:linear-gradient(left,#000,#999);}(left：漸變線沿逆時(shí)針?lè)较蜣D(zhuǎn)至程度線的角度)

六.html5視頻音頻

1.html5支持3種視頻：.ogg/.ogv.mp4/.m4v.webm

2.添加視頻：

視頻屬性：srcautoplaycontrolsmutedloopposterwidthheightpreload

3.為視頻添加多個(gè)來(lái)源：

//嵌入Flash動(dòng)畫

下載該視頻

4.html5支持5中音頻：.ogg.mp3.wav.aac.mp4

5.添加音頻：

音頻屬性：srcautoplaycontrolsmutedlooppreload。多個(gè)來(lái)源同video。

七.一些約定

我們結(jié)合常用的一些命名習(xí)慣，再結(jié)合CSS的實(shí)際應(yīng)用，整理出一些較好的命名習(xí)慣。

1.款式名稱首字母統(tǒng)一為小寫字母，不能為數(shù)字，下劃線及特殊字符；

2.款式名盡量語(yǔ)義化或簡(jiǎn)寫；

3.款式名需要組合拼寫時(shí)，采用全部小寫拼寫并使用下劃線連接，即：all_keyword；

4.使用px(像素)為根本計(jì)量單位；

5.頁(yè)面中空格的使用：全角：中文空格半角；

6.工程完成包中，文件夾及文件名稱全部采用小寫字母，不使用中文文件名；

7.減少DIV的嵌套層數(shù)；

8.給重要圖片加上alt屬性；給重要的元素和截?cái)嗟脑丶由蟭itle；

9.使用正確的注釋方法〔詳見“注釋〞章節(jié)〕；

10.特殊情況下要求表現(xiàn)和內(nèi)容別離，代碼中不要涉及任何表現(xiàn)的元素，例如：style、font

等；

11.雙標(biāo)記簽都要有開始和完畢標(biāo)簽，單標(biāo)記標(biāo)簽的后面一定要加“/〞,例如：

等，

并且有正確的層次；

12.其它特殊符號(hào)：

1)2)>(>)

八.命名空間

8.1外掛款式名稱

全局：public.css

全局款式為全站公用，為頁(yè)面款式根底，頁(yè)面中必須包含。

構(gòu)造：layout.css

頁(yè)面構(gòu)造類型復(fù)雜，并且公用類型較多時(shí)使用。多用在首頁(yè)級(jí)頁(yè)面和產(chǎn)品類頁(yè)面中。私有：style.css

獨(dú)立頁(yè)面所使用的款式文件，頁(yè)面中必須包含。

模塊module.css

產(chǎn)品類頁(yè)面應(yīng)用，將可復(fù)用類模塊進(jìn)展剝離后，可與其它款式配合使用。

默認(rèn)default.css

文章article.css

圖片photo.css

下載soft.css

主題themes.css

實(shí)現(xiàn)換膚功能時(shí)應(yīng)用。

補(bǔ)丁mend.css

基于以上款式進(jìn)展的私有化修補(bǔ)。

8.2常用名稱

(1)頁(yè)面構(gòu)造

容器:container

頁(yè)頭：header

內(nèi)容：content/container/content(A)

頁(yè)面主體：main

頁(yè)尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁(yè)面外圍控制整體布局寬度：wrapper

篇二：Web前端根底總結(jié)

1.Js的根本類型：

Undefined:只有一個(gè)值undefined，它是變量未被賦值時(shí)的值，在JS中全局對(duì)象有一個(gè)undefined屬性表示undefined，事實(shí)上undefined并非JavaScript的關(guān)鍵字，可以給全局的undefined屬性賦值來(lái)改變它的值。Null:只有一個(gè)值null,但是JavaScript為它提供了一個(gè)關(guān)鍵字null來(lái)表示這個(gè)唯一的值。Null類型的語(yǔ)義是“一個(gè)空的對(duì)象引用〞。

Number:NaN是其一個(gè)特殊的屬性值，typeofNaN//“number〞);

String:其正式解釋是一個(gè)16位無(wú)符號(hào)整數(shù)類型的序列，它實(shí)際上用來(lái)表示以UTF-16編碼的文本信息。Boolean:有兩種取值true和false。0、NaN、空字符串、null、undefined轉(zhuǎn)化為false，其余的全部為true。

Object:最為復(fù)雜的類型就是Object，它是一系列屬性的無(wú)序集合，F(xiàn)unction是實(shí)現(xiàn)了私有屬性[[call]]的Object，JavaScript的宿主也可以提供一些特別的對(duì)象。typeof

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

關(guān)于null和undefined：null是關(guān)鍵字；undefined不是關(guān)鍵字，undefined是Global對(duì)象的一個(gè)屬性。

運(yùn)算時(shí)null與undefined都可以被類型轉(zhuǎn)換為false，但不等值于false：

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

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

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

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

nullinstanceofObject//false

typeofnull//Object

2.JS的類型轉(zhuǎn)換

手動(dòng)的轉(zhuǎn)換有：Number(x);Boolean(x);String(x);以及parseInt,parseFloat,toString,valueOf等等。

自動(dòng)的轉(zhuǎn)換：假設(shè)“+〞操作符的一個(gè)操作數(shù)是字符串，那么會(huì)將另一個(gè)操作數(shù)轉(zhuǎn)換為字符串，一元操作符“*〞、“-〞將操作數(shù)轉(zhuǎn)換為數(shù)字，一元操作符“！〞將操作數(shù)轉(zhuǎn)換為布爾值并取反。

‘hello’+5//‘hello5’

‘hello’+null//‘hellonull’

‘5’*5//25

‘hello’*5//NaN

X+〞〞//等價(jià)于String(x)

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

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

3.margin屬性

四個(gè)參數(shù)：上右下左

三個(gè)參數(shù)：上、左右、下

兩個(gè)參數(shù)：上下、左右

一個(gè)參數(shù)：四周

4.關(guān)于float問(wèn)題，浮動(dòng)元素后跟非浮動(dòng)元素的情況。后邊非浮動(dòng)元素假設(shè)為行內(nèi)元素且因?yàn)槎ㄎ划a(chǎn)生重疊時(shí)，行內(nèi)元素邊框、背景和內(nèi)容都在該浮動(dòng)元素“之上〞顯示，假設(shè)為塊級(jí)元素且因?yàn)槎ㄎ划a(chǎn)生重疊時(shí)，該塊級(jí)元素邊框和背景在該浮動(dòng)元素“之下〞顯示，只有內(nèi)容在浮動(dòng)元素“之上〞顯示。【有例如】。

Clear屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。clear屬性定義了元素的哪邊上不允許出現(xiàn)浮動(dòng)元素。在

CSS1和CSS2中，這是通過(guò)自動(dòng)為去除元素〔即設(shè)置了clear屬性的元

素〕增加上外邊距實(shí)現(xiàn)的。在CSS2.1中，會(huì)在元素上外邊距之上增加去除空間，而外邊距本身并不改變。不管哪一種改變，最終結(jié)果都一樣，假設(shè)聲明為左邊或右邊去除，會(huì)使元素的上外邊框邊界剛好在該邊上浮動(dòng)元素的下外邊距邊界之下。

5.絕對(duì)定位、相對(duì)定位與浮動(dòng)定位

絕對(duì)定位：absolute生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)展定位。設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好似該元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不管原來(lái)它在正常流中生成何種類型的框。

相對(duì)定位：relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)展定位。設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)間隔。元素仍然保持其未定位前的形狀，它本來(lái)所占的空間仍保存。

浮動(dòng)定位：浮動(dòng)的框可以向左或向右挪動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

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

6.關(guān)于DOM元素

利用DOM，JS可以相對(duì)簡(jiǎn)單地尋找、訪問(wèn)和操縱HTML元素，從而動(dòng)態(tài)地改變HTML頁(yè)面的內(nèi)容和外觀。節(jié)點(diǎn)常用的屬性有parentNode,childNodes,firstChild,lastChild,

previousSibling,nextSibling。

7.關(guān)于函數(shù)

定義順序：函數(shù)的定義與其他的語(yǔ)句的定義不再同一個(gè)時(shí)間軸上面，計(jì)算機(jī)在開始執(zhí)行語(yǔ)句之前，會(huì)先查找所有的function的定義，然后保存。所以在函數(shù)后面定義的調(diào)用語(yǔ)句可以調(diào)用到定義在前面的函數(shù)。

局部變量與全局變量：局部變量只適宜于函數(shù)的參數(shù)和函數(shù)內(nèi)部已var關(guān)鍵字定義的變量。假設(shè)沒有定義同名的局部變量，函數(shù)內(nèi)部那么可能訪問(wèn)全局變量。

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

我寫的閉包主要用于實(shí)現(xiàn)一些插件，因?yàn)橛幸恍┳兞啃枰乐贡蝗肿兞课廴尽?/p>

可選參數(shù)：Js不會(huì)限制傳入函數(shù)的參數(shù)數(shù)目。假設(shè)傳入的參數(shù)過(guò)多，多余的參數(shù)會(huì)被忽略掉。假設(shè)過(guò)少，缺失的參數(shù)會(huì)默認(rèn)為undefined。

apply和call的區(qū)別：一樣點(diǎn):兩個(gè)方法產(chǎn)生的作用是完全一樣的。

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

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

匿名函數(shù)：一般用來(lái)寫已加載就需立即執(zhí)行的函數(shù)。同時(shí)為了防止受全局變量的影響，在一個(gè)不是很熟悉的頁(yè)面增加Javascript時(shí)非常有效。

8.Div和Span有何區(qū)別？

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

當(dāng)然這一點(diǎn)也可以通過(guò)設(shè)置display〔block,inline,inline-block〕來(lái)改變。

9.CSS+DIV開發(fā)Web頁(yè)面的優(yōu)勢(shì)有哪些？

答：

1〕

2〕

3〕CSS+DIV，這個(gè)網(wǎng)頁(yè)設(shè)計(jì)形式中，DIV承當(dāng)了網(wǎng)頁(yè)的內(nèi)容，CSS承當(dāng)了網(wǎng)頁(yè)的款式。這樣就使網(wǎng)頁(yè)的內(nèi)容和款式的別分開來(lái)。有利于頁(yè)面的維護(hù)晉級(jí)。有助于進(jìn)步搜索引擎親和力〔快速找到需要的數(shù)據(jù)，而不是像在TABLE中一層層的查找〕有助于頁(yè)面的重構(gòu)(換皮膚如blog，直接套用另外一套款式就可以實(shí)現(xiàn)，而不

用改動(dòng)網(wǎng)頁(yè)腳本。)

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

11.Ajax及其優(yōu)缺點(diǎn)：答：AsynchronousJavaScriptandXML〞〔異步JavaScript和XML)。在閱讀器中使用js進(jìn)展效勞器的懇求與響應(yīng)，使得可以在不更新整個(gè)頁(yè)面的前提下維護(hù)數(shù)據(jù)。其名字中的xml并非指只支持xml這一種文本格式，xml只是一個(gè)選擇而已，其他還可以是表單與json。這樣做只是xml流行時(shí)的遺跡。

優(yōu)點(diǎn)：使用Ajax的最大優(yōu)點(diǎn)就是可以實(shí)現(xiàn)頁(yè)面的局部刷新，進(jìn)步用戶體驗(yàn)質(zhì)量。其他優(yōu)點(diǎn)有使用異步方式與效勞器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)才能。

3、可以把以前一些效勞器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的才能來(lái)處理，減輕效勞器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用本錢。并且減輕效勞器的負(fù)擔(dān)，ajax的原那么是“按需取數(shù)據(jù)〞，可以最大程度的減少冗余懇求，和響應(yīng)對(duì)效勞器造成的負(fù)擔(dān)。

4、基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。

缺點(diǎn)：1.干掉了back按鈕。因?yàn)樵谖此⑿马?yè)面的時(shí)候是無(wú)法使用back按鈕的。

2.平安問(wèn)題，將一些數(shù)據(jù)、邏輯暴露在了前臺(tái)。

3.對(duì)搜索引擎的支持較弱。

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

12.Prototype屬性的相關(guān)注意問(wèn)題13.call與apply的使用

常用于實(shí)現(xiàn)繼承。

Call與apply的作用一樣，只是參數(shù)的形式不一樣而已。如func.call(func1,var1,var2,var3)對(duì)應(yīng)的apply寫法為：func.apply(func1,[var1,var2,var3])

Call的使用Apply的使用

14.JS中事件綁定，什么時(shí)候有前綴on，什么時(shí)候沒有？兼容性問(wèn)題。

答：以下列圖顯示了采用三種方式注冊(cè)的事件。

兼容性問(wèn)題可見：

注意這兩句寫法：

篇三：WEB前端開發(fā)經(jīng)歷總結(jié)

ASP.NET前端開發(fā)經(jīng)歷總結(jié)

通過(guò)此次大作業(yè)的設(shè)計(jì)到完成，我負(fù)責(zé)的是web前端的開發(fā)，經(jīng)過(guò)此次作業(yè)和結(jié)合W3C上的自學(xué)，我漸漸有了一些對(duì)前端開發(fā)的小小經(jīng)歷〔僅為個(gè)人意見〕。WEB標(biāo)準(zhǔn)是什么？

說(shuō)是WEB標(biāo)準(zhǔn)，不過(guò)我這里主要是對(duì)HTML5和CSS3.0的一些經(jīng)歷總結(jié)。因?yàn)閃EB含蓋的內(nèi)容實(shí)在是太多了，“WEB標(biāo)準(zhǔn)〞是一系列標(biāo)準(zhǔn)的總稱，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以這里要跟大家指出來(lái)一下，WEB標(biāo)準(zhǔn)不是我們所說(shuō)的DIV+CSS。

剛剛上面提到了――DIV+CSS，這里要說(shuō)明下，這樣說(shuō)其實(shí)是不正確的。DIV+CSS準(zhǔn)確的說(shuō)法〔個(gè)人的理解〕應(yīng)該是：采用W3C推薦的WEB標(biāo)準(zhǔn)中的HTML5結(jié)合CSS3.0款式表制作頁(yè)面的方法，DIV應(yīng)該指的是HTML標(biāo)簽，而CSS顯示是指的CSS款式表了。

采用WEB標(biāo)準(zhǔn)開發(fā)的好處

那么W3C為什么會(huì)推薦這樣的頁(yè)面制作方法呢？下面我們就簡(jiǎn)單的看看采用WEB標(biāo)準(zhǔn)開發(fā)〔個(gè)人理解的〕相對(duì)以前TABLE布局的優(yōu)勢(shì)有哪些？

1、節(jié)約運(yùn)營(yíng)本錢

看看我們的WEB標(biāo)準(zhǔn)制作方法是如何做到的？

采用WEB標(biāo)準(zhǔn)制作，我們可以做到表現(xiàn)很形式的別離，我們用XHTML來(lái)表現(xiàn)〔數(shù)據(jù)〕，用CSS來(lái)控制〔頁(yè)面元素呈現(xiàn)的〕形式。寫的好的頁(yè)面，XHTML代碼中根本上都是用戶要看的數(shù)據(jù)，還其他修飾性的東西，全部由我們的CSS來(lái)控制。這樣一來(lái)我們的〔XHTML〕頁(yè)面的體積就大大減小了，這樣你在帶寬上的費(fèi)用就會(huì)大家降低了，這個(gè)怎么降低的，你可以想象一下，YAHOO的首頁(yè)小1K，100W個(gè)人一起訪問(wèn)，那么帶寬節(jié)約了多少？而且可以更充分的利用帶寬。

而我們的CSS控制了，所有的頁(yè)面元素的款式，如今想改網(wǎng)站的整體風(fēng)格，你只需要花幾分鐘修改一下一個(gè)CSS文件，就可以輕松搞定了。維護(hù)的本錢也下來(lái)了，省了不少錢了吧？還有，你開這個(gè)頁(yè)面的速度會(huì)快很多啊，一個(gè)讓你等半分鐘的頁(yè)面，除非里面的信息對(duì)你很有用，不然我們大家根本都沒有太多的時(shí)間去用來(lái)等待的。

2、對(duì)用戶友好更友好，且有時(shí)機(jī)獲得更多的用戶

如今來(lái)說(shuō)說(shuō)用戶友好。首先我想把我們的用戶來(lái)分下類。

第一類：普通用戶〔每個(gè)訪問(wèn)我們網(wǎng)站的人〕；

第二類：搜索引擎；

采用WEB標(biāo)準(zhǔn)開發(fā)的頁(yè)面，構(gòu)造明晰，頁(yè)面體積小，閱讀器兼容性好。普通用戶訪問(wèn)的時(shí)候，頁(yè)面翻開速度快，而且不管用戶使用那種閱讀器，都可以正常訪問(wèn)〔顯示〕頁(yè)面，且頁(yè)面的構(gòu)造明晰，要找的數(shù)據(jù)可以很方便的閱讀到。

而對(duì)搜索引擎來(lái)說(shuō)，一個(gè)好的采用WEB標(biāo)準(zhǔn)開發(fā)的頁(yè)面，都是做過(guò)SEO優(yōu)化的，它訪問(wèn)起來(lái)很友好，很容易理解你的頁(yè)面中哪里是標(biāo)題〔H1~H6標(biāo)簽〕，哪里是段落〔p標(biāo)簽〕，哪里是段落里要強(qiáng)調(diào)的內(nèi)容〔strong標(biāo)簽〕等，它可以很容易的分析出來(lái)。而一個(gè)SEO好的站點(diǎn)，大家都知道，被搜索引擎收錄的時(shí)機(jī)更多，這個(gè)也意味著您的網(wǎng)站會(huì)被更多的普通用戶訪問(wèn)到，給你的站點(diǎn)帶來(lái)更多的用戶。

一個(gè)能幫我們省下大筆費(fèi)用，進(jìn)步工作效率。同時(shí)又可以進(jìn)步頁(yè)面閱讀速度，對(duì)用戶友好，甚至可以不花錢宣傳，就能給你帶來(lái)更多用戶的技術(shù)。你說(shuō)你會(huì)不會(huì)去使用它？

這個(gè)也正式我們的W3C推薦使用WEB標(biāo)準(zhǔn)開放網(wǎng)站的原因啊。而這個(gè)技術(shù)也得到了我們廣闊用戶的認(rèn)可，所以如今需要學(xué)習(xí)WEB標(biāo)準(zhǔn)啊。

合理的布局

前面我提到了一些知識(shí)點(diǎn)――“構(gòu)造明晰、SEO優(yōu)化、頁(yè)面體積小、HTML代碼中根本上都是用戶要看的數(shù)據(jù)〞。這些東西，都是我做了合理布局的結(jié)果。而且我個(gè)人覺得，我們采用WEB標(biāo)準(zhǔn)制作的一切都是從這個(gè)知識(shí)點(diǎn)開始的，所以我這里就先來(lái)說(shuō)這個(gè)話題。

也許有人會(huì)問(wèn)，怎樣的一個(gè)頁(yè)面，才算是合理的布局的呢？這個(gè)問(wèn)題問(wèn)題問(wèn)得好，也是我們大家剛開始學(xué)用WEB標(biāo)準(zhǔn)的問(wèn)得最多的問(wèn)題之一，我也曾經(jīng)常被這個(gè)問(wèn)題所困擾，這里就說(shuō)說(shuō)我對(duì)合理布局的一些理解。

在開始講合理布局的頁(yè)面要到達(dá)的要素前，我們還是用個(gè)實(shí)例來(lái)講解會(huì)更直觀些。先來(lái)看看這個(gè)圖片：

不錯(cuò)，這個(gè)是一個(gè)文章詳細(xì)頁(yè)，沒有左右兩欄布局，不過(guò)這里我重點(diǎn)要講的是合理的布局。

這是此次實(shí)驗(yàn)中customer〔前端的一項(xiàng)〕局部的完好代碼：

Inherits="Customer"%>

"name="description"

"name="keywords"

BorderWidth="0px"CellPadding="0"GridLines="None"Height="1px"

OnPageIndexChanged="DataGrid1_Page"

PagerStyle-HorizontalAlign="Right"PageSize="4"ShowHeader="False"Width="237px">

href='Customer_More.aspx'>

["pub_date","{0:d}")%>]

看出來(lái)什么沒有？〔代碼是很多〕可能大家已經(jīng)發(fā)現(xiàn)，整個(gè)頁(yè)面里根本上都是用戶要看的數(shù)據(jù)，其中只包含了很少〔必要〕的布局(XHTML)標(biāo)簽〔請(qǐng)?jiān)试S我這么說(shuō)〕。