web前端開發筆記（1）

時間 2019-11-26

標籤 web 前端開發筆記欄目 HTML 简体版

原文原文鏈接

1、HTML標籤書寫有哪些規範？javascript

頁面編碼。
文檔聲明。
關鍵字與描述。
行內元素不能包含塊級元素。
a標籤不能嵌套a標籤。
標籤名和屬性必須用小寫字母書寫，屬性必須加引號，標籤必須閉合，單標籤頁必須閉合。
頁面中不要用 進行縮進，如需縮進，用css控制。
html標籤使用必須語義化。
要爲img標籤填寫alt和title屬性。

2、Http狀態碼css

　　200 ok：
　　一切正常，對GET和POST請求的應答文檔跟在後面html

　　304 Not Modified：
　　客戶端有緩衝的文檔併發出了一個條件性的請求（通常是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩衝的文檔還能夠繼續使用。前端

　　400 Bad Request：
　　請求出現語法錯誤。java

　　403 Forbidden：
　　資源不可用。web

　　404 Not Found：
　　沒法找到指定位置的資源。apache

　　500 Internal Server Error：
　　服務器遇到了意料不到的狀況，不能完成客戶的請求。gulp

　　501 Not Implemented：
　　服務器不支持實現請求所須要的功能。例如，客戶發出了一個服務器不支持的PUT請求。跨域

3、css有幾種引入方式？每一種具備哪些特色？瀏覽器

標籤內引入：優先級最高，冗餘代碼多，代碼量大，不易維護。
頭部引入：加載速度快，沒有服務器請求壓力，相對於單頁代碼量少。代碼量大，不易先後臺溝通，不易改版與維護。
外部引入：一個css文件可控制多個頁面，代碼簡潔，易於分工協做。有效利用緩存機制，外部引入中的href屬性會給服務器形成請求的壓力。

4、聖盃佈局

　　實現聖盃佈局實現的是三欄佈局，兩邊的盒子寬度固定，中間盒子寬度自適應。

　　聖盃佈局：寫結構時要先寫中間盒子，由於中間盒子要優先渲染。經過浮動，定位來實現。

5、常見兼容性問題

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

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

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

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

　　* 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 {}

6、跨域

　　跨域指的是瀏覽器不能執行其它網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器對javascript施加的安全限制。

　　解決辦法：設置本域apache服務器的反向代理。

7、js和java的關係

　　java是一種嚴格的面向對象的程序設計語言，經常使用於開發基於Internet的應用程序。javascript是一種腳本語言，經常使用語網頁中加強交互性和頁面效果，以及進行數據校驗等。java是sun公司的產品，而javascript是NetScape公司推出的，兩者沒有任何聯繫。

8、css樣式合併

　　CSS樣式合併，指的是一些不可分離的樣式（按鈕，圖標等），將他們公共的樣式部分進行合併，非公共的再次獨立出來，以減少CSS文件的大小。

9、盒子模型

　　外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型。

　　ie 盒子模型和標準 w3c 盒子模型。

　　標準 w3c 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分。

　　ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不一樣的是：ie 盒子模型的 content 部分包含了 border 和 pading。

10、js引入方式

使用<script></script>標籤直接嵌入網頁，通常放在head標籤內，亦能夠放在body標籤內，只要保證這些代碼在被調用前已讀取並加載到內存便可。
使用外部的js文件，這樣的好處是實現表現行爲的分離、w3c很是提倡頁面、樣式、行爲都分離，這樣頁面結構清晰，方便維護和團隊的開發。在外部js文件中直接寫js代碼，引入方式是：<script type="text/javascript" src="a.js"></script>
直接做爲某個標籤的事件代碼：<input type="button" value="肯定" onclick="documet.write('hello')"/>

11、js命名規範

區別大小寫。
首字符必須是字母、下劃線或美圓符號。
除了首字符之外的字符，能夠由數字、字母、下劃線、美圓符號等組成。
不容許包含空格。
不能以關鍵字或保留字命名。
變量名必須爲小寫字母。
類的命名使用駱駝命名規則。
簡寫單詞不能使用大寫名稱做爲變量名。
方法的命名必須爲動詞或動詞短語。
公有類的命名必須使用混合名稱命名。
css變量的命名必須使用其對應的相同的公共類變量。
私有類的變量屬性成員必須使用混合名稱命名，並在前面劃下劃線。
變量若是設置爲私有，則前面必須添加下劃線。
通用的變量必須使用與其名字一致的類型命名。
全部的變量名必須使用英文名稱。
變量若有較廣的做用域，必須使用全局變量，此時能夠設計成一個類的成員。相對的如做用域較小或爲私有變量則使用簡潔的單詞命名。
若是變量有其隱含的返回值，則避免使用其類似的方法。
公有變量必須清楚的表達其自身的屬性，避免字義含糊不清。
類構造函數可使用擴展其基類的名稱命名，這樣能夠正確、迅速的找到其基類的名稱。

12、js書寫規範

文件編碼統一爲UTF-8。
書寫過程當中，每行代碼結束必須有分號。
庫引入，原則上僅引入jQuery庫。
代碼結構明瞭化，加適量註釋，提升函數重用率。
注重與html分離，減小reflow，注重性能。
把外部js文件放在html底部，</body>前面。
優化循環。循環體中如有DOM操做，應該把DOM操做提到循環體外，在同一做用域內，DOM選擇賦值給一局部變量。
避免混亂，建議在html中使用雙引號，在js中使用單引號。
使用更簡單的格式寫innerscript。
避免混入其它技術，js不直接控制css樣式的設置，控制classname。
避免全局變量。
聲明變量老是用var。
獲取對象屬性的時候用方括號。
避免使用eval()方法。
不要省略 " 和 {}。

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

<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。
嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

十4、js數據類型有哪些

Number 數字類型
String 字符串類型
Boolean 布爾類型
Function 函數
Object 對象
Null 空值
Undefined 沒有定義類型

十5、瀏覽器的內核分別是什麼？

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

十6、語義化的理解

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

十7、談談this對象的理解

　　this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。可是有一個總原則，那就是this指的是調用函數的那個對象。 this通常狀況下：是全局對象Global。做爲方法調用，那麼this就是指這個對象。

十8、規避javascript多人開發函數重名問題

能夠開發前規定命名規範，根據不一樣開發人員開發的功能在函數前加前綴
將每一個開發人員的函數封裝到類中，調用的時候就調用類的函數，即便函數重名只要類名不重複就ok

十9、你如何對網站的文件和資源進行優化？

　　解決方案有：文件合併、文件最小化/文件壓縮、使用CDN託管、緩存的使用（多個域名提供緩存）等等。
　　目前有不少前端自動化工具備整合文件的功能，好比gulp，我曾經寫過一篇利用gulp解決微信瀏覽器緩存問題的文章，裏面有寫到如何合併壓縮css、js文件，此類文章網上也有不少，你們有興趣能夠去看一下。

二10、什麼是全局變量，什麼是局部變量。

　　將函數理解爲盒子。

　　在函數內聲明的變量，就是局部變量，在函數外部不能訪問。

　　在函數外部聲明的變量，就是全局變量，在函數內部能夠訪問。

歡迎留言~~