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 ,点击安装

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

相关推荐
不好听6136 小时前
从一行 JSX 到屏幕像素:前端开发者必须懂的浏览器渲染管线
前端
恒拓高科WorkPlus6 小时前
企业级内网即时通讯建设模型:BeeWorks内网IM四层架构
前端
前端小李子7 小时前
前端环境变量裸奔?我用 EnvShield 给它穿了件防弹衣
前端
youtootech7 小时前
HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
前端·华为·harmonyos
2501_916008897 小时前
iOS应用开发工具全面解析:如何选择与优化开发效率
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
小林ixn7 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
醇氧9 小时前
CountDownLatch / CyclicBarrier / Semaphore 面试高频问答清单
前端·面试·职场和发展
qetfw10 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
甲维斯10 小时前
我要开始吹牛逼了!Kimi K3 “宇宙无敌”!
前端·人工智能