配置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.hqwc.cn/news/570596.html

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

相关文章

204基于matlab的图像融合

基于matlab的图像融合&#xff0c;包括三种方式&#xff0c;加权、PCA、IHS变换。比较三者融合后的图像差异。程序已调通&#xff0c;可直接运行。 204 matlab 图像融合 信息融合 - 小红书 (xiaohongshu.com)

Chrome/Edge 使用 Markdown Viewer 查看 Markdown 格式文件

Chrome/Edge 使用 Markdown Viewer 查看 Markdown 格式文件 0. 引言1. 安装 Markdown Viewer 插件2. 使用 Markdown Viewer 阅读 Markdown 格式文件 0. 引言 大部分程序员都喜欢 Markdown 格式的文件&#xff0c;这时给一些没有在电脑上安装 Markdown 编辑器的同事分享资料时&…

负氧离子监测站:创造健康生活环境

TH-FZ5在蓝天白云之下&#xff0c;那一座座高耸的全彩屏负氧离子监测站&#xff0c;如同一支支科技的绿芽&#xff0c;静静破土而出&#xff0c;为这片土地带来了新的生命力。这些现代化的设备不仅美化了环境&#xff0c;更是我们呼吸健康守护者&#xff0c;它们的存在让我们的…

使用ai智能写作场景之gpt整理资料,如何ai智能写作整理资料

Ai智能写作助手&#xff1a;Ai智能整理资料小助手 Ai智能整理资料小助手可试用3天&#xff01; 通俗的解释一下怎么用ChatGPT来进行资料整理&#xff1a; 搜寻并获取指定数量的特定领域文章&#xff1a; 想像你在和我说话一样&#xff0c;告诉我你想要多少篇关于某个话题的文…

oracle补丁升级(19.3-19.22)

一、备份原来的opatch和数据库文件 这里要根据自己的路径&#xff1a; mv /u01/app/oracle/product/19.3.0/db_1/OPatch /u01/app/oracle/product/19.3.0/db_1/OPatch.bakcd /u01/app mkdir -p /u01/app/backup tar -pcvf /u01/app/backup/oracle_backup.tar /u01/app/oracle/…

俚语加密漫谈

俚语加密是一种古老而有效的通信方式&#xff0c;将特定词语或短语在群体内赋予特殊含义&#xff0c;从而隐藏真实信息。类似于方言&#xff0c;它在历史上的应用不可忽视。随着计算机时代的到来&#xff0c;现代密码学通过数学运算编织密语&#xff0c;使得加密变得更加高深莫…

C语言运算符优先级介绍

1. 引言 什么是运算符 运算符是编程中用于执行算术、比较和逻辑操作的符号。它们是构建表达式的基本工具&#xff0c;类似于数学中的加、减、乘和除。 程序片段示例: 简单的算术运算符使用 #include <stdio.h>int main() {int a 5, b 2;int sum a b; // 使用加法…

数据结构(五)单链表专题

在开始之前&#xff0c;我先来给大家讲一下顺序表与链表的区别&#xff1a; 它们在堆上存储的差异&#xff1a; 我们可以很容易的知道&#xff0c;循序表是连续的有序的&#xff0c;但链表是杂乱的&#xff0c;它们通过地址彼此联系起来。 1. 链表的概念及结构 概念&#xff1…

高效解决Visual Studio无法识别到自定义头文件

文章目录 问题解决方案 问题 说明你没有好好配置项目属性 解决方案 把头文件都集中存放到一个文件夹里 之后我会持续更新&#xff0c;如果喜欢我的文章&#xff0c;请记得一键三连哦&#xff0c;点赞关注收藏&#xff0c;你的每一个赞每一份关注每一次收藏都将是我前进路…

掌握ES6的箭头函数:深入了解其实用性与规则

引言 ES6&#xff08;ECMAScript 2015&#xff09;引入了箭头函数&#xff0c;这是一种新的函数声明方式&#xff0c;它改变了我们编写JavaScript代码的方式。箭头函数提供了更简洁、更直观的语法&#xff0c;并且具有一些独特的特性和行为。本文将深入探讨箭头函数的规则、用…

C语言中位运算介绍

在C语言中&#xff0c;位运算是一种对二进制位进行操作的运算方式&#xff0c;它可以对数据的二进制表示进行位级别的操作&#xff0c;包括按位与、按位或、按位异或、按位取反等。位运算常用于处理底层数据结构、优化代码性能以及实现各种算法。本文将深入介绍C语言中的位运算…

C语言实现顺序表(增,删,改,查)

目录 一.概念&#xff1a; 1.静态顺序表&#xff1a;使用定长数组存储元素。 2.动态顺序表&#xff1a;使用动态开辟的数组存储。 二.顺序表的实现: 1.顺序表增加元素 1.检查顺序表 2.头插 3.尾插 2.顺序表删除元素 1.头删 2.尾删 3.指定位置删 3.顺序表查找元素 …