配置Web运行环境与第一个网页

安装与配置Web环境:

如下使用了VSC作为web的运行环境。

下面是VSC的官网点击进入:
Download Visual Studio Code - Mac, Linux, Windowsicon-default.png?t=N7T8https://code.visualstudio.com/download

1.下载

进入官网后可以看到有windows,linux,还有苹果按照自己的系统下载,我下载的是Windows...

下载完之后双击打开............................................

2.安装

接下来就是安装的过程..........................................

这里下一步..........................

点击安装然后等待一会.....................................................

此时就下载完成了,然后点击完成就OK................................

3.下载插件

进入页面成功后可以看到全是英文,此时就需要下载一个中文插件来翻译......................

选择的是插件,然后在搜索框里面搜索Chinese就会出现一个插件点击Install安装就好............

安装成功之后可以点Chage Language and Restart重启VSC........................................................

可以看到此时打开就变成了中文..............

如我们要配置web运行环境也是一样的安装插件,需要的插件如下:Code Runner,Live Server,open in browser................

第一个网页:

在这之前我们需要创建一个是html后缀的文件用来写网页代码.......

首先我们需要打开一个文件夹用来存放文件,过程如下:

选择你存放文件的位置...............

选择之后就会询问你是否信任,当然是信任................................................

在打开文件之后就需要创建html文件,如下,点击文件然后命名之后.html,就行了,它的文件标志图标是< >.........................

如下可以看到创建好了一个html后缀的文件了..........................

在VSC中可以使用!(英文的)然后回车就可以生成出一个网页的基本结构,步骤如下:

页面基本结构如下.......................

网页基本结构中:

  • !DOCTYPE是文件声明声明此网页为html。
  • html包含整个网页所有代码都需要写在html中。
  • head是网页头部用来定义一些信息。
  • meta charset="UTF-8"说明了网页使用的编码是UTF-8(全球通用编码格式)
  • title是网页的标题,标题会显示在浏览器的标题栏中。
  • body是书写我们可以在网页的所看到的内容的代码

此时我们就可以在文件中写一些代码,下面代码中的<h1>是最大的标题标签,img是在页面中显示一张图片,地址路径可以添相对的绝对的.........................

在写完代码之后可以右键然后点击Open with Live Server运行代码,如下是我的网页运行的结果:

到此就成功的配置和运行了一个网页程序。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Halcon深度学习项目实战系统教程

Halcon在机器视觉中的价值主要体现在提供高效、可扩展、灵活的机器视觉解决方案,帮助用户解决各种复杂的机器视觉问题,提高生产效率和产品质量。 缩短产品上市时间 Halcon的灵活架构使其能够快速开发出任何类型的机器视觉应用。其全球通用的集成开发环境(HDevelop)有助于降…

CDLKF不锈钢浸入式多级离心泵

一、构造特点与工作原理 CDLKF型不锈钢浸入式多级离心泵采用了先进的设计理念&#xff0c;其结构紧凑&#xff0c;占地面积小。泵体采用优质不锈钢材料&#xff0c;不仅保证了良好的抗腐蚀性和耐磨性&#xff0c;同时也确保了泵的长期稳定运行。 该泵的核心部件是多级离心叶轮&…

数字孪生在教学培训的应用场景

数字孪生技术在教学培训领域的应用场景非常广泛&#xff0c;它通过创建一个真实世界的虚拟副本&#xff0c;为教育和培训提供了全新的方法和手段。以下是一些具体的应用场景&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#…

2024/3/26 C++作业

定义一个矩形类&#xff08;Rectangle&#xff09;&#xff0c;包含私有成员&#xff1a;长(length)、宽&#xff08;width&#xff09;, 定义成员函数&#xff1a; 设置长度&#xff1a;void set_l(int l) 设置宽度&#xff1a;void set_w(int w) 获取长度&#xff1a;int…

centos7 使用docker安装了mongo 怎么设置远程链接,必须使用密码才能连接

docker run -d –name mongodb_container -e MONGO_INITDB_ROOT_USERNAMEroot -e MONGO_INITDB_ROOT_PASSWORDroot -e MONGO_INITDB_DATABASEdataserver -p 27017:27017 \ 无法在mongo容器里编辑文件 如果你无法直接编辑 MongoDB 容器内的配置文件&#xff0c;你可以尝试…

Oracle中实现根据条件对数据的增删改操作——Merge Into

一、需求描述 在我们进行项目开发的过程中&#xff0c;会遇到这样的场景&#xff0c;需要根据某个条件对数据进行增、删、改的操作&#xff1b;遇到这种情况我们有2种方法进行解决&#xff1a; 方法一&#xff1a;①查询指定条件&#xff1b;②根据查询出的指定条件结果在执行…

生成 SSH 公钥

Windows 用户建议使用 Windows PowerShell 或者 Git Bash&#xff0c;在 命令提示符 下无 cat 和 ls 命令。 1、通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen -t ed25519 -C "Gitee SSH Key"-t key 类型 -C 注释 输出&#xff0c;如&#xff1a; 中间…

