前端开发笔记--html 黑马程序员1

news/2024/10/15 12:59:44/

文章目录

前端开发工具--VsCode
前端开发基础语法
VsCode优秀插件
- Chinese --中文插件
- Auto Rename Tag --自动重命名插件
- open in browser
- - Open in Default Browser
  - Open in Other Browser
- Live Server -- 实时预览

前端开发工具–VsCode

轻量级与快速启动
快速加载：VSCode 启动速度快，占用系统资源少，更适合快速编辑和调试代码。
灵活性：可以根据需要安装扩展，保持轻量，避免复杂功能的干扰。
强大的扩展性
丰富的插件生态：VSCode 拥有大量的插件，可支持各种编程语言、框架和工具，例如 React、Angular、Vue.js 和 SASS。
自定义功能：用户可以根据个人需求安装或开发扩展，提高开发效率。
智能代码补全
IntelliSense：提供上下文感知的代码补全，自动完成变量、函数、方法名等，有助于减少拼写错误和提高编码速度。
文档提示：在输入时，VSCode 会自动提供函数的文档和参数提示，帮助开发者更好地理解和使用 API。
内置调试功能
调试器：VSCode 提供强大的调试功能，可以直接在编辑器中设置断点、检查变量值、单步执行代码等，极大地提升了调试效率。
支持多种语言：支持 JavaScript、TypeScript 等多种语言的调试，便于前端开发者进行调试工作。
终端集成
内置终端：VSCode 内置终端，可以直接在编辑器中执行命令，无需切换到其他窗口，提升了工作流的效率。
Git 集成：内置 Git 功能，可以方便地进行版本控制、提交代码、解决冲突等操作。

前端开发基础语法

1.前端开发框架代码

< !DOCTYPE html>
< html lang=“en”>
< head>
< meta charset=“UTF-8”>
< meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
< title>Document
< /head>

< body>

< /body>
< /html>
在这里插入图片描述

VsCode优秀插件

Chinese --中文插件

VsCode在刚下载完成后默认是英文的，这对我们这些中国程序员来说很不友好，为了解决这个问题我们可以选择在VsCode中安装一个这个插件，在安装并重启VsCode后VsCode便会将语言调整为中文。
在这里插入图片描述

Auto Rename Tag --自动重命名插件

这个插件能够帮助我们进行快捷的修改标签在我们修改前一个·标签，后一个标签也会改动。
在这里插入图片描述

open in browser

这个插件能够让我们选择想要的浏览器进行预览
在这里插入图片描述

Open in Default Browser

用默认的浏览器打开
在这里插入图片描述

Open in Other Browser

用其他浏览器打开（前提是你的电脑已经安装了这些浏览器）
在这里插入图片描述

Live Server – 实时预览

这个插件能够让我们实时看到我们修改后的代码的效果，而不需要在每次修改后都刷新浏览器。
在这里插入图片描述

由于篇幅的原因在这里便简单介绍一下一些比较重要的插件，黑马那边有更加全面的插件
https://www.bilibili.com/read/cv9698270/
快捷命令则是这个：
https://www.bilibili.com/read/cv9699783/