前端开发笔记--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;来判断目标主机是否可…

微知-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;并且对于每个顶点来说都…

【linux】信号(下)

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

如何在阿里云一键部署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.…

深入Postman- 自动化篇

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

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

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

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

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

斯坦福 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…

两种方式创建Vue项目

文章目录 引言利用Vue命令创建Vue项目准备工作安装Vue CLI创建Vue项目方法一&#xff1a;使用vue init命令方法二&#xff1a;使用vue create命令启动Vue项目 利用Vite工具创建Vue项目概述利用Vite创建项目启动项目 结语 引言 大家好&#xff0c;今天我将向大家展示如何使用不…

【layui】多文件上传组件实现

插件预览效果&#xff1a; 需要引入layui的脚本文件layui.js和样式文件layui.css html代码&#xff1a; <div class"layui-input-block"><div class"layui-upload-list"><table class"layui-table"><colgroup><col…

vue3中如何更改当前类的文件名称

首先&#xff0c;使用script指定文件名称 <template><div class"person"><h2>姓名&#xff1a;{{ name }}</h2><h2>年龄&#xff1a;{{ age }}</h2><button click"showTel">查看联系方式</button><bu…

VS2017 编译 SQLite3 动态库

首先官方下载源码: Tags sqlite/sqlite (github.com) 1.安装 VS2017 community edition 2.打开VS2017命令行工具 3.安装TCL 开发库,推荐 TCL 9.0 先下载源码: Tcl/Tk 9.0 使用vs2017编译tcl&

【STM32-HAL库】实现微秒、毫秒、纳秒延时。(STM32F4系列)(附带工程下载链接)

使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 一、新建工程 可以参考我的新建工程系列教程 stm32-HAL库cubeMX新建工程教程&#xff08;以F103C8T6为例&#xff09;ht…

基于IDEA+SpringBoot+Vue+Uniapp的投票评选小程序系统的详细设计和实现

2. 详细视频演示 文章底部名片&#xff0c;联系我获取更详细的演示视频 3. 论文参考 4. 项目运行截图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框…

Flink 批作业如何在 Master 节点出错重启后恢复执行进度?

摘要&#xff1a;本文撰写自阿里云研发工程师李俊睿&#xff08;昕程&#xff09;&#xff0c;主要介绍 Flink 1.20 版本中引入了批作业在 JM failover 后的进度恢复功能。主要分为以下四个内容&#xff1a; 背景解决思路使用效果如何启用 一、背景 在 Flink 1.20 版本之前&am…

extern “C“ 的作用、C++ 和 C 编译的不同、C++ 编译过程的五个主要阶段

在 C 中&#xff0c;如果需要从 C 语言导入函数或与 C 代码交互&#xff0c;需要使用 extern "C" 关键字。这是因为 C 和 C 在编译过程中的 符号命名机制&#xff08;即 "名称修饰" 或 "name mangling"&#xff09;不同。 1. extern "C&qu…

2014年国赛高教杯数学建模D题储药柜的设计解题全过程文档及程序

2014年国赛高教杯数学建模 D题 储药柜的设计 储药柜的结构类似于书橱&#xff0c;通常由若干个横向隔板和竖向隔板将储药柜分割成若干个储药槽(如图1所示)。为保证药品分拣的准确率&#xff0c;防止发药错误&#xff0c;一个储药槽内只能摆放同一种药品。药品在储药槽中的排列…