网页设计基础 第二讲:安装与配置 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 页面。这将为后续学习打下坚实的基础。
相关推荐
拾光拾趣录19 分钟前
从“祖传”构造函数到 `class`
前端·javascript
wmm_会飞的@鱼24 分钟前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
yvvvy26 分钟前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn27 分钟前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity26129 分钟前
微服务架构
前端·微服务
Hilaku44 分钟前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明1 小时前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
Danny_FD1 小时前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip1 小时前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济1 小时前
后端程序员的CSS复习
前端