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”> <!--中文乱码-->
<input type=”text/password/file/button/radio/checkbox…” name=”” value=””/>
<textarea>
<select><option>
<button type=””/>
</form>
CSS
选择器:html 类 ID
ID>类>html
<a style>:内联CSS
内部:<head><style>3种选择器….</style></head>
外部:my.css {3种选择器}
JS
事件:<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……..
HEADERS……..
BODY
Response
HTTP/1.1 200 OK
HEADERS……..
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