前端开发中一些常用技巧总结

1.文章标题列表中日期居右显示的两种方法,方法 A 相对方法 B 省资源,但比方法 B 要多写两句代码,使用时请视情况而定: 方法 A(经典论坛 ariesjia 提供的思路.感谢~): view source print? 1 @Mr.Think 这是文章标题<SPAN>20xx-10-10</SPAN> 然后定义 p 和 span 的样式: view source print? 1 p{position:relative} 2 p span{position:absolute; right:0} 方法 B: view source print? 1 <SPAN>20xx-10-10</SPAN>@Mr.Think 这是文章标题然后定义 span 右浮动: view source print? 1 p span{float:right} 其实这两种方法可以延伸到很多情况下,很实用的一种写法; 2.web 标准中,同一页面中只能有一个 h1 标签.很多人知道这个概念,但做到的却很少; 3.空白外边距互相叠加的问题:一般通过添加透明边框或者 1px 的内边距避免. 详细解读:http://mrthink.net/css-margin-overlying-way/; 4.ie6 下 max/min-width/height 实现,_width:expression(document.body.clientWidth > 600 ? “600px” : “auto”); _height: expression(this.scrollHeight >600 ? “600px” : “auto”);. 5.html/class/id,最好统一以小写书写,这样更严谨(符合 xhtml 标准); 6.不推荐用下面代码兼容 IE8: view source

print? 1 <META content=IE=7 http-equiv=X-UA-Compatible> 如果是非短期性页面,尽量避免使用,页面应尽可能保证向后兼容.更多兼容方法请详细阅读: http://mrthink.net/cssandhtml-hack-mainbrower/ 7.空 div 在 IE(FF 中没有)是有默认高度的,可以用定义:div { witdh:100%; background:#9c0; font-size:0}的方式去掉默认高度; 8.在使用 table 标签时应该尽可能的利用它本身的属性，最大限度的分离结构与样式.详细解读:http://mrthink.net/csshtml-colgroup-col-style/; 9.充分利用表单中 label 标签提升用户体验; 这一点对于页面中那些小的选项框,以及对残障人士阅读网站都有好处. 细节是用户体验的第一步;例如: view source print? 1 <LABEL for=sample>SAMPLE</LABEL> 2 <INPUT id=sample> 当鼠标点击 SAMPLE 时,光标将自动在文本域中获取焦点; 10.fieldset, legend 标签, 鲜为人知,却很实用的一组标签;它可以很明了的把一组元素框起来,主要用于表单; 11.optgroup 标签,鲜为人知,它对提升选择表单用户体验很有帮助.作用? 就是可以在有很多选项时,对这些选项分组: view source print? <SELECT id=selectId> <OPTGROUP label="GROUP ONE"> <OPTION selected value=1>one select</OPTION> <OPTION value=2>two select</OPTION> 1 </OPTGROUP> <OPTGROUP label="GROUP TWO"> <OPTION value=3>three select</OPTION> <OPTION value=4>four select</OPTION> </OPTGROUP></SELECT> 效果演示:
one select

12.表单都要加 name 值,name 值是一个标识,不同于 id,据我所发现,若是未定义 name 值,非 IE 浏览器下是无法通过 document.formid 获取到表单元素的.请看如下代码及注释: view source

