前端秘法引言(配置vscode, 以及html的基础)

目录

一.配置环境vscode

二.配置插件

三.vscode的实用小技巧

四.标题段落换行标签

五.格式化标签


一.配置环境vscode

vscode官网https://code.visualstudio.com/

点击右上角的download

根据不同的操作系统进行下载安装,我这里选的是Windows x64

安装好后打开,点击左上角的文件(Files)->打开文件夹(open folder)->创建新文件->选择

点击第一个图标,创建一个后缀名为.html的文件即可

二.配置插件

这里我们配置四个插件

大概说一下,第一个插件是为了保证我们在修改标签时同时修改<></>这两个

第二个是配置汉语言包,可有可无

第三个是我们能够直接在vscode界面运行代码打开浏览器

第四个是我们再修改并保存代码后不用刷新浏览器

三.vscode的实用小技巧

1.快速生成代码大纲

!+回车即可

lang = 'en'是默认语言为英语

charset="UTF-8"是默认的解码规则为UTF-8,因为大部分浏览器的编码规则是UTF-8

name="viewport" content="width=device-width, initial-scale=1.0"

这个解释起来有点麻烦,不过通俗来讲是为了让你的程序在移动端也能运行

2.Ctrl+s

快速保存代码,代码只有保存后才能在浏览器上显示出来效果

3.Ctrl+/

批量注释代码,html的注释语言为<!--  -->

四.标题段落换行标签

事实上html语言本身就是一种数据结构--Dom树,通过编写代码实现对数据的增删查改,而html语言是有一个一个标签组成的,这些标签实际就是树的节点,而其中又通过缩进来区分不同的层级,<html>是根,<body>与<head>同级

标题标签

<title>

在这个位置显示

段落标签

<p>

换行标签

<br>

五.格式化标签

1.加粗,strong,b

2.倾斜,em,i

3.删除线,del,s

4.下划线,ins,u

每种格式化标签都有两种代码表达方式,区别就是前者就有强调性

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端学习的笔记第二篇

vscode如何快速生成代码 ! Tab 效果&#xff1a; 解析&#xff1a; <!DOCTYPE html>: 指定当前html版本5。 <html lang"en">: lang > language&#xff0c;en > english。指定当前页面内容是英文的。 <meta charset"UTF-8">:…

搭建网站的步骤和顺序?搭建一个网站的基本流程是什么?

搭建网站的步骤和顺序&#xff1f;搭建一个网站的基本流程是什么&#xff1f; 一.领取一个免费域名和SSL证书&#xff0c;和CDN 1.打开网站链接&#xff1a;https://www.rainyun.com/z22_ 2.在网站主页上&#xff0c;您会看到一个"登陆/注册"的选项。 3.点击"…

使用二分查找优化时间复杂度

二分查找&#xff0c;也称为折半查找&#xff0c;是一种效率较高的查找方法。但是&#xff0c;折半查找要求线性表必须采用顺序存储结构&#xff0c;而且表中元素按关键字有序排列。我们应该如何用在具体问题中呢&#xff1f; 题目链接&#xff08;力扣&#xff08;LeetCode&am…

Linux操作系统基础(十二):yum软件包管理器

文章目录 yum软件包管理器 一、yum常用命令 二、yum在线安装软件案例 三、yum在线删除软件案例 yum软件包管理器 yum&#xff08; Yellow dog Updater, Modified&#xff09;是一个在 Fedora 和 RedHat中的 Shell 前端软件包管理器。基于RPM包管理&#xff0c;能够从指定的…

高效的工作学习方法

1.康奈尔笔记法 在这里插入图片描述 2. 5W2H法 3. 鱼骨图分析法 4.麦肯锡7步分析法 5.使用TODOLIST 6.使用计划模板&#xff08;年月周&#xff09; 7. 高效的学习方法 成年人的学习特点&#xff1a; 快速了解一个领域方法 沉浸式学习方法&#xff1a; 沉浸学习的判据&am…

matplotlib从起点出发(13)_Tutorial_13_Autoscaling

0 自动放缩 轴上的限制可以手动设置&#xff08;例如ax.set_xlim(xmin, xmax))&#xff0c;或者Matplotlib可以根据Axes上已有的数据自动设置它们。此种放缩行为有许多选项&#xff0c;如下所述。 我们将从一个简单的折线图开始&#xff0c;显示自动缩放将轴限制扩展到数据的…

如何生成生成一个修仙世界的狗血短剧剧本

如何生成生成一个修仙世界的狗血短剧剧本 生成一个修仙世界的狗血短剧剧本将上述剧本转为对话 生成一个修仙世界的狗血短剧剧本 剧本名称&#xff1a;《仙途情缘》 角色&#xff1a; 易天行&#xff1a;男主角&#xff0c;天赋异禀的修仙者&#xff0c;性格坚毅&#xff0c;正…

鸿蒙开发系列教程(十九)--页面内动画(2)

