Day 01 web前端基础知识

首先我们要了解什么事前端?

先简单用文字介绍一下:

一、入门知识

Web前端是指网站或应用程序的用户界面部分。它包括HTML、CSS、JavaScript等语言和技术,用于创建用户可浏览和交互的网页。Web前端的特点在于其交互性和动态性,可以通过CSS和JavaScript实现页面的动态效果和用户交互。

二、核心知识

HTML
HTML(Hypertext Markup Language)是用于创建Web页面的标记语言。它用于定义页面的结构、内容和布局。HTML由标签、元素和属性等组成,通过不同的标签和属性可以实现页面的结构和布局。

CSS
CSS(Cascading Style Sheets)用于定义页面的样式和布局。它可以为HTML元素添加样式,如字体、颜色、大小、边框、背景等。CSS通过选择器和属性来定义样式,通过布局属性和技术来实现页面的布局。

JavaScript
JavaScript是一种用于创建动态效果和用户交互的脚本语言。它可以实现HTML和CSS无法实现的功能,如动态加载数据、响应用户事件等。JavaScript可以通过DOM(文档对象模型)来操作HTML元素,从而实现动态效果和用户交互。

三、框架知识

React
React是一个用于构建用户界面的JavaScript库。它通过虚拟DOM和组件化的思想来实现页面的构建和管理。React的特点在于其响应式设计和可重用性,可以提高开发效率和代码可维护性。

Vue
Vue是一个用于构建渐进式Web应用的JavaScript框架。它通过数据驱动和组件化的思想来实现页面的构建和管理。Vue的特点在于其响应式数据绑定和简洁的API,可以让开发人员快速构建高效且易于维护的应用程序。

四、设计知识

布局设计
布局设计是指通过合理的空间分配和元素排列来创建清晰、简洁且具有吸引力的页面。在Web前端开发中,可以通过使用网格布局、浮动布局、Flexbox布局等技术来实现不同需求下的页面布局。

色彩设计
色彩设计是指通过选择合适的颜色方案来营造页面的氛围和用户体验。在Web前端开发中,可以通过使用颜色理论、调色板等方法来选择和使用颜色,以达到吸引用户注意、提高用户体验的目的。

排版设计
排版设计是指通过合理地安排文本和其他内容来提高页面的可读性和易用性。在Web前端开发中,可以通过使用字体、字号、行距、字重等相关样式属性来控制文本的呈现效果,同时还可以通过图标、图片等元素来丰富页面内容。

五、发布知识

静态资源发布
在Web前端开发中,静态资源通常指不可动态生成的文件或资源,如CSS文件、JavaScript文件、图片等。为了提高用户的访问体验,这些文件通常需要被缓存并尽可能地减少服务器请求次数。通过使用CDN(内容分发网络)、缓存等技术,可以优化静态资源的发布和访问效率。

响应式布局发布
响应式布局是指通过适应不同设备(如手机、平板电脑、桌面电脑等)和屏幕尺寸的网页布局方式。为了实现响应式布局,通常需要使用媒体查询和响应式设计等技术,并根据不同设备和屏幕尺寸来动态调整页面元素的布局和样式。

六、维护知识

代码管理
代码管理是指在Web前端开发过程中,对代码进行版本控制、协作和追踪的管理方式。通过使用版本控制工具(如Git),可以追踪和管理代码的变化历史,同时还可以协作多人在同一个项目上进行开发和维护。

性能调试与优化在Web前端开发中,性能调试与优化是至关重要的环节。通过对网页进行性能测试和分析,可以找出潜在的性能瓶颈和优化点,如减少HTTP请求次数、优化图片加载速度等。通过使用性能分析工具(如Chrome DevTools),可以帮助开发人员进行性能调试和优化工作。3. 错误处理错误处理是指在Web前端开发过程中,对代码中出现的错误进行识别、调试和修复的过程。通过使用调试工具(如console.log())和错误处理机制(如try-catch语句),可以帮助开发人员快速定位并修复错误,从而提高代码的稳定性和可靠性。

七、形象了解

然后我们再通过一些图片深层的了解一下

web前端既然是前端:那视觉和功能的连接,不可缺少重要

先从计算机基础入手:

c:client  客户端                           b:browser  浏览器                                s:server   服务器

c/s:安装、更新,不跨平台(windows、mac、linux)大型专业应用、安全性要求高的英雄联盟、航天相关、军事相关

b/s:不安装、无需更新、跨平台----写网页。

前端代码通过什么转换成网页?        ----   浏览器(渲染和解析)

浏览器:网页显示、运行的平台

常见浏览器:ie浏览器、  火狐浏览器、谷歌浏览器、safari浏览器、opera浏览器(欧朋浏览器)

下面是浏览器市场份额      (statcounter官网查看)

 

