首先我们要对前端有一个认识,关于前端是什么,是做什么的,以及我们学会前端这个有什么用?对于一下几个方面我将给出相关的了解
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着
互联网技术
的发展,
HTML5
,
CSS3
,前端框架的应用,
跨平台
响应式网页设计
能够适应各种
屏幕分辨率
,合适的动效设计,给用户带来极高的
用户体验
。
而简要地说就是使用一些类似与HTML和CSS的语言等,让我们进行写出一个可以给用户带来体验的一个网页设计
而对于前端在我之前的博客上,也有略微讲过一点点,我们可以看几个具体有关于HTML的标志词,已经在我之前博客写过,在这里不进行额外的赘述,可以直接打开链接
HTML标志词
https://blog.csdn.net/Chen_072_11/article/details/129332486?spm=1001.2014.3001.5501
HTML标志词2
https://blog.csdn.net/Chen_072_11/article/details/129383496?spm=1001.2014.3001.5501
这两个是标志词,接下来我们将要看的是HTML的具体应用
HTML实现自我介绍模版
https://blog.csdn.net/Chen_072_11/article/details/129432706?spm=1001.2014.3001.5501
这个是我们通过HTML标志词实现的一个介绍模版
(上述链接,均为作者原创,创作不易,请勿随意转载)
Vscode的安装以及插件的安装
下面的事vscode的下载链接
Vscode的下载链接
下载完之后会发现全是英语,该如何解决这个问题呢
在这里我们可以发现一个扩展,点击扩展搜索Chinese即可
然后我们介绍几个关于写代码时候到几种工具
美化界面–Beautify
标签检查–Auto Rename Tag
标签闭合插件-Auto Close Tag
以上这些是我们在写Html的时候几个常用的扩展工具
认识浏览器
浏览器是用来检索、展示以及传递
Web
信息资源的
应用程序
。Web信息资源由
统一资源标识符
( Uniform Resource Identifier,URI)所标记,它是一张
网页
、一张图片、一段视频或者任何在
Web
上所呈现的内容。使用者可以借助超级链接( Hyperlinks),通过浏览器浏览互相关联的信息
主流浏览器分类
主流的浏览器分为IE、Microsoft Edge、Chrome、Firefox、Safari等几大类,它们具有以下特点:
1、IE浏览器。IE浏览器是微软推出的Windows系统自带的浏览器,它的内核是由微软独立开发的,简称IE内核,该浏览器只支持Windows平台。国内大部分的浏览器,都是在IE内核基础上提供了一些插件,如360浏览器、搜狗浏览器等
。
2、Microsoft Edge浏览器。Microsoft Edge是由微软开发的基于
Chromium
的浏览器 。
2、Chrome浏览器。Chrome浏览器由Google在开源项目的基础上进行独立开发的一款浏览器。Chrome浏览器不仅支持Windows平台,还支持Linux、Mac系统,同时它也提供了移动端的应用(如Android和iOS平台) 。
3、Firefox浏览器。Firefox浏览器是开源组织提供的一款开源的浏览器,它开源了浏览器的源码,同时也提供了很多插件,方便了用户的使用,支持Windows平台、Llnux平台和Mac平台
HTTP通信协议是
超文本传输协议
的简称,它是属于浏览器和Web服务器之间的通信协议,建立在TCP/IP基础之上,用于传输浏览器到服务器之间的
HTTP请求
和响应。它不仅需要保证传输网络文档的正确性,同时还确定文档显示的先后顺序 。
HTTP协议
从Web浏览器到服务器返回信息的过程可以分为4个部分:
1、建立连接:HTTP协议的建立是通过申请Socket套接字实现,用户通过Socket在服务器上申请一个端口号,然后在网络中通过该端口号传输数据。
2、发送请求。用户和服务器之间建立连接后,可以向指定的目的主机发送请求。
3、返回响应。服务器对用户提交的请求进行处理,并返回请求码(如404)或数据。
4、关闭连接。通信结束后,通信双方均可通过关闭套接字来关闭连接,断开访问。
其中,HTTP协议在建立连接的过程中,会通过著名的“三次握手”来建立稳定的连接,即客户机和服务器之间传递三次有效的数据,来保证通信的可靠性 。
常见状态码
在HTTP连接过程中,返回的常见状态码及含义如下:
1、403:用户没有访问权限。
2、404:访问文件不存在或访问链接(URL)错误。
3、500:服务器错误,一般是服务器数据处理出现的问题 。
如何在Gitee上提交代码
首先我们需要知道,gitee的作用是什么:Gitee是
开源中国
(OSChina)推出的基于Git的代码托管服务,而换句话说,就是我们讲平时写的代码需要存到一个地方,也就是放到一个仓库里去管理,而这个在国内的代码管理仓库我们通常所用的是Gitee,当然还有其他类似于Gitee的这种代码托管管理平台
gitee的链接
https://gitee.com/
接下来向读者展示一下,作者的gitee管理平台
在仓库里,我们可以自己将仓库进行命名,那么我们如何向gitee里传送我们每天的学习代码呢
接下来我们将讲一个最简单的下载方式
工作台 - Gitee.com
https://gitee.com/
注意事项:
1. 安装 git for windows 一路 next 即可.
2. 安装 tortoise git 中需要配置 git.exe, 这个是 git for windows 包含的部分. 如果 git for windows 安装成功, 这
一步使用默认结果即可.
3. 安装 tortoise git 还需要配置姓名和邮箱, 这个尽量和 Github 的邮箱填成一致.
4. 两个工具安装完毕后, 需要重启电脑才能正确使用.
使用 VS 创建工程, 并把工程放在刚才下载到本地的项目路径中.
或者将曾经写过的代码的工程目录直接拷贝到项目目录中
Git add
G
it commit
git remote -v
2.修改remotes
git remote set-url origin https://
gitee
.com/angel_bei/test_git.git
## 2 重置git远程仓库地址
如果已经执行1 ,此步骤可以忽略
```bash
1.删除当前地址
git remote rm origin
2.新增地址
git remote add origin https://
gitee
.com
git-commit-lint-
vscode
在日常的开发中,目前主流的
代码
管理工具就是 git 了,当我们对
代码
进行改动了,首先得git commit
提交
到本地仓库,git 规定了
提交
时必须填写
提交
信息作为改动说明,保存 commit 历史中,可以找到历史
代码
,也方便他人 review,还可以输出 CHANGELOG,对项目的研发质量都有很大的提升。
但是在平时的工作中,大部分对于commit 都是简单的填写,没有好好的重视,这对于项目管理和维护来说,无疑是不友好的。这个
插
件就是规范化git
提交
规范,让你的
提交
不仅"好看"还"实用"
git 规范
提交
从何说起?
git 规范
提交
从哪里开始的呢?起源在哪呢?emmmmmm,这就追溯到了Angular了!
让我们看下Angular社区的
提交
规范
这个
提交
记录是不是一目了然?所以git commit规范下还是很有必要的!
vscode
-fileheader : 添加注释到文件头,并支持自动更新文件修改时间。
EditorConfig for vs code : EditorConfig有助于为跨越各种编辑器和IDE的同一项目的多个开发人员维护一致的编码样式。
open in browser : 在文件右键 可以选择在浏览器预览
Prettier - Code formatter : 格式化js、css
代码
插
件
Simple New File : 从命令面板简单创建新文件、文件夹。
ESLint : 校验js
代码
规范
对于
前端
开发者来说,VS Code 是一个非常受欢迎的
代码
编辑器。以下是一些
前端
开发者常用的必备
插
件:
1. ESLint:用于
代码
风格检查和自动修复,提高
代码
质量和一致性。
2. Prettier:用于
代码
格式化,使
代码
看起来更加整洁和统一。
3. Live Server:提供实时预览功能,能够在浏览器中自动刷新显示修改后的网页。
4. HTML CSS Support:增强 HTML 和 CSS 的智能提示和自动补全功能。
5. Auto Rename Tag:自动重命名 HTML/XML 标签的闭合标签,减少手动修改的工作。
6. Bracket Pair Colorizer:为括号添加不同的颜色,方便区分嵌套的括号。
7. GitLens:集成 Git 功能,显示每一行
代码
的 Git 信息,方便
代码
版本管理。
8. IntelliSense for CSS class names:CSS 类名的智能提示和自动补全功能。
9. Path Intellisense:自动补全文件路径和文件名,减少手动输入路径的错误。
10. markdownlint:用于 Markdown 文件的语法检查和格式化。
这些
插
件可以帮助
前端
开发者提高开发效率、提供更好的开发体验和
代码
质量。当然,根据个人需求和项目要求,还可以根据自己的喜好和需求选择其他适合的
插
件。