2021年前端開(kāi)發(fā)總結(jié)

1、前端開(kāi)發(fā)總結(jié)B:靜態(tài)(java-outputStream-HTML+CSS+JS-IE):動(dòng)態(tài)(java-outputStream-HTML+CSS+JS-IE):動(dòng)態(tài) HTML 基礎(chǔ)標(biāo)簽:div/p/table/hn/a-:cellpaddingcellspacingborderwidth= 30040%法：描述頁(yè)面元素：顯 示Html 功能 :顯示 :基礎(chǔ)標(biāo)簽收集 :CSS選擇器:html類IDID類html:內(nèi)聯(lián) CSS內(nèi)部:3種選擇器.外部:my.css3種選擇器JS事件：dom:document.getElementByID()document.getElementsByName()

2、document.getElementsByTagName()var:不嚴(yán)格區(qū)分類型/varageage=10;window,history,location,screenalertconfirm表單提交方式document.forms0.submit() 驗(yàn)感表單數(shù)據(jù)-IEsubmitSocket:.*ServerSocket:SocketC(Browser:IE:FF)Sockets=newSocket(“ IP ” ,8080)in=s.getInputStream()out=.s.getOutputStream()HTTP:FTP:SMTP:POP3HTTP:RequestPOST|G

3、ET/hello.jspHTTP/1HEADERS.HEADERS.BODYResponseHTTP/1200OKHEADERS -.HEADERS .S(Tomcat)ServerSocketss=newServerSocket(8080)ss.accept();inoutBODYTomcat:RequestmsgHttpServletRequestdoGet(request,response)doPost(t,response)/狀態(tài)追蹤C(jī)ookis:SessionURL 重寫 :客戶端禁止cookieResponse.encodeURL()HttpServletRequest(out)B

4、rowser判斷 URL 對(duì)照 web.xmlifurl=Html response(out)-write(a.html)-flushifurl=jsp jspc-a_jsp.java-javac-a_jsp.class-執(zhí)行servlet 流程ifurl=servlet- 判斷要執(zhí)行servlet 實(shí)例是否存在ifnotexistnewServlet()init():1Thread 【service():n】 ifexistThread【 service():n】 servletdestory():request.getCharacterEncoding(“- UTF8);request.g

5、etParameter( myage );newDAO().insert();/jdbcsqlDBnewLogic().do();Response.setCharacterEncoding(-UTF舛文回應(yīng)Response.getWriter().print(資源訪問(wèn)“” );/Request.getRequestDispatcher( “ a.jsp ” ).forward(request,response);Request.getRequest Dispatcher( “ a.jsp ” ).include(request,response);Response.sendRedirect(

6、“” );/scope/request/session.applicationJsp標(biāo)簽用法 :表達(dá)式/腳本 /表明EL=JSTL=腳本lEservlet(準(zhǔn)備數(shù)據(jù):daologic:scope)-forward-.jsp-IE(能過(guò)濾非法字 符)doGet()newDAO()Class.forName( “” );Connectionconn;stmt=conn.createStatement();pstmt=conn.preparedStatement(select*fromawhereid=);int=stmt.executeUpdate(“ insert/update/delete ”

7、 );rs=stmt.executeQuery( “ select ”)while(rs.next()re.getType(index|colName);/sql 注入 /ACID( 意義 )Conn.setAutoCommit(false);Cmit();Conn.rollback();/DCL:commitrollbackER= 關(guān)系=NF=DDL(script)=DBDML:selectinsertupdatedeleteselect: 子查詢、關(guān)聯(lián)、連接 function-procedure:PL/SQLimpexp擴(kuò)展閱讀 WEB 前端開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)WEB 前端開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)發(fā)布時(shí)間 2

8、01*-04-201*:05:33 來(lái)源作者 shengman點(diǎn)擊 21015這里跟大家談?wù)剛€(gè)人對(duì) WEB 前端開(kāi)發(fā)的一些經(jīng)驗(yàn)(當(dāng)然都是個(gè)人的一些理解，有什么地方說(shuō)的欠妥或不對(duì)的地方還請(qǐng)包含和指正)，這里我就從WEB標(biāo)準(zhǔn)開(kāi)始吧。 WEB 標(biāo)準(zhǔn)是什么？說(shuō)是 WEB 標(biāo)準(zhǔn)，不過(guò)我這里主要是對(duì) XHTML1 和 CSS1 的一些經(jīng)驗(yàn)總結(jié)。因?yàn)閃EB含蓋的內(nèi)容實(shí)在是太多了， “WEEfe準(zhǔn)”是一系列標(biāo)準(zhǔn)的總稱， 包括 HTML0 、 XHTML1 、 CSS1、 XML0 、 RSS0、 ECMAScript1 、 DOM0 等 等。所以這里要跟大家指出來(lái)一下， WEE 標(biāo)準(zhǔn)不是我們所說(shuō)的 DIV+C