浏览器渲染引擎:代码转换成页面   (浏览器的内核)

内核:浏览器的核心,用于处理浏览器所得到的各种资源

引擎不同:速度、性能......都不同

(其中360、qq浏览器:双核)

7.1、网页基础认知

什么是网页?

网站:因特网上根据一定的规则,用html等制作的用于展示特定内容相关的网站集合

网页:构成网站的基本元素    xianoupeng.com

网页都有啥?----文字、图片、音频、视频、超链接   打开网页看见的

网页的背后:前端程序员写的代码     --------京东网页源代码(不要害怕)

结构、表现、行为----------html\css\javascript

7.2、什么是html?

超文本标记语言,描述网页的语言

超:不仅有文字,还有图片、音频、视频等等

文本:可以从一个页面跳转到另外一个网页(超级链接文本)

标记:文本要变成超文本,就需要各种标记符号

语言:每一个标记的写法、读音、使用规则,构成标记语言

html的历史发展:

IETF:国际互联网工程任务组(1985年)

W3c:万维网联盟

whatwg:网络超文本应用技术工作小组(2004)

web标准:一系列标准集合     

w3c(万维网联盟):国际最著名的标准化组织   为三层分离

浏览器不同,显示页面以及排版会有差异

其构成主要包括:结构(网页元素进行整理和分类   html)、表现(外观样式,主要指css)、行为(网页模型的定义及交互的编写)

以下是一些可以帮助你学习Web前端的网站和资源:

MDN Web Docs:这是一个由Mozilla开发的免费在线文档网站,提供了丰富的Web前端开发教程和资源,包括HTML、CSS、JavaScript、React等。网址是:https://developer.mozilla.org/

W3Schools:这是一个提供Web前端开发教程和资源的在线学习平台,包括HTML、CSS、JavaScript等。网址是:https://www.w3schools.com/

FreeCodeCamp:这是一个提供Web前端开发课程的在线学习平台,涵盖了HTML、CSS、JavaScript、React等。网址是:https://www.freecodecamp.org/

Codecademy:这是一个提供Web前端开发教程和资源的在线学习平台,包括HTML、CSS、JavaScript等。网址是:https://www.codecademy.com/

Coursera:这是一个提供Web前端开发课程的在线学习平台,涵盖了HTML、CSS、JavaScript等。网址是:https://www.coursera.org/

Stack Overflow:这是一个Web开发者的问答社区,你可以在这里提问关于Web前端开发的问题,也可以浏览和学习其他开发者的问题和答案。网址是:https://stackoverflow.com/

这些网站和资源提供了丰富的Web前端学习材料和教程,你可以根据自己的需求和兴趣选择合适的资源进行学习和实践。同时,记得持续实践和练习,通过编写代码和解决实际问题来提高你的Web前端技能。
 

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

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

相关文章

非常详细的trunk-based分支管理流程配置及使用

非常详细的trunk-based分支管理流程配置及使用。 目前业界主流的版本管理流程是Gitflow 和 trunk-based。 Gitflow流行的比较早。但是目前的流行度要低于 trunk-based模式工作流。trunk-based模式被誉为是现代化持续集成的最佳实践。 他俩的核心区别是,Gitflow是一个更严格…

如何优化你的Vue.js应用以获得最佳性能

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

vue3+ts+uniapp小程序封装获取授权hook函数

vue3tsuniapp小程序封装获取授权hook函数 小程序授权的时候,如果点击拒绝授权,然后就再也不会出现授权了,除非用户手动去右上角…设置打开 通过uni官方api自己封装一个全局的提示: uni.getSetting :http://uniapp.dcloud.io/api/other/settin…

前端综合练手小项目

导读 本篇文章主要以小项目的方式展开,其中给出的代码中均包含详细地注释,大家可以参照理解。下面4个小项目中均包含有 HTML、CSS、JavaScript 等相关知识,可以拿来练手,系统提升一下自己的前端开发能力。 废话少说,…

《Envoy 代理:云原生时代的流量管理》

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🐅🐾猫头虎建议程序员必备技术栈一览表📖: 🛠️ 全栈技术 Full Stack: &#x1f4da…

SCRUM产品负责人(CSPO)认证培训课程

课程简介 Scrum是目前运用最为广泛的敏捷开发方法,是一个轻量级的项目管理和产品研发管理框架。产品负责人是Scrum的三个角色之一,产品负责人在Scrum产品开发当中扮演舵手的角色,他决定产品的愿景、路线图以及投资回报,他需要回答…

微服务如何改变软件开发:实战经验与最佳实践分享

文章目录 什么是微服务?微服务实战经验1. 定义明确的服务边界2. 使用API网关3. 自动化部署和持续集成4. 监控和日志记录 微服务最佳实践1. 文档和通信2. 弹性设计3. 安全性4. 版本控制5. 监控和警报 微服务的未来 🎉欢迎来到架构设计专栏~微服务如何改变…

