Web前端开发之HTML_1

  • 第一个前端程序
  • VS Code安装
  • VS Code 快捷键

1. 第一个前端程序

使用记事本,新建一个文本文档,重命名为Welcome.html,如下图:

用记事本打开文档,内容输入如下:

<html>

<head>

<title>我的网页</title>

</head>

<body>

Hello,我的第一个网页

</body>

</html>

保存后,用浏览器打开文件,显示如下:

2. 前端工具的选择与安装(浏览器、开发者工具--VSCode)

安装包下载地址:https://code.visualstudio.com/

双击安装包进行安装,步骤如下:

安装完成后,打开软件界面如下,

可点击箭头所指处搜索Chinese,安装汉化插件后点击右下角弹出提示会在重启后生效

按照提示重启后,汉化界面如下:

3. VS Code 开发者工具快捷键

  • VSCode打开文件夹 与创建文件:选择文件夹或者将文件夹拖拽到资源管理器区域
  • 生成浏览器文件 .html 的快捷方式: !+ 回车 (英文状态下)
  • 代码格式化:Shift + Alt + F
  • 向上或向下移动一行:Alt + ↑ 或 Alt + ↓
  • 快速复制一行代码:Shift + Alt + ↑ 或 Shift + Alt + ↓
  • 快速保存:Ctrl + S
  • 快速查找:Ctrl + F
  • 快速替换:Ctrl + H

4. VS Code插件------快速打开浏览器

在扩展中搜索open in browser ,点击安装

安装后回到编辑界面,可通过右击,选择如图所示选择直接看到运行结果

相关推荐
invicinble17 分钟前
【无标题】
前端
EasyGBS21 分钟前
从接入到稳定播放:无插件直播H5视频流媒体播放器EasyPlayer.js如何撑起Web端流媒体
开发语言·前端·javascript
不可能片场23 分钟前
nohup 之后进程还是死了:GUI 子进程的存活陷阱
前端·electron
名为沙丁鱼的猫72929 分钟前
React/JSX 编码规范
前端·javascript·react.js
是吕先森32 分钟前
【python】selenium实现web自动化测试
前端·python·selenium
Highcharts.js39 分钟前
甘特图纵向任务、横向时间显示图表可视化开发|Highcharts甘特图示例
开发语言·前端·javascript·可视化·甘特图·数据可视化·highcharts
yume_sibai1 小时前
Element Plus 导航与反馈组件完全指南(15个核心组件)
前端·elementui·交互
捷瑞电子工坊1 小时前
Ubuntu 下安装 VSCode 和 gcc 的简单步骤
vscode·ubuntu·代码编辑器·安装教程·gcc·deb·snap
sunoo-2292 小时前
【网络编程 + 数据库】select 与 epoll 核心区别详解 + SQLite 入门到 C 接口全攻略
linux·网络·数据库·vscode·学习·sqlite
可乐鸡翅yeah_2 小时前
hls.js 多实例并发踩坑,多视频页面播放器内存与冲突问题解决
开发语言·前端·javascript·音视频·hls·m3u8·m3u8在线播放