前端基础从头学——VsCode使用教程+html基础(入门篇)

article/2025/9/22 18:24:19

作者简介:hello!大家好,初学前端知识,请多多指教。
希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~

文章目录

    • 前言
  • 一、VsCode编辑器使用教程
    • 1、VsCode的下载与安装
    • 2、安装两个有用的插件
    • 3、新建文件
  • 二、第一个小项目
  • 三、HTML基础知识
    • 1、 < b > 标签定义及用法
    • 2、< i > 标签定义及用法
    • 3、< u > 标签定义及用法
    • 4、< s > 标签定义及用法
    • 5、< br >标签定义及用法
    • 6、图像标签(< img >)和源属性(src)
  • 写在最后

前言

————————————————————————————

刚接触前端,零基础小白,从头开始学起,请大家多多指教~
下面是VsCode使用教程和html基础知识的简单介绍,希望这篇文章能帮助到更多初学前端的人,加油吧!

一、VsCode编辑器使用教程

1、VsCode的下载与安装

官网下载地址:https://code.visualstudio.com/

2、安装两个有用的插件

在VsCode编辑器里,这两个插件很有用哦,一定要提前安装好~
请添加图片描述

请添加图片描述
请添加图片描述

3、新建文件

在这里插入图片描述在这里创建一个文件,名字是demo-01.html,然后回车
*注意是html结尾的文件名
请添加图片描述如果不是html后缀的,就是这个样子,这时候不要慌,右击然后重新命名就可以了
在这里插入图片描述

二、第一个小项目

shift+1输入一个感叹号,然后回车
在这里插入图片描述
回车之后就出现这几行代码啦,直接在< body >< /body>里写代码就好了,
在这里插入图片描述我们先写一个hello world
在这里插入图片描述然后右击面板,点击这里,自己选浏览器
在这里插入图片描述此时,浏览器里就会出现hello world了
在这里插入图片描述

三、HTML基础知识

1、 < b > 标签定义及用法

< b >标签是使用来定义粗体的文本,意思就是在该标签中的文本将显示为粗体。

< b > 文本内容 < /b >

说明:文本内容将显示为粗体
在这里插入图片描述在这里插入图片描述

2、< i > 标签定义及用法

说明:文本内容将倾斜显示

3、< u > 标签定义及用法

说明:j将在文本内容下显示下划线

4、< s > 标签定义及用法

说明:文本内容将显示删除线
在这里插入图片描述效果如下:

在这里插入图片描述标题标签:h1-h6
在这里插入图片描述
现在的效果如下:
在这里插入图片描述

5、< br >标签定义及用法

在这里插入图片描述
现在效果是这样的:
在这里插入图片描述

6、图像标签(< img >)和源属性(src)

在 HTML 中,图像由 < img> 标签定义。

< img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是:

< img src=“url” />

URL 指存储图像的位置。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

先把要放的图片放到这个html文件相同的路径下
在这里插入图片描述

<img src="./demo.jpg" alt="">

在这里插入图片描述
在这里插入图片描述
HTML 文件路径

<img src="demo.jpg"> 	        picture.jpg 位于与当前网页相同的文件夹
<img src="images/demo.jpg">   	picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/demo.jpg"> 	picture.jpg 当前站点根目录的 images 文件夹中
<img src="../demo.jpg"> 		picture.jpg 位于当前文件夹的上一级文件夹中

好啦,看到这里,想必你对html基础知识一定也有了初步认识了,下边是以上操作的所有代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>hello world<b>hello world</b><i>倾斜</i><u>下划线</u><s>删除线</s><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h6>六级标题</h6>第一段<br>第二段<br>第三段<br><img src="./demo.jpg" alt="">
</body>
</html>

写在最后

原创不易,希望大家多多支持!
点赞+收藏+评论
之后我会继续更新前端学习小知识,关注我不迷路

一键三连~


http://chatgpt.dhexx.cn/article/RV1uYEFK.shtml

相关文章

VScode使用教程(菜鸟版)

1.VScode是什么&#xff1f; Visual Stdio Code简称VS Code&#xff0c;是一款跨平台的、免费且开源的现代轻量级代码编辑器&#xff0c;支持几乎 主流开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段提示、代码对比等特性&#xff0c;也拥有对…

Visual Studio Code 入门教程

一、入门教程 1.1 简介 Visual Studio Code &#xff0c;简称 VSCode。它是一款由微软开发且跨平台的轻量级但功能强大的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能&#xff0c;并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题…

PyTorch 手把手教你实现 MNIST 数据集

PyTorch MNIST 实现 概述获取数据网络模型train 函数test 函数main 函数完整代码 概述 MNIST 包含 0~9 的手写数字, 共有 60000 个训练集和 10000 个测试集. 数据的格式为单通道 28*28 的灰度图. 获取数据 def get_data():"""获取数据"""# 获取…

连续学习入门(三):Permuted MNIST/Split MNIST/Sequential MNIST 数据集

说明&#xff1a;本系列文章若无特别说明&#xff0c;则在技术上将 Continual Learning&#xff08;连续学习&#xff09;等同于 Incremental Learning&#xff08;增量学习&#xff09;、Lifelong Learning&#xff08;终身学习&#xff09;&#xff0c;关于 Continual Learni…

导入mnist数据集

