HTML开篇之安装VSvode(用记事本编辑HTML)

冷不防 2024-04-28 07:13 6阅读 0赞

#### 文章目录 ####

*  前端开篇知识点讲解
 *  1.HTML 结构
 *   *  1.1认识 HTML 标签
     *  1.2HTML 文件基本结构
     *  1.3标签层次结构
     *  1.4快速生成代码框架
     *  1.5用记事本写HTML
     *  1.6前端开发工具
     *  1.7下载vscode 及使用教学

**大家好，我是晓星航。今天为大家带来的是 HTML 相关的讲解！😀**

## 前端开篇知识点讲解 ##

网页三剑客：HTML CSS JavaScript

HTML 描述了用户的骨架。(页面里面有啥没啥) 骨 静态的

CSS 描述了网页的样式。(形容词) 皮 静态的

JS 描述了网络的行为。(如何和用户交互) 魂 动态的

## 1.HTML 结构 ##

### 1.1认识 HTML 标签 ###

HTML 代码是由 “标签” 构成的.

形如:

<body>hello</body>

*  标签名 (body) 放到 < > 中
 *  大部分标签成对出现. `<body>` 为开始标签, `</body>` 为结束标签.
 *  少数标签只有开始标签, 称为 “单标签”.
 *  5开始标签和结束标签之间, 写的是标签的内容. (hello)
 *  开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).

<body id="myId">hello</body>

### 1.2HTML 文件基本结构 ###

<html>
        <head>
            <title>第一个页面</title>
        </head>
        <body>
           hello world
        </body>
    </html>

*  **html 标签是整个 html 文件的根标签(最顶层标签)**
 *  **head 标签中写页面的属性.**
 *  **body 标签中写的是页面上显示的内容**
 *  **title 标签中写的是页面的标题.**

### 1.3标签层次结构 ###

*  父子关系
 *  兄弟关系

<html>
        <head>
            <title>第一个页面</title>
        </head>
        <body>
           hello world
        </body>
    </html>

其中:

*  head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
 *  title 是 head 的子标签. head 是 title 的父标签.
 *  head 和 body 之间是兄弟关系.

> 可以使用 chrome 的开发者工具查看页面的结构.
> 
> F12 或者右键审查元素, 开启开发者工具, 切换到 Elements 标签, 就可以看到页面结构细节.

![77aa56a2e58d4c839debda00b83cdc48.png][]

标签之间的结构关系, 构成了一个 **DOM 树**

> DOM 是 Document Object Mode (文档对象模型) 的缩写.

![0e9136c0a72945f0ba70855eaabcde04.png][]

### 1.4快速生成代码框架 ###

在 IDEA 中创建文件 `xxx.html` , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

细节解释: (了解即可, 不必深究)

*  `<!DOCTYPE html>` 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
 *  `<html lang="en">` 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览 器会根据此处的声明提示是否进行自动翻译).
 *  `<meta charset="UTF-8>"` 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
 *  `<meta name="viewport" connect="width=device-width, initial-scale-1.0">`
 *  `name="viewport"` 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
 *  `content="width=device-width, initial-scale=1.0"` 在设置可视区和设备宽度等宽, 并 设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

### 1.5用记事本写HTML ###

首先新建一个记事本，并将后缀改为html

![5cd4d16bf77a4fbeb99352d9d50d6e6e.png][]

用记事本格式打开它

![2dee316059c04943a97e679ab71ab936.png][]

在里面使用HTML语言格式写入我们需要展示的hello内容

![6443a4d3ebed464db014a966b77640ee.png][]

将他拖入我们浏览器中解析运行，就可以看到我们目标的hello啦！

![e61e75d7cd304cd1912f58d771589b7d.png][]

### 1.6前端开发工具 ###

前端开发，使用的开发环境，最主流的是这么两个：

1.  JB系列  
    IDEA 如果是专业版(教育版)，本身就是支持 前端 的  
    或者也可以使用 JB 提供的 WebStorm 但是他是收费的
