、新建项目

1、新建===web项目===输入项目名称====完成

二、新建html文件

在新建项目中新建html模板

输入文件名称：

三、认识基本格式

联想出基本格式：

四、编辑html文件

运行html，选择浏览器

五、html常用的快捷键

（1）ctrl+n+w web项目创建

（2）ctrl+n+h html文档创建

（3）ctrl+s 保存html页面（页面上如果未保存会显示*号）

（4）ctrl+r html运行
（5）ctrl+z 撤回
（6）！+tab键 联想基本格式
（7）ctrl+/ 注释和取消注释

（8）ctrl+鼠标滚轮， 字体方大和缩小

六、认识标签

（1）H标签（标题标签）

（2）p标签 （段落标签）

（3）img 标签（图片标签）
两种：第一种widows上传图片，第二种：网上图片链接

第一种

img中显示图片

img中引入图片

第二种：网上图片的链接：

（4） 标签（空格）

（5）em 标签表示斜体

（6）i 标签表示斜体

（7）br 表示换行

（8）b 标签表示加粗

（9） strong 标签表示加粗

（10）s 标签（删除线）

（11）u 标签 （下划线）

（12）font 颜色

（13）sub下标
（14）sup上标

是一款轻量级且非常好用的ide，我平时用idea开发java，但是开发vue，go和net core会选择用vscode，因为它的内存占用要比idea小很多，下面罗列了些快速使用vscode的信息，方便更换电脑时可以快速启用它，涉及常用快捷键，个性化配置，适用于各种语言开发的插件。

（下载，常用快捷键，个性化配置，通用插件，前端插件，java开发插件，go开发插件，c#开发插件）

下载

https://code.visualstudio.com/Download

常用快捷键

打开命令面板（F1）

快速打开（ctrl + P）

注释行（ctrl + /）

全局搜索（ctrl + shift + F）

清除全部没用的import（alt + shift + o）

更多快捷键：https://code.visualstudio.com/docs/getstarted/keybindings

个性化配置

设为双击打开文件

设置里搜索“open mode”，把下拉选项改成doubleClick

取消点击预览功能

设置里搜索“preview”，点击工作台，把第一个打勾框的勾去掉

自动保存

设置里搜索“auto save”，选择afterDelay

通用插件

Live Server

静态服务，方便浏览html页面，并且修改页面后会立即更新

Material Icon Theme

解决目录图标不明显的问题

Chinese (Simplified)

中文支持

YAML

支持yml文件的格式

Visual Studio IntelliCode

只能感应提示

Tabnine AI Autocomplete

具有AI特性的代码智能提示

前端开发用到的插件：

Vetur （vue的支持）

Auto Close Tag （自动添加HTML/XML的结束标记）

Auto Rename Tag （自动完成另一侧标签的同步修改）

Auto Import （自动处理import，支持TS和TSX）

JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支

Path Intellisense —— 自动路径补全

HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式

vscode-color-picker 方便样式里直接进行颜色选择

Prettier - Code formatter 代码格式化

Beautify——格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则

Bracket Pair Colorizer 2——给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

open in browser——直接右键项目单击启动

开发java用到的插件：

// java基础

Extension Pack for Java

Debugger for Java

Maven for Java

Project Manager for Java

Test Runner for Java

Spring Boot Extension Pack

Quarkus

Quarkus snippets

开发go用到的插件：

Go

Go Nightly

开发C#用到的插件：

C#语言开发支持

C# Extensions

Auto-Using for C#

C# XML Documentation Comments

家好，我是 Echa。

今天来分享 50 个超实用的 Chrome 浏览器扩展！

JSON

1. JSON Viewer Pro

JSON Viewer Pro 用于可视化JSON文件。其核心功能包括：

• 支持将JSON数据进行格式化，并使用属性或者图表进行展示；
• 使用面包屑深入遍历 JSON 属性；
• 在输入区写入自定义 JSON；
• 导入本地 JSON 文件；
• 使用上下文菜单下载 JSON 文件；
• 网址过滤器；
• 改变主题；
• 自定义 CSS ；
• 复制属性和值；

输入界面如下：

格式化之后：

2. JSONVue

JSONVue 是一个JSON数据查看器，主要用来格式化JSON数据：

网站技术

3. Library Sniffer

Library Sniffer 是一款给开发者使用的工具，能够探测当前网页所使用的类库、框架和服务器环境，为开发者提供了方便。

4. Wappalyzer

Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展，可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。

5. WhatRuns

WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。

开发调试

6. PerfectPixel by WellDoneCode

使用PerfectPixel插件可以将设计图加载至网页中，与已成型的网页进行重叠对比，以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。

7. Clear Cache

可以使用此扩展程序快速清除缓存，无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量，包括：应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。

8. VisBug

VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具，它可以让用户使用点击式和拖放式界面来查看网站的元素。

9. Debug CSS

Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播，按住Ctrl，并将鼠标悬浮在元素上，即可查看其信息：

10. CSS Viewer

CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义，CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。

11. EditThisCookie

EditThisCookie 是一个 cookie 管理器。可以添加，删除，编辑，搜索，锁定和屏蔽cookies。

12. React Developer Tools

React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后，将在 Chrome DevTools 中获得两个新选项卡："⚛️ Components" 和 "⚛️ Profiler"：

• Components 选项卡显示了在页面上呈现的根 React 组件，以及它们最终呈现的子组件；
• Profiler 选项卡用来记录性能信息。

13. Vue.js devtools

Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件，可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。

14. Augury

Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。

15. Firebug Lite for Google Chrome

Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件，在Chrome中安装了Firebug Lite插件以后，开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容，其包含了基本的HTML、CSS以及Javascript的调试功能，用于帮助网页前端开发工程师快速地调试网页，以便及时地找到网页中的BUG并及时修复。

