五月学习笔记
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能够访问产生的内容)。