CSS复习第一天(简单规范)
1、有意义的html
优点:与表现性的页面相比,有意义的页面更容易后期的处理与维护。
便于浏览器与屏幕阅读器识别。
更加便于调试样式,适合的标签去做适合的事情。
2、一些有意义的html标签:
3、id 和 class
ID
①id 用于标示页面上的特定元素(比如站点导航),并且是唯一的。
②用来标识持久的结构性元素,例如主导航或内容区域。
③用来标识一次性元素。
CLASS
①同一个类名可以应用于页面上任意多个元素。
②他适合标识内容的类型或其他相似的条目。
合理的使用 id 和 class
class 用于概念上相似的元素,他们可以在页面上出现多次。同时在使用 class 时,要避免”多类症“,使用样式表的层叠,使其更具意义,更加有利于”组件化“。
id 一般用于只出现一次的元素上。
![](https://images0.cnblogs.com/blog2015/685629/201508/080938198776245.png)
4、为元素命名
为元素命名时,应该根据“他们是什么”来为元素命名,我不应该根据“他们的外观如何”来命名。这样会使代码更有意义,并且避免代码与设计的不同步。例如:bootstrap中 .warning 、.success 等,这样将更加便于重用和理解。
5、div 和 span
div 有助于在文档中添加结构,并且他也是有意义的。他代表部分(division),可以将文档分割为几个有意义的区域。所以,通常将主要内容区域包围在div中并为其分配适当的类,就可以在文档中添加结构和意义。
为了将不必要的标记减到最少,应该只在没有现有元素能够实现区域分割的情况下使用div元素。例如:
<div class="nav">
<ul>
<li></li>
<li></li>
</ul>
</div>
改为:
<ul class= "nav">
<li></li>
<li></li>
</ul>
6、DTD(文档类型定义)是一组机器可读的规则,他们定义XML或者HTML的特定版本中允许有什么,不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施,即通过分析页面的DOCTYPE声明来了解要使用哪个DTD。
7、DOCTYPE 声明除了进行对文档代码的验证之外,还用于确定浏览器的渲染模式。
标准模式(Standards Mode):浏览器根据规范呈现页面。
混杂模式(quirks mode):页面以一种比较宽松的向后兼容的方式显示。它用来模仿老式浏览器(IE6之前和Netscape Navigator 4)的行为,以防老式站点无法工作。
几乎标准的模式(Almost Standards Mode):IE8、Opera(7.5) 和其他浏览器,除了IE11 的第三种模式。除了在处理表格的方式上有一些细微的差异外,这种模式与标准模式相同。
8、DOCTYPE 切换 https://hsivonen.fi/doctype/
![](https://images0.cnblogs.com/blog2015/685629/201508/080939538464304.jpg)