✄--------------------------------------------task1分割线--------------------------------------------✄
百度IFE传送门:http://ife.baidu.com/
Sublime：
html5头部文档：ctrl+shift+p s s h(html)
类选择器(.)与id选择器(#)的区别：
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
常见文字标签：
| 格式标签及应用 | 功能 | 应用效果 |
|---|---|---|
| 内容一<br />内容二 | 让文本强制换行 | 内容一 内容二 |
| <p>段落一</p><p>段落二</p> | 段落标签 |
段落一 段落二 |
| <b>内容</b> | 加粗标签 | 内容 |
| <strong>内容<strong> | 加粗标签 | 内容 |
| <font color="#FF0000">设置字体红色</font> | 设置字体颜色 | 设置字体红色 |
| <font size="3">设置字体大小</font> | 设置字体大小等 | 设置字体红色 |
| <font face="黑体">设置字体黑体</font> | 设置字体大小等 | 设置字体黑体 |
| <s>内容</s> | 删除线样式 | |
| <em>内容</em> | 强调标签，字体被加斜体效果 | 内容 |
| <i>内容</i> | 文字斜体格式 | 内容 |
| 欢迎访问<a href="http://www.divcss5.com/">DIVCSS5</a> | 锚文本，超链接 | 欢迎访问DIVCSS5 |
| <h1>最大标题标签</h1> | 标题标签 |
最大标题标签 |
| <h2>标题标签</h2> | 标题标签 |
标题标签 |
| <h3>标题标签</h3> | 标题标签 |
标题标签 |
CSS - 如何使一个按钮居中？
解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin: auto;”，并且还要设置父容器的 "text-align: center;"。
继承元素：
不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
为表格设置合并边框模型：
table
{
border-collapse:collapse;
}
图片随着浏览器宽度的变化而分行显示：
【效果】
图片自动伸缩，不会超过屏幕宽度
【原理】
css控制图片的max-width
【代码】
-
要么直接在图片代码里面设置style，例如<img src="xxx.jpg" style="max-100%;"/>
-
要么给图片统一一个class名例如response-img，然后在css文件里面设置这个class，例如
|
1
2
3
|
.response-img { max-width: 100%;} |
input 与 button的区别
一句话概括主题：<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大。
HTML 4.01规范的Forms部分指 名表单有以下几种控制类型：buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object controls之外，都是由<input>完成。
这里说的是<button>和<input>。
<button>和<input>
规范中指名：可以用<button>和<input>来做表单按扭。不同的按钮类型请参考这些元素的详细定义。要注意的是<button>比<input>支持更丰富的表现功能。
一些区别
大家都知道<input>可以这样用（实际上是一定要这样用）：<input type="submit" value="OK" />，一定要这样闭合。而不是：<input type="submit" value="OK" ></input>。因为起始标签为必须，而关闭标签是禁止的。
<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里，而是包含在标签中。如：<button>OK</button>。<button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权。
你可以这样写：<button><strong>OK</strong>, I do.</button>，甚至是插入图片：<button><img src="button.gif" alt="" />, it's great.</button>。有点类似于<input type="image">，但是显然强大多了。
最后要注意的是，被<button>包含的图片，不能使用热点地图，即不能<img src="foo.gif" usemap="..." />，这是不合法的。当然也不能再包含诸如input, select, textarea, label, button, form, fieldset, iframe,和isindex（不推荐使用）元素了。
======================================================================================
tips:
1.无序列表：做导航、放一系列图片（去点list-style:none;）
2.border在写的时候一定要将所有的属性写完，不然不能显示： border:1px solid #999;
3.html设置文字间距：text-indent首行首字缩进，letter-spacing字与字间距_字符间距离，行间距：line-height
4.关于文章居中：设置了margin之后，怎么才能居中显示 计算？
5.a与p的区别：<a>多用于超链接
6.图片标签要记得加alt!
7.font-weight:设置文字粗细
8.text-align:除了center还有left/right
9.将div设置为内联：display:inline
10.除了水平居中还有垂直居中 vertical-align: middle;
11.当margin：0 auto 不管用的时候，
margin: auto; /*下面5行设置垂直居中对齐*/
position: absolute;
top: 0;
bottom: 0;
right: 100px;
overflow:hidden与clear:both
http://www.zhangxinxu.com/wordpress/2011/06/css3选择器nth-child和nth-of-type之间的差异/
关于html中table表格tr,td的高度和宽度
http://www.cnblogs.com/siwy/p/5236875.html