2021年前端开发总结

1、前端开发总结B:静态(java-outputStream-HTML+CSS+JS-IE):动态(java-outputStream-HTML+CSS+JS-IE):动态 HTML 基础标签:div/p/table/hn/a-:cellpaddingcellspacingborderwidth= 30040%法：描述页面元素：显 示Html 功能 :显示 :基础标签收集 :CSS选择器:html类IDID类html:内联 CSS内部:3种选择器.外部:my.css3种选择器JS事件：dom:document.getElementByID()document.getElementsByName()

2、document.getElementsByTagName()var:不严格区分类型/varageage=10;window,history,location,screenalertconfirm表单提交方式document.forms0.submit() 验感表单数据-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)/状态追踪Cookis:SessionURL 重写 :客户端禁止cookieResponse.encodeURL()HttpServletRequest(out)B

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

5、etParameter( myage );newDAO().insert();/jdbcsqlDBnewLogic().do();Response.setCharacterEncoding(-UTF舛文回应Response.getWriter().print(资源访问“” );/Request.getRequestDispatcher( “ a.jsp ” ).forward(request,response);Request.getRequest Dispatcher( “ a.jsp ” ).include(request,response);Response.sendRedirect(

6、“” );/scope/request/session.applicationJsp标签用法 :表达式/脚本 /表明EL=JSTL=脚本lEservlet(准备数据:daologic:scope)-forward-.jsp-IE(能过滤非法字 符)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= 关系=NF=DDL(script)=DBDML:selectinsertupdatedeleteselect: 子查询、关联、连接 function-procedure:PL/SQLimpexp扩展阅读 WEB 前端开发经验总结WEB 前端开发经验总结发布时间 2

8、01*-04-201*:05:33 来源作者 shengman点击 21015这里跟大家谈谈个人对 WEB 前端开发的一些经验(当然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正)，这里我就从WEB标准开始吧。 WEB 标准是什么？说是 WEB 标准，不过我这里主要是对 XHTML1 和 CSS1 的一些经验总结。因为WEB含盖的内容实在是太多了， “WEEfe准”是一系列标准的总称， 包括 HTML0 、 XHTML1 、 CSS1、 XML0 、 RSS0、 ECMAScript1 、 DOM0 等 等。所以这里要跟大家指出来一下， WEE 标准不是我们所说的 DIV+C

9、SS 。刚 刚上面提到了 DIV+CSS ，这里要说明下，这样说其实是不正确的。DIV+CSS 准确的说法(个人的理解)应该是采用 W3C 推荐的 WEE 标准中的XHTML1结合CSS0样式表制作页面的方法，DIV应该指的是XHTML标签， 而CSS显示是指的CSS样式表了。采用 WEB标准开发的好处那么 W3C 为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用 WEB 标准开发（个人理解的）相对以前TABLE 布局的优势有哪些？ 1、节约运营成本看看我们的 WEB 标准制作方法是如何做到的？采用 WEB 标准制作，我们可以做到表现很形式的分离，我们用 XHTML 来表现（数据），

10、用CSS来控制（页面元素呈现的）形式。写的好的页面， XHTML 代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我 们的CSS来控制。这样一来我们的（XHTML ）页面的体积就大大减小了，这 样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K, 100W个人一起访问，那么带宽节约了多少？而且可以 更充分的利用带宽。而我彳门的CSS控制了，所有的页面元素的样式，现在想改的整体风格，你 只需要花几分钟修改一下一个 CSS文件，就可以轻松搞定了。维护的成本也下 来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等 半分钟的页面，除非里

11、面的信息对你很有用，不然我们大家基本都没有太多的 时间去用来等待的。2、对用户友好更友好，且有机会获得更多的用户现在来说说用户友好。首先我想把我们的用户来分下类。第一类普通用户（每个访问我们的人）；第二类搜索引擎；采用 WEB 标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览 到。而对搜索引擎来说，一个好的采用 WEB 标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1H6标签），哪里是段落（p标签），哪里是段落

12、里要强调的内容（strong标签）等， 它可以很容易的分析出来。而一个 SEO好的站点，大家都知道，被搜索引擎收 录的机会更多，这个也意味着您的会被更多的普通用户访问到，给你的站点带 来更多的用户。一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的 W3C 推荐使用 WEB 标准开放的原因啊。而这个技术也得到了我们广大用户的认可，所以您现在需要学习 WEB 标准啊。温习完了基础课程，现在正式开始讲XHTML 和 CSS 的技巧了。合理的布局有朋友会开始问了，怎么一开始就开始讲合理

13、的布局了呢前面我们提到了一些知识点一一结构清晰、SEO优化、页面体积小、XHTML代码中基本上都 是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得，我们采用 WEB 标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。那么大家又会开始问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用 WEB 标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片不错，这个是一个文章详细页，没有左右两栏布 局，不过这里我

14、重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。我这里先把代码写给大家看看（省略了部分代码）Ajax 标签导航实例详解海啸的地盘-享受生活，享受每一天！站内搜索全部主题 （X）HTMLCSSJavascriptXMLASP/ASP.NETARTICLESTOPICSABOUTCONTACTGESTBOOKFEEDAjax标签导航实例详解作者/程序设计domain来源发布时间 201*年 4月 28 日代码篇之前整理发表了 XMLHTTPRequest 的属性和方法简介 ,它 Ajax 要使用的核心的技术之一，现在就来实际运用它。这个Aja

15、x 标签导航，是我很久前就写的一个脚本，很实用的（还被很多收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含 !效果大家看到了，核心功能有1、将当前选中标签以特殊的样式显示2、将异步加载的页面信息显示到指定的DOM 节点中我们来看看处理脚本的代码吧程序彳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就是我们的导航标签的ID ;id=newsCnt-newsCnt 就是我们要写入信息的目标DOM 节

17、点；class=first-first 当前 （第一个）标签的样式；id=news-0-news-0通过”-分开，我们就分别可以得到 news符航标签ID） ， 0（标签li 在导航标签中的索引值）重构 -超链接-标签间的分割线我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理（一点CSS处理的技巧）。本来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+C&Ctrl+V, 都贴出来吧！呵呵！不过还没有完，最后要说的就是innerHTML 这个特性，这里我们还要感谢微软啊， innerHTML

18、 就是它的专利，我们就是用它来改变指定DOM 内的HTML字符串的，而不用刷新页面。详细的信息大家还是google 一下吧，我也要休息下啊！ ！喝口茶先！ ！A-A!以上讲了这么多，我们最后来看看，我们这个ajax 标签导航都用到了那些技术吧 XHTMLCSSJavascriptDOMXMLHttpRequest 对象 innerHTML还有XML ,我们这个例子没有涉及到。东西虽小，包含的（ web前端开 发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈CSS 的 HACKS技巧， JavascriptDOM 编程等等的

19、，今天就收工了，谢谢捧场先！Copyright201*-201*,Allrightsreserved.PoweredBy:domain看出来什么没有？（代码是很多）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局 （XHTML） 标签（请允许我这么说）。整个页面基本都是由最基础的h1h6、 p、 ul、 ol、 li 、 form、div 标签来实现的。说到这里就要讲到我在前面提到的结构清晰、SEO优化、页面体积小、XHTML 代码中基本上都是用户要看的数据” ，看看我的这个例子做到了没有？结构清晰-也就是我们常说的，XHTML 标签要结构化（语意化）。什么

20、叫结构化？由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用 WEB 标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候，我们的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。说了半天，还是没有说什么是结构化，什么才是结构清晰啊？不要急。还记得我刚才提到的那几个标签吗？h1h6-如果你要显示的数据是作为标题显示的时候，就用这些标签，因为这个标签的意思就是说，这个是一个标题，不仅我们的用户很容易理解h-head的英文字母缩写，我们的另外一个用户搜索引擎也可以很容易理解它。呵呵，看到了吧，一个充分结构化的页面，对用户是十分友好的。p-Paragraph （段落）ul-unorglizedlist（无序的列表）ol-orglizedlist（有序的列表）li-listitem（ 列