『个人の笔记』百度ife

✄--------------------------------------------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

【代码】

1. 要么直接在图片代码里面设置style，例如<img src="xxx.jpg" style="max-width:100%;"/>

2. 要么给图片统一一个class名例如response-img，然后在css文件里面设置这个class，例如

1 2 3

.response-img {     max-width: 100%; }

input 与 button的区别

HTML: button和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