整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Base 對象
Base 對象代表 HTML 的 base 元素。
base 元素適用頁面中于指定的默認地址或者所有鏈接的目標地址。
在 HTML 文檔中 <base> 每出現一次，Base 對象就會被創建。
Base 對象屬性
W3C： W3C 標準。
| 屬性 | 描述 | W3C |
|---|---|---|
| href | 設置或返回針對頁面中所有鏈接的基準 URL。 | Yes |
| target | 設置或返回針對頁面中所有鏈接的默認目標框架。 | Yes |
標準屬性和事件
Base 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
果你是一個前端工程師，圖片的處理你是肯定要會的，關于圖片的Base64編碼，你可能有點陌生，但是這是一個前端工程師應該要掌握的知識點，今天我們就一起來看一下吧。
Base64
Base64編碼
那么什么是Base64編碼呢？
Base64編碼是一種圖片處理格式，通過特定的算法將圖片編碼成一長串字符串，在頁面上顯示的時候，可以用該字符串來代替圖片的url屬性。
我們可以來看一下實際的效果
Base64編碼效果
在上圖中，我們可以看出img的src屬性開頭是data:image/png;base64，這種開頭表示的就是Base64編碼后的圖片格式，鼠標放在src屬性上，可以看出實際的圖片。
圖片采用Base64編碼后的字符串非常長，這里截取一部分來看下效果
Base64編碼的部分字符串
真實的全部字符串會比這長的多，可能達到幾十KB
當然，Base64編碼并不只是用在圖片處理上，還可以用在URL轉換上，比如說我們常見的迅雷以thunder開頭的專用地址，就是通過Base64加密處理過后的URL地址，如下圖所示
Base64處理后的URL
為何使用Base64編碼
存在及必然，那么我們為什么要使用Base64編碼呢？
1.其中很重要的一點就是，使用Base64編碼可以減少網絡請求。
我們都知道，網頁上的圖片資源如果采用http形式的url的話都會額外發送一次請求，網頁發送的http請求次數越多，會造成頁面加載速度越慢。而采用Base64格式的編碼，將圖片轉化為字符串后，圖片文件會隨著html元素一并加載，這樣就可以減少http請求的次數，對于網頁優化是一種比較好的手段。
2.采用Base64編碼的圖片是隨著頁面一起加載的，不會造成跨域請求的問題。
3.不會造成清理圖片緩存的問題
Base64編碼劣勢
Base64編碼既有優勢也有劣勢，上述已經說了Base64編碼的優勢，接下來看看劣勢。
1.當我們將一個只有幾KB的圖片轉化為Base64格式編碼，生成的字符串往往會大于幾KB，如果將其寫在一個css文件中，這樣一個css文件的大小會劇增，造成代碼可讀性差不說，還會造成請求傳輸的數據量遞增。
2.如果我們將Base64位的編碼的圖片存入數據庫中，會造成數據庫數據量的增大，這樣的效果還不如將圖片存至圖片服務器，而只在數據庫中存入url字段。
3.對于IE8以下的瀏覽器，不支持data url格式，IE8開始支持data url，卻對大小作出了限制，在使用時不是很方便。
如何使用
分析了Base64編碼的優劣，那么我們該如何正確的使用Base64編碼呢？這里總結出使用Base64編碼的幾個地方。
對于極小或者極簡單的圖片，例如只有幾像素的圖片
不用考慮跨域問題
不想頁面的圖片緩存
總結
關于Base64編碼的圖片，有其優勢，也有劣勢，需要我們自己總結，
今天的內容，了解了嗎？
例
規定頁面上所有鏈接的默認 URL 和默認目標：
<head><base>runoob.com</a></body>
瀏覽器支持
所有主流瀏覽器都支持 <base> 標簽。
標簽定義及使用說明
<base> 標簽為頁面上的所有的相對鏈接規定默認 URL 或默認目標。
在一個文檔中，最多能使用一個 <base> 元素。<base> 標簽必須位于 <head> 元素內部。
提示和注釋
提示：請把 <base> 標簽排在 <head> 元素中第一個元素的位置，這樣 head 區域中其他元素就可以使用 <base> 元素中的信息了。
注釋：如果使用了 <base> 標簽，則必須具備 href 屬性或者 target 屬性或者兩個屬性都具備。
HTML 4.01 與 HTML5之間的差異
無。
HTML 與 XHTML 之間的差異
在 HTML 中，<base> 標簽沒有結束標簽。
在 XHTML 中，<base> 標簽必須被正確地關閉。
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| href | URL | 規定頁面中所有相對鏈接的基準 URL。 |
| target | _blank_parent_self_topframename | 規定頁面中所有的超鏈接和表單在何處打開。該屬性會被每個鏈接中的 target 屬性覆蓋。 |
全局屬性
<base> 標簽支持 HTML 的全局屬性。
事件屬性
<base> 標簽不支持任何的事件屬性。
相關文章
HTML DOM 參考手冊： Base 對象
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
