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內核