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

时间：2023-01-01 14:19:36
display属性 :
block :　CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行   可以定义高度和宽度
none :　CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :　CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行

overflow

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

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

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

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> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。

在html中网页可以看成一个立体的空间，一个完整的页面是由很多个页面堆积形成的，如下图所示
html/css/js 学习笔记 - 牛客网试卷:前端工程师能力评估 
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
1
2
3
4
5
6
7
8
9
10
11
12
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
1
2
3
4
5
6
7
8
9
<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:当输入获得焦点后，产生该文件

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

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和Trident
Firefox便是使用的Gecko内核  微软IE系列使用的是Trident内核









														
		
html/css/js 学习笔记  - 牛客网试卷:前端工程师能力评估的更多相关文章
	

    

  1. 
牛客网试卷： 京东2019校招笔试Java开发工程师笔试题&lpar;1-&rpar;
		
    1.在软件开发过程中,我们可以采用不同的过程模型,下列有关 增量模型描述正确的是() A 是一种线性开发模型,具有不可回溯性 B 把待开发的软件系统模块化,将每个模块作为一个增量组件,从而分批次地分析 ...
    
		
    2. 
						
  2. 
牛客网《BAT面试算法精品课》学习笔记
		
    目录 牛客网<BAT面试算法精品课>学习笔记 牛客网<BAT面试算法精品课>笔记一:排序 牛客网<BAT面试算法精品课>笔记二:字符串 牛客网<BAT面试算法 ...
    
		
    3. 
						
  3. 
牛客网论坛最具争议的Java面试成神笔记，牛客网下载量已突破十万
		
    程序员内部一直流传这一句话: 面试看牛客 刷题看力扣 牛客网作为国内最牛的程序员面试网站,一直在程序员内部颇负盛名,其中用户更是卧虎藏龙! 有国内一线大厂的企业招聘 还有一些低调的互联网大牛实力就和天 ...
    
		
    4. 
						
  4. 
牛客网&lowbar;Go语言相关练习&lowbar;判断&amp&semi;选择题（6）
		
    本文共34道题目 一.判断题 此题考查编码规范. 反射最常见的使用场景是做对象的序列化(serialization,有时候也叫Marshal & Unmarshal). 例如:Go语言标准库的 ...
    
		
    5. 
						
  5. 
牛客网 Java 工程师能力评估 20 题 - 详解
		
    牛客网 Java 工程师能力评估 20 题 - 详解 不知在看博客的你是否知道 牛客网,不知道就太落后了,分享给你 : 牛客网 此 20 题,绝对不只是 20 题! 免责声明:本博客为学习笔记,如有侵 ...
    
		
    6. 
						
  6. 
基于jquery的插件turn&period;js学习笔记
		
    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it  ...
    
		
    7. 
						
  7. 
js学习笔记：webpack基础入门（一）
		
    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
    
		
    8. 
						
  8. 
Vue&period;js学习笔记（2）vue-router
		
    vue中vue-router的使用:
    
		
    9. 
						
  9. 
牛客网 --java问答题
		
    http://www.nowcoder.com/ 主要是自己什么都不怎么会.在这里可以学习很多的! 第一天看题自己回答,第二天看牛客网的答案! 1 什么是Java虚拟机?为什么Java被称作是“平台无 ...
    
		
    10. 
		


随机推荐
	

    

  1. 
【WPF】Winform调用WPF窗体注意事项
			
     1.需要添加一些引用 2.调用处使用如下方法进行调用 Window win= new Window(); ElementHost.EnableModelessKeyboardInterop(win) ...
    
			
    2. 
						
  2. 
URAL 1085 Meeting（最短路）
			
    Meeting Time limit: 2.0 secondMemory limit: 64 MB K friends has decided to meet in order to celebrat ...
    
			
    3. 
						
  3. 
［terry笔记］Oracle数据泵－schema导入导出
			
    数据泵是10g推出的功能,个人倒数据比较喜欢用数据泵. 其导入的时候利用remap参数很方便转换表空间以及schema,并且可以忽略服务端与客户端字符集问题(exp/imp需要排查字符集). 数据泵也 ...
    
			
    4. 
						
  4. 
js 倒计时 button不可用
			
    function showtime() { fun_timedown(5); } function fun_timedown(time) { $("#timedown").val( ...
    
			
    5. 
						
  5. 
关于 Swift
			
    摘自:http://numbbbbb.gitbooks.io/-the-swift-programming-language-/chapter1/01_swift.html Swift 是一种新的编程 ...
    
			
    6. 
						
  6. 
jsp的原则执行
			
    什么时候server一对JSP页面运行时,第一个请求,server向上JSP引擎首先JSP页的文件翻译成Java文件.那么这Java文件编译的字节码文件..而当这个JSP页面再次被请求运行时,JSP引 ...
    
			
    7. 
						
  7. 
StringBuffer和String的相互转换
			
    1:用法: * A:String -- >StringBuffer * a:通过构造方法 * b:通过append()方法 * B:StringBuffer --> String * a: ...
    
			
    8. 
						
  8. 
【Python基础】lpthw - Exercise 39 字典
			
    1. 字典和列表的区别 对于列表,它是一些项的有序排列,只能通过数值来进行索引:对于字典,则可以通过许多东西进行索引,它采用键-值映射的方式,不存在一个特定的顺序,因此不能用类似列表的数值索引,但它的 ...
    
			
    9. 
						
  9. 
MySQL数据库的各种存储引擎详解
			
    原文来自:MySQL数据库的各种存储引擎详解   MySQL有多种存储引擎,每种存储引擎有各自的优缺点,大家可以择优选择使用: MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB ...
    
			
    10. 
						
  10. 
关于EditText一些效果
			
    效果如图,由TextView  View(竖线) EditText与ImageView组成 首先更改draw able中shape代码 <?xml version="1.0" ...
    
			
    11. 
			
相关文章