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

一、课程简介

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

二、知识普及

什么是 "IDE"

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

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

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

内置解释器与编译器;

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

前端开发IDE

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

二、安装 VSCode 开发工具

  1. 下载与安装 访问官网:前往Visual Studio Code 官方网站。 下载安装包:选择适合你操作系统的版本(Windows、macOS 或 Linux)。 安装:按照提示完成安装过程。
  2. 配置 VSCode 安装扩展: Live Server:实时预览 HTML 页面。 HTML CSS Support:提供 HTML 和 CSS 支持。 Bracket Pair Colorizer:为括号着色,提高可读性。 设置偏好: 设置主题:选择你喜欢的编辑器主题(如深色或浅色)。 快捷键:根据个人习惯调整快捷键设置。 三、创建第一个 HTML 页面
  3. 创建新文件 新建文件:在 VSCode 中选择 File > New File。 保存文件:将文件保存为 index.html。
  4. 编写 HTML 代码 基本结构:
xml 复制代码
<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://example.com">访问示例网站</a>
<img src="转存失败,建议直接上传图片文件 path/to/image.jpg" alt="描述性文字转存失败,建议直接上传图片文件">
  1. 预览 HTML 页面 使用 Live Server 插件: 安装完成后,点击底部状态栏中的 "Go Live" 按钮。 浏览器将自动打开并显示你的 HTML 页面。 4. 调试与修改 查看效果:观察页面的实际效果,并根据需要进行调整。 保存更改:每次修改后保存文件,页面会自动刷新。 通过这一讲,学生将学会如何使用 VSCode 进行网页设计,并亲手创建一个简单的 HTML 页面。这将为后续学习打下坚实的基础。
相关推荐
烛阴3 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言7 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴17 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n1 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript