大学生前端学习第一天:了解前端

引言:

哈喽,各位大学生们,大家好呀,在本篇博客,我们将引入一个新的板块学习,那就是前端,关于前端,GPT是这样描述的:前端通常指的是Web开发中用户界面的部分,即用户直接与之交互的界面。前端开发涉及使用HTML、CSS和JavaScript等技术来创建网站或Web应用程序中的各种元素,包括页面布局、样式设计、交互功能等。前端开发人员负责确保用户界面的良好体验和友好性,使用户能够轻松地与网站或应用程序进行交互。

我个人认为,前端也是比较容易上手的,特别是HTML和CSS,即学即用,很快就能靠自己天马行空的想象力来创建精彩绝伦的页面,前端也可以开发好玩的小游戏,功能强大,那就让我们走进前端,先让我们走进HTML吧!

 1.第一个前端程序

接下来,我们通过两步来完成一个网页程序

注意事项:

1.文件后缀名以.html结尾

2.在编写代码的过程中,<>必须是英文状态下缩写

第一步:使用记事本,编写代码

第二步:以浏览器方式打开

右键打开方式,以浏览器方式打开即可

 2.前端工具的选择与安装

VS Code:打开速度快,使用方便

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

刚打开VS Code,一般是英文状态,我们点开拓展,搜索Chinese,直接点击安装即可

 前端常见开发者工具

工欲善其事必先利其器

浏览器推荐:chrome浏览器(谷歌)
简介大方,打开响应速度快,开发者调试工具

 下载地址:https://www.google.com.hk/

3.VS Code开发者工具快捷键

1.生成浏览器文件.html的快捷方式

!+回车

2.VS code常用快捷键列表:

1.代码格式化:Shift+Alt+F

2.向上或向下移动一行:Alt+Up或Alt+Down

3.快速复制一行代码:Shift+Alt+Up或Shift+Alt+Down

4.快速保存:Ctrl+S

5.快速查找:Ctrl+F

6.快速替换:Ctrl+H

4.小结:

今天给大家快速入门一下前端知识与相关软件的下载,下一篇博客我们将详细介绍HTML的相关知识,要是这篇博客给你带来帮助的话,别忘记点个赞哟!

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

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

相关文章

数据库设计的三范式

简单来说就是&#xff1a;原子性、唯一性、独立性 后一范式都是在前一范式已经满足的情况进行附加的内容 第一范式&#xff08;1NF&#xff09;&#xff1a;原子性 存储的数据应不可再分。 不满足原子性&#xff1a; 满足原子性&#xff1a; 第二范式&#xff08;2NF&#xf…

Flutter 中的 Crypto 库介绍及使用

简介 Crypto 库是 Dart 标准库的一部分&#xff0c;提供了一系列用于加密和哈希的函数。它支持多种算法&#xff0c;包括 SHA-1、SHA-256、MD5 和 AES。Crypto 库可用于各种安全操作&#xff0c;例如&#xff1a; 存储敏感数据的安全哈希值验证数据完整性加密和解密数据 安装…

探索设计模式的魅力:开启智慧之旅,AI与机器学习驱动的微服务设计模式探索

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨欢迎加入探索AI与机器学习驱动的微服务设计模式之旅✨ 亲爱的科技爱好者们&#xff0c;有没…

LabVIEW多设备控制与数据采集系统

LabVIEW多设备控制与数据采集系统 随着科技的进步&#xff0c;自动化测试与控制系统在工业、科研等领域的应用越来越广泛。开发了一种基于LabVIEW平台开发的多设备控制与数据采集系统&#xff0c;旨在解决多设备手动设置复杂、多路数据显示不直观、数据存储不便等问题。通过RS…

【记录】Python3|Selenium 下载 PDF 不预览不弹窗(2024年)

版本&#xff1a; Chrome 124Python 3.12Selenium 4.19.0 版本与我有差异不要紧&#xff0c;只要别差异太大比如 Chrome 用 57 之前的版本了&#xff0c;就可以看本文。 如果你从前完全没使用过、没安装过Selenium&#xff0c;可以参考这篇博客《【记录】Python3&#xff5c;Se…

一、pwn - 零基础ROP之Android ARM 32位篇(新修订,精华篇)

一、环境搭建 安装ndk r10e,必须得这个版本,其他版本可能导致 -fno-stack-protector 不生效! r10e Darwin: https://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zipLinux: https://dl.google.com/android/repository/android-ndk-r10e-linux-x86_6…

密码学 | 承诺:绑定性 + 隐藏性

&#x1f951;原文&#xff1a;承诺方案&#xff08;Commitment&#xff09;学习笔记 &#x1f951;写在前面&#xff1a; 本文属搬运博客&#xff0c;自己留存学习。本文只会讲承诺的两个安全属性&#xff0c;不会再讲解承诺的定义。 正文 承诺方案需要满足两个安全属性&…

