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


May 27, 2011




May 27, 2011

More Decks by kaiye

Other Decks in Technology


  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>