html/css/js 学习笔记 - 牛客网试卷:前端工程师能力评估

时间 2019-11-10

标签 html css 学习笔记试卷前端工程师能力评估栏目 HTML 繁體版

原文原文链接

display属性 :

block :　CSS1 块对象的默认值。将对象强制做为块对象呈递，为对象以后添加新行   能够定义高度和宽度

none :　CSS1 隐藏对象。与 visibility 属性的hidden值不一样，其不为被隐藏的对象保留其物理空间

inline :　CSS1 内联对象的默认值。将对象强制做为内联对象呈递，从对象中删除行

overflowjavascript

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。css

<a href="/XXXX" target="_blank" >打开新的网页</a>html

_self 默认。在相同的框架中打开被连接文档。java

Flash提供了ExternalInterface接口与JavaScript通讯

两个方法：call和addCallback

做用：call让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片没法正常显示时给用户提供文字说明使其了解图像信息。

js 两种写法

document.getElementById("input").style.backgroundColor = "red";
inputElement.style.backgroundColor = "#FF0000";

<audio> 标签订义声音，好比音乐或其余音频流。
<canvas> 标签订义图形，好比图表和其余图像。
<menu> 标签订义命令的列表或菜单。
<command> 标签能够定义命令按钮，好比单选按钮、复选框或按钮。node

在html中网页能够当作一个立体的空间，一个完整的页面是由不少个页面堆积造成的，以下图所示

CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

◆position:static　无定位

该属性值是全部元素定位的默认状况，在通常状况下，咱们不须要特别的去声明它，但有时候遇到继承的状况，咱们不肯意见到元素所继承的属性影响自己，从而能够用position:static取消继承，即还原元素定位的默认值。

◆position:absolute　绝对定位

使用position:absolute，可以很准确的将元素移动到你想要的位置，

◆position:fixed　相对于窗口的固定定位

这个定位属性值是什么意思呢？元素的定位方式同absolute相似，但它的包含块是视区自己。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它容许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。咱们也见过类似的效果，但大都数效果不是经过CSS来实现了，而是应用了JS脚本。

请特别注意，IE6不支持CSS中的position:fixed属性。真的很是遗憾，要否则咱们就能够试试这种酷酷的效果了。

◆position:relative　相对定位

所谓相对定位究竟是什么意思呢，是基于哪里的相对呢？咱们须要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，咱们就须要设置不一样的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

只要协议、域名、端口有任何一个不一样, 都被看成是不一样的域。

就须要jsonp

下面这个JS程序的输出是：

0 1 0

 
             function Foo() { 
            
             var i =  
             0 
             ; 
            
             return 
             function() { 
            
             console.log(i++); 
            
             } 
            
             } 
            
             var f1 = Foo(), 
            
             f2 = Foo(); 
            
             f1(); 
            
             f1(); 
            
             f2();

（1）Function是引用类型：保存在堆中，变量f1,f2是保存在栈中；

（2）闭包：一个函数（产生新的做用域）定义的局部变量、子函数的做用域在函数内，可是一旦离开了这个函数，局部变量就没法访问，全部经过返回子函数到一个变量f1的方法，让

f1指向堆中的函数做用域，这样可使用局部变量i.

第一次f1() : i++ 因此 0

第二次f1() : 执行的是子函数 Function(){ ..},输出的是父函数的 i=1,再自加 i =2;

第一次f2() : 同第一次f1(),不一样的是 f2指向堆中一个新的对象 function(){ ...},全部此i非彼i,输出i=0;

这段代码的运行结果:

2 1

 
             <SCRIPT LANGUAGE= 
             "JavaScript" 
             > 
            
             var bb =  
             1 
             ; 
            
             function aa(bb) { 
            
             bb =  
             2 
             ; 
            
             alert(bb); 
            
             }; 
            
             aa(bb); 
            
             alert(bb); 
            
             </SCRIPT>

函数体内，bb并无使用var来定义，按理说这个bb在预处理的时候应该是window的属性, 但在这里，函数声明的时候，带了一个参数bb，也就是至关于在函数体内声明了var bb。
因此，函数里的bb就是函数活动对象的属性。因此函数执行时会输出2。函数执行完后，函数的活动对象被销毁，也就是局部的这个bb被删除了，执行流进入到window，再输出bb，值就是1了。
若是声明函数时，把参数那里的bb去掉，这段代码执行起来，结果就是弹出 2 2





一个有效的javascript变量定义规则

_$te$t2

第一个字符必须是一个字母、下划线（_）或一个美圆符号（$）；其余字符能够是字母、下划线、美圆符号或数字。

有关javascript系统方法的描述

parseFloat方法：该方法将一个字符串转换成对应的小数

isNaN方法：该方法用于检测参数是否不是数值型，若是不是数值，返回true

escape方法： 该方法返回对一个字符串编码后的结果字符串

eval方法：该方法将某个参数字符串做为一个JavaScript执行





javascript常见事件的触发

onBlur:当失去输入焦点后产生该事件

onFocus:当输入得到焦点后，产生该文件json

onchange:当文字值改变时，产生该事件canvas

onselect:当文字加亮后，产生该事件数组

onClick：当组件被点击时产生的事件浏览器

HTML的Doctype和严格模式与混杂模式的描述闭包

1.<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
2.严格模式的排版和 JS 运做模式是以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。
3.DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

JavaScript中 call和apply的描述

两者只有参数传递方式不一样

call第一个参数为this, 其它参数依次排在后面

apply只有两个参数,第二个参数是一个数组function add(c, d){

return this.a + this.b + c + d; 
} 
var o = {a:1, b:3}; 
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 







border:none以及border:0的区别

1.效果

border-style:none;//无边框

border-width:0;//边框宽度为0px

2.区别

（1）性能差别

border:0;浏览器对border-width、border-color进行渲染，占用内存。

border:none;浏览器不进行渲染，不占用内存。

Chrome：

border:none;>> border:initial none initial;

border:0;>> border:0 initial initial ;

1 CSS Sprites在国内不少人叫css精灵，是一种网页图片应用处理方式。2 它容许你将一个页面涉及到的全部零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。3 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字精确的定位出背景图片的位置。4 利用CSS Sprites能很好地减小网页的http请求，从而大大的提升页面的性能，这也是CSS Sprites最大的优势，也是其被普遍传播和应用的主要缘由；5 CSS Sprites能减小图片的字节，曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。6 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了，不须要对每个小元素进行命名，从而提升了网页的制做效率。7 更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起来更加方便。Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome，Apple手机的默认浏览器，Android手机的默认浏览器三大浏览器内核 Wekbit Gecko和TridentFirefox即是使用的Gecko内核  微软IE系列使用的是Trident内核