组件内转场动画 组件的插入、删除过程即为组件本身的转场过程&#xff0c;组件的插入、删除动画称为组件内转场动画。通过组件内转场动画&#xff0c;可定义组件出现、消失的效果。 transition(value: TransitionOptions) 参数可以定义平移、透明度、旋转、缩放这几种转场样…

rabbitmq自用记录

参考博客RabbitMq安装与使用&#xff08;mac&#xff09;高效总结&#xff08;亲测&#xff09;_mac 安装rabbitmq 服务端口-CSDN博客 启动服务 这里提前把redis服务也启动了 这里看到前端更改数据,后端进行日志打印 登录后访问rabbitmq网址

docker数据科学与spark镜像源与使用常见问题疑难解答

以下是一些与数据挖掘和数据科学相关的 Docker 镜像源&#xff1a; jupyter/all-spark-notebook: 此镜像包含 Jupyter Notebook 和 Spark 的完整环境&#xff0c;用于 Spark 开发和学习。 rocker/tidyverse: 此镜像包含用于 R 语言的 tidyverse 数据科学包。 jupyter/scipy-n…

代码随想录算法训练营Day25|回溯算法·组合总和III,电话号码的字母组合

组合总和III 题目&#xff1a;找出所有相加之和为n的k个数的组合。组合中只允许含有1-9的正整数&#xff0c;并且每种组合中不存在重复的数字。 组合变量个数为k个&#xff0c;和为n。简单思路是使用k重循环&#xff0c;一层层找出来&#xff0c;然后把每一层的数相加&#x…

单链表的介绍

一.单链表的概念及结构 概念&#xff1a;链表是⼀种物理存储结构上⾮连续、⾮顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表 中的指针链接次序实现的 。 结构&#xff1a;根据个人理解&#xff0c;链表的结构就像火车厢一样&#xff0c;一节一节连在一起的&#x…

浅析Linux追踪技术之ftrace:Event Tracing

文章目录 概述使用Event Tracing使用set_event接口使用enable接口 Event配置Event formatEvent Filtering过滤规则设置过滤器 Event TriggerTrigger语法 Trace marker相关参考 概述 Event Tracing&#xff08;事件追踪&#xff09;利用在内核代码中加入的各种Tracepoint&#…

计算机网络概述习题拾遗

学习目标&#xff1a; 自下而上第一个提供端到端服务的层次 路由器、交换机、集线器实现的功能层 TCP/IP体系结构的网络接口层对应OSI体系结构的哪两个层次 分组数量对总时延的影响 如果这篇文章对您有帮助&#xff0c;麻烦点赞关注支持一下动力猿吧&#xff01; 学习内容…

Hive的Join连接、谓词下推

前言 Hive-3.1.2版本支持6种join语法。分别是&#xff1a;inner join&#xff08;内连接&#xff09;、left join&#xff08;左连接&#xff09;、right join&#xff08;右连接&#xff09;、full outer join&#xff08;全外连接&#xff09;、left semi join&#xff08;左…

课时27:内容格式化_输入格式化_EOF原理

3.2.1 EOF原理 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 场景需求 在运维岗位中&#xff0c;有非常多的场景需要我们在脚本中编写应用软件的配置文件。在这些应用软件的配置文件中&#xff0c;经常携带大量的格式&#xff0…

第四篇【传奇开心果微博系列】Python微项目技术点案例示例:美女颜值判官

传奇开心果微博系列 系列微博目录Python微项目技术点案例示例系列 微博目录一、微项目目标二、雏形示例代码三、扩展思路四、添加不同类型的美女示例代码五、增加难度等级示例代码六、添加特殊道具示例代码七、设计关卡系统示例代码八、添加音效和背景音乐示例代码九、多人游戏…

一文看懂春晚刘谦魔术

魔术步骤 step1: 准备4张牌,跟随魔术步骤,见证奇迹 step2: 将4张牌平均斯成两份,并叠在一起 step3: 将牌堆顶数量为名字字数的牌移到牌堆底 step4: 将前三张牌放在牌堆中间并取出牌堆顶的一张牌放到屁股下 step5: 南方人、北方人、不确定分别取顶上的1/2/3张牌插入牌堆…

Stable Diffusion主流UI详细介绍

Stable Diffusion目前主流的操作界面有WebUI、ComfyUI以及Fooocus 这里webui和fooocus在人机交互上的逻辑是一样的&#xff0c;fooocus界面更加简洁。 comfyui是在人机交互上是采用流程节点的交互逻辑&#xff0c;和上面略有区别。 界面分别如下&#xff1a; WebUI界面如下 we…

C/C++内存管理:new、delete功能及原理实现

目录 一、C/C内存分布 二、C中内存管理方式 2.1new/delete操作内置类型 2.2 new和delete操作自定义类型 三、operator new与operator delete函数 四、new和delete的实现原理 4.1内置类型 4.2自定义类型 五、定位new 一、C/C内存分布 int globalVar 1; static int sta…