VSCode安装使用|创建一个可运行的html页面|配置美化

最新推荐文章于 2025-04-27 14:49:16 发布
最新推荐文章于 2025-04-27 14:49:16 发布
阅读量2.5k 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44155199/article/details/107993356
版权
本文介绍了如何从官方地址安装VSCode，并针对JavaScript和Vue开发进行配置。通过添加插件提升开发体验，同时详细说明了如何在VSCode中创建并运行一个简单的HTML页面，包括建立工作区、创建文件夹和编写h1标题，最后通过右键运行展示页面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

安装地址

https://code.visualstudio.com/Download
这个是vscode官方下载地址，一直下一步就好了，没有其他的特殊选项

我是用来开发js和vue的
可以到商店里安装以一些插件
举几个我能用到的例子：
在这里插入图片描述
最后，说一下如何开发一个html页面

在这里插入图片描述

  • 在你的电脑里创建一个文件夹

  • 在这里插入图片描述

  • 单机vscode菜单栏的文件

  • 打开刚才创建的文件夹

  • 然后点击文件夹，再将文件另存为工作区，命名为1010

  • 现在就生成了一个工作区在这里插入图片描述

  • 在工作区下面创建一个demo文件

  • demo文件下创建一个hello.html

  • 然后编写一个h1标题

  • 在这里插入图片描述

  • 右键运行

