标签：
CSS的优势：
1：样式表提供了远比HTML多得多的格式化选择。
2：在给网页添加背景的时候，你要确定他要如何平铺（重复等一系列的属性）
3：CSS占用的空间也远比HTML的格式化选项要少得多，加载速度更快
4：可以设置多种样式样式表，更具不同的需求提供不同的风格，样式更加独立
文档类型：
所有网页都是一个doctype（文档类型）开头的，表示网页用哪一种HTML来编写
HTML的工作原理
1：网站的第一行是DOCTYPE声明，
2：<html></html>如果把一个网页比作成一颗树的话，那HTML就是树干
3：网页的head标头
4：网页的主体body,页面上呈现的内容都是写在这里面的
让IE8支持HTML5
<!--[if it IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]>
IE条件注释简称（IECC）
只有IE9之前的版本可见的javascript代码
可以忘却的HTML标签和属性
1：不要用<font>来控制文本的显示，css可以做的更好
2：不要使用<b><i>标签来使文字变得加粗或者倾斜：如果你一定要加强某一个字或者某一段话，可以使用<strong>标签来。对于相对次要的文字，可以使用<em>标签来进行强调
为了使标签显示为斜体可以使用<cite>标签，它具有一箭双雕的作用，它不仅把标题变成的斜体，还给标签做上了标记，便于搜索引擎的搜索
3：不要用<table>标签进行网页布局
4：不要使用标签的属性来设置效果
5：不要滥用<br>标签
经验和看法：
通过最近的两个页面布局设计的练习，我有了一定的心得和体会
关于HTML：多使用语义话结构的标签，在没有使用css样式之前最好HTML代码不要显示多余的效果，HTML只需要专注体现结构就可以了，一定要注意命名规范和多写注解，这样在别人看你的代码的时候才能更好地理解你的布局思维，为什么把这几个结构划分为一块，合理的运用标签，合理的划分结构。
关于css部分：
1：拿到设计稿之后，一定不要一拿到设计稿就开始动手开始做，设计师设计模块都是有他自己的理由的，先理解设计师的思路，找到相似的地方，实现复用，这样可以大量减少你的代码量，还有利于修改。
2：能用样式实现的东西尽量用样式来实现，不要使用其他的东西来影响HTML的结构，实现低耦合性。
3：使用CSS重置的技术，因为每个浏览器的初始设计师不同的，他能取消浏览器经常在段落和其他标签之间插入的间距。
小技巧：
1：用标题<h1~h6>表示文本内的相对重要性。当两个标题对于网页的主题同样重要时，那就给这两个标题使用相同等级的标题，如果有一个标题不是很重要，那就给它使用下一级的标题，最好不要跳级
2：对于文本段落使用<p>标签。
3：对于包含多个相关项目的列表，则使用无序列表<ul>,比如导航链接，标题，或者诸如此类的一组提示语等。
4：使用有序列表<ol>来表示一个过程的步骤，或者定义一个项目的顺序。
5：如果要创建一个术语及其定义或描述，则要用<dl>（定义列表）标签，并结合<dt>（定义术语） <dd>（定义描述）来使用。
6：如果引用一段引用语，比如摘自其他网站的一段文字，一篇文章影评，或者只是你的祖父的一些至理名言，就要尽量对长段落使用<blockquote>标签，对于那些短的就使用<q>标签
7：利用一些生僻的标签<cite>来引用书的标题、新闻报道或网站，用<address>来表示网页的作者或者版权声明
8：如果没有合适的标签，在你给某一个元素或者某一组元素添加样式的时候，可以使用span和div标签
9：不要滥用div，H5中提供了几个标签可以来取代div标签<article>,<section>和<footer>标签。对于导航栏可以使用<nav>标签
10：用W3C检测器来检测页面
停止IE8所有无厘头的行为，恢复成IE8之前正常的样子，做法就是在网页中添加一个META的标签，让IE8忽略 compatibility view(兼容性视图),compatillty view list(兼容性视图列表)采用最标准的兼容模式来显示网页
<meta http-equiv="X-UA-Comptible" content="IE=edge" />
最好放在<title>标签正下方
高速缓存：当你发现你刚做出的修改在浏览器上没有体现的时候，你可以使用强制重新加载页面的方式来解决，ctrl+F5
用CSS来连接外部样式表
方法一使用<link>标签
方法二：使用@improt指令：
与HTML的<link>标签不同的是，@improt是CSS语言的一部分，具有以下明显不同于HTML的一些性质：
1：与外部文件连接的时候得使用url（绝对路径）而不是href，并要把路径放在放在一对圆括号里面。
2：和使用link标签一样，也可以使用多个@improt外部样式
<style>
@import url();
@import url();
</style>
里的引号写不写都行。
标签选择器：
不是很推荐使用，会很大篇幅的使用，在你的HTML代码结构里的所有相同标签都会使用这一套样式，不利于对于同一标签内的内容显示不同样的的实现
类选择器：
目前我认为是最好用的选择器了。给标签添加一个类名，可以实现精准控制，对你想要设置样式的元素标签，设置你需要的类名，在外部样式中设置即可。
使用规则：
1：所有类选择器的开始都要以一个圆点开始（ID选择器则是使用#键来开始）
2：CSS只允许在类名称中出现使用字母，数字，连字符- 和下划线_
3：在圆点之后，名称始终要以字母开头。
4：类名区分大小写。大写小不同的两个相同的名称，CSS会把它们解析为不同的类
小小加油站：
div和span标签
在你想给大段相关元素摆放位置的时候，可以使用DIV标签，它表现为块级元素的特性，可以用盒子模型去理解它
span标签：
在一大段文字中，如果你只想给特定的文字设置样式，就可以用到span标签了，给span标签设置类就可以通过css给它来设置特使的样式了
ID选择器：控制特殊的网页元素
具有唯一性
一个HTML页面中同时只能存在一个ID名称。
用处：目前使用到的功能有：设置一个标签，给它设置position属性：fixed定位，点击它跳会顶部。
给标签组定义样式
如果有一些标签（类）需要设置相同的样式的话
可以使用标签组定义样式：例如h1,h2,h3,h3,...{
样式的内容
}
需要设置相同样式的属性可以写在一起，中间使用逗号分开。也叫群组选择器
通用选择器（*）
大哥级别的选择器，他会同时设置整个页面，不会针对某一个，全部都涉及到了
给标签内的标签设置定义样式
因为HTML结构是树形结构的，所以注定他有很多分支，她的内部会有很多的子节点（分支）比如ul中有li
li就是ul的派生元素，这个时候我们就能使用派生选择器：
可以把这些标签想想成族谱，你是出于子标签的位置；
祖父就是祖先元素，派生标签就是祖先元素下一级的标签，可以理解成叔叔和爸爸的一辈，（其实就是离祖先元素最近的一个元素节点），父元素就是爸爸，你就是子标签，就是一级一级树根状的发散下来的。
祖先元素：一个页面的开始。<html>标签就是所有标签的祖先元素
派生标签：处在一个标签或者多个标签内部的标签就是派生标签，
同胞标签，可以理解成你的兄弟
伪类和伪元素（给用户提供更好地体验更具一些操作会产生相应的效果）还可以给元素添加额外的显示效果
给链接定义样式
1：a:link 指用户还没有访问过的链接
2：a:visited 表示用户已经访问过的标签，访问过之后会产生不同的效果，和没有访问的链接产生区别
3: a:hover 当用户把鼠标移到这个链接上的时候会产生的效果
4: a:active 当用户点击链接时候产生的效果
给段落添加样式
1：frist-letter:可以创建下落的首字母（对段落开始的第一个字母的设置）
2:frist-line：对段落的首行进行设计
介绍更多的伪类：
1：focus 和hover极为相似 区别是当标签获得焦点的时候提供的样式，判断用户的焦点放在了哪里，最适合用于给访问者提供反馈，比如通过改变文本框的背景色表名她要在什么位置输入
2: befor 能完成一些选择器无法完成的操作，比如在某个元素前面加上东西
3: after 和before刚好相反，在后面添加引用标记
4::selection （注意注意一定要使用两个冒号，使用一个冒号是不起作用的）一般用作访问者需要复制文字时候的操作，可以在访问者选择复制文字的时候，改变一选择文字的样式
属性选择器
选择哪些相同标签，但是具有不同属性的元素
img[title]（标签名[具有的属性值]）
1：(^=)：以什么开始 img[href^="http://"]
2:（$=）：以什么结尾 img[href$=".jpg"]
3：(*=):带有什么的（找到所有具有共同属性名的元素标签）img[hreg*="select"]找到所有名字里面包含select的元素
子选择器：
和派生类似 找到离父元素最近的子元素的同级元素，找到子元素的下一级还可以继续使用自选择器
：first-child 找到第一个子标签
：last-child 找到最后一个子标签
：nth-child
很复杂的选择器，有很多种用法
可以选择列表中的奇元素或者偶元素
tr:nth-child(odd){backgroung-color:#efefef}设置奇数行的元素
tr:nth-child(even){background-color:#efefef}设置偶数行的元素
nth-child(N)这里的N是可以设置的，设置你希望他改变的元素
子类选择器：(先记下来，这个暂时没有用过，用过之后再来补充)
：frist-of-type
: last-of-type
: nth-of-type
同胞选择器
子元素之间的联系，还必须是相邻的子元素，如果两个元素是相邻的子元素就可以用+号来使他们关联起来
还有一种组合选择器~号如果h2+p表示的是h2标签旁边的p标签，那么h2~p就表示和h2同一级的所有p标签
：not（）选择器
可以称为否定伪类：可你帮助你选择除了某个类之外的所有类
例子
p:not(.class){color:red}
意思就是除了p标签类名为class之外的所有标签颜色设置为红色
局限性：
1：只能使用简单的选择器。
2：不能使用派生选择器
3：不能使用：not选择器
CSS相关知识
标签：
原文地址：http://www.cnblogs.com/gavinzzh-firstday/p/5399775.html