9、SS 。剛 剛上面提到了 DIV+CSS ，這里要說(shuō)明下，這樣說(shuō)其實(shí)是不正確的。DIV+CSS 準(zhǔn)確的說(shuō)法(個(gè)人的理解)應(yīng)該是采用 W3C 推薦的 WEE 標(biāo)準(zhǔn)中的XHTML1結(jié)合CSS0樣式表制作頁(yè)面的方法，DIV應(yīng)該指的是XHTML標(biāo)簽， 而CSS顯示是指的CSS樣式表了。采用 WEB標(biāo)準(zhǔn)開(kāi)發(fā)的好處那么 W3C 為什么會(huì)推薦這樣的頁(yè)面制作方法呢？下面我們就簡(jiǎn)單的看看采用 WEB 標(biāo)準(zhǔn)開(kāi)發(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ù)），

10、用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è)面元素的樣式，現(xiàn)在想改的整體風(fēng)格，你 只需要花幾分鐘修改一下一個(gè) CSS文件，就可以輕松搞定了。維護(hù)的成本也下 來(lái)了，省了不少錢了吧？還有，你開(kāi)這個(gè)頁(yè)面的速度會(huì)快很多啊，一個(gè)讓你等 半分鐘的頁(yè)面，除非里

11、面的信息對(duì)你很有用，不然我們大家基本都沒(méi)有太多的 時(shí)間去用來(lái)等待的。2、對(duì)用戶友好更友好，且有機(jī)會(huì)獲得更多的用戶現(xiàn)在來(lái)說(shuō)說(shuō)用戶友好。首先我想把我們的用戶來(lái)分下類。第一類普通用戶（每個(gè)訪問(wèn)我們的人）；第二類搜索引擎；采用 WEB 標(biāo)準(zhǔn)開(kāi)發(fā)的頁(yè)面，結(jié)構(gòu)清晰，頁(yè)面體積小，瀏覽器兼容性好。普通用戶訪問(wèn)的時(shí)候，頁(yè)面打開(kāi)速度快，而且不管用戶使用那種瀏覽器，都能夠正常訪問(wèn)（顯示）頁(yè)面，且頁(yè)面的結(jié)構(gòu)清晰，要找的數(shù)據(jù)可以很方便的瀏覽 到。而對(duì)搜索引擎來(lái)說(shuō)，一個(gè)好的采用 WEB 標(biāo)準(zhǔn)開(kāi)發(fā)的頁(yè)面，都是做過(guò)SEO優(yōu)化的，它訪問(wèn)起來(lái)很友好，很容易理解你的頁(yè)面中哪里是標(biāo)題（H1H6標(biāo)簽），哪里是段落（p標(biāo)簽），哪里是段落

12、里要強(qiáng)調(diào)的內(nèi)容（strong標(biāo)簽）等， 它可以很容易的分析出來(lái)。而一個(gè) SEO好的站點(diǎn)，大家都知道，被搜索引擎收 錄的機(jī)會(huì)更多，這個(gè)也意味著您的會(huì)被更多的普通用戶訪問(wèn)到，給你的站點(diǎn)帶 來(lái)更多的用戶。一個(gè)能幫我們省下大筆費(fèi)用，提高工作效率。同時(shí)又能夠提高頁(yè)面瀏覽速度，對(duì)用戶友好，甚至能夠不花錢宣傳，就能給你帶來(lái)更多用戶的技術(shù)。你說(shuō)你會(huì)不會(huì)去使用它？這個(gè)也正式我們的 W3C 推薦使用 WEB 標(biāo)準(zhǔn)開(kāi)放的原因啊。而這個(gè)技術(shù)也得到了我們廣大用戶的認(rèn)可，所以您現(xiàn)在需要學(xué)習(xí) WEB 標(biāo)準(zhǔn)啊。溫習(xí)完了基礎(chǔ)課程，現(xiàn)在正式開(kāi)始講XHTML 和 CSS 的技巧了。合理的布局有朋友會(huì)開(kāi)始問(wèn)了，怎么一開(kāi)始就開(kāi)始講合理