Oracle之SQL plus的一些经验心得

每次登入SQL plus后,不知道时哪个用户登入,非常不方便,只能使用show user查看。 以下时可以通过一些设置实现上述的效果,知道时哪个用户登入,和实现输出效果等 1)SQL plus使用细则 SQL plus登录时,我们可以设置一些通用的设置,在每次登入SQL plus的时候生效。 [root@c…

npm常用命令详解(一)

npm&#xff08;Node Package Manager&#xff09;是Node.js的包管理器&#xff0c;它允许你安装、共享和管理Node.js代码库。以下是一些常用的npm命令及其详解&#xff0c;以帮助您更好地理解和使用它。 1. npm install 功能&#xff1a;安装Node.js包。 语法&#xff1a;n…

安装Zipkin

官网&#xff1a;https://zipkin.io/pages/quickstart.html Jar包方式 下载 方式一&#xff1a;百度网盘下载 链接&#xff1a;https://pan.baidu.com/s/1PRV1RamJ8IWX32IJb7jw3Q?pwde8vu 提取码&#xff1a;e8vu 方式二&#xff1a;Central Repository: io/zipkin/zipk…

react 项目路由配置(react-router-dom 版本 v6.3、v6.4)

根据 react-router-dom 的版本&#xff0c;有不同的方式 一、react-router-dom v6.3 用到的主要 api: BrowserRouteruseRoutesOutlet 下面是详细步骤&#xff1a; 1、index.js BrowserRouter 用来实现 单页的客户端路由使用 BrowserRouter 包裹 App放在 顶级 位置&#x…

【六十一】【算法分析与设计】高精度乘法和高精度除法

高精度乘以单精度 由于计算机的基本数据类型如 int 或 long 有其大小限制&#xff0c;当我们需要进行超出这些基本类型范围的计算时&#xff0c;就需要使用大数乘法技术。一种简单的大数乘法算法——单精度乘高精度数算法。这种方法特别适用于将一个大数&#xff08;用字符串表…

[ LeetCode ] 题刷刷(Python)-第58题:最后一个单词的长度

题目描述 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 示例 示例 1&#xff1a; 输入&#xff1a;s "Hello World" 输出&…

(1)认识人工智能

第一章 认识人工智能 引言 本人目前大三&#xff0c;双非一本的人工智能专业&#xff0c;代码能力不算太差&#xff0c;做过项目&#xff0c;也打了比赛&#xff0c;获了奖&#xff0c;但是走技术路线总会有否定自己的感觉&#xff0c;可能是感觉自己的才能没有在搞技术方面实…

UML绘制

processon官网 https://www.processon.com/template_create 官方学习地址 https://plantuml.com/zh/class-diagram 在Android studio 中自动生成类图 https://blog.csdn.net/zyfzhangyafei/article/details/126636358 plantUML 在线编辑 https://www.plantuml.com/plantuml/um…

小红书电商运营实战课,从0打造全程实操(65节视频课)

课程内容&#xff1a; 1.小红书的电商介绍 .mp4 2.小红书的开店流程,mp4 3.小红书店铺基础设置介绍 ,mp4 4.小红书店铺产品上架流程 .mp4 5.客服的聊天过程和子账号建立 .mp4 6.店铺营销工具使用和后台活动参加 .mp4 7.小红书产品上架以及拍单教程,mp4 8.小红书如何选品…

数据分析_商品维度占比及变化可视化分析(Pandas和Matplotlib)

数据分析_商品维度占比及变化可视化分析(Pandas和Matplotlib) 分析维度包括: 各商品年度销量占比 各商品月度销量变化 构建测试数据 这里你可以了解到: 如何生成时间相关的数据。 如何从列表&#xff08;可迭代对象&#xff09;中生成随机数据。 Pandas 的 DataFrame 自…

IDM下载管理工具的详细介绍

第一章:IDM简介与安装 Internet Download Manager(IDM)是一款备受欢迎的下载管理工具,具有强大的下载加速功能和丰富的功能特性。本章将介绍IDM的基本信息,以及如何进行安装和设置。 1.1 IDM简介 IDM是由美国公司Tonec Inc.开发的一款下载管理器,它能够提供强大的下载…

eggjs 日志记录配置 记录

eggjs日志配置 ## //config.default.js // 日志配置config.logger {level: "INFO", // SILENT, DEBUG, INFO, WARN, ERROR, FATALconsoleLevel: "DEBUG", // 控制台日志输出级别dir: "/logs", // 日志文件的存储目录type: "dateFile…

MVC、MVP、MVVM

MVC、MVP和MVVM是三种流行的软件架构模式&#xff0c;它们被设计来组织代码结构&#xff0c;提高代码的可维护性、可测试性和可扩展性。尽管它们在高层次目标上一致&#xff0c;但在实现细节和应用交互方式上各有特点。 MVC&#xff08;Model-View-Controller&#xff09; Mo…