HTML
HTML 4.01 规定了三种文档类型：Strict、Transitiona 以及 Frameset。 HTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
/TR/html4/strict.dtd">
HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " /TR/html4/loose.dtd">
Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " /TR/html4/frameset.dtd
我们现在使用的是xml1.0即下图所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
Id和class的区别
id属性对于XHTML并不新鲜；class属性或者div元素也一样。它们都可以回溯到HTML时代。id属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。（例如，假如你的页面包含id为content的div，那么另外一个div或者其他别的元素都不能使用这个名字。相反地，class属性可以被一遍有一遍地使用在页面中（例如，页面中的五个段落都可以使用名为"small"或者"footnote"的class名称）。下面的标记将有助于阐明id和class的差异： <div id="searchform">Search form components go here. This section of the page is unique.</div>
<div class="blogentry">
<h2>Today's blog post</h2>
<p>Blog content goes here.</p>
<p>Here is another paragraph of blog content.</p>
<p>Just as there can be many paragraphs on a page, so too there may be many entries in a blog. A blog page could use multiple instances of the class "blogentry" (or any other class).</p>
</div>
<div class="blogentry">
<h2>Yesterday's blog post</h2>
<p>In fact, here we are inside another div of class "blogentry."</p>
<p>They reproduce like rabbits.</p>
<p>If there are ten blog posts on this page, there might be ten divs of class "blogentry" as well.</p>
</div>
在这个例子中，名为searchform的div被用来封装包含搜索表单的页面区域，而div class="blogentry"则用来封装blog中的每个文章入口。在页面中只有一个搜索表单，所以我们选择id标注这个唯一的组件。但是blog则拥有许多的（文章）入口，所以class属性被应用于这种情况。同样地，新闻站点通常拥有多个div，这些div的class可以命名为"newsitem"或者别的什么。
然而不是所有的站点都需要div。blog站点可以仅仅使用h1, H2, 和h2标题和<p>段落，新闻站点也一样。我们在这里展示class为blogentry的div，并不是鼓励你在站点中塞满div，而仅仅是为了向你展示这个原则：在同一个HTML文档中，使用多次class，但只能使用一次id。
粘性贴纸理论
把id属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月15号之前必须缴纳的账单。 id同样会标注文档中的特殊区域，以便提醒你哪个区域需要特殊的处理，在这点上，id属性与粘性贴纸是相似的。为了实现所谓的特殊处理，你需要使用这个特殊的id在样式表中编写若干规则，或者在JavaScript文件中添加几行代码。比方说，你的CSS文件中有一些特定的规则，这些规则只应用于id名为searchform的div内的元素。
当某一id属性作为一个有磁性的东西（磁铁）被用于一系列特定的CSS规则时，它被称为CSS选择器。有许多创建选择器的方法，不过id是很容易使用的，并且有多的用途。
我的体会
我是这样想的,id代表一个人的身份,自然只能有一个,而class代表一个班级(类)班级中自然有许多人,也就可以被很多次使用
id的力量
id属性不可思议地强有力。它具有以下的能力：
?
?
?
?
? 作为样式表选择器，使我们有能力创作紧凑的最小化的XHTML。 作为超文本的目标锚，取代过时的name属性。 作为从基于DOM的脚本来定位特定元素的方法。 作为对象元素的名称。 作为一种综合用途处理(general purpose processing)的工具（在W3C的例子中，“当把数据从HTML页面中提取到数据库，或将HTML文档转换为其他格式等情况下，作为域识别工具来使用。”）。
id的规则
id值必须以字母或者下划线开始；不能以数字开始。虽然W3C验证不会捕获这个错误，但是XML解析器会的。同时，如果你将id与JavaScript在表单中配合使用，那么id名称和值必须是合法的JavaScript变量。空格和连字号，特别是连字号，是不被允许的。不仅如此，将下划线用于class或者id名都不是个好主意，这是由于在CSS2.0（以及某些浏览器）中的限制。
HTML 标签
<span>
定义和用法
<span> 标签被用来组合文档中的行内元素。
HTML 与 XHTML 之间的差异
NONE
提示和注释：
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 例子解释
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
提示：事实上，您也许已经注意到了，W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，但是我们的做法是：使用“提示”使用 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。
HTML:
<p class="tip"><span>提示：</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
第二篇：html
兼容问题：计算一定要精确，不要让内容的宽高超出我们设置的宽高
在IE6下，padding值会撑开设置好的宽高，减去对应的padding值
在IE6,7下，元素浮动如果宽度需要内容撑开，里边的块元素都要加浮动
在IE6,7下，元素要通过浮动并在同一行，就给这行元素都加浮动
注意标签嵌套规范
IE6下最小高度问题：在IE6下，元素的高度小于19px的时候，会被当作19px处理 解决方法：给样式加 overflow:hidden;
边框点线问题：1px 点线在IE6不支持 解决方法：切背景平铺
在IE6下解决Margin传递要触发该样式的haslayout：overflow:hidden;zoom:1;
在IE6下,父级有边框的时候，子元素的margin值消失 解决方法：触发父级的haslayout： zoom:1;
IE6下双边距BUG
在IE6下，块元素有浮动横向的margin值，横向的margin会被放大成两倍
margin-right：一行右侧第一个元素有双边距
margin-left：一行左侧第一个元素有双边距
解决方法：display:inline;
在IE6,7下，li本身没浮动，但li里面的内容有浮动，li下就会产生间隙 解决方法：1.给li加浮动，同时要设宽度 2.给li接加vertical-align:top;
当IE6下，元素的高度小于19px的时候和li的间隙问题共存的时候：给li加浮动，overflow:hidden;设宽度
当一行子元素占有的宽度之和 和父级相差超过3px，或者有不满行状态的时候，最后一行子元素的下margin在IE6下就会失效
IE6下文字溢出BUG：子元素的宽度和父级的宽度相差小于3px的时候，两个浮动元素中间有注释或内嵌元素
解决方法：用div把注释或内嵌元素包起来
当浮动元素和绝对定位元素是并列关系的时候，IE6下绝对定位会消失
解决方法：给定位元素外面包DIV
在IE6，7下，子元素有相对定位的话(position:relative);父级的（overflow:auto）包不住子元素
解决方法：给父级也加相对定位(position:relative);
在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差
在IE6,7下，输入类型的表单控件一般用div包住
在IE6,7下，输入类型的表单控件上下各有1px间隙
解决方法：给input加浮动（folat:left）
在IE6，7下输入类型的表单控件加：border:none无效
解决方法：给input重置背景
在IE6，7下输入类型的表单控件输入文字的时候，背景图片跟着移动
解决方法：把背景加给父级，再把自身的背景清掉(background:none)
背景图全屏：background-size: cover
图片刚好一屏的，随着滚动条的移动：background-attachment: fixed
要<Input>标签中的文字垂直居中，要在定义input的样式中摄设置高度和行高相同
标签命名规范：p标签里不能包含块标签
给li加hover不抖动==>：li{ padding:1px;} li:hover{ padding;0}
background(url() no-repeat left(X轴) top(Y轴))；一般用负数
background(url() no-repeat center top)顶部居中对齐
background(url() no-repeat center bottom)
padding: top right bootom left(上，右，下，左)
margin: top right bootom left(上，右，下，左)
居中：（margin-right:auto; margin-left:auto;）margin:0 auto;
常见文本：
font-size 文字大小（一般均为偶数）
font-family 字体（中文默认宋体）
color 文字颜色（英文、rgb、十六位进制色彩值）
line-height 行高
text-align 文本对齐方式
text-indent 首行缩进（em缩进字符）
font-weight 文字着重
font-style 文字倾斜
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距（以空格为解析单位）
font：font-style | font-weight | font-size/line-height | font-family；
a伪类
link 未访问（默认）
hover 鼠标悬停（鼠标划过）
active 链接激活（鼠标按下）
visited 访问过后（点击过后）
IE6下最小高度
在IE6下高度小于19px的元素，高度会被当做19px来处理
解决方法：font-size
字体都有4个像素的偏差，有关设高的地方要减去4
浮动:
能不用浮动和margin出现的尽量不要用，用padding代替
清浮动：
1、 给父级也加浮动（不推荐）
2、 给父级加display:inline-block
3、 在浮动元素下加<div class=”clear”></div>
.clear{ height:0px; font-size:0; clear:both;}
4、 在浮动元素下加<br clear=”all”/>
在IE6,7下浮动元素的父级有宽度就不用清浮动
Haslayout 根据元素内容的大小，或者父级的父级的大小来重新计算元素的宽高
display:inline-block
height:(任何值除了auto)
float:(left或right)
width:(任何值除了auto)
zoom:(除了normal外任意值)
5、 给浮动元素的父类加上样式:
.clear:after{ content:""; display:block; clear:both;}
.clear{zoom:1;} ======>IE6,7下
6、 给浮动元素的父级加Overflow 溢出 {Overflow :auto; zoom:1;}
auto 溢出显示滚动条
scroll 默认就显示滚动条
hidden 溢出隐藏
在IE6,7下，元素浮动要并在同一行的元素都要加浮动
IE6下双边距BUG
IE6下块元素有浮动，和横向的margin值会被放大两倍
解决办法：
转成内嵌：display:inline;
IE6,7下li下几px的间隙问题
在IE6,7下li本身没浮动，但是内容浮动了li下就会多出来几个像素
解决方法：
1． 给li加浮动
2． 给li加vertical-align:top
Body>html>
定位：
Position:relative：相对定位top/bottom/left/right控值，可以是负数（沿着原来的位置移动）
1. 不影响元素本身的特性
2. 不使元素脱离文档流
3. 如果没有定位偏移量，对元素本身没有任何影响
Position:absolute；绝对定位
1. 使元素完全脱离文档流
2. 使内嵌支持宽高
3. 块属性标签内容撑开宽度
4. 如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移
5. 相对定位（当绝对定位元素的父级）一般都是配合绝对定位元素使用
不透明度:opacity:0~1
IE下:filter:(alpha=0~10)
Ie6下父级的overflow:hidden；是包不住子级的相对定位的
在IE6下定位元素的父级宽高都为基数，那么在IE6下定位元素的right和bottom都有1像素的偏差，（一般把父级的宽高设成偶数）