前端現在已經被玩壞了，各種酷炫的效果已經應接不暇，今天小編給大家帶來一波有些人甚至前所未見的冷門知識點，一起開看看吧。

1.瀏覽器地址欄運行JavaScript代碼

這個還不算冷門，一些人都知道的。用法是:JavaScript:+執行的語句。

例如:地址欄輸入:

javascript:alert("hello Surprise)");

你會看到如下所示:

需要注意的是，如果你拷貝的話，瀏覽器地址欄會默認去掉javascript，你需要手動自行輸入，才能正確執行。這個操作可以幫助我們省很多步驟，請讀者自行挖掘。

2.瀏覽器地址欄運行HTML代碼

在非IE內核的瀏覽器地址欄可以直接運行HTML代碼，這個很少人試過吧。

比如：我們在地址欄中輸入：

data:text/html,

Hello, world!

你會看到這樣的現象:

通過該現象，你知道嗎？可以把瀏覽器當做編輯器來使用，輸入下面代碼即可做到:

data:text/html,

歸根結底多虧了HTML5中新加的contenteditable屬性，當元素指定了該屬性後，元素的內容成為可編輯狀態。

進而推廣，將以下代碼放到console執行後，整個頁面將變得可編輯，為所欲為去吧。

3.利用a標籤自動解析URL

很多時候我們都需要從URL地址中提取域名，查詢關鍵字等需求，但是你可知道，瀏覽器已經幫我們完成了這個功能，並不需要我們去寫正則抓取。

方法就是，在JS代碼中，創建一個a便標籤，然後將需要解析的URL賦值給a的href屬性，然後就能很easy拿到我們想要的了。

是不是很強大，解析很多個URL，我們只需要來一次循環就好了，很方便。

在這裡呢，推薦給大家一本HTML的入門教材，還是很不錯的呢。

HTML5+CSS3從入門到精通（附光碟）

4.載入CDN文件時，可以省掉HTTP標識

現在很流行的CDN即從專門的伺服器載入一些通用的JS和CSS文件，出於安全考慮有的CDN伺服器使用HTTPS方式連接，而有的是傳統的HTTP，其實我們在使用時可以忽略掉這個，將它從URL中省去。

5.簡單的文字模糊效果

代碼如下:

代碼不多，功能強大，出來的效果有濾鏡的效果，還是很酷的。

6.最後在來一個關於CSS的，請注意以下代碼:

猜猜這是什麼意思？如果不知道，自行嘗試下，請注意，這是一個小的惡作劇。

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！