发表日期:2019/11/06 来源:肆合互动 咨询电话:028-85756675
在进行网站开发的时候,如何合理使用代码标签让网站建设更简单?成都网站开发公司工作人员教你以下三个小技巧,让前端开发更轻松。
一、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也兼容的!)
网站建设及推广咨询电话
028-85756675成都市天府新区华府大道1号蓝润置地广场T3公寓806室
填写网站建设及SEO优化排名需求