2.  VSCode 免费方案。使用体验略逊于 WebStrom (100 vs 90)  
    注意 VSCode\[轻量级开发工具\] != Visual Studio\[重量级开发工具\]

### 1.7下载vscode 及使用教学 ###

下载vscode

在百度中搜索vscode，并点击进入官网

![33dc01a121374bdc88628ddc0cc5ae69.png][]

进入官网页面点击Download进行下载

![53606bbe56ea42c188c9d303f8d8e6e5.png][]

找到自己电脑需要下载的地方点击下载按钮，例如博主的电脑是Windows系统，所以博主点击的就是第一个

![24c81d5cc49c47ae9eb7d9c1beb9266b.png][]

点击下载之后，我们电脑就自动开始下载前端开发工具 — vscode

![97f172573ea34abdbff49b9ecfa5412f.png][]

下载完毕之后，我们无脑点击下一步即可轻松完成下载！！！

下载好后的图标展示

![717dd71f4f9e444996b5d3711c47e292.png][]

那么我们如何使用vscode呢？

进入vscode的初始界面

![825e42b56d3a4339b362a7eeb47b4f83.png][]

首先点击左上角的File(文件)，并选中Open Folder(打开文件夹)

![21b9ec89261249a9a78cf14c0b6ade2e.png][]

选中一个我们提前创建好的，要存储的文件夹

![7a769cacc04942b3b9cce8338761fd53.png][]

点击信任作者，这里的作者就是我们自己，所以是可以无条件信任的。

![4f22887f83bc4d5e9b3af83d4ed627a1.png][]

选好目录之后的界面

![efbb2d111d5a43d097cef0888384a5bf.png][]

在我们选中的文件夹中创建新的文件

![58b23e71a2624c52ac2123807590e07b.png][]

创建好新文件之后，我们就可以直接编写前端代码了，这里提示和高亮此时就都出现了，和我们之前用记事本写的方式比较，简直就是上升了一个档次呀！！！(记住写完代码后 ctrl + s进行保存)

![022ef2177ec44a05b8f8c12162c90e33.png][]

如何运行我们的vscode代码呢？

右键我们新建的文件，然后选择 在文件资源管理器中显示

![7c4c7834fd814d1cb4d13dc41d14a25b.png][]

打开文件资源管理器

![2defe5e1d0154e50bad24153409e70bd.png][]

在文件资源管理器中直接双击它，就能看到我们代码的运行界面啦！

![3c030fec95064e7c9b7a60f9e7a2e364.png][]

这里类似于拖拽我们的代码到浏览器运行，为什么我们不直接配置好环境直接和Java那样一点就运行呢？那是因为我们 html 这里的代码并不是全部都可以和Java代码一样一点就能运行，还是有有一些代码需要拖拽到里面才可以运行。

如何自动保存呢？

这里的hello.html后面有一个实心的小白点表示代码未保存

![979e93cfbf72463b9676070a88b71df8.png][]

在我们按下ctrl + s后，可以看到实心小白点消失了

![696a89dd7aa647be83299cfb8f015f3c.png][]

在左下角的选项中找到设置并打开，输入save，找到图中圈中画面把off改一下就能自动保存了！

![eefdeecc50ab4a9cac6eb4146daae3b9.png][]

此时我们代码再次书写时，我们的vscode就会自动帮我们保存代码啦！！！

![2b453d0760cb4dda86e8f9f3dc7ce144.png][]

汉化Vscode

1.  找到我们这个图标点击

![2a996c6fed5244018bb285df422f77ae.png][]

1.  在搜索栏中输入Chinese来查找中文并点击install(下载)

![a5329ee7339443028a4c09c90806f5e2.png][]

1.  下载完后我们点击弹出来的restart即可轻松转为汉化版本的Vscode了

![f8ac06a867bf4a4abf1d2b0a652db50d.png][]

1.  大功告成，Vscode已经成功汉化！！！

![d4c7083648714c3e89c39f4ff130680c.png][]

1.  如果我们想回退到英文版本，只需要把我们Chinese这个汉化补丁包卸载并重启我们的Vscode即可！！！

![5a9e07a0da4c40e1a5703cbb0aab8f2e.png][]

*感谢各位读者的阅读，本文章有任何错误都可以在评论区发表你们的意见，我会对文章进行改正的。如果本文章对你有帮助请动一动你们敏捷的小手点一点赞，你的每一次鼓励都是作者创作的动力哦！😘*

[77aa56a2e58d4c839debda00b83cdc48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/712096af37254e2c9951a6989ac037f5.png
[0e9136c0a72945f0ba70855eaabcde04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/b23919f7b20e416da195ad5992fb7b8e.png
[5cd4d16bf77a4fbeb99352d9d50d6e6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/56baac02161348dfa3b543572cf77490.png
[2dee316059c04943a97e679ab71ab936.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/2d14d2a363164b5e897798ec384ae245.png
[6443a4d3ebed464db014a966b77640ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/2e39099e440f4cefb624d2bac0732acc.png
[e61e75d7cd304cd1912f58d771589b7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/f8378eb918a8495da848708605408419.png
[33dc01a121374bdc88628ddc0cc5ae69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/0cc6f1879bc643df98d24f3e4a2a4bbe.png
[53606bbe56ea42c188c9d303f8d8e6e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/c2b0e48ba8f74cb09b62b6dce9a6906c.png
[24c81d5cc49c47ae9eb7d9c1beb9266b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/2425eadec75d4fe3a3ef6f987435815a.png
[97f172573ea34abdbff49b9ecfa5412f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/0f2c0ba96f874ecc8f9dd61fe3d5b15e.png
[717dd71f4f9e444996b5d3711c47e292.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/a74b60b026b546e9b3aa4d6e4d9fca70.png
[825e42b56d3a4339b362a7eeb47b4f83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/e3c4e38be8be4ea68ce623e78b64cc2f.png
[21b9ec89261249a9a78cf14c0b6ade2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/d4858638ae5647cf9ecdad9d4ec2d3ff.png
[7a769cacc04942b3b9cce8338761fd53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/a8b3bb2f7b634292bc5d219d7f508c46.png
[4f22887f83bc4d5e9b3af83d4ed627a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/4a78dc054ec04419ae511d2742d6d5ac.png
[efbb2d111d5a43d097cef0888384a5bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/bee0139507c94b06a65dab5dfd20ab84.png
[58b23e71a2624c52ac2123807590e07b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/76eb8db9c3114e27a884f420a84e3655.png
[022ef2177ec44a05b8f8c12162c90e33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/53eb800eb9a0401fb83f6eeccd5522ce.png
[7c4c7834fd814d1cb4d13dc41d14a25b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/0ea2bbafaaf84898bb42419f2f50b690.png
[2defe5e1d0154e50bad24153409e70bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/b6fb9994646d4df4a969d3066c949d3e.png
[3c030fec95064e7c9b7a60f9e7a2e364.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/57edc1d766994dacb18cccd87db9c054.png
[979e93cfbf72463b9676070a88b71df8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/6238d64f185b4b8a9406ef437013f035.png
[696a89dd7aa647be83299cfb8f015f3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/ee63ccfdea864a6897220d6ca7ff7648.png
[eefdeecc50ab4a9cac6eb4146daae3b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/b9e1697e083544e7b0abfcc1459b5f01.png
[2b453d0760cb4dda86e8f9f3dc7ce144.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/a98de8679e8948ecaad41e7de30326fb.png
[2a996c6fed5244018bb285df422f77ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/74438ac93c48413ab0da0a92d4e89c74.png
[a5329ee7339443028a4c09c90806f5e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/0e51e5f07ad045f48239207d18d8715c.png
[f8ac06a867bf4a4abf1d2b0a652db50d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/65b3574fbcf0480881fa6d9bf5398592.png
[d4c7083648714c3e89c39f4ff130680c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/97233d968e224c2f8a9e16c8bccf4325.png
[5a9e07a0da4c40e1a5703cbb0aab8f2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/42e5a4e8e28744348059dbcc4d34b897.png