網站前端開發三個實用的小技巧

在進行網站開發的時候，如何合理使用代碼標簽讓網站建設更簡單?成都網站開發公司工作人員教你以下三個小技巧，讓前端開發更輕松。

一、a標簽打開與刷新頁面標簽作為常用標簽，當跳轉鏈接時，常用屬性target，

_self：默認值。在相同的框架或窗口中載入目標文檔。即當前;

_blank：在一個新的未命名的窗口載入文檔。即新開窗口;

_parent：把文檔載入父窗口或包含了超鏈接引用的框架的框架集，如果沒有，則行為類似_self。即上級窗口中;

_top：把文檔載入包含該超鏈接的窗口,取代任何當前正在窗口中顯示的框架。如果沒有上下文環境，則行為類似_self。即頂級窗口中。

不過，target屬性還有一個特征，可以自定義內容或URL。

二、網頁一鍵換膚優化實現將一個網頁的顏色相關一鍵切換

links[0].href = val

通過JS控制標簽的href屬性切換引用的css文件

弊端：如果網站需要切換的內容過多，每次引用CSS的加載會有一定量的延時，不具有流暢感，交互體驗較差。

有趣的title屬性 在實現一鍵換膚的其他方法之前，要聊一下這個在標簽中的title屬性。

當標簽具有title屬性且有值時，link標簽就變成一個可控制的特殊元素，即可以通過DOM對象的disabled屬性控制link是否渲染。

但是，在實測過程中，除IE外無論link標簽是否具有title屬性，都可以直接使用DOM對象的disabled屬性，但IE確實需要title。

let links = document.getElementsByTagName('link'); links = [].slice.call(links); links[0].disabled = true;

alternate備選 在標簽中，rel屬性有很多值，常用的是stylesheet，但是還有一個alternate表示當前文檔的替代版本，也就是加載但不執行。

利用這個特性，結合DOM對象的disabled屬性，可以提前加載另一套css方案，解決交互性問題。代價是多一點點流量。

三、CSS矢量圖內聯在前端項目中，使用到的圖標類大多會使用SVG來實現，靜態文件的減少有利于性能的提升。當然，可以用靜態資源緩存(blog鏈接)減少文件請求，高速渲染，引用地址使用內聯，即直接將SVG放入路徑(不建議超級大圖，會極大增加文件體積)。

采用base64

采用標簽直接內聯

在直接引入之前，需要對一些特殊符號進行轉譯"，%，#，{，}，<，>。(IE也兼容的!)

標題名稱：網站前端開發三個實用的小技巧
本文來源：http://m.kartarina.com/news49/84799.html

成都網站建設公司_創新互聯，為您提供網站建設、小程序開發、搜索引擎優化、品牌網站建設、品牌網站設計、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