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

最新推荐文章于 2024-06-24 20:05:23 发布
最新推荐文章于 2024-06-24 20:05:23 发布
阅读量6.9k 收藏 68
点赞数 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
关注
  • 12
    点赞
  • 踩
  • 68
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【HTML】常用标签语义及用法、VSCode开发常用插件
weixin_45895411的博客
03-07 3955
本文介绍HTML基础知识，包括编辑器的使用，html的结构以及常用标签
零基础HTML教程(12)--VSCode小试牛刀
程序员大阳
09-22 3296
本文目录1. 前言2. 界面修改为中文3. 管理项目文件夹4. 添加文件夹5. 添加网页文件6. 编辑文件7. 代码格式化8. 代码格式化说明9. 预览网页10. 快速预览网页11. 小结 1. 前言 VSCode虽然是一个代码编辑器，没有从本质上改变编写代码的含义。但是VSCode的使用还是比较复杂的，为啥复杂呢，因为它提供了各式各样的功能，功能多，自然就复杂了。 所以还是要给各位新同学介绍下VSCode的基本用法，便于大家快速的上手操作。 2. 界面修改为中文 首先就是要将默认的英文界面，修改为熟悉的中
VScode插件——HTMLHint插件使用指南、规则配置说明指南、如何修改HTMLHint规则
这里是ShareJasmine的博客~
10-13 2043
VScode插件——HTMLHint使用指南、规则配置说明指南、如何修改HTMLHint规则。HTMLHint是一个用于检查HTML代码错误和潜在问题的插件。它提供了一系列的规则，用于检查HTML代码的语法、结构、标签使用等方面的问题。说白了就是以.html后缀结束的文件，进行语法检查，方便我们及时找到代码错误。
VSCode创建并运行html页面（使用Live Server插件）
最新发布
m0_51371779的博客
06-24 584
打开浏览器，输入网址 http://localhost:【端口号】/【html文件名】.html，我这里是http://localhost:5500/testhtml.html，大家根据自己的端口号和html文件名修改网址。在输入框中输入“xxx.html”，其中xxx是html文件的名字，回车。点击扩展按钮，搜索Live server，点击“安装”按钮。在弹出的窗口中选择刚才新建好的文件夹，点击“选择文件夹”在VSCode中点击“文件”，再点击“打开文件夹”在打开的文件夹中选择“新建文件”按钮。
如何在vscode里面快速运行html代码（包含如何在vscode里面编写html代码）
快乐学习
11-16 2万+
​前言： 1.如何在vscode编写html代码在我的另一篇文章当中有详细教程，这是超链接。 2.很多小伙伴编写了html代码后，在vscode里面右键找不到如何去运行代码，或者运行代码的方式很不方便。那么就要在vscode里面下载一个插件，这个插件运行html代码会非常的方便没有下载vscode插件之前，右键是没有这个open in Default Browser，就找不到怎么样运行vscode里面的html代码了。 三、额外知识（vscode选择html代码在哪个浏览器页面运行）
【开发环境】VSCode 安装插件 ( 简体中文插件 | Open in Browser 插件 | Auto Rename Tag 插件 | JS-CSS-HTML Formatter 插件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-18 6418
一、VSCode 插件安装 二、安装 简体中文 插件 三、安装 Open in Browser 插件 四、安装 JS-CSS-HTML Formatter 插件 五、安装 Auto Rename Tag 插件 六、安装 CSS Peek 插件
介绍：适用于 HTML 的 VS Code 扩展
新华编程特战队
02-08 2220
设置您的工作空间不仅包括物理空间，还包括应用程序和软件，这些应用程序和软件可以使编码 HTML 成为您富有成效的时间。是一个文本编辑器，它支持 HTML 格式，并提供节省时间、高效且免费使用的 HTML 扩展。Code（缩写为VS Code）是 HTML 编码应用程序，具有内置功能和扩展，可提升开发人员的编码体验。当我们开始编写 HTML 代码时，记事本是我们的首选编辑器。但从那时起，很多事情都发生了变化。更新、更高效的文本编辑器已经进入市场，为我们提供了很多选择。
vscode安装leetcode-vscode:vscode学习笔记
07-07
vscode安装leetcode vscode 学习之旅 备注: 以下内容使用 mac 下的 vscode insider 版本, 思路是一致的 荐书: vscode 权威指南 「我知道, 我改行动了. 这是一片即将变红的蓝海」 -- 作者简述结识相伴历程, 于 2016.6...
Marp: 将 Markdown 变为 PPT 式样的VScode 插件
10-30
这款插件极大地简化了制作幻灯片的过程，尤其是对于那些熟悉Markdown语法的人来说，他们无需学习复杂的幻灯片制作工具，就能快速创建出美观且内容丰富的演示。 Markdown的基本语法包括标题、文本样式（粗体、斜体）...
leetcode中国--vscode-:常用的vscode插件
06-29
下面我们将详细探讨一些常用的VSCode插件，这些插件可以帮助你更好地利用VSCode进行LeetCode的挑战： 1. **LeetCode**：这是一个专门为LeetCode设计的VSCode插件，它提供了直接在编辑器内查看、运行和提交代码的...
vscode+gtest+cmake
02-09
6. **学习资源**：压缩包中的“cmake学习笔记”、“vscode学习笔记”和“gtest学习笔记”应包含详细的步骤和示例，帮助初学者理解这些工具的使用方法。它们可能会涵盖CMake的基本语法、VSCode的配置选项、gtest测试...
html学习笔记第一天总结.pdf
10-11
VSCode提供了方便的功能，如快速生成页面骨架结构、代码缩放以及通过插件直接在浏览器中预览页面。编写HTML时，DOCTYPE<!DOCTYPE html>用于声明文档类型为HTML5，lang属性则用于定义文档的语言，例如lang="en"表示...
零基础HTML入门教程(2)——VSCode安装
weixin_61808806的博客
12-01 590
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 [1]。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。[2]
无痛学习HTML（2）手把手教你VS code的下载与安装！
a553224850的博客
07-01 1267
磨刀不误砍柴工。好的编译器对于代码的学习是至关重要的；而博主大力推荐html编译器：Visual Studio Code（视觉工作室）简称 VS code！他有着简洁的外观和多到吓人的插件，并且插件都非常实用！Fellow me 一起下载VS code，开启HTML学习旅程！
2023你需要使用的最佳VSCode扩展插件
Datainside的博客
11-15 227
集成 ESLint，用于检测并修复 JavaScript 和 JSX 代码中的语法错误和潜在问题，提高了代码质量和一致性。在输入 HTML 或 XML 标签时自动闭合标签，减少了手动输入的工作量，提高了编写 HTML 和 XML 的效率。当修改 HTML 或 XML 标签时会自动修改相应的闭合标签，避免了手动两处修改的麻烦，提高了代码的准确性。允许您轻松管理多个项目，快速切换项目间的文件和工作区，提高了多项目协作的效率。一款优雅的深色主题，为开发者提供了一种舒适的工作环境，同时减轻了眼睛的疲劳感。
Vscode MacOS版本下载及html配置
Regina_Cai的博客
09-19 7711
Mac版本的vscode下载及html环境配置
vscode中安装开发html5中需要的插件
AlZhuo的博客
09-07 8749
最近在学习H5，也开始尝试着用vscode来写h5的代码。vscode是一个很不错的剪辑器，已经用它来写过php，python，还有vue的代码了。最近使用它写H5的代码，推荐一些H5有关的插件。 1.Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中Emmet使用缩写语法快速编写HTML、CSS以及实现其他的功能，极大的提高了前端开发效率。 a.安装完之后，创建一个html的文件敲入！，然后按一下tab就会出现h5的基本框架。 b.可以直接用缩写敲入div，按tab，就会出现<div
前端学习第一天--编程软件vscode使用、HTML标签
bestier的博客
03-05 2945
vscode软件基本操作 HTML基础知识 HTML基本标签：标题标签、文本修饰标签、图片标签、超链接标签、列表、表格
Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++（Windows）【真正的小白版】
热门推荐
一苇以航
07-29 20万+
写在前面： 由于这学期（或者说这一年）一直在忙别的，也没什么闲心看博客了，近期发现自己的这篇文章:整理：Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++（Windows）竟然有了好多访问，也有不少童鞋问各种问题，非常感谢大家的支持，本来是自己整理的没想到有这么多人看hhh，正好近期自己换了台笔记本，就照着自己写过的VScode的教程自己搭建了一遍，...
vscode记笔记的插件
09-03
在引用中提到了一个学习vscode插件时编写的插件，其中操作界面主要是使用webview。这个插件旨在提供一个学习工具，而不是专门用于记笔记的插件。 然而，vscode是一个非常强大的代码编辑器，它提供了许多插件来扩展其功能。关于记笔记的插件，有很多可供选择。其中一些常用的插件是"Markdown All in One"、"Markdown Preview Enhanced"和"Markdown Notes"等。这些插件提供了便捷的markdown记笔记功能，可以帮助用户更高效地编辑和预览markdown文件。所以，如果你想在vscode中记笔记，可以尝试安装其中一个插件来实现你的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vscode插件学习:notebookforcode-vscode笔记插件](https://blog.csdn.net/qq1274323054/article/details/118334417)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [使用VScode中的Markdown插件写笔记](https://blog.csdn.net/weixin_45073036/article/details/107434191)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值