Day 01 web前端基础知识

news2024/11/15 8:11:47

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

先简单用文字介绍一下:

一、入门知识

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.coloradmin.cn/o/1013245.html

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

相关文章

富芮坤蓝牙FR801xH GPIO

通过规格书,可查看到芯片共有32个引脚,如图: 除如电源、晶振等固定用途的引脚外,开发板已引出其余引脚。 通常情况下,一个IO口除了可作普通输入输出口外,还有可能作其它用途,如作I2C接口的数据…

Linux static_key原理与应用

文章目录 背景1. static-key的使用方法1.1. static-key定义1.2 初始化1.3 条件判断1.4 修改判断条件 2、示例代码参考链接 背景 内核中有很多判断条件在正常情况下的结果都是固定的,除非极其罕见的场景才会改变,通常单个的这种判断的代价很低可以忽略&a…

18 自增长主键的实现 以及 记录的插入

前言 这里主要是 探索一下 mysql 的自增长主键 和 insert into tz_test (field1) values ("12111111111"); 的实现 这里 有一些地方 会有不求甚解的地方, 不然 篇幅 就有点太长了 测试表结构 mysql 主键自增长 读取自增长值的地方, 读取 table->autoinc 作…

激活函数总结(三十四):激活函数补充(FReLU、CReLU)

激活函数总结(三十四):激活函数补充 1 引言2 激活函数2.1 FReLU激活函数2.2 CReLU激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、Leaky ReLU、PReLU、Swish、ELU、SELU、GELU、Softmax、Sof…

React 全栈体系(七)

第四章 React ajax 一、理解 1. 前置说明 React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装) 2. 常用的ajax请求库 jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻…

AI无法提振台积电股价

来源:猛兽财经 作者:猛兽财经 总结: (1)台积电的股价已经从最高点下跌了18%,很多期权交易员正在押注台积电的股价会进一步下跌。 (2)华尔街分析师目前也下调了台积电的收入和盈利预期…

EasyUI combobox 实现搜索(模糊匹配)功能

很简单的一个下拉框搜索模糊匹配功能&#xff0c;在此记录&#xff1a; 1&#xff1a;页面实现&#xff1a; <select class"easyui-combobox" name"combobox" id"combobox" style"width:135px;height:25px;" headerValue"请选…

9.19-21,openEuler与您相约2023欧洲开源峰会

2023年9月19日-21日&#xff0c;openEuler将参加在西班牙毕尔巴鄂举办的 OSSUMMIT 2023&#xff08;Open Source Summit Europe 2023&#xff09;&#xff0c;这是openEuler继去年正式亮相后的第二次全面参加该峰会。 Open Source Summit Europe是由Linux基金会主办&#xff0…

来喽!!炒鸡详细的“数据在内存中的存储”真的来喽!

目录​​​​​​​ 1. 整数在内存中的存储 1.1 ⼆进制介绍 1.1.1 2进制转10进制 1.1.2 10进制转2进制 1.1.3 2进制转8进制 1.1.4 2进制转16进制 1.2 原码、反码、补码 2. ⼤⼩端字节序和字节序判断 2.1 什么是⼤⼩端&#xff1f; 2.2 为什么有⼤⼩端? 2.3 练习 …

01目标检测-问题引入

目录 一、目标检测问题定义 二、目标检测过程中的常见的问题 三、目标检测VS图像分类区别 目标检测&#xff1a; 图像分类&#xff1a; 总结&#xff1a; 四、目标检测VS目标分割 目标分割&#xff1a; 目标检测是计算机视觉领域的一个重要任务&#xff0c;旨在从图像或…

[管理与领导-93]:IT基层管理者 - 扩展技能 - 5 - 职场丛林法则 -7- 复杂问题分析能力与复杂问题的解决能力:系统化思维

