• 五月学习笔记


    1.

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

    这种语言在万维网上应用广泛,它往往被称为JavaScriptJScript,但实际上后两者是ECMA-262标准的实现和扩展。

    ECMA-262是一种标准,它是ECMAScript脚本语言的规范及标准。

    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> 声明引用 DTDDTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

    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是有序列表,同样举个例子。

      1、这是第一个列表
      2、这是第二个列表
      3、这是第三个列表
      4、这是第四个列表

    这就是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. auto;和100%;区别

    1) 100% 并不包含margin-left  margin-right的属性值,直接取其父容器的宽度加上含margin-left /margin-right的值。

        如果设置了margin那新的width值是容器的宽度加上margin的值。

      (细心观察)就会发现加了  margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。

    2) auto包含margin-left/margin-right的属性值。

        其值包含margin-left /margin-right的值。auto总是占据整行!!!

        这其中margin的值已经包含其中了(也就是一整行)如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。

        减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。

    测试以下代码:

    <div style="100%;margin:0 100px;border:1px solid red;">aaaaaaa</div>

    <div style="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能够访问产生的内容)。

    伪元素有: :first-line,:first-letter,:before,:after
  • 相关阅读:
    mysql备份与binlog
    linux释放cached
    linux下mysql迁移到其他分区
    java分析jvm常用指令
    Mac下安装WebStrom
    Final
    Spring 复习
    ubuntu 14.4安装java环境
    php复习
    java 重难点
  • 原文地址:https://www.cnblogs.com/mabelstyle/p/3704346.html
Copyright © 2020-2023  润新知