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

文章目录

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


前端开发工具–VsCode

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54990.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么ping网络ip地址通不通

怎么Ping网络IP地址通不通&#xff1f;要检查网络中的IP地址是否连通&#xff0c;可以使用‌Ping命令。Ping命令通过发送ICMP&#xff08;Internet Control Message Protocol&#xff0c;因特网控制消息协议&#xff09;Echo请求报文并等待回应&#xff0c;来判断目标主机是否可…

微信小程序的面试题

简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 区别 &#xff1f; wx.navigateTo() : 保留当前页面&#xff0c;跳转到应用内的某个页面。但是不能跳到 tabbar 页面 wx.redirectTo() : 关闭当前页面&#xff0c;跳转到应用内的…

【SQL学习笔记】

Pycharm社区版的页面中无database选项&#xff1f; 1、进入Setting-Pluggins窗口&#xff0c;输入database navigator 2、安装后&#xff0c;重启即可 MySQL 的架构共分为两层&#xff1a;Server 层和存储引擎层 1、Server 层负责建⽴连接、分析和执⾏ SQL 2、存储引擎层负…

微知-Mellanox网卡如何导出firmware中的config文件以及文件中有些什么?(ini配置文件,8个区)

背景 Mellanox网卡早期版本以及Engineer simple的DPU支持导出配置文件&#xff0c;该配置文件就是用来告诉firmware的行为。但不是mlxconfig真正设置的文件(mlxconfig -d xxx -e -q应该就是把这个文件读取出来&#xff0c;并且有3个文件&#xff0c;包括默认的&#xff0c;当前…

WebGl学习使用attribute变量绘制一个水平移动的点

在WebGL编程中&#xff0c;attribute变量是一种特殊类型的变量&#xff0c;用于从客户端传递数据到顶点着色器。这些数据通常包括顶点的位置、颜色、纹理坐标等&#xff0c;它们是与每个顶点直接相关的信息。attribute变量在顶点着色器中声明&#xff0c;并且对于每个顶点来说都…

使用shell实现高精度时间日志记录与时间跳变检测

文章目录 0. 概述1. 使用说明1.1. 参数说明1.2. 运行脚本 2. 脚本详细解析2.1. 参数初始化2.2. 参数解析与验证2.3 主循环条件2.4 时间跳变检测与处理2.5. 日志轮转机制2.6. 睡眠时间计算 0. 概述 之前写过单线程版本的高精度时间日志记录小程序&#xff1a;C编程&#xff1a;…

【LeetCode 算法笔记】164. 破解闯关密码

目录 问题描述冒泡排序 问题描述 问题来源 闯关游戏需要破解一组密码&#xff0c;闯关组给出的有关密码的线索是&#xff1a; 一个拥有密码所有元素的非负整数数组 password密码是 password 中所有元素拼接后得到的最小的一个数 请编写一个程序返回这个密码。 示例 1: 输入…

【linux】信号(下)

