HTML/CSS基础知识点补遗
## Outline ### HTML 1. 尽量使用有语意的标签;*对于HTML5中的语意(非替换)元素,可使用html5shiv来解决低版本IE兼容性问题 2. 尽量少的使用标签;尽量避免wrapper一类的辅助标签。 #### Example for semantic tags:   ### CSS 1. 理解CSS盒模型,主要是盒模型涉及到的属性的指定和计算,margin collapse; 2. 理解CSS可视化格式模型(visual formatting model),主要是BFC和定位; 3. 理解CSS Rule/Selector的优先级/特殊性:*这便是CSS中,cascading的含义。 1. rule的特殊性从高到低分别是 inline,id,class,tag; 2. 若为inline style,则为1,0,0,0,特殊性最高。 3. 其他的rule特殊性第一项均为0。依次列出选择器中Id,class,tag个数,得到特殊性得分:0, x, y, z; 4. 得分高的rule覆盖其他的; 5. 计算以rule为单位,而不是以selector标识的rule set为单位; 6. 若特殊性相同,则后面的rule覆盖前面的。 ## 参考资料 ### HTML #### html5shiv: - tech: http://ejohn.org/blog/html5-shiv/ - lib: https://github.com/aFarkas/html5shiv id, tag & class: http://jiongks.name/blog/html-or-id-or-class/ ### CSS #### Box Model spec: http://www.w3.org/TR/CSS2/box.html artilcle - en: http://css-tricks.com/the-css-box-model/ - zh: http://www.qianduan.net/css-box-model.html #### Visual formatting model spec: http://www.w3.org/TR/CSS2/visuren.html #### Cascading order & Selector's specificity spec: http://www.w3.org/TR/CSS2/cascade.html#cascading-order blog: http://www.qianduan.net/taming-advanced-css-selectors.html #### Cross browser IE Bugs: - en: http://haslayout.net/css/ - zh: http://ued.alipay.com/wd/2010/07/28/ie-beat-the-holy-canon-css-bug-table/ tool: http://caniuse.com/ #### Tips CSS简写指南: http://www.qianduan.net/css-font-shorthand-attribute-handbook.htmlS2/cascade.html#cascading-order blog: http://www.qianduan.net/taming-advanced-css-selectors.html #### Cross browser IE Bugs: - en: http://haslayout.net/css/ - zh: http://ued.alipay.com/wd/2010/07/28/ie-beat-the-holy-canon-css-bug-table/ tool: http://caniuse.com/ #### Tips CSS简写指南: http://www.qianduan.net/css-font-shorthand-attribute-handbook.html












