HTML、CSS常用的vscode插件 +Css reset 和Normalize.css


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • ✍HTML、CSS常用的vscode插件
    • [🍎1 HTML 标签同步重命名 -- Auto Rename Tag](#🍎1 HTML 标签同步重命名 – Auto Rename Tag)
    • [🍎2 图片导入预览 -- Image preview](#🍎2 图片导入预览 – Image preview)
    • [🍎3 好看的文件图标 -- vscode-icons](#🍎3 好看的文件图标 – vscode-icons)
  • [✍Css reset 和Normalize.css](#✍Css reset 和Normalize.css)
    • [🍎1 Css reset](#🍎1 Css reset)
    • [🍎2 Normalize.css](#🍎2 Normalize.css)
    • [🍎3 区别](#🍎3 区别)
    • [🍎4 个人结论](#🍎4 个人结论)

✍HTML、CSS常用的vscode插件

完成前端基础学习,就可以开启代码补全提示。

下面来分享一些在实际工作可以增加效率的插件。

🍎1 HTML 标签同步重命名 -- Auto Rename Tag

假如打标签的时候打错标签了,这时还需要修改开始标签和结束标签,通常 HTML 代码是非常多的,非常的不银杏,虽然有 Ctrl + D 快捷键。但是经常删除和自己同名的子级标签。

装了这个插件之后,会为当前匹配的标签产生一个黄色的下划线。当修改开始、结束标签时,另一侧的标签会自动重命名。

🍎2 图片导入预览 -- Image preview

可以像 idea 一样导入图片之后可以在左侧进行图片的预览。看图:

🍎3 好看的文件图标 -- vscode-icons

vscode-icons中有各式各样的文件图标可供选择,uu们可以根据自己的喜欢进行搭配,增添学习过程中的趣味性。


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


文章目录

  • ✍HTML、CSS常用的vscode插件
    • [🍎1 HTML 标签同步重命名 -- Auto Rename Tag](#🍎1 HTML 标签同步重命名 – Auto Rename Tag)
    • [🍎2 图片导入预览 -- Image preview](#🍎2 图片导入预览 – Image preview)
    • [🍎3 好看的文件图标 -- vscode-icons](#🍎3 好看的文件图标 – vscode-icons)
  • [✍Css reset 和Normalize.css](#✍Css reset 和Normalize.css)
    • [🍎1 Css reset](#🍎1 Css reset)
    • [🍎2 Normalize.css](#🍎2 Normalize.css)
    • [🍎3 区别](#🍎3 区别)
    • [🍎4 个人结论](#🍎4 个人结论)

✍Css reset 和Normalize.css

🍎1 Css reset

又叫做 CSS 重写或者 CSS 重置,用于改写HTML标签的默认样式。

有些HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,li 标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别,例如ul默认带有缩进的样式,在正下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。这必然会带来浏览器兼容问题。

因此,

在 CSS 代码中,可以使用 CSS 代码去掉这些默认样式,即重新定义标签样式,从而覆盖浏览器的CSS默认属性,即 CSS reset。

需要注意的是,在进行样式重写时,不建议使用 * 选择器进行重写,这样会降低效率,影响性能。

官网:https://meyerweb.com/eric/tools/css/reset/

🍎2 Normalize.css

只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性,相比于传统的css reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。

Css reset 是暴力的,Normalize.css是温和的

官网:http://necolas.github.io/normalize.css/

🍎3 区别

1:Normalize.css保护了有价值的默认值(更符合现代标准)

2:Normalize.css修复了浏览器的bug

3:Normalize.css不会放调试工具变得杂乱

4:Normalize.css是模块化的

5:Normalize.css有详细的文档

区别:https://jerryzou.com/posts/aboutNormalizeCss/

🍎4 个人结论

如果你开发网站是定制性比较强、页面效果复杂的情况下使用 reset.css,比如电商、后台管理等等

那么,如果你开发网站是文本内容(新闻、博客等等)为主,定制性不强,页面也不复杂则使用 Normalize.css

国内目前还是更多是采用定制性强的网站,所以个人认为在国内 reset.css 这种"暴力"思想用得更多一些的

说白了:

  • reset.css 的思想适合开发企业项目或者个人项目
  • Normalize.css 的思想适合创建 css 框架,比如bootstrp框架都是以它作为基底
相关推荐
软件技术NINI1 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_92 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front3 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树3 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔4 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04124 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj504 小时前
前端基础之《React(1)—webpack简介》
前端·react