vscode安装和基本设置

目录

  • vscode安装和基本设置
    • 1.HTML标签
    • 2.标签属性
    • 3.HTML基本结构
    • 4.安装vscode
    • 5.安装Live Server插件
    • 6.HTML注释
    • 7.文档说明
    • 8.HTML字符编码
    • 9.HTML设置语言
    • 10.HTML标准结构

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这个文件要放在文件夹的最外面

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/630418.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JSP简单学习

JSP简单学习

jsp是在html中嵌入java代码 jsp也是在j2ee服务端中的java组件 第一次运行 在第一次运行jsp代码时会经历以下步骤&#xff0c;将jsp转为java代码&#xff0c;将java代码转为class文件。 所以通常会比较慢&#xff0c;编译后就好多了。 四大作用域 requestsessionpageapplica…
阅读更多...
使用pdfbox 为 PDF 增加水印

使用pdfbox 为 PDF 增加水印

使用pdfbox 为 PDF增加水印https://www.jylt.cc/#/detail?activityIndex2&idbd410851b0a72dad3105f9d50787f914 引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>3.0.1</ve…
阅读更多...
cesiumlab切片通过arcgisjs加载

cesiumlab切片通过arcgisjs加载

cesiumlab切片通过arcgisjs加载 需要注意2个地方&#xff0c;一个是tileInfo&#xff0c;一个是getTileUrl&#xff0c; 在tileInfo中定义好cesiumlab切片的相关信息。 getTileUrl 格式化url的格式。 注意设置编辑&#xff0c;避免超出范围报404。 <html lang"en"…
阅读更多...
【栈】【字符串和int类型转化】Leetcode 150 逆波兰表达式求值

【栈】【字符串和int类型转化】Leetcode 150 逆波兰表达式求值

【栈】【字符串和int类型转化】Leetcode 150 逆波兰表达式求值 解法1 栈 ---------------&#x1f388;&#x1f388;题目链接 Leetcode 150 逆波兰表达式求值 &#x1f388;&#x1f388;------------------- 解法1 栈 字符串转化为int类型数据: Integer.parseInt(s) Long.p…
阅读更多...
java多线程传参数

java多线程传参数

package com.myThread;public class AdminThread extends Thread{private String name;public void AdminThread(String name){this.name name;}Overridepublic void run() {//线程开始之后执行的代码for (int i 0; i < 100; i) {System.out.print(getName()"线程…
阅读更多...
Web前端-移动web开发——flex布局

Web前端-移动web开发——flex布局

移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好布局繁琐局限性&#xff0c;不能再移动端很好的布局 1.2 flex布局 操作方便&#xff0c;布局极其简单&#xff0c;移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部…
阅读更多...
ChatGPT 与生成式 AI 的崛起：第二十六章到第三十三章

ChatGPT 与生成式 AI 的崛起：第二十六章到第三十三章

原文&#xff1a;Rise of Generative AI and ChatGPT 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第二十五章&#xff1a;ChatGPT 用于国家网络安全和技术政策 介绍 恐怖分子、罪犯、警察、国防、执法机构、工程师、作家和学生等都在使用 ChatGPT&#xff0c;这是…
阅读更多...
如何进行产品的人机交互设计？

如何进行产品的人机交互设计？

产品的人机交互设计是指通过用户界面和用户体验设计来优化产品与用户之间的交互过程&#xff0c;从而提高产品的易用性、可用性和用户满意度。人机交互设计需要考虑用户的需求、行为模式、心理感受以及技术实现&#xff0c;下面我将介绍如何进行产品的人机交互设计。 首先&…
阅读更多...
蓝桥备战 每日一题 （1）

蓝桥备战 每日一题 （1）

二分法 代码如下&#xff1a; #include<iostream> #define ll long long using namespace std;ll query(ll n) {ll ret 0;while (n > 0) {ret n / 5; // 要计算 从 1 到 n 中 是 5 的倍数的个数&#xff0c;但是要注意 如果是 25 &#xff0c;要计算两次n / 5;}r…
阅读更多...
kubeadm常用命令

kubeadm常用命令

一 kubeadm token 命令 "kubectl和kubeadm命令执行的时候" 默认情况下,kubectl 在 $HOME/.kube 目录下查找名为config的文件可以通过设置KUBECONFIG环境变量或设置--kubeconfig参数来指定其他Kubeconfig文件 ​ 解决1&#xff1a; k8s token 过期 的解决方法 ① 总…
阅读更多...
【学习笔记】[AGC063E] Child to Parent

【学习笔记】[AGC063E] Child to Parent

提供一个多项式做法。 分别设 f u , i , g u , i f_{u,i},g_{u,i} fu,i​,gu,i​表示以 u u u为根时&#xff0c; a u i a_ui au​i和 a u ≥ i a_u\ge i au​≥i的方案数&#xff0c;合并子树 v v v时&#xff0c;转移如下&#xff1a; f u , i ∑ f u , i − k r g v . k…
阅读更多...
达梦报错：无效IP，设置达梦访问IP白名单

达梦报错：无效IP，设置达梦访问IP白名单

管理工具连接远程库&#xff0c;报错&#xff1a;无效IP 1.:关闭防火墙 systemctl status firewalld service iptables status 2.查看用户和用户状态 select username,ACCOUNT_STATUS from dba_users;3.查看用户 访问ip限制和资源限制 select id,failed_num,allow_addr fro…
阅读更多...
倒排索引介绍

倒排索引介绍

1.简介 倒排索引&#xff08;Inverted Index&#xff09;是信息检索系统中最常用的数据结构之一&#xff0c;它用来存储在全文搜索下某个单词存在于哪些文档或数据记录中。与传统的正排索引&#xff08;文档到关键词的映射&#xff09;不同&#xff0c;倒排索引建立了从关键词…
阅读更多...
目标检测开源数据集——道路坑洼

目标检测开源数据集——道路坑洼

一、危害 对车辆的影响&#xff1a;道路坑洼会导致车辆行驶不稳&#xff0c;增加车辆的颠簸&#xff0c;不仅影响乘坐舒适度&#xff0c;还可能对车辆的悬挂系统、轮胎等造成损害。长期在坑洼路面上行驶&#xff0c;车辆的减震系统、悬挂系统等关键部件容易受损&#xff0c;进…
阅读更多...
Redis和MySQL如何保持数据一致性

Redis和MySQL如何保持数据一致性

前言 在高并发的场景下&#xff0c;大量的请求直接访问Mysql很容易造成性能问题。所以&#xff0c;我们都会用Redis来做数据的缓存&#xff0c;削减对数据库的请求。但是&#xff0c;Mysql和Redis是两种不同的数据库&#xff0c;如何保证不同数据库之间数据的一致性就非常关键…
阅读更多...
【封装一个日志库（linux)】【转载】

【封装一个日志库（linux)】【转载】

