css+js+html基礎知識總結

時間 2019-11-12

標籤 css+js+html css html 基礎知識總結欄目 CSS 简体版

原文原文鏈接

css+js+html基礎知識總結

1、CSS相關

一、css的盒子模型：IE盒子模型、標準W3C盒子模型；javascript

二、CSS優先級機制:css

選擇器的優先權：!important>style(內聯樣式)>[id>class>tag]（選擇器）html

樣式的優先級：（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style前端

三、繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。html5

四、盒模型包括內容（content）、填充（padding）、邊界（margin）和邊框（border）四個方面的內容；java

五、CSS hack：因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同，以及CSS優先級對瀏覽器展示效果的影響，咱們能夠據此針對不一樣的瀏覽器情景來應用不一樣的CSS。CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack。node

2、JavaScript相關

一、做用域

變量的做用域：全局變量和局部變量;git

變量沒有在函數內聲明或者聲明的時候沒有帶var就是全局變量，擁有全局做用域，window對象的全部屬性擁有全局做用域；在代碼任何地方均可以訪問，函數內部聲明而且以var修飾的變量就是局部變量，只能在函數體內使用，函數的參數雖然沒有使用var但仍然是局部變量。github

二、js閉包

閉包就是可以讀取其餘函數局部變量的函數，並讓這些變量的值始終保持在內存中存在。web

三、數據類型

js的基本數據類型：number、string、Boolean、object、undefined；

（1）值類型：數值、布爾值、null、undefined。 （2）引用類型：對象、數組、函數。

四、繼承

js是經過原型和構造器實現繼承的。

   // 構造函數
   function Person(name, sex) {
       this.name = name;
       this.sex = sex;
   }
   // 定義Person的原型，原型中的屬性能夠被自定義對象引用
   Person.prototype = {
       getName: function() {
           return this.name;
       },
       getSex: function() {
           return this.sex;
       }
   }

這裏咱們把函數Person稱爲構造函數，也就是建立自定義對象的函數。能夠看出，JavaScript經過構造函數和原型的方式模擬實現了類的功能。

爲了證實prototype模版並非被拷貝到實例化的對象中，而是一種連接的方式，請看以下代碼：

function Person(name, sex) {
    this.name = name;
    this.sex = sex;
}
Person.prototype.age = 20;
var zhang = new Person("ZhangSan", "man");
console.log(zhang.age); // 20
// 覆蓋prototype中的age屬性
zhang.age = 19;
console.log(zhang.age); // 19
delete zhang.age;
// 在刪除實例屬性age後，此屬性值又從prototype中獲取
console.log(zhang.age); // 20

這種在JavaScript內部實現的隱藏的prototype連接，是JavaScript賴以生存的溫潤土壤，也是模擬實現繼承的基礎。

五、原型

每一個函數在建立的時候都自動添加了一個prototype屬性，這就是函數的原型，原型自己就是一個Object對象，原型自己就是一個Object對象，其實質是對一個對象的引用；

function A() {
    this.width = 10;
    this.data = [1,2,3];
    this.key = "this is A";
}
A._objectNum = 0;//定義A的屬性
A.prototype.say = function(){//給A的原型對象添加屬性
    alert("hello world")
}

六、cookie的屬性

在JavaScript裏，一個cookie就是一個字符串屬性，cookie有六個屬性，分別是name，value，expires（過時時間）,path（路徑），domain（域）和secure（安全）；

Cookie對象的屬性：
一、Name：獲取或設置Cookie的名稱。
二、Value：獲取或設置Cookie的Value。
三、Expires：獲取或設置Cookie的過時的日期和事件。
四、Version：獲取或設置Cookie的符合HTTP維護狀態的版本。

Cookie對象的方法：
一、Add：增長Cookie變量。
二、Clear：清除Cookie集合內的變量。
三、Get：經過變量名稱或索引獲得Cookie的變量值。
四、Remove：經過Cookie變量名稱或索引刪除Cookie對象。

cookie的獲取方式：

<script language="JavaScript" type="text/javascript"> 
<!-- 
//設置兩個cookie 
document.cookie="userId=828"; 
document.cookie="userName=hulk"; 
//獲取cookie字符串 
var strCookie=document.cookie; 
//將多cookie切割爲多個名/值對 
var arrCookie=strCookie.split("; "); 
var userId; 
//遍歷cookie數組，處理每一個cookie對 
for(var i=0;i<arrCookie.length;i++){ 
var arr=arrCookie[i].split("="); 
//找到名稱爲userId的cookie，並返回它的值 
if("userId"==arr[0]){ 
userId=arr[1]; 
break; 
} 
} 
alert(userId); 
//--> 
</script>

