写在前面:其实写这篇笔记酝酿很久了,关于自己前端的学习也有一段时间了,但是自己对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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">