HTML5+CSS前端开发【保姆级教学】+前端介绍和软件安装

      学习了基础编程刚刚开始学习计算机的程序员,你是否会这样的想法:前端和后端是什么呢?如果你是刚上大学的大一大二基础小白,但是身边的卷王同学已经超前知道之后要从事前后端开发了,并且在学习各种框架的课程,Aahhahah,如果你还不懂,那就来对地方了。这篇文章会从前端的介绍、并且告诉你如何安装软件,保姆级地教你如何做一个简单属于自己页面!!!

一、前端介绍

      前端开发主要涉及网站和 App,用户能够从 App 屏幕或浏览器上看到东西。能够从 App 屏幕和浏览器上看到的东西都属于前端,就是这么简单啦,不要想象成什么复杂的东西啦!

二、软件安装

        学习一门计算机课程,最难的就是环境的配置,对于计算机学渣来说明明还没开始学习内容,安装软件就可以搞到疯掉,那么接着我们来说一下软件的安装,只需要进入官网下载即可,不用配置环境变量,就是这么难以置信。

第一步:在浏览器上搜索:vscode

第二步:点击第一个链接,就可以进入Visual Studio code的官网啦

      这个时候我们点击蓝色的按钮就可以安装啦,点击另存为,选择一个磁盘新建一个vscode的文件夹

第三步:软件运行安装

  • 右击以管理员身份运行或者打开,点击我同意此协议

其次在点创建桌面快捷方式

最后点击安装就可以啦!

  • 注意:如果在安装的过程中,出现路径的选项,点击选项我们在除了在C盘下的磁盘内新建文件夹

三、页面介绍

安装完成之后,就会出现以下的页面

  • 这个时候先别急,点击左边最下面的扩展

搜索Chinese,点击蓝色按钮就可以安装啦,因为我这边已经安装好啦,所以没有显示蓝色的install,安装完成就可以进行汉化啦!!!

  • 在搜索open

看到第二open in browser,在点击蓝色的install

  • 再次检查一下你的软件是否有这两个

四、代码初体验

      首先我们选择一个盘里面新建文件夹,取一个用来存放前端代码的名称,点进文件夹之后在新建一个文件夹名为:day01

  • 接下来介绍如何在软件中打开文件夹

点击文件在点击将文件夹添加到工作区

然后点击新建文件

  • 注意:

所有的网页或者页面都是一个html文件,每个html页面都是由若干个html标签构成的

  • 每个页面都必须要有html、head、title、body标签
  • 注释快捷键:Ctrl+/

知识点总结:
html标签是每个页面的根标签
head标签是页面的头部部分
title是每个页面头部选项卡部分
body是每个页面的内容部分,也就是用户使用的浏览窗口部分

注意:编辑完要ctrl+S才能运行成功

  • 如何运行呢?

右击界面,点击Open In Dafault Browsers

选择一个浏览器,我这边选择的是谷歌浏览器

  • 就会弹出来我们制作的网页,如果呢你想用别的浏览器,这边也可以点选Open In Dafault Browsers

      好啦!这期的内容我们就讲到这里,下一期会带大家学习如何运行以及制作一篇精美的网页,如果你喜欢这篇文章,不要忘记点赞收藏加关注哦!!!

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

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

相关文章

【Rabbitmq篇】RabbitMQ⾼级特性----消息确认

目录 前言: 一.消息确认机制 • ⾃动确认 • ⼿动确认 手动确认方法又分为三种: 二. 代码实现(spring环境) 配置相关信息: 1). AcknowledgeMode.NONE 2 )AcknowledgeMode.AUTO 3&…

QT入门之下载、工程创建、学习方法

1.QT下载链接 因为我的是下载在LINUX上面,所以这里提供LINUX平台下的下载方式: wget http://download.qt.io/archive/qt/5.12/5.12.9/qt-opensource-linux-x64-5.12.9.run 赋予可执行权限,加上 sudo 权限进入安装,这样会安装在…

初识Linux—— 基本指令(上)

前言 Linux简述 ​ Linux是一种开源、自由、类UNIX的操作系统,由著名的芬兰程序员林纳斯托瓦兹(Linus Torvalds)于1991年首次发布。Linux的内核在GNU通用公共许可证(GPL)下发布,这意味着任何人都可以自由…

劳动力市场