七、node.js適應的場景

高併發，聊天，實時消息推送；

八、事件偵聽器

寫一個通用的事件偵聽器函數。

 // event(事件)工具集，來源：github.com/markyun
    markyun.Event = {
        // 頁面加載完成後
        readyEvent : function(fn) {
            if (fn==null) {
                fn=document;
            }
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = fn;
            } else {
                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },
        // 視能力分別使用dom0||dom2||IE方式 來綁定事件
        // 參數： 操做的元素,事件名稱 ,事件處理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件類型、須要執行的函數、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默認行爲
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 獲取事件目標
        getTarget : function(event) {
            return event.target || event.srcElement;
        },
        // 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
        getEvent : function(e) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

九、內存泄露

javascript具備自動垃圾回收機制，一旦數據再也不使用，能夠將其設爲"null"來釋放引用

堆內存存放引用值，棧內存存放固定類型值。「引用」是一個指向對象實際位置的指針。

在這裏需注意的是，引用指向的是具體的對象，而不是另外一個引用。

循環引用

　　一個很簡單的例子：一個DOM對象被一個Javascript對象引用，與此同時又引用同一個或其它的Javascript對象，這個DOM對象可能會引起內存泄露。這個DOM對象的引用將不會在腳本中止的時候被垃圾回收器回收。要想破壞循環引用，引用DOM元素的對象或DOM對象的引用須要被賦值爲null。

閉包

在閉包中引入閉包外部的變量時，當閉包結束時此對象沒法被垃圾回收（GC）。

var a = function() {
  var largeStr = new Array(1000000).join('x');
  return function() {
    return largeStr;
  }
}();

DOM泄露

當原有的COM被移除時，子結點引用沒有被移除則沒法回收。

var select = document.querySelector;
var treeRef = select('#tree');

//在COM樹中leafRef是treeFre的一個子結點
var leafRef = select('#leaf'); 
var body = select('body');

body.removeChild(treeRef);

//#tree不能被回收入，由於treeRef還在
//解決方法:
treeRef = null;

//tree還不能被回收，由於葉子結果leafRef還在
leafRef = null;

//如今#tree能夠被釋放了。

Timers計（定）時器泄露

定時器也是常見產生內存泄露的地方：

for (var i = 0; i < 90000; i++) {
  var buggyObject = {
    callAgain: function() {
      var ref = this;
      var val = setTimeout(function() {
        ref.callAgain();
      }, 90000);
    }
  }

  buggyObject.callAgain();
  //雖然你想回收可是timer還在
  buggyObject = null;
}

調試內存

Chrome自帶的內存調試工具能夠很方便地查看內存使用狀況和內存泄露：
在 Timeline -> Memory 點擊record便可。

3、HTML

Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，
      用什麼文檔類型 規範來解析這個文檔。

（2）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

（1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，
  好比div默認display屬性值爲「block」，成爲「塊級」元素；
  span默認display屬性值爲「inline」，是「行內」元素。

（2）行內元素有：a b span img input select strong（強調的語氣）
 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素：
<br> <hr> <img> <input> <link> <meta>
不爲人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

link 和@import 的區別是？

（1）link屬於XHTML標籤，而@import是CSS提供的;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;

（4）link方式的樣式的權重 高於@import的權重.

瀏覽器的內核分別是什麼?

 * IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

  浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

  漸進識別的方式，從整體中逐漸排除局部。

  首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
  接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
       background-color:#f1ee18;/*全部識別*/
      .background-color:#00deff\9; /*IE六、七、8識別*/
      +background-color:#a200ff;/*IE六、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/
      }

*  IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
   也可使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性.
   解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;
  Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
  可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 繪畫 canvas
  用於媒介回放的 video 和 audio 元素
  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
  sessionStorage 的數據在瀏覽器關閉後自動刪除

  語意化更好的內容元素，好比 article、footer、header、nav、section
  表單控件，calendar、date、time、email、url、search
  新的技術webworker, websockt, Geolocation

* 移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]>
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
   <![endif]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素

語義化的理解？

用正確的標籤作正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

HTML5的離線儲存？

localStorage 長期存儲數據，瀏覽器關閉後數據不丟失； sessionStorage  數據在瀏覽器關閉後自動刪除。

(寫)描述一段語義的html代碼吧。

（HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）
 就是基於語義化設計原則）
    < div id="header">
    < h1>標題< /h1>
    < h2>專一Web前端技術< /h2>
    < /div>

iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件； *iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript 動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或下某個input 設置爲 autocomplete=off。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
```
調用localstorge、cookies等本地存儲方式
```

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。