html + css 学习备忘(持续更新)
1.document.createElement
参考
HTML DOM createElement() 方法
document.createElement()的用法
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
<script type="text/javascript">
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "这是测试加载的小例子";
var object = board.appendChild(e);
</script>
效果：在标签board中加载一个按钮，属性值为“这是测试加载的小例子”。
oTest.insertBefore(newNode,null) ，这里insertBefore有2个参数可以设置，第一个是和appendChild相同的，第二却是它特有的。它不仅可以为null，还可以为：
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild);
</script>
效果：这个例子将在x1节点前面插入一个新的节点
2.页面加载的时候是从上往下执行的，即先执行<head>再执行<body>
javascript写在head和body里的区别
网页 head 标签中的 JS 和 CSS，哪种文件放在前面，哪种放在后面比较好
3.span和div
健康、富裕、聪颖这六个字会变成红色：
<p>早睡早起使人
<span class="benefit">健康</span>、
<span class="benefit">富裕</span>
和<span class="benefit">聪颖</span>。
</p>
//相应的CSS代码如下
span.benefit {
color:red;
}
span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。当然，你也可以采用id来为span元素添加样式。不过正如我们在上一课所学的，如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。
span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。除去这点区别，div和span在组织元素方面相差无几。
<div id="democrats">
<ul>
<li>富兰克林·D·罗斯福</li>
<li>哈利·S·杜鲁门</li>
<li>约翰·F·肯尼迪</li>
<li>林登·B·约翰逊</li>
<li>吉米·卡特</li>
<li>比尔·克林顿</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>德怀特·D·艾森豪威尔</li>
<li>理查德·尼克松</li>
<li>杰拉尔德·福特</li>
<li>罗纳德·里根</li>
<li>乔治·布什</li>
<li>乔治·W·布什</li>
</ul>
</div>
//相应的CSS代码如下
#democrats {
background:blue;
}
#republicans {
background:red;
}
4.javascript:void(0) 含义
为什么要使用href=”javascript:void(0);”
5.style="visibility: hidden" 和 style=“display:none”区别
visibility="visible|hidden"
display 属性分别为block, inline, none
display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。
另参考display:inline-block，block，inline的区别与用法
6.style position
relative 生成相对定位的元素，相对于其正常位置进行定位。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
7.transform-origin transform: matrix(a,b,c,d,e,f)
理解CSS3 transform中的Matrix(矩阵)
8.DIV层的五条叠加法则
DIV层的五条叠加法则
css层的定位position、absolute、relative层叠加的五条叠加法则
法则一：同辈元素定位方式相同，且无z-index设置时，html靠后者居上。
9.CSS3 pointer-events:none应用举例及扩展
10.input,output
html5中关于input用法
[原]<button>和<input type="button"> 的区别
11.button和input button的区别
参考
input type="submit" 和"button"有什么区别？
button和input button的区别
<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里，而是包含在标签中。如：<button>OK</button>。<button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权。
你可以这样写：<button><strong>OK</strong>, I do.</button>，甚至是插入图片：<button><img src="http://jianzhong5137.blog.163.com/blog/button.gif" alt="" />, it's great.</button>。有点类似于<input type="image">，但是显然强大多了。
end