原文链接&#xff1a; 工具库1&#xff1a;封装一个日志库&#xff08;linux)-CSDN博客 一、&#xff0c;需求 &#xff08;1&#xff09;封装一个c/c日志库&#xff0c;提供格式打印接口&#xff0c;编写程序代码时方便使用&#xff1b; &#xff08;2&#xff09; 格式打印…
阅读更多...
Mybatis----面向接口

Mybatis----面向接口

让mybatis自动生成dao层接口的实现类 这是dao层接口的实现类&#xff0c;在mybatis中我们可以省略这种实现接口的方式&#xff0c;直接面向接口操作数据库&#xff0c;mybatis可以帮我们自动生成接口的实现类&#xff0c;也就是下面这个实现类mybatis帮我们生成了。 1、修改se…
阅读更多...
检测射线与边界盒AABB相交（C#代码Unity环境下测试通过）

检测射线与边界盒AABB相交（C#代码Unity环境下测试通过）

说明&#xff1a;如果仅仅是再Unity环境下使用的话&#xff0c;直接使用Bounds.IntersectRay方法就好了&#xff0c;这里仅仅探索其算法。 上代码&#xff1a; bool RayCrossBounds(Ray ray, Bounds bounds) {if (bounds.Contains(ray.origin)) return true;//float tMinX fl…
阅读更多...
P3952 [NOIP2017 提高组] 时间复杂度————C++

P3952 [NOIP2017 提高组] 时间复杂度————C++

目录 [NOIP2017 提高组] 时间复杂度题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 解题思路Code运行结果 [NOIP2017 提高组] 时间复杂度 题目背景 NOIP2017 提高组 D1T2 题目描述 小明正在学习一种新的编程语言 A&#xff0c;刚学会循环语句的他激动…
阅读更多...
openssl3.2 - 官方demo学习 - guide - tls-client-block.c

openssl3.2 - 官方demo学习 - guide - tls-client-block.c

文章目录 openssl3.2 - 官方demo学习 - guide - tls-client-block.c概述记录问题server和client IP都为localhostserver和client IP都为127.0.0.1想到解决问题的方法1想到解决问题的方法2笔记END openssl3.2 - 官方demo学习 - guide - tls-client-block.c 概述 tls 客户端 官…
阅读更多...
最新文章

Copyright @ 2022~2023