HTML学习笔记（二）(含vscode配置html_vscode安装方法及常用插件)

最新推荐文章于 2024-08-24 22:36:22 发布
最新推荐文章于 2024-08-24 22:36:22 发布
阅读量7.1k 收藏 70
点赞数 12
分类专栏： html 文章标签： vscode html 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/poem23/article/details/122608893
版权

hey,guys.我是poem23.
本篇文章会介绍Visual Studio Code的以及关于html的插件下载。

vsCode是一款轻量级的HTML编码工具。

如果你只是想试试用HTML编译，这里为你提供一个简易的在线编译网页，当然你也可以用它尝试其他语言的编译工作，我把它放在了本篇文章的末尾。

目录

1.下载及安装vsCode

1.1下载vsCode

下面提供两种下载方法

方法一：
在这里插入图片描述

  • 对号入座根据系统选择安装包，选stable即可。
  • macOS用户直接解压.zip,点击.app安装。

方法二：

  • 点击Download
    在这里插入图片描述
  • 根据操作系统选择相应安装程序
    在这里插入图片描述

以上两种方法任选一种下载

1.2安装vsCode

  • 同意并点击下一步
    在这里插入图片描述
  • 选择安装目录
    在这里插入图片描述
  • 勾选图中选项
    在这里插入图片描述
  • 这样安装部分就完成啦~
    在这里插入图片描述

2.插件

  • 双击打开VSCode，点击扩展
    在这里插入图片描述
  • 界面汉化插件安装
    • 搜索Chinese
    • 点击【install】，安装完成后重启，下面就是汉化之后的界面。
      在这里插入图片描述
  • 界面字体大小设置
    在这里插入图片描述

按照上面的的方法，推荐安装以下插件
在这里插入图片描述

这是都安装好的样子：（记得安装完要重启vscode哦）
在这里插入图片描述

3.创建网页文件

  • 点击文件->新建文件
    在这里插入图片描述
  • 点击文件->保存
    在这里插入图片描述
  • 将其保存为.html的格式
    在这里插入图片描述
  • 输入!(半角)并回车
    在这里插入图片描述
  • 在body里输入“我的第一个网页文件”
    在这里插入图片描述
  • 点击运行->启动调试->Chrome
    在这里插入图片描述
    在这里插入图片描述
  • 完成
    在这里插入图片描述

4.DOCTYPE和lang以及字符集的作用

VSCode工具生成骨架标签新增代码

4.1<!DOCTYPE>标签

文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>
这句代码的意思是：当前页面采取的是HTML5版本来显示网页。

注意：
1.<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

4.2lang语言

<html lang="en">

lang–language
用来定义当前文档的显示语言。
1.en定义语言为英文
2.zh-CN定义语言为中文

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页。
其实对于文档来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示成英文。

一般建议不要随意更改，浏览器可能会出现错乱。

4.3charset字符集

字符集(Character set)是多个字符的集合，一边计算机能够识别和存储各种文字。
在标签内，可以通过<meta>标签的charset属性来规定html文档应该使用哪种字符编码。

<meta charset="UTF-8">

charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码。
分割线

5.在线编译器Online Compiler And Editor

网页链接Online Compiler And Editor

  • 在搜索栏中输入HTML
    在这里插入图片描述
  • 双击打开HTML/CSS/Javascript，打开页面

在这里插入图片描述

  • 这样你就可以简单的尝试一下啦，不过重要文件记得要保存。

在这里插入图片描述

这就是本篇文章的全部内容了，对应视频p10、p11、p12的内容。
下一篇文章会介绍图像标签以及相对路径的内容，感谢浏览。

