五月学习笔记

时间 2019-11-13

标签五月 5月学习笔记繁體版

原文原文链接

1.css

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）经过ECMA-262标准化的脚本程序设计语言。html

这种语言在万维网上应用普遍，它每每被称为JavaScript或JScript，但实际上后二者是ECMA-262标准的实现和扩展。web

ECMA-262是一种标准，它是ECMAScript脚本语言的规范及标准。浏览器

ECMAScript是脚本程序设计语言。安全

Javscript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。服务器

2.框架

W3C DOM 标准被分为 3 个不一样的部分：jsp

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

下面只关心HTML DOM。post

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（零）关闭分出的这个窗口

文档类型的做用

文档类型即<!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)从左到右排列，超过它们最近的块状祖先宽度时，换到新的一行

　　对于行内替换元素

　　width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。例如：img　　

　　对于行内非替换元素

　　width、 height不起做用，用line-height来控制高度。

　　padding左右起做用，上下不会影响行高，可是对于有背景色和内边距的行内非替换元素，背景能够向元素上下延伸，可是行高没有改变。所以视觉效果就是与前面的行重叠。(《css权威指南》 P249)

　　margin左右做用起做用，上下不起做用，缘由在于：行内非替换元素的外边距不会改变一个元素的行高（《css权威指南》 P227）。

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)加在父元素所包含的带有浮动子元素的后面

8.标签<ul>与<ol>的区别

ul是无序列表，所谓的无序列表只要举个例子，你们就会明白了。
     ●这是第一个列表
     ●这是第二个列表
     ●这是第三个列表
     ●这是第四个列表
   ol是有序列表，一样举个例子。

  一、这是第一个列表
  二、这是第二个列表
  三、这是第三个列表
  四、这是第四个列表

这就是ul与ol的区别。
ul与ol前的符号是能够修改的。只须要修改它们的type值。
ul的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块
ol的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。
经过CSS也能够在将它们前的符号改成图片，这样列表显示就会更美观了。

9.!important

区别不一样浏览器，CSS hack写法：

区别IE6与FF：

 
     background 
     :orange;* 
     background 
     : 
     blue 
     ; 
    

区别IE6与IE7：

 
     background 
     : 
     green 
     !important 
     ; 
     background 
     : 
     blue 
     ; 
    

区别IE7与FF：

 
     background 
     :orange;* 
     background 
     : 
     green 
     ; 
    

区别FF，IE7，IE6：

 
      background 
      :orange;* 
      background 
      : 
      green 
      ; 
      _background 
      : 
      blue 
      ; 
     
 
      background 
      :orange;* 
      background 
      : 
      green 
      !important 
      ;* 
      background 
      : 
      blue 
      ; 
     

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*；不能识别 !important;

IE7能识别*，能识别!important;

FF不能识别*，但能识别!important;

10. width:auto;和width:100%;区别

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 的浏览器中，连接的不一样状态均可以不一样的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

 {color: #FF0000}		/* 未访问的连接 */
 {color: #00FF00}	/* 已访问的连接 */
 {color: #FF00FF}	/* 鼠标移动到连接上 */
 {color: #0000FF}	/* 选定的连接 */a:linka:visiteda:hovera:active

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 以后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 以后，才是有效的。

提示：伪类名称对大小写不敏感。

伪元素是创造关于文档语言可以指定的文档树以外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素容许设计师引用它们，不然这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after可以访问产生的内容）。

伪元素有： :first-line，:first-letter，:before，:after