vscode调用HTML文件

vscode实现对HTML文件调用

  • 创建html文件
  • 下载拓展内容
    • 点击拓展
    • 查找需要的拓展
  • 导入html代码
  • 设置默认打开浏览器
  • 运行结果
  • 参考文献

做数据库课设的内容,尝试一些自己没有接触过的东西,了解如何创建一个网站以及数据库的一个应用

创建html文件

创建一个html的文件,加入后缀名在这里插入图片描述

下载拓展内容

点击拓展

可以使用快捷键ctrl+shfit+x
在这里插入图片描述

查找需要的拓展

输入open in browser,进行下载
在这里插入图片描述

导入html代码

因为我想要尝试生成一个带有登录和注册界面的网站,那么我就要导入相应的html代码
下面是一位博主的代码,参考连接放在最后

<!DOCTYPE html>
<html lang="en">
<head><metame="viewport" content="width=device-width, initial-scale=1.0"><title>Da charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta nocument</title>
</head>
<body><form action="https://www.baidu.com/"><table width="600px" border="1px" cellspcing="0"><tbody><tr height="40px"><td rowspan="4" align="center">总体信息</td><td colspan="2"></td></tr><tr height="40px"><td align="right">用户名:</td><td><input type="text" name="loginname"></td></tr><tr height="40px"><td align="right">密码:</td><td><input type="password" name="pwdname"></td> </tr><tr height="40px"><td colspan="2" align="center"><input type="submit" value="提交"><input type="reset" value="重置"></td></tr></tbody></table></form></body>
</html>

设置默认打开浏览器

在运行代码的旁边点击右键,找到Open in Default Browser
在这里插入图片描述
这里这样就会在默认的浏览器当中打开了

运行结果

完成上述操作之后进行运行
在这里插入图片描述

参考文献

vscode怎么运行代码HTML 怎么在vscode编写HTML代码
HTML登录表单的制作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/311122.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从仿写持久层框架到MyBatis核心源码阅读

接上篇手写持久层框架&#xff1a;https://blog.csdn.net/liwenyang1992/article/details/134884703 MyBatis源码 MyBatis架构原理&主要组件 MyBatis架构设计 MyBatis架构四层作用是什么呢&#xff1f; API接口层&#xff1a;提供API&#xff0c;增加、删除、修改、查询…

『番外篇八』SwiftUI 脑洞大开实现“另类”视图跟随方法

概览 在 SwiftUI 的开发中,我们时常需要用指尖丝滑般地操作指定视图:比如,我们需要在拖动视图后让它自动归位,或者拖动一个视图时让另一个视图跟随它移动。 我们随后将会详细讨论上述两个 SwiftUI 中与视图移动相关场景的实现。 在本篇博文中,您将学到如下内容: 概览1.…

matlab导出高清图片,须经修改后放入latex(例如添加文字说明,matlab画图不易操作)

一、背景 我们在写文章时&#xff0c;使用matlab画图后&#xff0c;如果不需要对图片进行额外修改或调整&#xff0c;例如添加文字说明&#xff0c;即可直接从matlab导出eps格式图片&#xff0c;然后插入到latex使用。 通常latex添加图片&#xff0c;是需要eps格式的。 但很…

大数据爱好者福音:Kudu框架学习网站,助你一臂之力!

介绍&#xff1a;Kudu是由Cloudera开源的列式存储引擎&#xff0c;专为处理大数据而设计。它是为了解决Hadoop生态系统中的一些挑战而被引入的&#xff0c;如流式实时计算结果的更新和时间序列相关应用等需求。 Kudu具有几个显著的特点&#xff1a;首先&#xff0c;它是用C语言…

【Vue2+3入门到实战】(15)VUE路由入门声明式导航的基本使用与详细代码示例

目录 一、声明式导航-导航链接1.需求2.解决方案3.通过router-link自带的两个样式进行高亮4.总结 二、声明式导航-两个类名1.router-link-active2.router-link-exact-active3.在地址栏中输入二级路由查看类名的添加4.总结 三、声明式导航-自定义类名&#xff08;了解&#xff09…

JavaWeb乱七八糟的报错及其原因和解决办法(持续更新中。。。)

报错&#xff1a; com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.原因&#xff1a;MySQL服务关闭…

Elasticsearch-8.11.1 (2+1)HA(高可用)集群部署

目录 一、环境描述 二、安装 ES 2.1 下载Elasticsearch 2.2 解压Elasticsearch 2.3 创建es服务账号/密码 2.3 修改服务器配置 2.4 配置节点 2.4.1 配置说明 2.4.2 配置高可用集群 2.4.2.1 maser节点服务配置 2.4.2.2 node1 节点服务配置 2.4.2.3 node2 节点服务配置…

mysql间隙锁demo分析

概述 通常用的mysql都是innodb引擎&#xff1b; 一般在update的时候用id都会认为是给行记录加锁&#xff1b; 在使用非唯一索引更新时&#xff0c;会遇到临键锁&#xff08;范围锁&#xff09;&#xff1b; 临键锁和表中的数据有关&#xff1b; mysq版本:8 隔离级别&#xf…

混凝土支撑模板的安装技巧有哪些?

在建筑工程中&#xff0c;混凝土支撑模板的正确安装对于确保结构的安全和工程的顺利进行至关重要。以下是一些实用的安装技巧&#xff0c;可以帮助施工人员更有效地安装混凝土支撑模板&#xff1a; 1. 熟悉设计和施工图纸 在安装前&#xff0c;彻底熟悉设计和施工图纸是非常重…

精致旅游网ROXANDREA 网页设计 html模板

一、需求分析 旅游网站通常具有多种功能&#xff0c;以下是一些常见的旅游网站功能&#xff1a; 酒店预订&#xff1a;旅游网站可以提供酒店预订服务&#xff0c;让用户搜索并预订符合其需求和预算的酒店房间。 机票预订&#xff1a;用户可以通过旅游网站搜索、比较和预订机票…

基于EPICS modbus模块的一通道电压监测项目

先介绍在本项目中使用到的硬件&#xff1a; 1&#xff09;开发板&#xff1a;为香橙派Zero2&#xff0c;安装系统如下&#xff1a; Distributor ID: Ubuntu Description: Ubuntu 22.04.2 LTS Release: 22.04 Codename: jammy 2&#xff09; USB转485模块&…

AJAX: 整理2:学习原生的AJAX,这边借助express框架

1. npm install express 终端直接安装 2. 测试案例&#xff1a;Hello World&#xff01; 新建一个express.js的文件&#xff0c;写入下方的内容 // 1. 引入express const express require(express)// 2. 创建服务器 const app express()// 3.创建路由规则 // request 是对请…