基本原理:
HTML是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。
CSS指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。
一名专业的前端开发也是一名优秀的重构,因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式,我不是要你重构页面,只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML:
- <table><tr><td>
- <table><tr><td>
- ...
- </td></tr></table>
- </td></tr></table>
或者这样的CSS:
- body .box .border ul li p strong span{color:#000}
以上都是对HTML和CSS非常糟糕的使用方法。
正确理解:
HTML是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
CSS是用来渲染页面的,也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的,这里对css选择符按照开销从小到大的顺序梳理一下:
◆ ID选择符 #box
◆ 类选择符 .box
◆ 标签 div
◆ 伪类和伪元素 a:hover
当页面被触发引起回流(reflow)的时候,低效的选择符依然会引发更高的开销,所以请避免低效。