最低0.47元/天 解锁文章
Day19_9 前端入门之HTML标签、VScode安装配置
weixin_43717536的博客
09-19 1310
解析：1.不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异，在解析成网页时可能会存在差异导致用户体验极差。2.让不同的浏览器按照相同的标准显示结果，让展示的效果统一！1.html标签的结构 你好小可爱 其中：为开始标签，你好小可爱为包裹的内容，为结束标签结构说明：1. 标签由，/、英文单词或字母组成；并且把标签中包括起来的英文单词或字母称为标签名 2. 常见标签由两部分组成，我们称之为：双标签。
VSCode 基本使用
热门推荐
huangpb的博客
12-16 5万+
一、VSCode 界面功能介绍 1. Git History，相当于 git log 3. 打开上一提交版本的更改记录 4. 显示提交注释 5. 向右分屏 6. 直接定位到第几行 7. 解析当前文件的语言 8. 切换项目（基于 Project Manager） 9. 切换分支 10. GitLens，可以查看文件和单行代码的修改记录 二、常用快捷键 1. Comman.........
vsCode实现美化代码
weisian的博客
07-21 4342
1、安装eslint，prettier 2、在setting中，配置setting.json文件如下：（settings----open Settings（json）） { "breadcrumbs.enabled": false, // "html.format.wrapLineLength": 80, "editor.wordWrap": "on", "editor.cursorBlinking": "expand", "editor.cursorSmoot
从菜鸟到大神：VSCode助力HTML开发全攻略
最新发布
邓邓子的博客
04-27 1422
本文全面介绍 VSCode 在 HTML 开发中的高效应用。先引导读者完成 VSCode 的安装与个性化设置，助其快速适应开发环境；接着推荐 Live Server、Prettier 等实用插件，实现实时预览、代码格式化等功能，提升开发效率。通过详细的开发实战步骤，从新建文件到添加样式，带领读者掌握 HTML 基础结构与常用标签使用。还分享代码片段管理、多人协作等进阶技巧，解决常见开发问题。旨在帮助开发者利用 VSCode，轻松高效完成 HTML 开发，打造优质网页。
VSCode创建并运行html页面（使用Live Server插件）
m0_51371779的博客
06-24 2145
打开浏览器，输入网址 http://localhost:【端口号】/【html文件名】.html，我这里是http://localhost:5500/testhtml.html，大家根据自己的端口号和html文件名修改网址。在输入框中输入“xxx.html”，其中xxx是html文件的名字，回车。点击扩展按钮，搜索Live server，点击“安装”按钮。在弹出的窗口中选择刚才新建好的文件夹，点击“选择文件夹”在VSCode中点击“文件”，再点击“打开文件夹”在打开的文件夹中选择“新建文件”按钮。
VS Code的HTML代码模板
qq_42416602的博客
11-11 1248
1 文件/首选项/用户片段，在搜索框中搜索html.json，打开此文件 2 在文件中写入如下代码： "Print to index": { "prefix": "html", //模板的快捷键 "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "\t<head>", "\t\t<m
VSCode中快速创建Html文件
记录和分享属于我的“IT”时光。
02-02 2282
VSCode中快速创建Html文件
VScode使用全指南 (环境配置，插件推荐，美化) (C++,Python,LaTeX,R...)
LiuKairui的博客
03-02 2万+
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，使用Web技术Electron搭建，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展。软件跨平台支持 Windows、Mac 以及 Linux。 1.安装 搜索官网直接下载(推荐测试版insider)...
prettier - vscode 保存代码自动格式化插件安装与配置项备注
_
04-02 4733
目录 prettier - vscode 保存代码自动格式化插件 配置保存文件时自动格式化 配置保存时HTML标签不自动换行（2020.12.03 13:58 再更新） 我的改动 关于配置项 项目代码格式化 部分 prettier 配置及注释 部分 eslint 配置及注释 vetur 插件配置截图（针对 .vue 文件） prettier - vscode 保存代码自动格式化插件 安装自行百度，只需要在 vscode 插件里搜索 prettier，
VSCode初学者速成指南：一步到位的安装与配置技巧（附带5大高级配置秘籍）
# 1. VSCode安装与基础配置 ## 1.1 VSCode安装步骤 ...打开VSCode后，你将看到一个简洁的界面，它由几个关键部分组成：资源管理器用于浏览文件和文件夹、编辑器用于编写代码、侧边栏集成了搜索、版本控制等功能，底
vscode插件美化C/C++和HTML
qq_40170041的博客
08-01 464
输入html，下键选择html:5，自动补全整个开头语言。设置->搜索 Emmet Abbreviation。配置html语言自动补全，在设置中搜索Emmet。
使用VScode写一个html页面
10-15
本文给大家分享的是使用vscode编写的第一个html页面的全过程,非常的简单,菜鸟看看就行,高手请略过
漂亮：合理的预设和一些调整，可根据我的喜好用js-beautify来美化HTML
02-03
漂亮 根据我的喜好，使用js-beautify对HTML进行美化的一些调整。 安装 使用安装： $ npm install --save pretty 安装： $ yarn add pretty 用法 var pretty = require ( 'pretty' ) ; pretty ( STRING_OF_HTML ) ; 之前 <!DOCTYPE html > < html lang =" en " > < head > < meta charset =" UTF-8 " > < title > Home </ title > </ head > < body > This
vscode ts安装环境
04-18
vscode ts安装环境。。
vscode安装、html基本结构、标签、路径和图片格式
2302_79971597的博客
01-04 1660
不要着急不要着急，看到浏览前边那个框了吗，为了我们以后打开文件夹方便，我们在前边这个框里，给文件夹改个名，它不是叫Visual Studio Code吗，我们干脆取首写字母，叫它vscode好了，这样以后当我们看到vscode这个文件夹的时候，就能很容易的知道这个是Visual Studio Code的文件夹了。比如说你在C盘的某个文件夹新建了一个文件，这个文件的绝对路径就是C盘那个文件夹里的文件，如果你把它放到D盘，它的绝对路径就会发生改变，变成了D盘下你写的那个文件夹中的文件。
vscode安装及快速上手写html代码
m0_74284629的博客
12-26 2283
安装vscode，安装所需要的插件，在vscode快速生成代码结构，快速注释，快速取消注释，一次输入多个标签。
零基础HTML入门教程(2)——VSCode安装
weixin_61808806的博客
12-01 874
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。[2]
vscode配置html_vscode安装方法及常用插件安装
weixin_39689622的博客
11-20 1553
本文面向纯前端小白，没啥新鲜的全是基本操作，已入门的同学请绕行。一、进入vscode官网Visual Studio Code - Code Editing. Redefined​code.visualstudio.com这块是根据操作系统选安装包。对号入座，选Stable即可。macOS 用户直接解压.zip，点击.app安装，请跳转至步骤三二、windows用户安装选项请无脑下一步，看到这个注意...
vscode 好用插件
suuntil的博客
02-18 815
Prettier 一键美化你的JavaScript/TypeScript/CSS代码 Color Highlight 直观展示你定义的颜色 CSS Peek 可以在HTML中通过CSS id或则class来定位到其定义 Auto Close Tag 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改 Chinese 将界面转换为中文 open in browser 用浏览器打开你的文件 GBKtoUTF8 转换格式 Vetur Vue工具 npm Intellis
用vscode制作一个背诵英语单词的网页
03-08
要用VSCode创建一个用于背诵英语单词的网页，你需要遵循一些基本步骤，并结合HTML、CSS和JavaScript等技术。下面是一个简单的指南。 ### 步骤一：安装并配置环境 首先确保已经安装了Visual Studio Code (简称 VSCode) 和 Node.js 环境。Node.js 并不是必需品但是它可以帮助管理项目依赖以及运行本地服务器测试页面效果。 #### 安装Live Server插件 为了方便预览静态网站，在VSCode里推荐安装“Live Server”扩展程序，这可以让你直接点击启动实时刷新服务来查看改动后的成果而不需要手动刷新浏览器。 --- ### 步二：构建基础结构 在工作区新建文件夹存放此项目的所有资源文件： - 创建 `index.html` 文件作为主入口点； - 可选地添加样式表如 `style.css`; - 如果打算加入交互功能还需要准备脚本文件比如命名为 `script.js`. --- ### 步三：编写HTML布局 打开`index.html`, 编辑其中的内容形成用户界面的基本框架: ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"/> <title>每日一词</title> <!-- 引入外部css --> <link rel="stylesheet" href="./styles/style.css"> </head> <body> <div class="container"> <h1 id="word"></h1> <p id="meaning"></p> <button onclick="showNextWord()">下一个词汇</button> <!-- 这里的按钮会触发加载新单词的功能 --> </div> <!-- 包含 JavaScript 脚本 --> <script src="./scripts/script.js"></script> </body> </html> ``` --- ### 步四：设计外观 编辑 `style.css` 来美化你的应用，设置字体大小、颜色等视觉元素以提高用户体验感。 例如： ```css /* styles/style.css */ body { font-family: Arial; } .container{ text-align:center; } #word {font-size: larger;} #meaning{color:#567;} /* 更改解释文字的颜色 */ button{/* 添加合适的样式让按钮更美观 */} ``` --- ### 步五：实现JS逻辑 接下来就是最关键的一步——向 `script.js` 中加入代码去控制显示哪些单词及其含义给访客看。 这里简单演示如何从硬编码数组随机选取一条记录展示出来： ```javascript // scripts/script.js const words = [ {"en": "hello", "ch":"你好"}, //...更多词条... ]; function showNextWord(){ let randomIndex = Math.floor(Math.random() * words.length); document.getElementById('word').innerText=words[randomIndex].en.toUpperCase(); document.getElementById('meaning').innerText=`-${words[randomIndex].ch}`; } window.onload = showNextWord; ``` 以上就是一个非常简易版的记忆卡片式学习工具的基础形态啦！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值