五月学习笔记
1.
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。
这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。
ECMA-262是一种标准，它是ECMAScript脚本语言的规范及标准。
Javscript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。
2.
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
下面只关心HTML DOM。
D：Document，文档，指的是用HTML编写出来的文档。
O：Object，对象，对象有方法、属性。
M：Model，浏览器提供了网页文档的模型，即节点树或称家谱树。家谱树主要表示各节点之间的关系（父、子、兄弟）。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
DOM代表着加载到浏览器窗口的当前网页，DOM把网页表示为一棵树，DOM 是被视为节点树的 HTML。
3.emacs
http://v.youku.com/v_show/id_XNjgyMDc1NjYw.html
http://v.youku.com/v_show/id_XNjgyMDc2OTM2.html
http://v.youku.com/v_show/id_XNjgyMDc4MzUy.html
C+X C+F 打开文件 如果直接写一个不存在的文件，那就是新建
C+F 光标向前 C+B光标向后
C+E 光标到行尾 C+A光标到行首
C+P 光标上移一行 C+N 光标下移一行
C+X C+S 保存
C+D 删除光标覆盖的字
C+z 挂起
C+x C+c 永久离开Emacs
C+x u撤销更新
C+S+E 选择光标以后的这行的字
鼠标拖动选中的区域同时对其复制 而后点击鼠标中间粘贴 或C+Y粘贴
C+W 剪切
C+Y 粘贴
C+K 删除本行光标后的word
C+X 2 水平分窗口 C+X 3 竖直平分窗口
C+X O 光标移至分出的下一个窗口
C+X 0（零） 关闭分出的这个窗口
4.
文档类型的作用
文档类型即<!DOCTYPE>，是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!DOCTYPE html>
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 提供了三种DTD声明可供选择：
过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
简言之，文档类型规定浏览器根据HTML的哪个版本来解析，<!DOCTYPE> 声明引用 DTD（文档类型定义），DTD 规定了标记语言的规则，定义你页面的表示，浏览器根据你的DTD来解析你的页面，这样浏览器才能正确地呈现内容。
http://www.w3school.com.cn/tags/tag_doctype.asp
5.HTML语义化
HTML赋予了每个标签以不同的语义，语义化是指用合理HTML标记以及其特有的属性去编写组织文档。
好处：
1)去掉或样式丢失的时候能让页面呈现清晰的结构。
2)对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
3)便于团队开发和维护
4)PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
6.行内元素和块级元素的区别
块元素的特性：1. 从上到下排列，侵行占位 2. width 属性默认 auto 3. width 和 height 决定元素容积 4. padding border margin 决定元素体积 5. overflow 决定内容超出容积后的处理方式 6. margin 的 left 和 right 可以设定为 auto 代表元素<div></div>
内联元素的特性：
1)从左到右排列，超过它们最近的块状祖先宽度时，换到新的一行
2)
对于行内替换元素
width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。 例如：img
对于行内非替换元素
width、 height不起作用，用line-height来控制高度。
padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。(《css权威指南》 P249)
margin左右作用起作用，上下不起作用，原因在于：行内非替换元素的外边距不会改变一个元素的行高（《css权威指南》 P227）。
7.
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
- static
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。根据 top，right，bottom，left这些偏移量。
- absolute
- 元素框从文档流完全删除，相对于 static 定位以外的第一个祖先元素进行定位。元素脱离原来的正常文档流，元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。根据 top，right，bottom，left这些偏移量。
- fixed
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
不包含在普通元素的队列之中，但是包含在浮动定位元素的队列中。
W3CSchool总结的很好http://www.w3school.com.cn/css/css_positioning_floating.asp
清楚浮动的方法：
1)用在父元素
.clear-box {
overflow: auto;
zoom: 1;
}
2)加在父元素所包含的带有浮动子元素的后面
<div style="clear:both"></div>
8.标签<ul>与<ol>的区别
ul是无序列表，所谓的无序列表只要举个例子，大家就会明白了。
●这是第一个列表
●这是第二个列表
●这是第三个列表
●这是第四个列表
ol是有序列表，同样举个例子。
2、这是第二个列表
3、这是第三个列表
4、这是第四个列表
这就是ul与ol的区别。
ul与ol前的符号是可以修改的。只需要修改它们的type值。
ul的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块
ol的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。
通过CSS也可以在将它们前的符号改为图片，这样列表显示就会更美观了。
background:orange;*background:blue;background:green!important;background:blue;background:orange;*background:green;background:orange;*background:green;_background:blue;background:orange;*background:green!important;*background:blue;1) width:100% 并不包含margin-left margin-right的属性值，直接取其父容器的宽度加上含margin-left /margin-right的值。
如果设置了margin那新的width值是容器的宽度加上margin的值。
（细心观察）就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。
2) width:auto包含margin-left/margin-right的属性值。
其值包含margin-left /margin-right的值。width:auto总是占据整行！！！
这其中margin的值已经包含其中了（也就是一整行）如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。
减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
测试以下代码：
<div style="width:100%;margin:0 100px;border:1px solid red;">aaaaaaa</div>
<div style="width:auto;margin:0 100px;border:1px solid red;">aaaaaaa</div>
11.http协议get和post的区别
（1）get是从服务器上获取数据，post是向服务器传送数据。
（1） 在客户端，Get方式在通过URL提交数据，数据在URL中可以看到；POST方式，数据放置在HTML HEADER内提交。
（2） 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
（2） GET方式提交的数据最多只能有1024字节，而POST则没有此限制。
（3） 安全性问题。正如在（1）中提到，使用 Get 的时候，参数会显示在地址栏上，而 Post 不会。所以，如果这些数据是中文数据而且是非敏感数据，那么使用 get；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用 post为好。
使用GET方法时，请求参数和对应的值附加在URL后面，利用一个问号（“?”）代表URL的结尾与请求参数的开始，传递参数长度受限制。例如，/index.jsp?id=100&op=bind。
POST方法将请求参数封装在HTTP请求数据中，以名称/值的形式出现，可以传输大量数据，可用来传送文件。
12.伪类与伪元素的区别
CSS 伪类用于向某些选择器添加特殊的效果。
伪类有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link{color: #FF0000} /* 未访问的链接 */a:visited{color: #00FF00} /* 已访问的链接 */a:hover{color: #FF00FF} /* 鼠标移动到链接上 */a:active{color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）。