8. 阻塞信号 (一)信号其他相关常见概念 实际执行信号的处理动作称为信号递达(Delivery)信号从产生到递达之间的状态,称为信号未决(Pending)进程可以选择阻塞 (Block )某个信号被阻塞的信号产生时将保持在未决状态,直到进程解除对此信号的阻塞,才执行递达的动作(即被阻塞的信…

Vue中使px自动转化为rem配置(h5适配问题)

以下方法为px自动转换rem&#xff0c;顾名思义&#xff0c;配置完成后&#xff0c;不用再关心rem换算等等&#xff0c;只需按照设计稿的px值写入即可&#xff0c;当你保存后PostCSS插件会自动将px转换成所配置的rem值&#xff0c;并且你在浏览控制台观测界面时你会发现你在代码…

如何在阿里云一键部署FlowiseAI

什么是FlowiseAI FlowiseAI 是一个开源的低代码开发工具&#xff0c;专为开发者构建定制的语言学习模型&#xff08;LLM&#xff09;应用而设计。 通过其拖放式界面&#xff0c;用户可以轻松创建和管理AI驱动的交互式应用&#xff0c;如聊天机器人和数据分析工具。 它基于Lang…

c++速成之从string类中获取那些知识

温馨提示&#xff1a;本篇文章依旧是c速成系列的文章&#xff0c;因为从这里开始&#xff0c;内容就已经开始复杂&#xff0c;但博主还是以是什么&#xff0c;怎么用的原则继续给大家讲解知识点&#xff0c;希望大家能够耐心看完&#xff0c;并给博主留个三连&#xff0c;博主先…

Redis-缓存过期淘汰策略

缓存淘汰策略 生产上redis内存设置为多少 设置为最大内存的 3/4 redis 会占用物理机多少内存 默认大小是 0&#xff0c;64 位系统下表示不限制内存大小&#xff0c;32位系统表示 3G 如何设置修改redis内存大小 config get maxmemory 查看修改方式 配置文件 单位是字节 2.…

机器学习【金融风险与风口评估及其应用】

机器学习【金融风险与风口评估及其应用】 一、机器学习在金融风险评估中的应用1.提升评估准确性2.实现自动化和智能化3.增强风险管理能力4.信用评估5.风险模型6.交易策略7.欺诈检测 二、机器学习在金融风口评估中的应用1.识别市场趋势2.评估创新潜力3.优化投资策略4. 自然语言处…

深入Postman- 自动化篇

前言 在前两篇博文《Postman使用 - 基础篇》《玩转Postman:进阶篇》中,我们介绍了 Postman 作为一款专业接口测试工具在接口测试中的主要用法以及它强大的变量、脚本功能,给测试工作人员完成接口的手工测试带来了极大的便利。其实在自动化测试上,Postman 也能进行良好的支…

校车购票微信小程序的设计与实现(lw+演示+源码+运行)

摘 要 由于APP软件在开发以及运营上面所需成本较高&#xff0c;而用户手机需要安装各种APP软件&#xff0c;因此占用用户过多的手机存储空间&#xff0c;导致用户手机运行缓慢&#xff0c;体验度比较差&#xff0c;进而导致用户会卸载非必要的APP&#xff0c;倒逼管理者必须改…

Web前端高级工程师培训:封装自己的库

封装自己的库 课前准备 工具 编辑器 VSCode浏览器 Chorme 前置知识 Js基本知识 课堂主题 一、定义函数返还JQ对象 二、ready方法和原生节点处理 三、选择器器封装 四、封装JQ的eq方法 五、封装JQ的click方法 六、jQ中的链式操作 七、封装JQ的css方法 八、cssHooks扩…

软考《信息系统运行管理员》- 4.1信息系统软件运维概述

4.1信息系统软件运维概述 文章目录 4.1信息系统软件运维概述信息系统软件运维的概念信息系统软件的可维护性及维护类型对软件可维护性的度量可以从以下几个方面进行&#xff1a;软件维护分类&#xff1a; 信息系统软件运维的体系1.**需求驱动**2.**运维流程**3.**运维过程**4.*…

Vue 的 v-show 和 v-if 区别?

一、区别 v-show 和 v-if 是 Vue.js 中两种常用的指令&#xff0c;都可以用于控制元素的显示和隐藏&#xff0c;但它们有本质上的区别: 1)v-show 是通过控制元素的 Css display属性来显示或隐藏元素。无论条件是否为真&#xff0c;元素都会被渲染到 DOM中&#xff0c;只是通过…

斯坦福 CS229 I 机器学习 I 构建大型语言模型 (LLMs)

1. Pretraining -> GPT3 1.1. Task & loss 1.1.1. 训练 LLMs 时的关键点 对于 LLMs 的训练来说&#xff0c;Architecture&#xff08;架构&#xff09;、Training algorithm/loss&#xff08;训练算法/损失函数&#xff09;、Data&#xff08;数据&#xff09;、Evalu…

如何减少 Webpack 的打包体积

前端面试题包括ECMScript,TypeScript,Nodejs,React,Webgl,Webpack,Threejs等还在整理中&#xff0c;在线地址前端面试题&#xff0c;源码地址大家多多支持才有动力给大家分享更多好的面试题。 减少 Webpack 的打包体积是优化 Web 应用性能的重要步骤&#xff0c;尤其是在生产环…