首頁  >  文章  >  web前端  >  分享幾個html5冷門小知識

分享幾個html5冷門小知識

零下一度
零下一度原創
2017-05-10 13:54:142304瀏覽

HTML是Web同一語言,這些容納在尖括號裡得大略標籤,構成瞭如今得Web。 1991 年,Tim Berners-Lee編寫了一份叫做「HTML 標籤」得文檔,內裡包括了大約20個用來標記網頁得 HTML標籤。他直接借用SGML得標示款式,也便是其後我們看到得HTML標示得款式。

今天互吾小編就整理下,那些你可能不知道的html5冷知識。

瀏覽器網址列運行JavaScript程式碼
這個很多人應該還是知道的,在瀏覽器網址列可以直接執行JavaScript程式碼,做法是以javascript:開頭後接著執行的語句。例如:

分享幾個html5冷門小知識

注意,執行javascript程式碼,要在瀏覽器中手動輸入,複製程式碼的話,IE及Chr ome會自動去掉程式碼開頭的javascript:,所以需要手動添加起來才能正確執行,而Firefox中雖然不會自動去掉,但它根本就不支援在網址列運行JS程式碼! !

瀏覽器網址列運行HTML程式碼
如果說上面那條小秘密知道的人還算多的話,這條秘笈知道的人就要少一些了,在非IE內核的瀏覽器網址列可以直接運行HTML程式碼!

反正連互吾小編我,也是最近才無意間得知的。

例如在網址列輸入以下程式碼然後回車運行,會出現指定的頁面內容。

分享幾個html5冷門小知識

如下圖:

分享幾個html5冷門小知識

把瀏覽器當作編輯器
還是瀏覽器網址列上做文章,將以下程式碼貼到網址列運行後瀏覽器變成了一個原始而簡單的編輯器,與Windows自帶的notepad一樣,吼吼。

分享幾個html5冷門小知識

如下圖:

分享幾個html5冷門小知識

#歸根結底多虧了HTML5中新增的contenteditable屬性,當元素指定了該屬性後,元素的內容變成可編輯狀態

推而廣之,將以下程式碼放到console執行後,整個頁面將變得可編輯!

分享幾個html5冷門小知識

如下圖:

分享幾個html5冷門小知識

利用a標籤自動解析URL
很多時候我們有從一個URL中提取域名,查詢關鍵字,變數參數值等的需要,而萬萬沒想到可以讓瀏覽器方便地幫我們完成這項任務而不用我們寫正則去抓取。方法就在JS程式碼裡先建立一個a標籤然後將需要解析的URL賦值給a的href屬性,然後就得到了一切我們想要的了。

分享幾個html5冷門小知識

如下圖:

分享幾個html5冷門小知識

#用上面方法,對瀏覽器參數進行操作!

分享幾個html5冷門小知識

頁面擁有ID的元素會建立全域變數
在一張HTML頁面中,所有設定了ID屬性的元素會在JavaScript的執行環境中建立對應的全域變量,這表示document.getElementById像人的闌尾一樣顯得多餘了。但實際專案中最好老實該怎麼寫就怎麼寫,畢竟常規程式碼出亂子的機會要小得多。

分享幾個html5冷門小知識

如下圖:

分享幾個html5冷門小知識

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

分享幾個html5冷門小知識

利用script標籤保存任意資訊
將script標籤設為type='text'然後可以在裡面保存任意信息,之後可以在JavaScript程式碼中很方便地取得。

分享幾個html5冷門小知識

當然,冷知識遠不止這些。

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

#3. php.cn原始html5影片教學

#

以上是分享幾個html5冷門小知識的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn