网页设计基础 第二讲：安装与配置 VSCode 开发工具，创建第一个 HTML 页面

TechLearn
2,766 阅读4分钟

课程简介

本节课将详细介绍如何安装和配置 Visual Studio Code（简称 VSCode），并使用它创建第一个 HTML 页面。通过实际操作，学生将学会基本的开发环境设置，并动手编写简单的网页。

知识回顾

什么是 HTML?

HTML 语言用于描述网页。

  • HTML 是指超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言，而是一种[标记语言]
  • 标记语言是一套标记标签 ( markup tag )
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了 HTML 标签及文本内容
  • HTML 文档也叫做 web 页面

HTML 网页结构

image.png

  • DOCTYPE声明了文档的类型
  • <html>标签是 HTML 页面的根元素，该标签的结束标志为</html>
  • <head>标签包含了文档的元数据（meta），如<meta charset="utf-8">定义网页编码格式为utf-8。
  • <title>标签定义文档的标题
  • <body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body>
  • <h1>标签作为一个标题使用，该标签的结束标志为`
  • <p>标签作为一个段落显示，该标签的结束标志为</p>

什么是 “IDE”

IDE 是集成开发环境的英文缩写 （Integrated Development Environment)，集成开发环境就是将在开发过程中所需要的工具或功能集成到了一起，比如：代码编写、分析、编译、调试等功能，从而最大化地提高开发者的工作效率。

IDE 通用特点： 提供图形用户界面，在 IDE 中可以完成开发过程中所有工作；

支持代码补全与检查，并提供快速修复选项；

内置解释器与编译器；

功能强大的调试器，支持设置断点与单步执行等功能。

前端开发IDE

而在前端开发中我们需要安装一个“趁手”的IDE，帮助我们更快更高效的开发，一个好的IDE是每个程序员的必备武器。前端开发IDE有很多种，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。

安装 VSCode 开发工具

1.下载与安装 访问官网：前往 Visual Studio Code 官方网站。 下载最新安装包：选择适合你操作系统的版本（Windows10+、macOS 或 Linux）。 但学校有许多还是windows7、windows8最后一个版本地址：1.70.3 code.visualstudio.com/updates/v1_…

安装：按照提示完成安装过程。

image.png 2.配置 VSCode 安装扩展(插件)：

  • view in browser:快速查看 HTML 文件在浏览器中的效果

  • HTML CSS Support:提升 HTML 文件的 CSS 支持功能

  • css peek: ctrl键快速定位到css类

  • CSS Navigation:也是快速定位到css类

  • vscode-icons：文件图标

  • Auto Rename Tag:用于自动重命名 HTML 或 XML 标签

  • Live Server：实时预览 HTML 页面

  • Prettier Formatter：格式化源代码

  • Color Picker：这个插件提供了一个颜色选择器，允许你从任何地方选择颜色，并在你的代码中使用它。

  • Material Icon Theme：vscode图标主题,支持更换不同色系的图标

  • Fitten Code： AI编程工具

  • images preview: 图片预览

  • HTML CSS Support：提供 HTML 和 CSS 支持。

  • 设置偏好：

  • 设置主题：强烈推荐，GitHub's VS Code themes 主题下载：推荐下载五星级，选择你喜欢的编辑器主题（如深色或浅色）。 marketplace.visualstudio.com/search?targ…

  • Snazzy Operator image.png

image.png

  • Ayu

image.png

  • 快捷键：根据个人习惯调整快捷键设置。
  1. 格式化代码：ctrl+shift+f
  2. 注释代码：ctrl+shift+/
  3. 生成html模板 shift+!+enter(!+tab键)

image.png

创建第一个HTML页面

  1. 创建新文件 新建文件：在 VSCode 中选择 File > New File。 保存文件：将文件保存为 index.html。
  2. 编写 HTML 代码：利用ctrl+!+回车，快速生成模板代码 基本结构：
  <!DOCTYPE html>

   <html lang="zh">
    <meta charset="UTF-8">
    <title>我的第一个网页</title>

    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页，我很高兴能够学习HTML。</p>
    <ul>
        <li>爱好1</li>
        <li>爱好2</li>
        <li>爱好3</li>
    </ul>
    <a href="http://www.budaos.com" target="_blank">访问布道师学习通官网</a>

 </html>

3.预览 HTML 页面 使用 Live Server 插件： 安装完成后，点击底部状态栏中的 "Go Live" 按钮。 浏览器将自动打开并显示你的 HTML 页面。

4.调试与修改 查看效果：观察页面的实际效果，并根据需要进行调整。 保存更改：每次修改后保存文件，页面会自动刷新。 通过这一讲，学生将学会如何使用 VSCode 进行网页设计，并亲手创建一个简单的 HTML 页面。这将为后续学习打下坚实的基础。

avatar
文章
阅读
粉丝