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

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的内容。
下一篇文章会介绍图像标签以及相对路径的内容,感谢浏览。

  • 12
    点赞
  • 68
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在引用中提到了一个学习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、付费专栏及课程。

余额充值