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

这篇具有很好参考价值的文章主要介绍了前端基础从头学——VsCode使用教程+html基础(入门篇)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

前言

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

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

一、VsCode编辑器使用教程

1、VsCode的下载与安装

官网下载地址:https://code.visualstudio.com/
vscode教程html,前端,vscode,前端,html

2、安装两个有用的插件

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

vscode教程html,前端,vscode,前端,html
vscode教程html,前端,vscode,前端,html

3、新建文件

vscode教程html,前端,vscode,前端,html在这里创建一个文件,名字是demo-01.html,然后回车
*注意是html结尾的文件名
vscode教程html,前端,vscode,前端,html如果不是html后缀的,就是这个样子,这时候不要慌,右击然后重新命名就可以了
vscode教程html,前端,vscode,前端,html

二、第一个小项目

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

三、HTML基础知识

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

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

< b > 文本内容 < /b >

说明:文本内容将显示为粗体
vscode教程html,前端,vscode,前端,htmlvscode教程html,前端,vscode,前端,html

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

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

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

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

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

说明:文本内容将显示删除线
vscode教程html,前端,vscode,前端,html效果如下:

vscode教程html,前端,vscode,前端,html标题标签:h1-h6
vscode教程html,前端,vscode,前端,html
现在的效果如下:
vscode教程html,前端,vscode,前端,html

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

vscode教程html,前端,vscode,前端,html
现在效果是这样的:
vscode教程html,前端,vscode,前端,html

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

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

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

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

定义图像的语法是:

< img src=“url” />

URL 指存储图像的位置。

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

替换文本属性(Alt)

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

先把要放的图片放到这个html文件相同的路径下
vscode教程html,前端,vscode,前端,html

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

vscode教程html,前端,vscode,前端,html
vscode教程html,前端,vscode,前端,html
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>

写在最后

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

一键三连~文章来源地址https://www.toymoban.com/news/detail-801342.html

到了这里,关于前端基础从头学——VsCode使用教程+html基础(入门篇)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端 -- 基础 VSCode 工具生成骨架标签新增代码 解释详解

    目录 文档类型声明标签 Lang  语言种类  字符集 !DOCTYPE   文档类型声明,作用就是告诉浏览器 当前的页面是 使用哪种 HTML 版本 来显示的网页  HTML 版本也很多呀 ,比如 :  HTML5 ,HTML4,XHTML 等  !DOCTYPE html  就告诉浏览器,当前页面 是采用的是 HTML5 版本  来显示的网页  注

    2024年02月11日
    浏览(38)
  • 工具系列(七) 本文(4万字) | Git入门教程 | 初始本地仓库-推送合并到远程仓库 | 解读VScode与PyCharm配置与使用git | CodeGeeX与Tabnine使用 |

    点击进入专栏: 《人工智能专栏》 Python与Python | 机器学习 | 深度学习 | 目标检测 | YOLOv5及其改进 | YOLOv8及其改进 | 关键知识点 | 各种工具教程

    2024年02月21日
    浏览(59)
  • 【Markdown基础教程】VScode如何打开实时预览

    前言: Markdown编辑器的“实时预览”这一问题似乎已经是很多人的关注点了 这篇文章我将以VScode为例,教大家如何开启实时预览 在阅读本教程之前,推荐先简单看一看上一篇教程 Markdown编辑环境的下载 请分步阅读~ 方法一: 第一步:按Ctrl+Shift+P 第二步:搜索Markdown: Open Pr

    2024年02月11日
    浏览(93)
  • vscode html使用less和快速获取标签less结构

    扩展插件里面搜索 css tree 插件 下载 使用方法 选择你要生成的标签结构然后按CTRL+shift+p 第一次需要在输入框输入 get  然后选择 Generate CSS tree  less结构就出现在这个里面直接复制到自己的less文件里面就可以使用了  在html里面使用less 下载 Easy LESS 插件 自己创建.less文件保存

    2024年02月10日
    浏览(33)
  • 前端HTML入门基础

    阶段目标:掌握HTML、CSS常用布局技巧,能够独立制作网页。 目标:掌握标签基本语法,能够独立布局文章页。 今日目标:掌握标签基本语法,能够独立布局文章页。 核心技术点 网页组成 排版标签 多媒体标签及属性 综合案例一 - 个人简介 [外链图片转存失败,源站可能有防

    2024年02月13日
    浏览(36)
  • vscode设置vetur格式化代码(双引号变单引号 去除分号等)前端小白教程

    安装prettier 第一步设置 vetur  点击设置  搜索vetur  找到formatter js 选择prettier ⚠️这一步很重要 如果不是prettier 下面你设置也会没效果  找到设置settings.json的地方  找到    根据需要设置 再点击使用..格式化文档 选择  这个时候我们就可以 格式化的时候直接将双引号变成单

    2024年02月12日
    浏览(46)
  • 基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

    1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

    2024年02月02日
    浏览(70)
  • 【前端|HTML系列第2篇】HTML零基础入门之标签元素

    大家好,欢迎来到前端入门系列的第二篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)常用标签元素,帮助零基础小白快速入门。 掌握html常用表情的使用、基础特性以及用途。

    2024年02月11日
    浏览(67)
  • VSCode安装和使用教程

    1、下载 百度网盘:VSCodeUserSetup-x64-1.74.3.exe 提取码:8s8a 官网地址:https://code.visualstudio.com/ 2、安装 点击安装包→同意许可协议→按需修改安装位置→创建开始菜单→选择附加任务→开始安装 附加任务的勾选可以参考下图,“通过VScod打开”操作就是你在一个文件上点右键,

    2024年02月01日
    浏览(37)
  • VSCode使用教程

    VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内

    2024年02月22日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包