前端开发总结
----B-----
:静态
(java-outputStream->HTML+CSS+JS->IE):动态(java-outputStream->HTML+CSS+JS->IE):动态HTML基础标签:div/p/table/hn/a…
-:cellpaddingcellspacingborderwidth=”300|40%”标签语法:…:描述页面元素:显示
Html功能:
显示:基础标签
收集:
CSS选择器:html类ID
ID>类>html
:内联CSS
内部:3种选择器….外部:my.css{3种选择器}
JS事件:
dom:
document.getElementByID()document.getElementsByName()
document.getElementsByTagName()
var:不严格区分类型//varageage=10;
window,history,location,screenalertconfirm//表单提交方式
document.forms[0].submit()…………..Js验证表单数据------------------------------IEsubmit-----------------------------------------Socket:java.net.*ServerSocket:SocketC(Browser:IE:FF)Sockets=newSocket(“IP”,8080)
in=s.getInputStream()out=.s.getOutputStream()
HTTP:FTP:SMTP:POP3HTTP:Request
POST|GET/hello.jspHTTP/1.1HEADERS……..HEADERS……..
BODYResponseHTTP/1.1200OK
HEADERS……..HEADERS……..
S(Tomcat)
ServerSocketss=newServerSocket(8080)ss.accept();inout
BODY
Tomcat:RequestmsgHttpServletRequestdoGet(request,response)doPost(t,response){
//状态追踪
Cookis:Session
URL重写:客户端禁止cookieResponse.encodeURL()
HttpServletRequest(out)Browser
判断URL对照web.xml
ifurl==Html----response(out)---write(a.html)---flush
ifurl==jsp----jspc---a_jsp.java---javac---a_jsp.class---执行servlet流程ifurl==servlet---判断要执行servlet实例是否存在ifnotexist{newServlet()init():1Thread【service():n】}ifexist{Thread【service():n】}servletdestory():
request.getCharacterEncoding(“UTF-8”);request.getParameter(”myage”);…………..
newDAO().insert();//jdbcsqlDBnewLogic().do();
Response.setCharacterEncoding(“UTF-8”)//中文//回应
Response.getWriter().print(“”);//资源访问
Request.getRequestDispatcher(“a.jsp”).forward(request,response);Request.getRequestDispatcher(“a.jsp”).include(request,response);Response.sendRedirect(“”);
//scope
[page]/request/session.applicationJsp
标签用法:
表达式/脚本/表明EL==
JSTL==脚本
IEservlet(准备数据:daologic:scope)-forward--???.jsp---IE(能过滤非法字符)doGet(){
newDAO(){Class.forName(“”);
Connectionconn;
stmt=conn.createStatement();
pstmt=conn.preparedStatement("select*fromawhereid=?");int=stmt.executeUpdate(“insert/update/delete”);rs=stmt.executeQuery(“select”)
while(rs.next()){re.getType(index|colName)};//sql注入//ACID(意义)
Conn.setAutoCommit(false);…..
Conn.commit();
Conn.rollback();//DCL:commitrollback}}ER===关系===NF===DDL(script)===DBDML:selectinsertupdatedeleteselect:子查询、关联、连接function-procedure:PL/SQLimpexp
扩展阅读:WEB前端开发经验总结
WEB前端开发经验总结
发布时间:201*-04-201*:05:33来源:作者:shengman点击:21015
这里跟大家谈谈个人对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标准的问得最多的问题之一,我也曾经常被这个问题所困扰,这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前,我们还是用个实例来讲解会更直观些。先来看看这个图片:不错,这个是一个文章详细页,没有左右两栏布局,不过这里我重点要讲的是合理的布局,在稍后的文章中我会详细的介绍浮动元素。好,回到刚才的话题,大家看到了这个页面了。
我这里先把代码写给大家看看(省略了部分代码):
Ajax标签导航实例详解
海啸的地盘--享受生活,享受每一天!
站内搜索:
全部主题(X)HTMLCSSJavascriptXML
ASP/ASP.NET
ARTICLESTOPICSABOUTCONTACTGESTBOOKFEED
Ajax标签导航实例详解作者/程序设计:domain来源:domain.com发布时间:201*年4月28日代码篇
之前整理发表了《XMLHTTPRequest的属性和方法简介》,它Ajax要使用的核心的技术之一,现在就来实际运用它。这个Ajax标签导航,是我很久前就写的一个脚本,很实用的(还被很多网站收录了哦),现在拿它来做实例讲解吧!当然个人能力有限,有什么不对的地方还请多包含!
效果大家看到了,核心功能有:1、将当前选中标签以特殊的样式显示
2、将异步加载的页面信息显示到指定的DOM节点中
我们来看看处理脚本的代码吧:
程序代码:ajaxtab.js*使用方法:$("frmSearch")
============================================================*/function$(i){
if(!document.getElementById)returnfalse;if(typeofi==="string"){
if(document.getElementById&&document.getElementById(i)){//W3CDOM
returndocument.getElementById(i);}
elseif(document.all&&document.all(i)){//MSIE4DOMreturndocument.all(i);}
elseif(document.layers&&document.layers[i]){//NN4DOM..note:thiswon"tfindnestedlayersreturndocument.layers[i];}else{
returnfalse;}}
else{returni;}}//-->
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标签导航都用到了那些技术吧:XHTMLCSSJavascriptDOM
XMLHttpRequest对象innerHTML
还有XML,我们这个例子没有涉及到。东西虽小,包含的(web前端开发)知识可是都用到了啊,我把我会的点东西都端出来了(要失业了),呵呵!
当然我很喜欢跟大家多交流,以后有时间,我们在来谈谈CSS的HACKS技巧,JavascriptDOM编程等等的,今天就收工了,谢谢捧场先!!!
Copyright©201*-201*domain.com,Allrightsreserved.PoweredBy:domain
看出来什么没有?(代码是很多)可能大家已经发现,整个页面里基本上都是用户要看的数据,其中只包含了很少(必要)的布局(XHTML)标签(请允许我这么说)。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”,看看我的这个例子做到了没有?
结构清晰--也就是我们常说的,XHTML标签要结构化(语意化)。什么叫结构化?
由于个人认为这个知识点是十分重要的,所以请允许我在这里多罗嗦几句,我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候,我们的表现(数据)和形式(布局样式)是混在一起的,有很多冗余的数据混杂在一起,而大家再看看我上面给大家展示的代码,很明显,结构十分清晰。
说了半天,还是没有说什么是结构化,什么才是结构清晰啊?不要急。还记得我刚才提到的那几个标签吗?h1~h6--如果你要显示的数据是作为标题显示的时候,就用这些标签,因为这个标签的意思就是说,这个是一个标题,不仅我们的用户很容易理解h-head的英文字母缩写,我们的另外一个用户搜索引擎也可以很容易理解它。呵呵,看到了吧,一个充分结构化的页面,对用户是十分友好的。p--Paragraph(段落)ul--unorglizedlist(无序的列表)ol--orglizedlist(有序的列表)li--listitem(列表项)form--表单div--division(区域)
我这么一写,大家估计开始明白了,原来XHTML标签是有着自己的意义的(至于其他的标签的语意义,大家可以自己到W3C看看它的解释,也可以查看语义化你的HTML标签和属性),所以我们讲要语意化的意思,就是用合理的标签来显示数据,比如前面提到的,是标题,就应该用h1~h6标签,如果是一个段落的介绍文字,那么就应该使用p标签,如果是显示的一个没有顺序的列表,就应该用ul标签,如此...所以看这个例子里
Ajax标签导航实例详解
这么写就是很合理的,h2标签就说明这里是个标题。而这么写:复制内容到剪贴板代码:.title{
font-size:18px;...}
Ajax标签导航实例详解
虽然你用了strong来强调说明这部分文字,但是还是没有h2标签来的直接明了。还有这么写
Ajax标签导航实例详解
也不是我们推荐的,可以不用嵌套层的地方,我们尽量不要去过多的嵌套层,减少嵌套会让我们的浏览器解析起来会更容易,速度更快。
所我们使用WEB标准开发页面,绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面,也不意味着我们就不使用table。只要把握我刚才说的原则,使用合理的标签显示相应特征的数据。其实我们的table标签是一个很好的用来显示二维数据的标签,而table标签也确实是设计出来用来显示数据的,而不是用来布局的,只是我们当时的设计师们都用table标签来布局了。。
友情提示:本文中关于《前端开发总结》给出的范例仅供您参考拓展思维使用,前端开发总结:该篇文章建议您自主创作。
来源:网络整理 免责声明:本文仅限学习分享,如产生版权问题,请联系我们及时删除。