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

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

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

目录

  • 1.下载及安装vsCode
    • 1.1下载vsCode
    • 1.2安装vsCode
  • 2.插件
  • 3.创建网页文件
  • 4.DOCTYPE和lang以及字符集的作用
    • 4.1标签
    • 4.2lang语言
    • 4.3charset字符集
  • 5.在线编译器Online Compiler And Editor

1.下载及安装vsCode

1.1下载vsCode

  • 进入vsCode官网
    打开链接Visual Studio Code按照下面步骤下载

下面提供两种下载方法

方法一:

  • 对号入座根据系统选择安装包,选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的内容。
下一篇文章会介绍图像标签以及相对路径的内容,感谢浏览。

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

  1. Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)

    Table of Contents appendTo appendTo(source, target) 源代码 append prependTo ​ ​ ​ ​ prependTo源码 prepend ...

  2. kvm虚拟化学习笔记(二)之linux kvm虚拟机安装

    1. 上传ISO文件,这里采用OEL5.8x64 iso 2. 开始安装OEL5.8 # virt-install --name=oeltest02 --ram 512 --vcpus=1 --dis ...

  3. Struts 2 的学习笔记(二) struts的配置流程和strut是2的工作原理

    2019独角兽企业重金招聘Python工程师标准>>> 配置及流程 1.       Web.xml中配置 <!-- struts2的核心过滤器  前端控制器 作用:接管请求. ...

  4. 微信小程序学习笔记(二)模板与配置

    文章目录 1. WXML 模板语法 1.1 数据绑定 1.1.1 数据绑定的基本原则 1.1.2 在 data 中定义页面的数据 1.1.3 Mustache 语法的格式 1.1.4 Mustache ...

  5. 大数据学习笔记二:Ubuntu/Debian 下安装大数据框架Hadoop

    文章目录 安装Java 为Hadoop创建用户 安装Hadoop 配置Hadoop 配置环境变量 设置配置文件 格式化namenode 启动hadoop集群 访问hadoop集群 大数据学习系列文章: ...

  6. STM32学习笔记二:命令行工具安装

    一目了然 1 简述 2 Windows Terminal 安装 3 PowerShell7 安装 4 Cmake安装 5 ninja安装 1 简述 熟悉 Linux 系统的小伙伴都清楚 Termina ...

  7. Mysql学习笔记(二)——表格及数据的插入

    Mysql学习笔记(二)--表格及数据的插入 文章目录 Mysql学习笔记(二)--表格及数据的插入 1.Mysql常用指令 2.创建表格 A.数据类型 B.完整性约束条件 3.查看表格 4.修改表格 ...

  8. pythonsze_python学习笔记二 数据类型(基础篇)

    Python基础 对于Python,一切事物都是对象,对象基于类创建 不同类型的类可以创造出字符串,数字,列表这样的对象,比如"koka".24.['北京', '上海', '深圳' ...

  9. Java 基础 第3阶段:高级应用——尚硅谷学习笔记(含面试题) 2023年

    Java 基础 第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 Java 基础 第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 第 9 章 异常处理 9.1 异 ...

最新文章

  1. 程序员必备网站之一:No Design
  2. mybatis insert 返回主键_面试准备季——MyBatis 面试专题(含答案)
  3. 云游戏打破硬件限制,传输体验或成发展掣肘!
  4. LightOJ - 1027 A Dangerous Maze —— 期望
  5. CSS动画示例(上一篇是CSS过渡…)
  6. java 代码冲突检测_Java中常见的代码冲突
  7. python全栈开发优势_Python全栈开发多少钱?学Python价格贵吗?
  8. 量子算法入门书籍推荐
  9. 自然语言处理 —— 2.7负采样
  10. java中 CopyOnWriteArrayList 的使用
  11. 基于卷积神经网络模型的MSTAR高分辨率图像数据集识别实践
  12. 黑马程序员-python笔记-从入门到入职
  13. 分布式数据库核心原理
  14. xp系统怎么关闭wmi服务器,XP系统电脑中解决wmi服务被禁用的开启方法
  15. springboot自定义start解析(start中配置从数据源)
  16. 【论文速览】PV-RCNN: Point-Voxel Feature Set Abstraction for 3D Object Detection
  17. Sqlite3并发读写注意事项
  18. 一页纸需求的应对方法 —— 五步法
  19. C/C++ 如何设计框架
  20. 3W字总结:如何准备校招进大厂?

热门文章

  1. IIC调试工具i2c-tools工具
  2. 阅读ethercat官方文档关于ethercat网卡驱动程序的一些内容
  3. javascript字典中添加数组_Javascript 数组与字典
  4. DropDownListFor传参数
  5. 白话空间统计番外篇:中位数中心算法
  6. 法律条文怎么翻译效果好
  7. Android热点的开启和关闭以及监听
  8. 在Linux下开发简易通讯录
  9. Delphi7网络聊天工具,UI美化
  10. 带毒网页成互联网公害 Google、江民积极应对