下载一个代码后&#xff0c;发现需要导入mnist数据集&#xff0c;首先新建一个py的文件&#xff0c;把代码复制过来&#xff0c;然后记得一定要改成这样的格式&#xff1a; from tensorflow.examples.tutorials.mnist import input_data mnist input_data.read_data_sets(MNI…

【MNIST】

1. Normal Neural Network&#xff1a; 首先我用的是两层&#xff08;input layer 和 output layer&#xff09;的feed-forward的神经网络结构来训练数据, y wx b, 在输出层用的是softmax求概率&#xff0c;算loss用的是交叉熵的办法&#xff0c;选用梯度下降法来最小化loss…

MNIST数据集使用详解

数据集下载网址&#xff1a;http://yann.lecun.com/exdb/mnist/ 下载后无需解压&#xff0c;将其放在一个文件夹下即可&#xff1a; 数据说明&#xff1a; 数据集常被分为2~3个部分 训练集(train set)&#xff1a;用来学习的一组例子&#xff0c;用来适应分类器的参数[即权重]…

详解 Pytorch 实现 MNIST

MNIST虽然很简单&#xff0c;但是值得我们学习的东西还是有很多的。 项目虽然简单&#xff0c;但是个人建议还是将各个模块分开创建&#xff0c;特别是对于新人而言&#xff0c;模块化的创建会让读者更加清晰、易懂。 CNN模块&#xff1a;卷积神经网络的组成&#xff1b;trai…

十分钟搞懂Pytorch如何读取MNIST数据集

前言 本文用于记录使用pytorch读取minist数据集的过程&#xff0c;以及一些思考和疑惑吧… 正文 在阅读教程书籍《深度学习入门之Pytorch》时&#xff0c;文中是如此加载MNIST手写数字训练集的&#xff1a; train_dataset datasets.MNIST(root./MNIST,trainTrue,transform…

torchvision中datasets.MNIST介绍

用法介绍 torchvision中datasets中所有封装的数据集都是torch.utils.data.Dataset的子类&#xff0c;它们都实现了__getitem__和__len__方法。因此&#xff0c;它们都可以用torch.utils.data.DataLoader进行数据加载。以datasets.MNIST类为例&#xff0c;具体参数和用法如下所示…

万物皆用MNIST---MNIST数据集及创建自己的手写数字数据集

刚刚接触到人工智能的我们&#xff0c;必定会遇到一个非常非常非常熟悉的朋友------MNIST 这是一套流行的手写数字图片&#xff0c;常常被用来测试我们的思想和算法。这个数据集称为手写数字的MNIST数据库&#xff0c;从研究员Yann LeCun 的网站&#xff0c;可以得到这个…

Pytorch 之 MNIST 数据集实现

目录 1. 数据集介绍2. 代码2. 读代码&#xff08;个人喜欢的顺序&#xff09;2.1. 导入模块部分&#xff1a;2.2. Main 函数&#xff1a; 1. 数据集介绍 一般而言&#xff0c;MNIST 数据集测试就是机器学习和深度学习当中的&#xff02;Hello World&#xff02;工程。几乎是所…

MNIST数据集手写数字识别(CNN)

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

MNIST数据集详解及可视化处理(pytorch)

MNIST数据集详解及可视化处理&#xff08;pytorch&#xff09; MNIST 数据集已经是一个被”嚼烂”了的数据集, 作为机器学习在视觉领域的“hello world”&#xff0c;很多教程都会对它”下手”, 几乎成为一个 “典范”。 不过有些人可能对它还不是很了解, 下面来介绍一下。 MN…

Mnist数据集介绍

Mnist数据集已经是一个被"嚼烂"了的数据集了&#xff0c;很多关于神经网络的教程都会对它下手。因此在开始深度学习之前&#xff0c;先对这个数据集介绍一下。 Mnist数据集图片格式介绍 Mnist数据集分为两部分&#xff0c;分别含有60000张训练图片和10000张测试图片…

使用MNIST数据集

首先&#xff0c;必须向各位强调的是&#xff1a;该数据集名字叫MNIST&#xff0c;而非MINIST&#xff5e; 我之前就一直弄错了&#xff01; 哈哈&#xff5e; 网上有很多使用MNIST数据集的教程&#xff0c;要么太麻烦&#xff0c;要么需要翻墙下载&#xff0c;很慢。 在这里分…

Fashion MNIST进行分类

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

MNIST数据集简介与使用

MNIST数据集简介 MNIST数据集来自美国国家标准与技术研究所, National Institute of Standards and Technology (NIST)。训练集&#xff08;training set&#xff09;由来自250个不同人手写的数字构成&#xff0c;其中50%是高中学生&#xff0c;50%来自人口普查局&#xff08;t…

详解 MNIST 数据集

MNIST 数据集已经是一个被”嚼烂”了的数据集, 很多教程都会对它”下手”, 几乎成为一个 “典范”. 不过有些人可能对它还不是很了解, 下面来介绍一下. MNIST 数据集可在 http://yann.lecun.com/exdb/mnist/ 获取, 它包含了四个部分: Training set images: train-images-idx3-…

Mnist数据集简介

MNIST是一个手写体数字的图片数据集&#xff0c;该数据集来由美国国家标准与技术研究所&#xff08;National Institute of Standards and Technology (NIST)&#xff09;发起整理&#xff0c;一共统计了来自250个不同的人手写数字图片&#xff0c;其中50%是高中生&#xff0c;…