關於前端應該知道的5個小知識

前端入門到精通發表於2018-06-16
前端

1.關於計算機的冷知識你知道嗎？

Windows滑鼠指標的箭頭圖案是不對稱的

關於前端應該知道的5個小知識

451錯誤，是一種在網站訪問過程中，較為少見的錯誤提示。其通常用來代表“因法律原因而被官方審查禁止訪問”的內容

關於前端應該知道的5個小知識

2.你知道瀏覽器位址列可以執行程式碼嗎？

(1).瀏覽器位址列執行JavaScript程式碼

javascript:alert('hello 1802:)');瀏覽器彈出框輸出輸出hello 1802;

(2).瀏覽器位址列執行HTML程式碼

data:text/html,<h1>Hello, 1802!</h1>瀏覽器頁面輸出hello 1802;

(3).瀏覽器位址列執行HTML程式碼

data:text/html, <html contenteditable>瀏覽器頁面變成可編輯頁面

歸根結底多虧了HTML5中新加的contenteditable屬性，

元素的內容成為可編輯狀態，可將瀏覽器頁面變成記事本的功能.

3.你清楚這些區別嗎?

(1).display:none與visibility:hidden的區別是什麼？

display : 隱藏對應的元素但不擠佔該元素原來的空間。

visibility: 隱藏對應的元素並且擠佔該元素原來的空間。

display:none屬性後，元素（物件）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性後，HTML元素（物件）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。

(2).CSS中link和@import的區別是

@import只有在ie5以上才可以被識別，而link是html標籤，不存在瀏覽器相容性問題

Link引入樣式的權重大於@import的引用（@import是將引用的樣式匯入到當前的頁面中）

4.HTML常見相容性問題

1). 雙邊距BUG float引起的 使用display

2). 3畫素問題 使用float引起的 使用dislpay:inline -3px

3). z-index問題 給父級新增position:relative

4). Min-height 最小高度 ！Important 解決

5). 為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

關於前端應該知道的5個小知識

6). IE5-8不支援opacity，解決辦法：

.opacity {

opacity: 0.4

filter: alpha(opacity=60); /* for IE5-7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

}

7). IE6不支援PNG透明背景，解決辦法: IE6下使用gif圖片

5.簡要了解主流框架和框架鼻祖YUI

三大主流框架：vue 、React、AngularJS

關於前端應該知道的5個小知識

框架鼻祖 YUI 也有自己的 JavaScript 類庫，DOM 操作和效果處理也還比較方便，功能和控制元件也很齊全，但是相比 jQuery 和 Ext JS 顯得比較中庸一些。隨著 Yahoo!的沒落，YUI 的呼聲也逐漸被新起的框架淹沒，想來也讓人惋惜。

小編學習

最近有很多想學習前端開發，他們問我有沒有什麼好的web前端學習資料，我本是一名前端程式設計師，對於web前端，網頁製作這方面的資料我肯定是有的啦！

web前端資料學習群：618522268

為了感謝大家的支援，今天我在這裡統一說下吧，關注公眾號：‘web前端EDU'，就可以領取上全套視訊學習資料！


相關文章