vscode安装和基本设置

发布时间：2024年01月17日

目录

vscode安装和基本设置

1.HTML标签

  1. 标签 又称 元素，是HTML的基本组成单位。
  2. 标签分为：双标签 与 单标签 （绝大多数都是双标签）。
  3. 标签名不区分大小写，但推荐小写，因为小写更规范。
  4. 双标签：
    在这里插入图片描述
  5. 单标签
    在这里插入图片描述
  6. 标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进：
    在这里插入图片描述

2.标签属性

  1. 用于给标签提供 附加信息。
  2. 可以写在：起始标签 或 单标签中，形式如下：
    在这里插入图片描述
  3. 有些特殊的属性，没有属性名，只有属性值，例如：
<input diabled>
  1. 注意点：
    1. 不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写）
    2. 属性名、属性值不能乱写，都是W3C规定好的
    3. 属性名、属性值，都不区分大小写，但推荐小写
    4. 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号
    5. 标签中不要出现同名属性，否则后写的会失效，例如：
<input type = "text" type = "password" >

3.HTML基本结构

  1. 在网页中，如何查看某段结构的具体代码？—— 点击鼠标右键，选择“检查”。
  2. 【检查】 和 【查看网页源代码】的区别：
    【查看网页源代码】看到的是：程序员编写的源代码。
    【检查】看到的是：经过浏览器 “处理” 后的源代码。
    备注：日常开发中，【检查】用的最多。
  3. 网页的 基本结构 如下：
    1. 想要呈现在网页中的内容写在 body 标签中
    2. head 标签中的内容不会出现在网页中
    3. head 标签中的 title 标签可以指定网页的标题
  4. 图示：
    在这里插入图片描述
  5. 代码：
    在这里插入图片描述

4.安装vscode

  • 安装路径不要有中文
  • 安装细节如下：
    在这里插入图片描述

  1. 安装中文语言包
    在这里插入图片描述
    在这里插入图片描述

  2. 使用 VSCode打开文件夹的两种方式

桌面打开或者vscode里面打开文件夹

  1. 调整字体大小
    在这里插入图片描述

  2. 设置主题
    在这里插入图片描述

  3. 安装图标主题： vscode-icons
    在这里插入图片描述

5.安装Live Server插件

在这里插入图片描述
打开方式：
在这里插入图片描述

  1. 可以更加方便的打开网页
  2. 打开网页的方式更贴近项目上线
  3. 代码出现改动后，可以自动刷新
  4. 根据自己的情况，去配置一下 VSCode 的自动保存

注意1：务必使用VSCode打开的是文件夹，否则 Live Server 插件无法正常工作！
注意2：打开的网页必须是标准的HTML结构，否则无法自动刷新！

6.HTML注释

快捷键：ctrl + /

  1. 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
  2. 作用：对代码进行解释和说明
  3. 写法：
<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">尚硅谷</marquee>
<!-- 下面的文字可以无限滚动 -->
<marquee>尚硅谷123</marquee>
  1. 注释不可以嵌套，以下这么写是错的（反例）
<!--
我是一段注释
<!-- 我是一段注释 -->
-->

7.文档说明

  1. 作用：告诉浏览器当前网页的版本
  2. 写法：
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>
  1. 注意：文档声明，必须在网页的第一行，且在 html 标签的外侧

8.HTML字符编码

  1. 计算机对数据的操作：
    存储时，对数据进行：编码
    读取时，对数据进行：解码
  2. 编码、解码，会遵循一定的规范 —— 字符集
  3. 字符集有很多中，常见的有（了解）：
  1. ASCII ：大写字母、小写字母、数字、一些符号，共计128个
  2. ISO 8859-1 ：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个
  3. GB2312 ：继续扩充，收录了 6763 个常用汉字、682个字符
  4. GBK ：收录了的汉字和符号达到 20000+ ，支持繁体中文
  5. UTF-8 ：包含世界上所有语言的：所有文字与符号。—— 很常用
  1. 总结：
  • 平时编写代码时，统一采用 UTF-8 编码（最稳妥）
  • 为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指
    定字符编码
<head>
<meta charset="UTF-8"/>
</head>

9.HTML设置语言

  1. 主要作用：
    让浏览器显示对应的翻译提示
    有利于搜索引擎优化
  2. 具体写法：
<html lang="zh-CN">

10.HTML标准结构

  • HTML标准结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>我是一个标题</title>
	</head>
	<body>
	</body>
</html>

  • 输入 ! ，随后回车即可快速生成标准结构

  • 删除快捷键：ctrl + shift + k

  • 网页强制刷新：按住shift再点击刷新

  • 配置 VScode 的内置插件 emmet ，可以对生成结构的属性进行定制
    在这里插入图片描述

  • 在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标

注意，favicon.ico这个文件要放在文件夹的最外面

文章来源:https://blog.csdn.net/2203_75300307/article/details/135654538
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章