為您提供網站建設資訊、網站優(yōu)化知識、主機域名郵箱、
關鍵詞排名、網站開發(fā)常見問題等。
發(fā)表日期:2019/11/06 來源:肆合互動 咨詢電話:028-85756675
在進行網站開發(fā)的時候,如何合理使用代碼標簽讓網站建設更簡單?成都網站開發(fā)公司工作人員教你以下三個小技巧,讓前端開發(fā)更輕松。
一、a標簽打開與刷新頁面標簽作為常用標簽,當跳轉鏈接時,常用屬性target,
_self:默認值。在相同的框架或窗口中載入目標文檔。即當前;
_blank:在一個新的未命名的窗口載入文檔。即新開窗口;
_parent:把文檔載入父窗口或包含了超鏈接引用的框架的框架集,如果沒有,則行為類似_self。即上級窗口中;
_top:把文檔載入包含該超鏈接的窗口,取代任何當前正在窗口中顯示的框架。如果沒有上下文環(huán)境,則行為類似_self。即頂級窗口中。
不過,target屬性還有一個特征,可以自定義內容或URL。
二、網頁一鍵換膚優(yōu)化實現將一個網頁的顏色相關一鍵切換
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表示當前文檔的替代版本,也就是加載但不執(zhí)行。
利用這個特性,結合DOM對象的disabled屬性,可以提前加載另一套css方案,解決交互性問題。代價是多一點點流量。
三、CSS矢量圖內聯在前端項目中,使用到的圖標類大多會使用SVG來實現,靜態(tài)文件的減少有利于性能的提升。當然,可以用靜態(tài)資源緩存(blog鏈接)減少文件請求,高速渲染,引用地址使用內聯,即直接將SVG放入路徑(不建議超級大圖,會極大增加文件體積)。
采用base64
采用標簽直接內聯
在直接引入之前,需要對一些特殊符號進行轉譯",%,#,{,},<,>。(IE也兼容的!)
網站建設及推廣咨詢電話
028-85756675成都市天府新區(qū)華府大道1號藍潤置地廣場T3公寓806室
填寫網站建設及SEO優(yōu)化排名需求