揭秘VSCode魔法工具箱：HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决

23(24)(25)-1(2)- HTML、CSS 常用的vscode插件 +Css reset 和Normalize.css

2201_75539691

2170人浏览 · 2024-04-20 01:04:17

2201_75539691 · 2024-04-20 01:04:17 发布

请添加图片描述

个人主页：学习前端的小z

个人专栏：HTML5和CSS3悦读

本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

💯HTML5、CSS3常用的vscode插件
💯Css reset 和Normalize.css
💯前端小白入门必看
- 🍎1 前端开发是什么
- 🍎2 前端开发需要掌握的技能

在这里插入图片描述

💯HTML5、CSS3常用的vscode插件

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

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

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

在这里插入图片描述

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

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

🍎2 图片导入预览 – Image preview

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

💯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框架都是以它作为基底

在这里插入图片描述

💯前端小白入门必看

🍎1 前端开发是什么

前端开发是软件开发的一个分支，主要专注于创建和维护用户可以直接在客户端（如 Web 浏览器或移动应用程序）上看到并与之交互的界面部分。前端开发的核心任务包括但不限于：

网页结构和内容：
使用 HTML（ HyperText Markup Language）构建网页的结构和内容，确保信息的语义化表达和网页的可访问性。
样式和布局：
通过 CSS（ Cascading Style Sheets）设计和实现网页的视觉样式、布局和响应式设计，确保网站在不同屏幕尺寸和设备上都能良好显示。
交互逻辑：
使用 JavaScript 及其各种库和框架（如 React、Vue.js、Angular 等）实现复杂的用户交互、页面动态更新、数据验证和异步通信等功能。
性能优化：
优化网页加载速度、渲染效率、响应时间和用户体验，包括资源压缩、懒加载、缓存策略、CDN（内容分发网络）使用等。
模块化开发：
采用模块化思想组织代码，如 ES6 模块、CommonJS 或 UMD 规范，便于代码复用和协同开发。
兼容性处理：
确保应用能在不同浏览器和版本间正常工作，处理各浏览器间的差异性问题。
协作与集成：
前端开发人员需要与 UI/UX 设计师、后端开发人员紧密合作，共同实现产品经理的需求。他们还需要对接后端 API ，将后端返回的数据转化为用户可见的界面元素。

现代化技术：随着 Web 技术的演进，前端开发还包括了对新兴技术和框架的学习和应用，例如使用 Web 组件、 PWA（渐进式 Web 应用）、 Service Workers 等技术来增强 Web 应用的功能和体验

🍎2 前端开发需要掌握的技能

基础技术

HTML：理解和熟练使用 HTML5 来构建网页的基本结构和内容。

CSS ：掌握 CSS3 ，用于设置网页的样式、布局、响应式设计以及动画效果。

JavaScript：这是前端交互的关键，用于处理用户输入、网页行为以及数据操作。

JavaScript 库和框架

React、Vue.js 或 Angular：主流前端框架之一，用于构建单页应用和组件化开发。

jQuery（虽然现在使用频率降低但仍有一定应用场景）和其他简化 DOM 操作和事件处理的库。
模块打包工具

Webpack 或 Parcel ：用于代码的模块化管理和构建打包。

状态管理

Red ux、Vuex 或 Context API ：用于管理大型应用的状态和数据流。

CSS 预处理器

Sass、 Less 或 PostCSS ：提高 CSS 的可维护性和扩展性。

响应式设计

理解和实践响应式布局，适应不同设备和屏幕尺寸。

前端路由

如 React Router 或 Vue Router ，用于 SPA（单页应用）中的页面导航和路由管理。

HTTP 和 AJAX

理解 HTTP 协议和请求/响应生命周期，熟练使用 AJAX 或其他异步请求库（如 Fetch API）与后端进行数据交换。
前端性能优化

了解如何提高页面加载速度、减少网络请求、优化渲染性能等。

版本控制

Git：用于版本控制和团队协作。

开发工具

使用现代开发工具，如 Visual Studio Code、Sublime Text、WebStorm 等。

构建工具和自动化

掌握 npm、yarn 等包管理器以及脚本编写，用于自动化构建、测试和部署流程。

测试

学习单元测试（如 Jest、 Mocha 等）、端到端测试（如 Cypress、TestCafe 等）。

可访问性

了解并遵循 WCAG 指南，确保网站对所有用户群体（包括残障人士）友好。

设计基础

对色彩、布局、用户体验设计有一定的理解，能与设计师配合进行界面实现。

持续学习

关注 Web 技术发展趋势，学习新的 API（如 Web Components、Service Worker、WebGL 等）和最佳实践。

<!DOCTYPE html>
<html>
	<head>
	     <meta charset="UTF-8">
	     <meta name="kewords" content="持续学习">
	     <meta name="description" content="持续学习">
	</head>
	<body>
		<div>
			<p>Practice makes perfect!</p>
		</div>
	</body>
</html>