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

news2024/11/18 14:56:28

      学习了基础编程刚刚开始学习计算机的程序员,你是否会这样的想法:前端和后端是什么呢?如果你是刚上大学的大一大二基础小白,但是身边的卷王同学已经超前知道之后要从事前后端开发了,并且在学习各种框架的课程,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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android Framework层介绍

文章目录 前言一、Android Framework 层概述二、主要组件1. 应用程序接口(API)2. 系统服务3. Binder4. 资源管理5. Content Provider6. 广播接收器(BroadcastReceiver)7. 服务(Service) 三、与 Linux Kerne…

【C++滑动窗口】1248. 统计「优美子数组」|1623

本文涉及的基础知识点 C算法:滑动窗口及双指针总结 LeetCode1248. 统计「优美子数组」 给你一个整数数组 nums 和一个整数 k。如果某个连续子数组中恰好有 k 个奇数数字,我们就认为这个子数组是「优美子数组」。 请返回这个数组中 「优美子数组」 的数…

【paper】分布式无人水下航行器围捕智能目标

An Effective Strategy for Distributed Unmanned Underwater Vehicles to Encircle and Capture Intelligent Targets2022.8IEEE TRANSACTIONS ON INDUSTRIAL ELECTRONICS【Q1 7.5】Mingzhi Chen 上海理工大学 Q1 Background:本文试图解决一个什么样的问题&#xf…

【更新中】《硬件架构的艺术》笔记(三):处理多个时钟

介绍 单时钟设计更易于实现,也更少出现亚稳态、建立和保持时间违例方面的问题。但在实践中,很少有设计只在一个时钟下运行。 多时钟域 多个始终可以有以下一种或多种时钟关系: 1、时钟频率不同。 2、时钟频率相同,但相位不同…

Python_爬虫1_Requests库入门

目录 Requests库 7个主要方法 Requests库的get()方法 Response对象的属性 爬取网页的通用代码框架 理解requests库的异常 HTTP协议及Requests库方法 HTTP协议 HTTP协议采用URL作为定位网络资源的标识。 HTTP协议对资源的操作 理解PATCH和PUT的区别 HTTP协议与Requse…

从客户需求视角去认识ZLG | 边缘计算网关多种应用

在工业领域,串行总线与EtherNET总线广泛应用,物联网的兴起带来众多智能应用。尽管应用多样,但底层技术逻辑却殊途同归,本文将介绍ZLG致远电子串行总线和EtherNET总线之间的联动应用。 本文将从系统集成需求出发,以ZLG致…

Koa进阶:掌握中间件和参数校验的艺术

目录 一、首先下载依赖 二、在index.js中引入koa-parameter,一般挂载这个中间件时会放在注册请求体的后面 三、使用实例 四、如果跟我们所需求的参数不同,返回结果直接会返回422 koa-parameter一般是用来校验请求传过来的参数是否是自己所需要的的 G…

Linux下使用miniconda构建python运行环境

文章目录 miniconda安装构建python运行环境 miniconda安装 miniconda在linux环境下载安装: # Linux环境下使用wget命令下载选定的miniconda # 这里使用的是清华镜像,这个命令每次下载的是最新版本的miniconda wget -c https://mirrors.tuna.tsinghua.e…

解决failed to execute PosixPath(‘dot‘) 或者GraphViz‘s executables not found

在网上找了很多方法都没解决,所以写一篇文章帮助和我遇到同样问题的人 解决方法: 因为python解释器会解释转移字符,因此在环境变量中把\bin换成\\bin即可 解决过程: 系统:win10 已安装pip install graphviz&#xff0…

Deep-Live-Cam -面部交换、视频深度伪造

文章目录 一、关于 Deep-Live-Cam免责声明 二、安装(Windows/Nvidia)安装(手动)基本安装(CPU) GPU加速(可选)CUDA执行提供商(Nvidia)CoreML执行提供商&#x…

计算机毕业设计Python美食推荐系统 美团爬虫 美食可视化 机器学习 深度学习 混合神经网络推荐算法 Hadoop Spark 人工智能 大数据毕业设计

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

Scala-数据类型-概述(Scala 3.x 类型层次结构)

Scala Scala-数据类型 Scala1. Any — 顶级类型2. Matchable — 匹配类型3. AnyVal — 值类型的父类4. AnyRef — 引用类型的父类5. Null - 引用类型的子类型Tips: 为什么 null 不推荐使用? 6. Nothing - 底层类型 (Bottom Type)整理不易,对您有帮助的话…

嵌入式linux中红外接收基本方法分析

大家好,今天主要给大家分享一下,如何使用Linux系统中的红外接收驱动控制方法。 第一:Linux红外基本简介 红外遥控是我们常见的一种无线收发设备,具有抗干扰能力强,功耗低,成本低,易实现等优点。被很多电子设备特别是家用电器广泛采用,如电视遥控、空调遥控等。红外遥控…

AWTK-WIDGET-WEB-VIEW 实现笔记 (2) - Windows

在 Windows 平台上的实现,相对比较顺利,将一个窗口嵌入到另外一个窗口是比较容易的事情。 1. 创建窗口 这里有点需要注意: 父窗口的大小变化时,子窗口也要跟着变化,否则 webview 显示不出来。创建时窗口的大小先设置…

pgAdmin简单介绍

pgAdmin介绍 官网:https://www.pgadmin.org/ pgAdmin is the most popular and feature rich Open Source administration and development platform for PostgreSQL, the most advanced Open Source database in the world. pgAdmin may be used on Linux, Unix…

Linux笔记---调试工具GDB(gdb)

1. gdb的概念 GDB,全称GNU Debugger,是一个功能强大的开源调试工具,广泛用于Unix和类Unix系统,以及Microsoft Windows和macOS平台。GDB允许开发者在程序执行过程中查看内部运行情况,帮助定位和修复程序中的错误。 gd…

如何在 Ubuntu 上安装 Mattermost 团队协作工具

简介 Mattermost 是一个开源、自托管的通信平台,专为团队协作设计。它类似于 Slack,提供聊天、消息传递和集成功能。Mattermost 在重视数据隐私的组织中特别受欢迎,因为它允许团队在自己的服务器上管理通信。以下是 Mattermost 的一些关键特…

2. Django中的URL调度器 (自定义路径转换器)

在 Django 中&#xff0c;URL 路由通常使用路径转换器&#xff08;path converters&#xff09;来匹配和捕获 URL 中的特定模式&#xff0c;例如整数、字符串或 slug 等。默认情况下&#xff0c;Django 提供了一些内置的路径转换器&#xff0c;如 <int>、<str>、&l…

【STM32】USB 简要驱动软件架构图

STM32 USB 软件架构比较复杂&#xff0c;建议去看 UM 1734 或者 st wiki STM32 USB call graph STM32 USB Device Library files organization Reference [1]: https://wiki.stmicroelectronics.cn/stm32mcu/wiki/Introduction_to_USB_with_STM32 [2]: UM1734

MATLAB 使用教程 —— 命令窗口输入命令,工作区显示变量

命令在命令窗口输入变量在工作区显示 MATLAB 桌面包含的面板如下&#xff1a; 当前文件夹 - 此面板允许访问项目文件夹和文件。命令窗口 - 这是主要区域&#xff0c;用户在命令行中输入命令&#xff0c;命令提示符(>>).工作区 - 工作区显示所有变量&#xff0c;无论是创…