重走一遍CSS（一）

写在前面：其实写这篇笔记酝酿很久了，关于自己前端的学习也有一段时间了，但是自己对CSS等基础知识没有一个宏观概念。加之最近面临就业的问题，情绪有些许的急躁，所以想静下心来，认认真真的再走一遍基础路，提高编程效率。

---

设计代码的结构

• 使用Class 和 ID 命名时，要根据其具体意义而不是表现样式来命名
• 尽量简化文档结构，避免大量的依赖实用类
• 采用符合其意义的标签（语义化标签）
• 使用微格式
• 为什么要使用良好的代码结构：
  
  • 早期的网页为增加表现力，导致web很快就含义不清，代码臃肿混乱，布局极其容易破坏。典型的问题有：标记语言表现为表现语言，表格成了一种布局工具而不是显示数据的方式，人们使用块引用来添加空白而不是表示引用。而良好的代码结构会大大减少工作量，增加搜索引擎的友好性，更好的兼容浏览器。

有意义的文档的重要性

有意义的标记为开发人员提供了几个重要的好处：
* 与表现性的页面相比，有意义的页面更容易处理。
* 除了人之外，程序和其他设备也可以理解有意义的标记。
* 有意义的标记可以简便地将元素调整为所需样式。

命名约定

• 在分配ID和类名时，一定要尽可能保持名称与表现方式无关。
• 应该根据“它们是什么”来为元素命名，这样可以在整个网站来重用它们。
• 采用完全小写的类名，多个单词之间用连字符分割。

什么时候使用ID和类名

• 一个ID只能应用于页面上的一个元素，而同一个类名可以应用于页面上任意多个元素。
• 只有在目标元素非常独特，绝不会在网站上其他地方别的东西上使用这个名称时，才会使用ID。

微格式

• 感觉很像HTML 标签标签中的alt属性一样。
• 对搜索引擎、设备友好。
  弱弱的说一句：其实自己刚开始也是没搞懂，先贴有助于理解的博文吧
  微格式理解博文

HTML 和CSS的不同版本

|    版本    |    时间    |    特点    
    CSS1         1996        非常基基本的属性，比如字体，颜色，外边距 
    CSS2         1998        添加了高级概念（比如浮动和定位）以及高级的选择器（比如子选择器，相邻同胞选择器和通用选择器）
    CSS2.1       2002        修正上一版本错误，精确的描述CSS的浏览器实现
    CSS3                     高级布局模块，全新的背景属性和一批新的选择器等
    HTML 4.01    1990
    XHTML 1.0    2000        HTML 4.01的XML版，语法严格按照XML格式
    HTML 5
    XHTML 2.0    流产

• XHTML 1.1 比XHTML 1.0更接近XML，XHTML 1.1页面是作为XML发送给浏览器的，这意味着，即使XHTML 1.1页面只包含一个错误，web浏览器也不会显示页面。
• HTML 5的目标是建立一种现代化的标记语言，可以更好地反映在Web上发布的信息类型，因此他引入了新的结构性元素比如 index / nav /article / section / footer ,还包含一辟新的表单特性。

文档类型，DOCTYPE切换和浏览器模式

• 文档类型定义（DTD），是一组机器可读的规则，它们定义XML或HTML的特定版本中允许有什么，不允许有什么
• DOCTYPE 声明是指HTML文档开头处的一行或两行代码，描述使用哪个DTD