Redis入门三(主从复制、Redis哨兵、Redis集群、缓存更新策略、缓存穿透、缓存击穿、缓存雪崩)

文章目录 一、主从复制1.单例redis存在的问题2.主从复制是什么&#xff1f;3.主从复制的原理4.主从搭建1&#xff09;准备工作2&#xff09;方式一3&#xff09;方式二 5.python中操作1&#xff09;原生操作2&#xff09;Django的缓存操作 二、Redis哨兵&#xff08;Redis-Sent…

Redis和MySQL如何保持数据一致性?

在高并发的场景下&#xff0c;大量的请求直接访问MySQL很容易造成性能问题。所以&#xff0c;我们都会用Redis来做数据的缓存&#xff0c;削减对数据库的请求。但是&#xff0c;MySQL和Redis是两种不同的数据库&#xff0c;如何保证不同数据库之间数据的一致性就非常关键了。 …

Vue3 新项目默认工程文件理解

Vue3 新项目默认工程文件理解 文章目录 Vue3 新项目默认工程文件理解0、工程文件结构图1、main.ts2、index.html源文件编译后 3、App.vue4、.d.ts 文件作用 0、工程文件结构图 1、main.ts // 引入 createApp 函数 import { createApp } from vue // 引入 style.css 文件&#…

工业镜头常用参数之实效F(Fno.)和像圈

Fno. 工业镜头中常用到的参数F&#xff0c;有时候用F/#&#xff0c;Fno.来表示&#xff0c;指的是镜头通光能力的参数。它可用镜头焦距及入瞳直径来表示&#xff0c;也可通过镜头数值孔径&#xff08;NA&#xff09;和光学放大倍率&#xff08;β&#xff09;来计算。有效Fno.…

FPGA亚稳态学习总结

首先是组合逻辑电路考虑的是竞争冒险&#xff0c;冒险会产生毛刺。重点研究如何去毛刺 时序逻辑电路考虑的是时序不满足会产生的亚稳态问题&#xff1a;如何考量时序满不满足呢&#xff1f;根据不同的场景又有不同的说法。 时序分析的两组基本概念 建立时间与保持时间 1.在…

【Flask开发实战】安装mysql数据库与配置连接

1、安装mysql 通过yum方式安装MySQL服务器&#xff1a; sudo yum install mysql-server 在安装过程中&#xff0c;系统可能会要求确认安装。按下Y键并按回车键继续。 安装完成后&#xff0c;MySQL服务器应已自动启动。可以使用以下命令查看和启动MySQL服务&#xff1a; sudo…

Go语言介绍以及如何在Go语言中操作MySQL数据库

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

卷起来——高级数据分析师

要成为一名高级数据分析师&#xff0c;需要掌握一系列的技能&#xff0c;包括数据处理、统计分析、机器学习、数据可视化以及业务理解等&#xff0c;喜欢或者想往这方面发展的童鞋们&#xff0c;卷起来&#xff0c;点击以下链接中的链接&#xff0c;备注"分析"进群交…

Godot 学习笔记(5):国际化多语言翻译,包含常用10种语言机翻!

文章目录 前言国际化翻译Api选择小牛测试 语言选择代码逻辑实体对象翻译帮助类导出模板读取文件翻译测试多语言测试 综合翻译文件准备测试代码测试结果 完整代码实体类翻译帮助类网络帮助类 最终效果翻译前翻译中翻译后 总结 前言 为了面向更大的市场&#xff0c;国际化是肯定…

TransformControls 是 Three.js 中的一个类,用于在网页中进行 3D 场景中物体的交互式操作。

demo案例 TransformControls 是 Three.js 中的一个类&#xff0c;用于在网页中进行 3D 场景中物体的交互式操作。让我们来详细讲解它的输入参数、输出、属性和方法&#xff1a; 输入参数&#xff1a; TransformControls 构造函数通常接受两个参数&#xff1a; camera&#…

gcc任意版本安装流程(linux)

一.更换镜像源 仅仅针对有需要换镜像需求的用户 sudo gedit /etc/apt/sources.list 用于在基于Debian的Linux发行版&#xff08;如Ubuntu&#xff09;上用来编辑软件源列表的命令。 我们更换阿里源&#xff1a; deb http://mirrors.aliyun.com/ubuntu/ focal main restricted…

Linux课程____shell脚本应用

一、认识shell 常用解释器 Bash , ksh , csh 登陆后默认使用shell&#xff0c;一般为/bin/bash&#xff0c;不同的指令&#xff0c;运行的环境也不同 二、 编写简单脚本并使用 # vim /frist.sh //编写脚本文件&#xff0c;简单内容 #&#xff01;/bin/bash …

ethers.js:sign(签名)

Signers 在ethers中Signer是以太坊账户的抽象&#xff0c;可以用来签名消息和交易&#xff0c;如将签名的交易发送到以太坊网络以执行状态更改的操作。 npm install ethers5.4.0// 引入 import { ethers } from ethers签名 this.provider new ethers.providers.Web3Provider(…