16. HTML Validator

HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示，详细信息可以在浏览器的开发者工具中查看。

17. Web Developer

Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox，并且可以在这些浏览器支持的任何平台上运行，包括 Windows、macOS 和 Linux。

18. Requestly

Requestly 是一款Chrome和Firefox浏览器插件，提供URL转发、修改HTTP请求和结果、插入脚本等功能。

19. Window Resizer

Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。

20. Responsive Viewer

Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。

21. Moesif Origin & CORS Changer

此插件允许直接从浏览器发送跨域请求，而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头，并将 Access-Control-Allow-Origin 设置为 *.

22. ColorPick Eyedropper

ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具，可让从网页等中选择颜色值。

23. CSSPeeper

CSS Peeper 用于检查和复制元素样式的优秀工具，使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上，然后单击鼠标即可复制元素的样式。

24. Dimensions

Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件，该插件在点击启动插件图标后，可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量，同时还可以通过使用快捷键来快速启用或关闭该插件的功能，简单实用。

25. Site Palette

Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。

26. ColorZilla

ColorZilla 是一款功能强大地提取网页色彩的工具；也是个快速的对颜色进行调节的Chrome插件，许多的用户将这款软件称呼为颜色吸取插件，它提取的颜色是非常的多样化，还可生产css颜色的代码等。

• 吸管器-获取页面上任何像素或区域的颜色；
• 一个先进的颜色选择器类似于可以在Photoshop和Paint Shop Pro中找到的；
• 网页颜色分析器-分析任何网页上的DOM元素颜色，找到相应的元素；
• 终极CSS梯度发生器；
• 调色板查看器与7预先安装调色板；
• 颜色历史最近挑选的颜色；
• 显示标签名称，类别，编号，大小等元素信息；
• 光标下的轮廓元素；
• 自动将生成或采样的颜色复制到CSS RGB，Hex和其他格式的剪贴板；
• 使用键盘快速采样页面颜色的键盘快捷键。

字体

27. WhatFont

当我们想查看网页中文字的字体时，最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢？WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标，再点需要查看为文字即可：

28. Fonts Ninja

Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。

标签页

29. BrowserStack

使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。

30. Toby

Toby 是一款 Chrome 新标签页工具，能够将未读的标签页分组显示在新标签页中，这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口，将你的标签页都拖进 Toby 中，就不需要实时开着占地方了。

31. daily.dev

该扩展提供了每日热门开发者新闻，不需要再浪费时间搜索高质量的文章了。

32. Momentum

Momentum 拥有漂亮的新标签页面，每日更新精彩背景壁纸图片，可设置每日新鲜事焦点以及跟踪待办事项，无广告，无弹窗。

33. The Great Suspender

The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡，在可配置的时间之后未查看的选项卡将在后台自动挂起，从而释放该选项卡消耗的内存和 CPU。

34. Session Buddy

Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复，从而达到节省内存的作用。

Github

35. Octotree

Octotree 旨在让 GitHub 体验更好。通常，为了检查 Github 中的子文件夹，需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构，这有助于更好地理解文件夹结构。

1_EKF88oqIyX6FzgueCKdtXg.gif

36. File Icons for GitHub and GitLab

File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。

网页测试

37. axe DevTools

ax DevTools 是一个快速、轻量级但功能强大的测试工具，由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。

38. OctoLinker

OctoLinker 可以将特定语言的语句（如 include、require 或 import）转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时，只需将鼠标悬停在链接的文件上并单击即可打开。

39. Web Developer Checklist

此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。

40. Check My Links

Check My Links 是一个链接检查器，它可以抓取网页并查找损坏的链接。

41. Checkbot

Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告，该报告汇总了引起某种警告或错误的所有链接。

42. PageSpeed Insights

Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。

43. Meta SEO Inspector

META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。

隐私广告

44. Ghostery

Ghostery 是强大的隐私保护扩展程序。其主要有以下功能：

• 拦截广告：Ghostery 内置的广告拦截工具可以移除网页上的广告，防止网页杂乱无章，让你专注于想看的内容。
• 保护隐私：利用 Ghostery 可以查看和拦截所浏览的网站上的跟踪器，控制收集数据的跟踪器。增强反跟踪功能还能将数据匿名化，进一步保护隐私。
• 提高浏览速度：Ghostery 的智能拦截功能可以自动拦截和取消拦截跟踪器来满足网页质量标准，提高网页加载速度，优化网页性能。

45. AdBlock

AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。

效率工具

46. Marinara

番茄工作法（Pomodoro®）时间管理助理。• 长短两种休息时间 • 带有倒计时显示的工具栏图标 • 追踪Pomodoro历史和统计讯息 • 可配置的长休间隔 • 可配置的定时器时长 • 桌面与新标签页通知 • 超过20种音效可选的声音通知 • 计时器秒针走动音效

47. Loom

Loom 可以用来快速录制视频，并且能够将录制的视频上传到指定的网页中，Loom还支持在用户点击启动插件时，立即捕捉屏幕图像，同时开始视频录制操作，还可以将录制好的视频复制到粘贴板中存储。

48. GoFullPage

GoFullPage 是一款全屏截图插件（整个网页截图），完整捕获您当前页面的屏幕，进行滚动截图，而无需任何额外的权限。单击扩展程序图标，然后将其传输到屏幕快照的新标签页中，可以在其中将其下载为图像或PDF，甚至只需拖动即可，保存到桌面。

49. BetterViewer

BetterViewer 可以提供更好的图像查看体验，旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时，只需在页面右键点击图片，选择“在新标签页中打开图片”即可。

50. svg-grabber

svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。