Web Essentials之HTML和CSS操作技巧
2023-09-11 14:18:33 时间
一些Javascript功能也可以用于TypeScript。
本篇目录
功能
最小化HTML文件
选中要最小化的.html文件,然后在web essentials的菜单中选择“Minify html file(s)”选项,即可生成一个.min.html文件,该功能类似于js和css文件的压缩。具体操作以及效果见下图:
Bundle Html文件
在解决方案浏览器中选择2个或更多html文件,然后右键选择"Create HTML Bundle File"。该功能简化了使用SPA时bundle多个Html模板。具体操作如下动图:
图片悬停预览
当鼠标悬停在标签上时,会看到图片的预览:
ZenCoding
ZenCoding语法
想要阅读更多关于Zen Coding的语法,请点击这里。
ZenCoding是开源的,点击查看Github上的源码。下面通过一个动态图演示一下:
Lorem Pixel生成器
作为ZenCoding的一部分,你也可以直接在Html编辑器中生成Lorem Pixel的代码。只需要输入pix-200x200-animals
,然后按下TAB键,就会插入一张200x200的动物图片。
LESS
预览窗口
LESS的预览窗口位于编辑器的右边,每当保存less文件时,就会展示编译后的CSS内容。
提取到变量
Web Essentials简化了将属性值转成LESS变量。选择你想提取的文本,然后右键selection,点击"Extract to variable..."。
相关文章
- Web基础 HTML CSS JS JQuery AJAX
- ASP.NET Web Projects: web.debug.config & web.release.config
- Java-Web 用html和css写一个EasyMall注册界面
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.6 小结
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.2 为发布到Web准备好计算机
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.8 作业
- 《响应式Web图形设计》一1.1 为什么要学习HTML?
- 《Web前端开发精品课 HTML与CSS进阶教程》——2.3 图片语义化
- 《Web前端开发精品课 HTML与CSS进阶教程》——2.4 表格语义化
- 《重构HTML:改善Web应用的设计(修订版)》——第2章 工具 2.1 备份、测试用机和源码控制
- 《重构HTML:改善Web应用的设计(修订版)》——2.3 测试
- 《HTML与CSS入门经典(第8版)》——1.5 用多种Web浏览器测试
- 《HTML与CSS入门经典(第8版)》——第2章 发布Web内容2.1 创建用于本章的示例文件
- 《HTML与CSS入门经典(第8版)》——2.3 理解Web服务器上放置文件的位置
- webpack4+(打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩)
- Web网站模板-小清新企业个人营销宣传响应式网站模板(HTML+CSS+JavaScript)
- Web网站模板-横向滚动个人简历响应式网站模板(HTML+CSS+JavaScript)
- Web网站模板-响应式旅游旅行团酒店预订展示网站模板(HTML+CSS+JavaScript前端大作业)
- Web网站模板-响应式企业产品介绍模板(HTML+CSS+JavaScript)
- 【web前端(十五)】html_盒模型——版心布局
- 【web前端(十三)】html_盒模型——阴影
- Web 之 html 如何显示隐藏Html元素的两种方法简单整理
- 华为快应用-web标签无法加载http和https混载的html页面