poem23
关注
专栏目录
Day19_9 前端入门之HTML标签、VScode安装配置
weixin_43717536的博客
09-19 1200
解析：1.不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异，在解析成网页时可能会存在差异导致用户体验极差。2.让不同的浏览器按照相同的标准显示结果，让展示的效果统一！1.html标签的结构 你好小可爱 其中：为开始标签，你好小可爱为包裹的内容，为结束标签结构说明：1. 标签由，/、英文单词或字母组成；并且把标签中包括起来的英文单词或字母称为标签名 2. 常见标签由两部分组成，我们称之为：双标签。
VScode配置C/C++开发环境，安装/环境配置/编译/调试/汉化/编码问题
D-boy
05-02 6173
本篇是学习B站 鹏哥学C语言 自己照视频写的学习笔记,请支持鹏哥https://www.bilibili.com/video/BV1UK411C7xi?p=1&vd_source=3a37b8d942720a3c1bea00242c7f2759 一键三连
VScode--HTML简单配置
YGJ的博客
04-19 6998
VScode--HTML常用插件配置
2024从零开始使用VSCode编程（静态页面制作篇）HTML+CSS+JS阶段
ssrsrrn的博客
07-25 2777
VSCode第一个前端静态页面的编写
vscode配置html环境
m0_61723200的博客
08-24 1万+
vscode配置html
vscode配置html开发环境
m0_51312071的博客
03-12 2802
配置vscode
一看就会系列之如何使用Vscode配置Html
2301_79002390的博客
01-13 3025
4.Easy LESS (用于实现编写less文件后生成css文件和wxss文件)5.LIve Server(实时预览运行效果）（只要代码有变化就可以自动进行更新）6.Open in browser（运行代码在浏览器打开并且查看运行结果）输入“configure language”，然后回车。1.Auto Rename Tag (同步修改前后标签的插件)在“vscode”顶部会出现一个搜索框。如果有不理解的地方可以加关注私信我。----对于字体的修改和自动保存。下一步，下一步，安装。
vscode安装及快速上手写html代码
m0_74284629的博客
12-26 1847
安装vscode，安装所需要的插件，在vscode快速生成代码结构，快速注释，快速取消注释，一次输入多个标签。
vscode安装leetcode-vscode:vscode学习笔记
07-07
vscode安装leetcode vscode 学习之旅 备注: 以下内容使用 mac 下的 vscode insider 版本, 思路是一致的 荐书: vscode 权威指南 「我知道, 我改行动了. 这是一片即将变红的蓝海」 -- 作者简述结识相伴历程, 于 2016.6...
vscode 前端常用必备插件汇总
2301_82243626的博客
04-29 575
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
leetcode中国--vscode-:常用的vscode插件
06-29
下面我们将详细探讨一些常用的VSCode插件，这些插件可以帮助你更好地利用VSCode进行LeetCode的挑战： 1. **LeetCode**：这是一个专门为LeetCode设计的VSCode插件，它提供了直接在编辑器内查看、运行和提交代码的...
【笔记】 C/C++ Windows - VScode配置C、C++环境（MinGW 、 cmake）
LawssssCat的博客
10-24 3248
在 windows 开发 c/c++ 一般是使用 visual studio 作为集成开发环境。但是它集成度非常高、包含的功能非常多；导致学习、使用成本非常高。如果只是要一个编译、调试的环境，可以尝试 vscode 搭建其环境。如果是初学者，相信成功搭建后，能对编译程序有一个新的理解。（而不是在 visual studio 中配置一堆+点击“启动/调试”按钮）
vs code中编写html的配置，插件安装
最新发布
weixin_43794311的博客
08-24 260
vs code好用的几款插件
Web学习（一） html基础标签
May the Force be with you
03-05 3236
Web学习（一） html基础标签 1.1 文档结构 文档结构 html的所有标签为树形结构，例如： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web应用课</ti
前端秘法引言(配置vscode, 以及html的基础)
lmy050813的博客
02-14 1660
vscode官网点击右上角的download根据不同的操作系统进行下载安装,我这里选的是Windows x64安装好后打开,点击左上角的文件(Files)->打开文件夹(open folder)->创建新文件->选择点击第一个图标,创建一个后缀名为.html的文件即可。
vscode进行对html的配置及调试
热门推荐
qq_40688442的博客
02-07 1万+
必要插件安装 Open HTML in Default Browser 用默认浏览器打开 HTML 文件 在资源管理器中，HTML 文件右键显示 在浏览器中打开 菜单 在编辑器中，HTML 文件右键显示 在浏览器中打开 菜单 支持语言：英语(en)、简体中文(zh-cn)、繁体中文(zh-tw)、日语(ja) 快捷键支持: ctrl + 1 Open in Browser（安装推荐） ...
html的vscode快速入门
qq_41867900的博客
12-13 208
html的vscode快速入门 新建文件 在工作区右键新建文件 Emmet语法规则 https://blog.csdn.net/qq_33744228/article/details/80910377 可以快速编辑html代码，提升编辑效率 vscode快捷键 https://www.cnblogs.com/schut/p/10461840.html 好用的插件 Chinese 汉化vscode Material Theme 美化vscode prettier 格式化代码 Bracket Pair Colo
零基础HTML入门教程(2)——VSCode安装
weixin_61808806的博客
12-01 818
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。[2]
vscodehtml环境配置_Vue项目搭建和VSCode环境配置
weixin_39957068的博客
12-20 424
一、安装nodejs前往nodejs官网，三下载nodejs然后点击安装，选择自己要安装的路径，此处我选择的是：C:\Program Files\nodejs，安装至完成。window+R,输入cmd,打开命令提示符窗口，输入：npm -V检测是否安装成功，如果输出版本号，则表示安装成功，如图：二、设置环境变量配置npm的全局模块的存放路径、cache的路径npm config set prefi...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值