版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1、WEB前端開發(fā)閱歷總結(jié)發(fā)布時(shí)間:2009-04-20 09:05:33 來源: 作者:shengman 點(diǎn)擊:21015這里跟大家談?wù)剛€(gè)人對(duì)WEB前端開發(fā)的一些閱歷(當(dāng)然都是個(gè)人的一些理解,有什么地方說的欠妥或不對(duì)的地方還請(qǐng)包含和指正),這里我就從WEB標(biāo)準(zhǔn)開頭吧。WEB標(biāo)準(zhǔn)是什么?說是WEB標(biāo)準(zhǔn),不過我這里主要是對(duì)XHTML1.1 和 CSS2.1的一些閱歷總結(jié)。由于WEB含蓋的內(nèi)容實(shí)在是太多了,“WEB標(biāo)準(zhǔn)”是一系列標(biāo)準(zhǔn)的總稱,包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScrip
2、t1.1、DOM1.0等等。所以這里要跟大家指出來一下,WEB標(biāo)準(zhǔn)不是我們所說的DIV+CSS。剛剛上面提到了DIV+CSS,這里要說明下,這樣說其實(shí)是不正確的。DIV+CSS精確的說法(個(gè)人的理解)應(yīng)該是:接受W3C推舉的WEB標(biāo)準(zhǔn)中的XHTML1.1結(jié)合CSS2.0樣式表制作頁面的方法,DIV應(yīng)該指的是XHTML標(biāo)簽,而CSS顯示是指的CSS樣式表了。 接受WEB標(biāo)準(zhǔn)開發(fā)的好處那么W3C為什么會(huì)推舉這樣的頁面制作方法呢?下面我們就簡潔的看看接受WEB標(biāo)準(zhǔn)開發(fā)(個(gè)人理解的)相對(duì)以前TABLE布局的優(yōu)勢(shì)有哪些?1、節(jié)省運(yùn)營成本看看我們的WEB標(biāo)準(zhǔn)制作方法是如何做到的?接受WEB標(biāo)準(zhǔn)制作,我們可
3、以做到表現(xiàn)很形式的分離,我們用XHTML來表現(xiàn)(數(shù)據(jù)),用CSS來掌握(頁面元素呈現(xiàn)的)形式。寫的好的頁面,XHTML代碼中基本上都是用戶要看的數(shù)據(jù),還其他修飾性的東西,全部由我們的CSS來掌握。這樣一來我們的(XHTML)頁面的體積就大大減小了,這樣你在帶寬上的費(fèi)用就會(huì)大家降低了,這個(gè)怎么降低的,你可以想象一下,YAHOO的首頁小1K,100W個(gè)人一起訪問,那么帶寬節(jié)省了多少?而且可以更充分的利用帶寬。而我們的CSS掌握了,全部的頁面元素的樣式,現(xiàn)在想改網(wǎng)站的整體風(fēng)格,你只需要花幾分鐘修改一下一個(gè)CSS文件,就可以輕松搞定了。維護(hù)的成本也下來了,省了不少錢了吧?還有,你開這個(gè)頁面的速度會(huì)快很
4、多啊,一個(gè)讓你等半分鐘的頁面,除非里面的信息對(duì)你很有用,不然我們大家基本都沒有太多的時(shí)間去用來等待的。2、對(duì)用戶友好更友好,且有機(jī)會(huì)獲得更多的用戶現(xiàn)在來說說用戶友好。首先我想把我們的用戶來分下類。第一類:一般用戶(每個(gè)訪問我們網(wǎng)站的人);其次類:搜尋引擎;接受WEB標(biāo)準(zhǔn)開發(fā)的頁面,結(jié)構(gòu)清晰,頁面體積小,掃瞄器兼容性好。一般用戶訪問的時(shí)候,頁面打開速度快,而且不管用戶使用那種掃瞄器,都能夠正常訪問(顯示)頁面,且頁面的結(jié)構(gòu)清晰,要找的數(shù)據(jù)可以很便利的掃瞄到。而對(duì)搜尋引擎來說,一個(gè)好的接受WEB標(biāo)準(zhǔn)開發(fā)的頁面,都是做過SEO優(yōu)化的,它訪問起來很友好,很容易理解你的頁面中哪里是標(biāo)題(H1H6標(biāo)簽),
5、哪里是段落(p標(biāo)簽),哪里是段落里要強(qiáng)調(diào)的內(nèi)容(strong標(biāo)簽) 等,它可以很容易的分析出來。而一個(gè)SEO好的站點(diǎn),大家都知道,被搜尋引擎收錄的機(jī)會(huì)更多,這個(gè)也意味著您的網(wǎng)站會(huì)被更多的一般用戶訪問到,給你的站點(diǎn)帶來更多的用戶。一個(gè)能幫我們省下大筆費(fèi)用,提高工作效率。同時(shí)又能夠提高頁面掃瞄速度,對(duì)用戶友好,甚至能夠不花錢宣揚(yáng),就能給你帶來更多用戶的技術(shù)。你說你會(huì)不會(huì)去使用它?這個(gè)也正式我們的W3C推舉使用WEB標(biāo)準(zhǔn)開放網(wǎng)站的緣由啊。而這個(gè)技術(shù)也得到了我們寬闊用戶的認(rèn)可,所以您現(xiàn)在需要學(xué)習(xí)WEB標(biāo)準(zhǔn)啊。溫習(xí)完了基礎(chǔ)課程,現(xiàn)在正式開頭講XHTML和CSS的技巧了。合理的布局有伴侶會(huì)開頭問了,怎么一
6、開頭就開頭講合理的布局了呢?前面我們提到了一些知識(shí)點(diǎn)“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”。這些東西,都是我們做了合理布局的結(jié)果。而且我個(gè)人覺得,我們接受WEB標(biāo)準(zhǔn)制作的一切都是從這個(gè)知識(shí)點(diǎn)開頭的,所以我這里就先來說這個(gè)話題。那么大家又會(huì)開頭問,怎樣的一個(gè)頁面,才算是合理的布局的呢?這個(gè)問題問題問得好,也是我們大家剛開頭學(xué)用WEB標(biāo)準(zhǔn)的問得最多的問題之一,我也曾常常被這個(gè)問題所困擾,這里就說說我對(duì)合理布局的一些理解。在開頭講合理布局的頁面要達(dá)到的要素前,我們還是用個(gè)實(shí)例來講解會(huì)更直觀些。先來看看這個(gè)圖片:不錯(cuò),這個(gè)是一個(gè)文章簡略頁,沒有左右兩欄布局,不過
7、這里我重點(diǎn)要講的是合理的布局,在稍后的文章中我會(huì)簡略的介紹浮動(dòng)元素。好,回到剛才的話題,大家看到了這個(gè)頁面了。我這里先把代碼寫給大家看看(省略了部分代碼):<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"
8、 /><title>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</title><link href="css/article.css" rel="stylesheet" type="text/css" media="all" /><script language="javascript" type="text/javascript" src="/upload/1/0/8/8/10881/"></script>
9、</head><body><div id="container"><div id="topbar"><h1><a href="" target="_blank" title="海嘯的地盤-享受生活,享受每一天!">海嘯的地盤-享受生活,享受每一天!</a></h1><div id="search-bar"><form name="frmsearch&qu
10、ot; id="frmsearch" action="" method="post"><label for="keyword">站內(nèi)搜尋:</label> <select id="topics"> <option value="0">全部主題</option> <
11、option value="1">(X)HTML</option> <option value="2">CSS</option> <option value="3">Javascript</option> <option value="4">XML</option> <optio
12、n value="5">ASP/ASP.NET</option> </select><input type="text" name="keyword" id="keyword" value="請(qǐng)輸入搜尋關(guān)鍵字" maxlength="60" /><input type="reset" name="btnsearch" id="btnsearch
13、" value="開頭搜尋" /></form> </div> </div><ul id="nav"> <li><a href="#2">ARTICLES</a></li> <li><a href="#2&q
14、uot;>TOPICS</a></li> <li><a href="#2">ABOUT</a></li> <li><a href="#2">CONTACT</a></li> <li><a href="#2">GESTBOOK</a></li>
15、160; <li><a href="#2">FEED</a></li> </ul> <h2>Ajax標(biāo)簽導(dǎo)航實(shí)例詳解</h2><div id="article-info">作者/程序設(shè)計(jì):<a href="domainmailto:">domain</a> 來源:<a href="" target
16、="_blank"></a> 發(fā)布時(shí)間:2008年4月28日</div><h3>代碼篇</h3> <p> 之前整理發(fā)表了<a href="" target="_blank">XMLHTTPRequest的屬性和方法簡介</a>,它Ajax要使用的核心的技術(shù)之一,現(xiàn)在就來實(shí)際運(yùn)用它。這個(gè)Ajax標(biāo)簽導(dǎo)航,是我很久前就寫的一個(gè)腳本,很有用的(還
17、被很多網(wǎng)站收錄了哦),現(xiàn)在拿它來做實(shí)例講解吧!當(dāng)然個(gè)人能力有限,有什么不對(duì)的地方還請(qǐng)多包含! </p> <p> 效果大家看到了,核心功能有:<br /> 1、將當(dāng)前選中標(biāo)簽以特別的樣式顯示<br /> 2、將異步加載
18、的頁面信息顯示到指定的DOM節(jié)點(diǎn)中 </p> <p> 我們來看看處理腳本的代碼吧: </p><div class="code-title">程序代碼:ajaxtab.js</div> <div class="js code" name="cod
19、e" id="js-code"><!-<br />/ 推斷是否支持ActiveX<br />var useActiveX=(typeof ActiveXObject != "undefined"); <br />/ 推斷是否支持DOM<br />var useDom=document.implementation && document.implementation.createDocument;<br />/ 推斷是否支持XMLHttpRequest對(duì)象&
20、lt;br />var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br />/ XMLHttpRequest對(duì)象版本<br />var ARR_XMLHTTP_VERS = "MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"<br />/ DOM對(duì)象版本 <br />var ARR_DOM_VERS = "MSXML2.DOMDocument.6.0","MSX
21、ML2.DOMDocument.3.0" <br />/* =<br />* 函數(shù)名稱:$(i)<br />* 參數(shù)說明:i - 目標(biāo)節(jié)點(diǎn)名稱<br />* 函數(shù)功能:獵取指定的目標(biāo)DOM節(jié)點(diǎn)<br />* 返 回 值:返回要搜尋的目標(biāo)DOM節(jié)點(diǎn)<br />* 使用方法:$("frmSearch")<br />= */<br />function $(i)<br /> if(!document.ge
22、tElementById)return false;<br /> if(typeof i="string")<br /> if(document.getElementById && document.getElementById(i) <br />
23、160; / W3C DOM<br /> return document.getElementById(i);<br /> <br /> els
24、e if (document.all && document.all(i) <br /> / MSIE 4 DOM<br /> return document.all(i);<br /> &
25、#160; <br /> else if (document.layers && document.layersi) <br /> / NN 4 DOM. note: this won't find nested layers<br
26、/> return document.layersi;<br /> <br /> else <br />
27、; return false;<br /> <br /> <br /> elsereturn i;<br /><br />/-></div> <p>id="news"
28、 - news就是我們的導(dǎo)航標(biāo)簽的ID;<br />id="newsCnt" - newsCnt就是我們要寫入信息的目標(biāo)DOM節(jié)點(diǎn);<br />class="first" - first當(dāng)前(第一個(gè))標(biāo)簽的樣式;<br />id="news-0" - news-0 通過”-“分開,我們就分別可以得到news(導(dǎo)航標(biāo)簽ID),0(標(biāo)簽li在導(dǎo)航標(biāo)簽中的索引值)<br
29、 /><a href="news/news0.htm">網(wǎng)站重構(gòu)</a> - 超鏈接<br /><span></span> - 標(biāo)簽間的分割線<br /> </p> <p>我排列的這些東西,信任大家開頭看出了些頭緒了,呵呵,不過別急!在我們看處理的腳本之前,先讓我們來看看導(dǎo)航標(biāo)簽的樣式,主要是看看我們對(duì)分割線的處理(一點(diǎn)CSS處理的技巧)。 &
30、#160; </p> <p>原來想偷個(gè)懶,讓大家看我上邊說的那篇文章,想想也就是Ctrl+C&Ctrl+V,都貼出來吧!呵呵! </p> <p>不過還沒有完,最后要說的就是innerHTML這個(gè)特性,這里我們還要感謝微軟啊,innerHTML就是它的專利,我們就是用它來轉(zhuǎn)變指定DOM內(nèi)的HTML字符串的,而不用刷新頁面。簡略的信息大家還是google一下吧,我也要休息下??!喝口茶先!-! <
31、/p> <p>以上講了這么多,我們最后來看看,我們這個(gè)ajax標(biāo)簽導(dǎo)航都用到了那些技術(shù)吧: </p> <ol><li>XHTML</li><li>CSS</li><li>Javascript</li><li>DOM</li><li>XMLHttpRequest對(duì)象</li><li>innerHTML</li&g
32、t; </ol> <p>還有XML,我們這個(gè)例子沒有涉及到。東西雖小,包含的(web前端開發(fā))知識(shí)可是都用到了啊,我把我會(huì)的點(diǎn)東西都端出來了(要失業(yè)了),呵呵! </p> <p>當(dāng)然我很喜愛跟大家多溝通,以后有時(shí)間,我們?cè)趤碚務(wù)凜SS的HACKS技巧,Javascript DOM編程等等的,今日就收工了,感謝捧場先! </p> </div>&l
33、t;p id="copyright"> Copyright © 2007-2008 <strong><a href=""></a></strong>, All rights reserved. Powered By: <a href="domainmailto:">domain</a></p></body></htm
34、l> 看出來什么沒有?(代碼是很多)可能大家已經(jīng)發(fā)現(xiàn),整個(gè)頁面里基本上都是用戶要看的數(shù)據(jù),其中只包含了很少(必要)的布局(XHTML)標(biāo)簽(請(qǐng)?jiān)试S我這么說)。整個(gè)頁面基本都是由最基礎(chǔ)的h1h6、p、ul、ol、li、form、div標(biāo)簽來實(shí)現(xiàn)的。說到這里就要講到我在前面提到的“結(jié)構(gòu)清晰、SEO優(yōu)化、頁面體積小、XHTML代碼中基本上都是用戶要看的數(shù)據(jù)”,看看我的這個(gè)例子做到了沒有?結(jié)構(gòu)清晰-也就是我們常說的,XHTML標(biāo)簽要結(jié)構(gòu)化(語意化)。什么叫結(jié)構(gòu)化?由于個(gè)人認(rèn)為這個(gè)知識(shí)點(diǎn)是十分重要的,所以請(qǐng)?jiān)试S我在這里多羅嗦幾句,我們接受WEB標(biāo)準(zhǔn)的方法制作頁面的優(yōu)勢(shì)就體現(xiàn)在頁面結(jié)構(gòu)清晰。我們以前用table布局的時(shí)候,我們的表現(xiàn)(數(shù)據(jù))
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025云南省建筑安全員考試題庫附答案
- 貴州大學(xué)《計(jì)算機(jī)藝術(shù)設(shè)計(jì)》2023-2024學(xué)年第一學(xué)期期末試卷
- 貴州財(cái)經(jīng)大學(xué)《土木工程施工與組織管理》2023-2024學(xué)年第一學(xué)期期末試卷
- 貴陽幼兒師范高等??茖W(xué)?!冻鞘薪煌ㄏ到y(tǒng)》2023-2024學(xué)年第一學(xué)期期末試卷
- 2025遼寧省建筑安全員考試題庫及答案
- 2025年湖南省建筑安全員知識(shí)題庫及答案
- 2025山西建筑安全員《B證》考試題庫及答案
- 硅湖職業(yè)技術(shù)學(xué)院《計(jì)算機(jī)輔助設(shè)計(jì)一》2023-2024學(xué)年第一學(xué)期期末試卷
- 2025年陜西省建筑安全員C證考試(專職安全員)題庫附答案
- 廣州幼兒師范高等??茖W(xué)校《科技文獻(xiàn)檢索(理工)》2023-2024學(xué)年第一學(xué)期期末試卷
- 二甲雙胍恩格列凈片(Ⅲ)-臨床用藥解讀
- 煤層應(yīng)力狀態(tài)及煤與瓦斯突出防治研究
- 小學(xué)五年級(jí)上冊(cè)數(shù)學(xué)基礎(chǔ)知識(shí)練習(xí)題帶答案
- 診所聘用醫(yī)生合作協(xié)議書
- 抖音認(rèn)證承諾函
- 藥物分離純化-藥物分離純化技術(shù)的作用
- 《精益生產(chǎn)培訓(xùn)》課件
- GB/T 3518-2023鱗片石墨
- 22G101三維立體彩色圖集
- MQL4命令中文詳解手冊(cè)
- 水平井施工方案及措施
評(píng)論
0/150
提交評(píng)論