C++版本的OpenCV实现二维图像的卷积定理(通过傅里叶变换实现二维图像的卷积过程,附代码!!)

C版本的OpenCV库实现二维图像的卷积定理过程详解 前言一、卷积定理简单介绍二、不同卷积过程对应的傅里叶变换过程1、“Same”卷积2、“Full”卷积3、“Valid”卷积 三、基于OpenCV库实现的二维图像卷积定理四、基于FFTW库实现的二维图像卷积定理五、总结与讨论 前言 工作中用…

计算机视觉--距离变换算法的实战应用

前言: Hello大家好,我是Dream。 计算机视觉CV是人工智能一个非常重要的领域。 在本次的距离变换任务中,我们将使用D4距离度量方法来对图像进行处理。通过这次实验,我们可以更好地理解距离度量在计算机视觉中的应用。希望大家对计算…

QML android 采集手机传感器数据 并通过udp 发送

利用 qt 开发 安卓 app &#xff0c;采集手机传感器数据 并通过udp 发送 #ifndef UDPLINK_H #define UDPLINK_H#include <QObject> #include <QUdpSocket> #include <QHostAddress>class UdpLink : public QObject {Q_OBJECT public:explicit UdpLink(QObjec…

C#,数值计算——Hashfn1的计算方法与源程序

1 文本格式 using System; using System.Collections; using System.Collections.Generic; namespace Legalsoft.Truffer { public class Hashfn1 { private Ranhash hasher { get; set; } new Ranhash(); private int n { get; set; } public Hash…

【C++11保姆级教程】列表初始化(Literal types)和委派构造函数(delegating))

文章目录 前言一、列表初始化 (List Initialization)1.1数组初始化1.2结构体初始化1.3容器初始化1.4列表初始化的优势 二、委派构造函数 (Delegating Constructors)2.1委派构造函数是什么&#xff1f;2.2委派构造函数示例代码2.3调用顺序2.3委派构造函数优势 总结 前言 C11引入…

SpringCLoud——Nacos配置中心

Nacos实现配置管理 统一配置管理 配置更新热更新 统一配置的创建是在UI界面中完成的&#xff1a; 首先我们点击【配置管理】然后点击【配置列表】&#xff1a; 然后我们就看到了配置管理界面&#xff0c;但是此时这里是空的&#xff0c;我们可以创建一些配置文件&#xff1a…

Springboot 实践(17)spring boot整合Nacos配置中心

前文我们讲解了Nacos服务端的下载安装&#xff0c;本文我们降价spring boot整合nacos&#xff0c;实现Nacos服务器配置参数的访问。 一、启动Nacos服务&#xff0c;创建三个配置文件&#xff0c;如下所示 Springboot-Nacos-Client-dev.yaml文件配置参数 Springboot-Nacos-Clie…

微信小程序自动化发布

参考:https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html 参考:https://www.npmjs.com/package/miniprogram-ci npm install miniprogram-ci -S上传文件 xx.js const isNodeJs typeof process ! undefined && process.release ! null &&…

智能文本纠错API的应用与工作原理解析

引言 在数字时代&#xff0c;文本撰写和传播变得日益重要&#xff0c;无论是在学校里写论文、在职场中发送邮件&#xff0c;还是在社交媒体上发表观点。然而&#xff0c;文字错误、标点符号错误、语法问题和不当的表达常常会削弱文本的质量&#xff0c;降低信息传达的效果。为…

数据结构-leetcode-数组形式的整数加法

解题图解&#xff1a; 下面是代码&#xff1a; /*** Note: The returned array must be malloced, assume caller calls free().*/ int* addToArrayForm(int* num, int numSize, int k, int* returnSize){int k_tem k;int klen0;while(k_tem){//看看k有几位k_tem /10;klen;}i…

第三节:在WORD为应用主窗口下关闭EXCEL的操作(2)

【分享成果&#xff0c;随喜正能量】凡事好坏&#xff0c;多半自作自受&#xff0c;既不是神为我们安排&#xff0c;也不是天意偏私袒护。业力之前&#xff0c;机会均等&#xff0c;毫无特殊例外&#xff1b;好坏与否&#xff0c;端看自己是否能应机把握&#xff0c;随缘得度。…

免费和开源的机器翻译软件LibreTranslate

什么是 LibreTranslate &#xff1f; LibreTranslate 免费开源机器翻译 API&#xff0c;完全自托管。与其他 API 不同&#xff0c;它不依赖于 Google 或 Azure 等专有提供商来执行翻译。它的翻译引擎由开源 Argos Translate 库提供支持。 这个软件在 2022 年 3 月的时候折腾过&…

Python浪漫星空

系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.csdn.net/article/details/1295031234漂浮爱心https://wan…