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

作者简介:hello!大家好,初学前端知识,请多多指教。

希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~

文章目录

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

前言

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

刚接触前端,零基础小白,从头开始学起,请大家多多指教~

下面是VsCode使用教程和html基础知识的简单介绍,希望这篇文章能帮助到更多初学前端的人,加油吧!

一、VsCode编辑器使用教程

1、VsCode的下载与安装

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

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

2、安装两个有用的插件

在VsCode编辑器里,这两个插件很有用哦,一定要提前安装好~

请添加图片描述

请添加图片描述

请添加图片描述

3、新建文件

在这里插入图片描述在这里创建一个文件,名字是demo-01.html,然后回车

*注意是html结尾的文件名

请添加图片描述如果不是html后缀的,就是这个样子,这时候不要慌,右击然后重新命名就可以了

在这里插入图片描述

二、第一个小项目

shift+1输入一个感叹号,然后回车

在这里插入图片描述

回车之后就出现这几行代码啦,直接在里写代码就好了,

在这里插入图片描述我们先写一个hello world

在这里插入图片描述然后右击面板,点击这里,自己选浏览器

在这里插入图片描述此时,浏览器里就会出现hello world了

在这里插入图片描述

三、HTML基础知识

1、 标签定义及用法

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

文本内容

说明:文本内容将显示为粗体

在这里插入图片描述在这里插入图片描述

2、 标签定义及用法

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

3、 标签定义及用法

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

4、 标签定义及用法

说明:文本内容将显示删除线

在这里插入图片描述效果如下:

在这里插入图片描述标题标签:h1-h6

在这里插入图片描述

现在的效果如下:

在这里插入图片描述

5、
标签定义及用法

在这里插入图片描述

现在效果是这样的:

在这里插入图片描述

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

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

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

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

定义图像的语法是:

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

URL 指存储图像的位置。

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

替换文本属性(Alt)

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

先把要放的图片放到这个html文件相同的路径下

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

HTML 文件路径

 	        picture.jpg 位于与当前网页相同的文件夹
   	picture.jpg 位于当前文件夹的 images 文件夹中
 	picture.jpg 当前站点根目录的 images 文件夹中
 		picture.jpg 位于当前文件夹的上一级文件夹中

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



    
    
    
    Document


    hello world
    hello world
    倾斜
    下划线
    删除线
    

一级标题

二级标题

三级标题

六级标题
第一段
第二段
第三段

写在最后

原创不易,希望大家多多支持!

点赞+收藏+评论

之后我会继续更新前端学习小知识,关注我不迷路

一键三连~

本文来自网络,不代表协通编程立场,如若转载,请注明出处:https://net2asp.com/fca6d75cf6.html