前端基礎知識積累

時間 2019-11-21

標籤前端基礎知識積累简体版

原文原文鏈接

一、<!DOCTYPE>標籤的定義與用法。javascript

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。css

<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。html

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。 HTML5 不基於 SGML，因此不須要引用 DTD。提示：請始終向 HTML 文檔添加 <!DOCTYPE> 聲明，這樣瀏覽器才能獲知文檔類型。java

二、行內元素和塊級元素都有哪些？（能夠參考下面的link，回答的比較全面） http://blog.sina.com.cn/s/blog_72c8c1150100q76q.htmlweb

摘抄積累一下：記住對行內元素設置寬度width 無效。設置高度height 無效，能夠經過line-height來設置。設置margin 只有左右margin有效，上下無效。設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的，看圖上效果就知道了ajax

text-align屬性是二者表現的又有不一樣之處正則表達式

三、這個針對不一樣的瀏覽器寫不一樣的CSS code的過程，就叫CSS hack! IE8 最新css hack： "\9"　例:"border:1px \9;".這裏的"\9"能夠區別全部IE和FireFox.（只針對IE9 Hack） "\0"　IE8識別，IE六、IE7不能. "*"　IE六、IE7能夠識別.IE八、FireFox不能. ""　IE6能夠識別"",IE七、IE八、FireFox不能.編程

百度百科裏面說明的很清楚了：http://baike.baidu.com/view/1119452.htm跨域

四、css的層疊（1）、權重（2）、繼承數組

做者樣式做者能夠在他的HTML文件中肯定一個外來的、獨立的CSS文件做者能夠將CSS信息包含在HTML文件內做者能夠在一個HTML指令內結合CSS指令，這樣作通常是爲了在一個特殊狀況下將整體的CSS指令抵消掉

讀者樣式讀者能夠在他的瀏覽器內設立一個地區性的CSS文件。這個CSS文件能夠用在全部的HTML文件上。假如做者的CSS文件與讀者的相沖突，那麼讀者能夠肯定他想使用哪一個

瀏覽器的樣式假如外部沒有特別指定一個樣式的話，通常瀏覽器本身有一個內在的樣式

上面是一些答案，w3cshool裏面的說明是： 層疊次序 當同一個 HTML 元素被不止一個樣式定義時，會使用哪一個樣式呢？通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。一、瀏覽器缺省設置二、外部樣式表三、內部樣式表（位於 <head> 標籤內部）四、內聯樣式（在 HTML 元素內部）

抽時間寫個例子，測測這些標記的有啥不一樣。

五、 position值都有哪些，CSS3都有哪些新內容.

六、瞭解瀏覽器的內核：瀏覽器最重要或者說核心的部分是「Rendering Engine」，可大概譯爲「解釋引擎」，不過咱們通常習慣將之稱爲「瀏覽器內核」。負責對網頁語法的解釋（如HTML、JavaScript）並渲染（顯示）網頁。因此，一般所謂的瀏覽器內核也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不一樣的瀏覽器內核對網頁編寫語法的解釋也有不一樣，所以同一網頁在不一樣的內核的瀏覽器裏的渲染（顯示）效果也可能不一樣，這也是網頁編寫者須要在不一樣內核的瀏覽器中測試網頁顯示效果的緣由。瀏覽器內核不少，若是加上全部的幾乎沒有什麼人在用的非商業的免費內核，那麼可能大約有10款以上甚至更多，不過一般咱們比較常見的大約只四種。

七、正則表達式： ^[1][358][0-9]{9}$ 電話號碼的匹配 ^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$ 郵箱的匹配（還沒驗證，只是找到的一個參考答案，還會抽空驗證一下的）

八、關於cookie的基礎：

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

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

九、關於節點的操做：http://blog.sina.com.cn/s/blog_a564ddcd0101dws9.html 這個blog介紹的很詳細，能夠參考。

十、Sizzle是一個純javascript CSS選擇器引擎。（有空看看源碼http://www.oschina.net/p/sizzle/） Sizzle是一個純javascript CSS選擇器引擎。通常選擇器的匹配模式(包括jq1.2以前)，都是一個順序的思惟方式，在須要遞進式匹配時，好比$(‘div span’) 這樣的匹配時，執行的操做都是先匹配頁面中div而後再匹配它的節點下的span標籤，以後返回結果。 Sizzle則採起了相反Right To Left的實現方式，先搜尋頁面中全部的span標籤，再其後的操做中才去判斷它的父節點(包括父節點以上)是否爲div，是則壓入數組，不然pass，進入下一判斷，最後返回該操做序列。

十一、關於javascript的很是基礎的知識積累：（1）. HTTP協議的狀態消息都有哪些?(如200、302對應的描述)

（2）. AJAX是什麼? AJAX的交互模型(流程)? AJAX跨域的解決辦法? ajax是什麼？ AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。 AJAX 不是新的編程語言，而是一種使用現有標準的新方法。 AJAX 是與服務器交換數據並更新部分網頁的藝術，在不從新加載整個頁面的狀況下。

（流程是什麼）參考的答案（能夠試試一下）： 1--啓動獲取XMlHttpRequest對象 2--open 打開url通道，並設置異步傳輸 3--send 發送數據到服務器 4--服務器接受數據並處理，處理完成後返回結果 5--客戶端接收服務器端返回

應該能夠判斷狀態的

跨域的解決辦法如今還有一點看不懂，由於最基礎的還沒熟悉

（3）. 同步和異步的區別?

十二、你真的瞭解HTML嗎？（摘抄過來答案） http://my.oschina.net/u/933915/blog/309477

1三、修改的代碼：