Upgrade to Pro — share decks privately, control downloads, hide ads and more …

拍首2011前端技术分享

kaiye
May 27, 2011

 拍首2011前端技术分享

关于拍拍网首页2011版前端技术相关的分享

kaiye

May 27, 2011
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

  1. DIV

  2. DIV

  3. DIV

  4. The HTML Part • WEB语义化的意义? • DIV存在的合理性: http://dev.w3.org/html5/ spec/ Overview.html#the-div-

    element • <!doctype html> • <meta charset=”gbk” /> • HTML5 TagName的使用 方案:http:// www.nczonline.net/blog/ 2011/03/22/using-html5- semantic-elements- today/ • HTML5 CSS Reset
  5. Search Input <input type="search"id="KeyWord" name="KeyWord" autofocus x-webkit- speech speech placeholder="输入商品名

    搜索" class="pp-search-input" value="" autocomplete="off"> http://css-tricks.com/webkit-html5- search-inputs/
  6. 不要相信国外砖家 • Google 早在几年前就不对 keyword meta 标签进 行支持《淘宝首页代码调整》 • Unlike

    Google, Meta description and Meta keywords tags are still very useful in improving ranking in Baidu《Search Engine Optimization for Baidu》 • Meta description不是权值计算的参考因素,这个 标签存在与否不影响网页权值。《百度搜索引擎 优化指南 1.0》
  7. <b><i>的语义回归 • border / icon • The HTML5 specification defines

    the <b> element in 4.6.17 The b element :The <b> element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance. • The <i> element represents an span oftext that offset from the normal prose. • http://www.w3.org/wiki/HTML/Elements/i
  8. CSS

  9. The CSS Part • 《CSS流体(自适应)布 局下宽度分离原则》 • 《Data URI&MHTML: 用还是不用?》http://

    www.99css.com/ archives/492 • 《去除按钮、链接中的 虚线框》http:// sofish.de/1366 • 连字符还是下划线? http:// stackoverflow.com/ questions/1686337/ hyphens-or-underscores- in-css-and-html- identifiers • CSS3 animation与 gradient的应用
  10. CSS字体的选择 • 拍首2011版最佳实践: body,button, input, select, textarea {font: 12px/1.5 arial;}

    • http://www.angelfire.com/al4/rcollins/style/fonts.html • http://dancewithnet.com/2009/11/22/default-web- font-style/ • http://www.cnblogs.com/ruxpinsp1/archive/ 2008/05/11/font-in-front-end-development-4.html • http://yx.takeback.net/121/serif-font.html
  11. 关于模块化CSS • 《Don’t make me think》:长Classname 与短Classname的抉择 • Convent Over

    Configuration:避免无意义 的注释规范 • CSS语义化:.group代 替.clear:after{...}.clear{*zoom:1} • hide mb ellipsis name的引入
  12. 不要将脚本放在底部 • YSlow: Put Scripts at the Bottom的意义? • 分离网页三层结构的实现者

    •<li class="promotion pp- droplist" onmouseover="this.className='p romotion pp-droplist hover'"> •禁用JS的情况
  13. WPO

  14. 图片滚屏按需加载 • img src属性置空的性能问题 • CSS样式背景的按需加载实验 <script id="categoryListBottomCSS" type="text/plain">.category- list

    .sketch{background-image:url(http:// static.paipaiimg.com/sinclude/common2011/css/ index/bg-category-list.png);}</script>