目录 前言&#xff1a; 一、系统化思维 VS 分解思维 1.1 系统化思维 1.2 分解思维 二、中医与西医思维模式的区别 三、正向闭环/正反馈 VS 负向闭环/负反馈 VS 开环 3.1 开环与管理 3.2 闭环与管理 3.3 生态系统是闭环系统 3.4 团队是一个闭环系统 3.5 正向闭环/正反…

有趣的设计模式——适配器模式让两脚插头也能使用三孔插板

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 场景与问题 众所周知&#xff0c;我们国家的生活用电的电压是220V而笔记本电脑、手机等电子设备的工作压没有这么高。为了使笔记本、手机等设备可以使用220V的生活用电就需…

API(九)基于协程的并发编程SDK

一 基于协程的并发编程SDK 场景&#xff1a; 收到一个请求会并发发起多个请求,使用openresty提供的协程说明&#xff1a; 这个是高级课程,如果不理解可以先跳过遗留&#xff1a; APSIX和Kong深入理解openresty 标准lua的协程 ① 早期提供的轻量级协程SDK ngx.thread ngx…

国内外交通数据集介绍(附参数说明)

国外数据集 NGSIM数据集 NGSIM数据集采集自美国&#xff0c;数据集中包含两条高速公路&#xff08;US-101&#xff0c;I-80&#xff09;及两条城市道路&#xff08;lankershim&#xff0c;peachtree&#xff09;的数据&#xff0c;每条道路的采集时间为45min。数据集中包含包含…

荣耀亲选耳机Wingcloud X5s Pro新品上市:9月15日首次亮相

荣耀亲选耳机Wingcloud X5s Pro以其46dB自适应主动降噪、Hi-Res高保真音质和40小时超长续航的特点而备受期待。首次亮相的新品外观圆润流畅&#xff0c;充满了现代感和时尚气息&#xff0c;无论是冰岛白的典雅大方&#xff0c;还是钛银色的成熟经典&#xff0c;每一个细节显示着…

记录crack某IDE插件过程

声明&#xff1a;本文仅记录学习过程&#xff0c;已对关键位置脱敏处理&#xff0c;未提供任何工具&#xff0c;请支持正版。 反编译jar包 使用cfr进行对插件核心jar包MyBxxxxxx-obfuss.jar进行反编译&#xff0c;在本地生成a.txt。 java -jar cfr-0.152.jar MyBxxxx-obfuss.…

车云一体化数字孪生再跨步!数据「精准反哺」整车定制化开发

汽车智能化竞争焦点&#xff0c;已经从单车智能延伸至云端。 尤其是在软件定义汽车的驱动下&#xff0c;汽车软件开发贯穿整个汽车生命周期。而基于SOA的车云一体化软件开发能力&#xff0c;通过跨车云的服务化架构、数据闭环等&#xff0c;支撑着传统V型瀑布式开发&#xff0…

苹果的市场份额下滑了,事实证明国内能与苹果竞争的只有它

分析机构给出二季度国内600美元以上手机市场的报告&#xff0c;报告指出苹果的市场份额已显著下滑&#xff0c;国产手机品牌占有的市场份额则已取得较大的提升&#xff0c;让人意外的是成功抢走苹果市场份额的仍然是之前的那家国产手机品牌。 据分析机构的数据显示&#xff0c;…

Zabbix监控组件及流程

Zabbix 由5大组件构成 Zabbix Web、Zabbix Server、Zabbix Proxy、Zabbix Database、Zabbix Agent Zabbix监控系统具体监控系统流程如图&#xff1a; Zabbix Web Zabbix Web是基于PHP语言编写的WEB UI界面&#xff0c;展示Zabbix整个监控平台监控数据、配置信息、方便对整个…

医学图像分割:Self-supervised Semantic Segmentation: Consistency over Transformation

论文作者&#xff1a;Sanaz Karimijafarbigloo,Reza Azad,Amirhossein Kazerouni,Yury Velichko,Ulas Bagci,Dorit Merhof 作者单位&#xff1a;University of Regensburg;RWTH Aachen University;Iran University of Science and Technology;Northwestern University;Fraunho…