1.劳动力市场概述 (1)劳动力:所有有工作能力且愿意工作的人的总称,由那些正在工作(就业)和正在寻找工作(失业)的人组成,表示为:L(劳动力&#xf…

PHP代码审计 --MVC模型开发框架rce示例

MVC模型开发框架 控制器Controller:负责响应用户请求、准备数据,及决定如何展示数据 模块Model:管理业务逻辑和数据库逻辑,提供链接和操作数据库的抽象层 视图View:负责前端模板渲染数据,通过html呈现给用户…

Dify 通过导入 DSL 文件创建 Workflow 过程及实现

本文使用 Dify v0.9.2 版本,主要介绍 Dify 通过导入 DSL(或 URL)文件创建(或导出)Workflow 的操作过程及源码分析实现过程。Dify通过导入DSL文件创建Workflow过程及实现:https://z0yrmerhgi8.feishu.cn/wik…

Redis五大基本类型——List列表命令详解(命令用法详解+思维导图详解)

目录 一、List列表类型介绍 二、常见命令 1、LPUSH 2、LPUSHX 3、RPUSH 4、RPUSHX 5、LRANGE 6、LPOP 7、RPOP 8、LREM 9、LSET 10、LINDEX 11、LINSERT 12、LLEN 13、阻塞版本命令 BLPOP BRPOP 三、命令小结 相关内容: Redis五大基本类型——Ha…

有序数组的平方(leetcode 977)

一个数组&#xff0c;返回一个所有元素的平方之后依然是一个有序数组。&#xff08;数组中含负数&#xff09; 解法一&#xff1a;暴力解法 所有元素平方后再使用快速排序法重新排序&#xff0c;时间复杂度为O(nlogn)。 class Solution { public:vector<int> sortedSqu…

调用门提权

在我写的2.保护模式&#xff0b;段探测这篇文章中&#xff0c;我们提到了S位对于段描述符的控制&#xff0c;之前我们已经介绍了代码段和数据段&#xff0c;现在我们来把目光转到系统段 在这么多中结构里面&#xff0c;我们今天要介绍的就是编号为12的&#xff0c;32位调用门 结…

Web Service 学习笔记

Web Service 学习笔记 Web Service 基本概念 Web Service 即 web 服务&#xff0c;它是一种跨编程语言和跨操作系统平台的远程调用技术。 Java 中共有三种 Web Service 规范&#xff1a; JAX-WS(JAX-RPC): 基于 xml 数据JAXM&SAAJJAX-RS&#xff1a;基于 xml 或 json 数…

爬虫——JSON数据处理

第三节&#xff1a;JSON数据处理 在爬虫开发中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;是最常见的数据格式之一&#xff0c;特别是在从API或动态网页中抓取数据时。JSON格式因其结构简单、可读性强、易于与其他系统交互而广泛应用于前端与后端的数…

计算机编程中的设计模式及其在简化复杂系统设计中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 计算机编程中的设计模式及其在简化复杂系统设计中的应用 计算机编程中的设计模式及其在简化复杂系统设计中的应用 计算机编程中的…

【Tealscale + Headscale + 自建服务器】异地组网笔记

文章目录 效果为什么要用 Headscale云服务器安装 Headscale配置 config.yaml创建反向代理搭建管理 UI授权管理 UI添加互联设备参考 效果 首先是连接情况&#xff0c;双端都连接上自建的 Headscale&#xff0c; 手机使用移动流量&#xff0c;测试一下 ping 值 再试试进入游戏 可…

单片机学习笔记 2. LED灯闪烁

目录 0、实现的功能 1、Keil工程 2、代码实现 0、实现的功能 LED灯闪烁 1、Keil工程 闪烁原理&#xff1a;需要进行软件延时达到人眼能分辨出来的效果。常用的延时方法有软件延时和定时器延时。此次先进行软件延时 具体操作步骤和之前的笔记一致。此次主要利用无符号整型的范…

【Cesium】自定义材质,添加带有方向的滚动路线

【Cesium】自定义材质&#xff0c;添加带有方向的滚动路线 &#x1f356; 前言&#x1f3b6;一、实现过程✨二、代码展示&#x1f3c0;三、运行结果&#x1f3c6;四、知识点提示 &#x1f356; 前言 【Cesium】自定义材质&#xff0c;添加带有方向的滚动路线 &#x1f3b6;一、…

Vue之插槽(slot)

插槽是vue中的一个非常强大且灵活的功能&#xff0c;在写组件时&#xff0c;可以为组件的使用者预留一些可以自定义内容的占位符。通过插槽&#xff0c;可以极大提高组件的客服用和灵活性。 插槽大体可以分为三类&#xff1a;默认插槽&#xff0c;具名插槽和作用域插槽。 下面…

从零开始深度学习:全连接层、损失函数与梯度下降的详尽指南

引言 在深度学习的领域&#xff0c;全连接层、损失函数与梯度下降是三块重要的基石。如果你正在踏上深度学习的旅程&#xff0c;理解它们是迈向成功的第一步。这篇文章将从概念到代码、从基础到进阶&#xff0c;详细剖析这三个主题&#xff0c;帮助你从小白成长为能够解决实际…

Python 绘图工具详解:使用 Matplotlib、Seaborn 和 Pyecharts 绘制散点图

目录 数据可视化1.使用 matplotlib 库matplotlib 库 2 .使用 seaborn 库seaborn 库 3 .使用 pyecharts库pyecharts库 注意1. 确保安装了所有必要的库2. 检查Jupyter Notebook的版本3. 使用render()方法保存为HTML文件4. 使用IFrame在Notebook中显示HTML文件5. 检查是否有其他输…

【C++】vector 类模拟实现:探索动态数组的奥秘

&#x1f31f; 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。&#x1f31f; 如果你对string&#xff0c;vector还存在疑惑&#xff0c;欢迎阅读我之前的作品 &#xff1a; 之前文章&#x1f525;&#x1f52…

【ubuntu18.04】vm虚拟机复制粘贴键不能用-最后无奈换版本

我是ubuntu16版本的 之前费老大劲安装的vmware tools结果不能用 我又卸载掉&#xff0c;安装了open-vm-tools 首先删除VMware tools sudo vmware-uninstall-tools.pl sudo rm -rf /usr/lib/vmware-tools sudo apt-get autoremove open-vm-tools --purge再下载open-vm-tools s…