网页设计基础 第二讲:安装与配置 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 页面。这将为后续学习打下坚实的基础。
相关推荐
余人于RenYu9 分钟前
前端插件使用汇总
前端·javascript
2301_7891695422 分钟前
前端对接下载文件接口、对接dart app
前端
邴越31 分钟前
OpenAI Function Calling 函数调用能力与外部交互
开发语言·前端·javascript
uhakadotcom38 分钟前
React 和 Next.js 的基础知识对比
前端·面试·github
Billy Qin1 小时前
Tree - Shaking
前端·javascript·vue.js
Theodore_10221 小时前
ES6(8) Fetch API 详解
开发语言·前端·javascript·ecmascript·es6
月明长歌1 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
CodeCraft Studio1 小时前
Excel处理控件Spire.XLS系列教程:C# 合并、或取消合并 Excel 单元格
前端·c#·excel
头顶秃成一缕光1 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs1 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react