13、的布局了呢前面我們提到了一些知識(shí)點(diǎn)一一結(jié)構(gòu)清晰、SEO優(yōu)化、頁(yè)面體積小、XHTML代碼中基本上都 是用戶要看的數(shù)據(jù)”。這些東西，都是我們做了合理布局的結(jié)果。而且我個(gè)人覺(jué)得，我們采用 WEB 標(biāo)準(zhǔn)制作的一切都是從這個(gè)知識(shí)點(diǎn)開(kāi)始的，所以我這里就先來(lái)說(shuō)這個(gè)話題。那么大家又會(huì)開(kāi)始問(wèn)，怎樣的一個(gè)頁(yè)面，才算是合理的布局的呢？這個(gè)問(wèn)題問(wèn)題問(wèn)得好，也是我們大家剛開(kāi)始學(xué)用 WEB 標(biāo)準(zhǔn)的問(wèn)得最多的問(wèn)題之一，我也曾經(jīng)常被這個(gè)問(wèn)題所困擾，這里就說(shuō)說(shuō)我對(duì)合理布局的一些理解。在開(kāi)始講合理布局的頁(yè)面要達(dá)到的要素前，我們還是用個(gè)實(shí)例來(lái)講解會(huì)更直觀些。先來(lái)看看這個(gè)圖片不錯(cuò)，這個(gè)是一個(gè)文章詳細(xì)頁(yè)，沒(méi)有左右兩欄布 局，不過(guò)這里我

14、重點(diǎn)要講的是合理的布局，在稍后的文章中我會(huì)詳細(xì)的介紹浮動(dòng)元素。好，回到剛才的話題，大家看到了這個(gè)頁(yè)面了。我這里先把代碼寫給大家看看（省略了部分代碼）Ajax 標(biāo)簽導(dǎo)航實(shí)例詳解海嘯的地盤-享受生活，享受每一天！站內(nèi)搜索全部主題 （X）HTMLCSSJavascriptXMLASP/ASP.NETARTICLESTOPICSABOUTCONTACTGESTBOOKFEEDAjax標(biāo)簽導(dǎo)航實(shí)例詳解作者/程序設(shè)計(jì)domain來(lái)源發(fā)布時(shí)間 201*年 4月 28 日代碼篇之前整理發(fā)表了 XMLHTTPRequest 的屬性和方法簡(jiǎn)介 ,它 Ajax 要使用的核心的技術(shù)之一，現(xiàn)在就來(lái)實(shí)際運(yùn)用它。這個(gè)Aja

15、x 標(biāo)簽導(dǎo)航，是我很久前就寫的一個(gè)腳本，很實(shí)用的（還被很多收錄了哦），現(xiàn)在拿它來(lái)做實(shí)例講解吧！當(dāng)然個(gè)人能力有限，有什么不對(duì)的地方還請(qǐng)多包含 !效果大家看到了，核心功能有1、將當(dāng)前選中標(biāo)簽以特殊的樣式顯示2、將異步加載的頁(yè)面信息顯示到指定的DOM 節(jié)點(diǎn)中我們來(lái)看看處理腳本的代碼吧程序彳t碼 ajaxtab.js*使用方法 $(frmSearch)=* /function$(i)if(!document.getElementById)returnfalse;if(typeofi=string)if(document.getElementById&document.getElementById(i)

16、/W3CDOMreturndocument.getElementById(i);elseif(document.all&document.all(i)/MSIE4DOMreturndocument.all(i); elseif（document.layers&document.layersi）/NN4DOM.note:thiswontfindnestedl ayersreturndocument.layersi;elsereturnfalse;elsereturni;/-id=news-news就是我們的導(dǎo)航標(biāo)簽的ID ;id=newsCnt-newsCnt 就是我們要寫入信息的目標(biāo)DOM 節(jié)

17、點(diǎn)；class=first-first 當(dāng)前 （第一個(gè)）標(biāo)簽的樣式；id=news-0-news-0通過(guò)”-分開(kāi)，我們就分別可以得到 news符航標(biāo)簽ID） ， 0（標(biāo)簽li 在導(dǎo)航標(biāo)簽中的索引值）重構(gòu) -超鏈接-標(biāo)簽間的分割線我羅列的這些東西，相信大家開(kāi)始看出了些頭緒了，呵呵，不過(guò)別急！在我們看處理的腳本之前，先讓我們來(lái)看看導(dǎo)航標(biāo)簽的樣式，主要是看看我們對(duì)分割線的處理（一點(diǎn)CSS處理的技巧）。本來(lái)想偷個(gè)懶，讓大家看我上邊說(shuō)的那篇文章，想想也就是Ctrl+C&Ctrl+V, 都貼出來(lái)吧！呵呵！不過(guò)還沒(méi)有完，最后要說(shuō)的就是innerHTML 這個(gè)特性，這里我們還要感謝微軟啊， innerHTML

18、 就是它的專利，我們就是用它來(lái)改變指定DOM 內(nèi)的HTML字符串的，而不用刷新頁(yè)面。詳細(xì)的信息大家還是google 一下吧，我也要休息下?。?！喝口茶先！ ！A-A!以上講了這么多，我們最后來(lái)看看，我們這個(gè)ajax 標(biāo)簽導(dǎo)航都用到了那些技術(shù)吧 XHTMLCSSJavascriptDOMXMLHttpRequest 對(duì)象 innerHTML還有XML ,我們這個(gè)例子沒(méi)有涉及到。東西雖小，包含的（ web前端開(kāi) 發(fā)）知識(shí)可是都用到了啊，我把我會(huì)的點(diǎn)東西都端出來(lái)了（要失業(yè)了），呵呵！當(dāng)然我很喜歡跟大家多交流，以后有時(shí)間，我們?cè)趤?lái)談?wù)凜SS 的 HACKS技巧， JavascriptDOM 編程等等的

19、，今天就收工了，謝謝捧場(chǎng)先！Copyright201*-201*,Allrightsreserved.PoweredBy:domain看出來(lái)什么沒(méi)有？（代碼是很多）可能大家已經(jīng)發(fā)現(xiàn)，整個(gè)頁(yè)面里基本上都是用戶要看的數(shù)據(jù)，其中只包含了很少（必要）的布局 （XHTML） 標(biāo)簽（請(qǐng)?jiān)试S我這么說(shuō)）。整個(gè)頁(yè)面基本都是由最基礎(chǔ)的h1h6、 p、 ul、 ol、 li 、 form、div 標(biāo)簽來(lái)實(shí)現(xiàn)的。說(shuō)到這里就要講到我在前面提到的結(jié)構(gòu)清晰、SEO優(yōu)化、頁(yè)面體積小、XHTML 代碼中基本上都是用戶要看的數(shù)據(jù)” ，看看我的這個(gè)例子做到了沒(méi)有？結(jié)構(gòu)清晰-也就是我們常說(shuō)的，XHTML 標(biāo)簽要結(jié)構(gòu)化（語(yǔ)意化）。什么

20、叫結(jié)構(gòu)化？由于個(gè)人認(rèn)為這個(gè)知識(shí)點(diǎn)是十分重要的，所以請(qǐng)?jiān)试S我在這里多羅嗦幾句，我們采用 WEB 標(biāo)準(zhǔn)的方法制作頁(yè)面的優(yōu)勢(shì)就體現(xiàn)在頁(yè)面結(jié)構(gòu)清晰。我們以前用table布局的時(shí)候，我們的表現(xiàn)（數(shù)據(jù)）和形式（布局樣式）是混在一起的，有很多冗余的數(shù)據(jù)混雜在一起，而大家再看看我上面給大家展示的代碼，很明顯，結(jié)構(gòu)十分清晰。說(shuō)了半天，還是沒(méi)有說(shuō)什么是結(jié)構(gòu)化，什么才是結(jié)構(gòu)清晰??？不要急。還記得我剛才提到的那幾個(gè)標(biāo)簽嗎？h1h6-如果你要顯示的數(shù)據(jù)是作為標(biāo)題顯示的時(shí)候，就用這些標(biāo)簽，因?yàn)檫@個(gè)標(biāo)簽的意思就是說(shuō)，這個(gè)是一個(gè)標(biāo)題，不僅我們的用戶很容易理解h-head的英文字母縮寫，我們的另外一個(gè)用戶搜索引擎也可以很容易理解它。呵呵，看到了吧，一個(gè)充分結(jié)構(gòu)化的頁(yè)面，對(duì)用戶是十分友好的。p-Paragraph （段落）ul-unorglizedlist（無(wú)序的列表）ol-orglizedlist（有序的列表）li-listitem（ 列