print? 01 <html> 02 <head> 03 <script> 04 window.onload=function(){ 05 alert(document.mrform.length); //所有浏览器均会弹出表单元素长度 06 alert(document.thinkform.length); //仅 IE 会弹出该表单元素长度 07 } 08 </script> 09 </head> 10 <body> 11 <form name="mrform" id="thinkform" action="#"> 12 ...... 13 </form> 14 </body> 15 </html> 13.同一行上文字与图片垂直居中对齐方法:为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle}; 例如: view source print? 1 @Mr.Think<IMG src="i/image.gif"> 只需定义 p*{vertical-align:middle}即可使文字与图片同行垂直居中. 14.同一行上文字与表单对齐方法: 设置表单元素第一字体为 Tahoma(Verdana 系列也可),并设置 vertical-align:middle.建设大家把这个约定写入 CSS RESET 中,能减小很多麻烦: view source print? body,button,input,select,textarea{font:12px/1.5 1 tahoma,arial,sans-serif; vertical-align:middle} 15.获取 m 至 n 间随机数的公式: Math.random()*(n-m)+m; 16.针对 ie6 下 png 背景显示问题,CSS 中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaIm ageLoader(sizingMethod=crop,

src=’http://mat1.gtimg.com/www/mb/images/openShadow.png’); 17.优先加载页面中的 Sprite 图(请参见 Google 首页源码): view source print? 1 if(document.images)new Image().src='images/sprite.png' 18.CSS 及 JavaScript 中,非注释类中文(CSS 中指字体),在最后优化时须转换成 Unicode 码,以避免编码错误时的乱码显示. 19.ie6/ie7 下若 overflow 失效, 一般是由于元素中有 relative 定位元素,可为为父级元素添加 position:relative 解决. 20.ie6 下 border-color:transparent 无效解决方法: view source print? _border-color:#ff0 #047 #047 #047;_filter:chroma(color=#047)/*#047 1 颜色值将被透明*/

第二篇：前端开发总结

----B-----

http://a.html:静态

http://a.jsp(java-outputStream->HTML+CSS+JS->IE):动态

http://HelloServlet(java-outputStream->HTML+CSS+JS->IE):动态

HTML

基础标签:div/p/table/hn/a…

<table>-<tr><td><th><caption>:cellpadding cellspacing border width=”300|40%”

标签语法:<div style=”|’……….”>…</div> : <br/>

描述页面元素:显示

Html功能:

显示:基础标签

收集:<form action=”a.jsp” method=”post”>

</form>

CSS

选择器:html 类 ID

ID>类>html

<a style>:内联CSS

内部:<head><style>3种选择器….</style></head>

外部:my.css {3种选择器}

事件:<a onXXXXX=”alert(‘hello’)” />

dom:

document.getElementByID()

document.getElementsByName()

document.getElementsByTagName()

var:不严格区分类型

//var age

age=10;

window,history,location,screen

alert confirm

//表单提交方式

document.forms[0].submit()

…………..

Js验证表单数据

------------------------------IEàsubmit-----------------------------------------

Socket:java.net.*

ServerSocket:Socket

C(Browser:IE:FF) S(Tomcat)

Socket s = new Socket(“IP”,8080) ServerSocket ss = new ServerSocket(8080)

ss.accept();

in = s.getInputStream() in

out=.s.getOutputStream() out

HTTP:FTP:SMTP:POP3

HTTP:

Request

POST|GET /hello.jsp HTTP/1.1

HEADERS……..

BODY

Response

HTTP/1.1 200 OK

HEADERS……..

BODY

Tomcat:Request msgàHttpServletRequest

HttpServletRequest(out)àBrowser

判断URL—对照web.xml

if url ==Html----response(out)---write(a.html)---flush

if url ==jsp----jspc---a_jsp.java---javac---a_jsp.class---执行servlet流程

if url ==servlet---判断要执行servlet实例是否存在

if not exist {new Servlet()—init():1àThread【service（）:n】}

if exist {Thread【service():n】}

servlet—destory():1

doGet (request,response)

doPost(t,response){

//状态追踪

Cookis:Session

URL重写:客户端禁止cookie

Response.encodeURL()

<c:url>

request.getCharacterEncoding(“UTF-8”);

request.getParameter(”myage”);

…………..

new DAO().insert();//jdbc—sql—DB

new Logic().do();

Response.setCharacterEncoding(“UTF-8”)//中文

//回应

Response.getWriter().print(“”);

//资源访问

Request.getRequestDispatcher(“a.jsp”).forward(request,response);

Request.getRequestDispatcher(“a.jsp”).include(request,response);

Response.sendRedirect(“www.google.com”);

//scope

[page]/request/session.application

Jsp

标签用法:

表达式<%=%>/脚本<%%>/表明<%!%>

EL==<%=%>

JSTL==脚本<%%>

IE—servlet(准备数据:dao logic:scope)-forward--???.jsp---IE

(<c:out>能过滤非法字符)

doGet(){

new DAO(){

Class.forName(“”);

Connection conn;

stmt = conn.createStatement();

pstmt =conn.preparedStatement("select * from a where id=?");

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:commit rollback

}}

ER===关系===NF===DDL(script)===DB

DML:select insert update delete

select:子查询、关联、连接

function-procedure:PL/SQL

imp exp

相关推荐

前端开发中一些常用技巧总结

第二篇：前端开发总结

专栏推荐