前端必知必会的核心技术

简介: 【1月更文挑战第12天】

前端必知必会的核心技术大致可以分为五大块,分别是:

  • HTML
  • CSS
  • JavaScript
  • 框架:Vue、React 等
  • 打包工具:Webpack、Vite 等

1、HTML

网页最核心的技术就是 HTML 了。我们看到的网页其实就是由 HTML 这种编程语言描述出来的。HTML 由标签组成,通过标签,我们可以在网页中插入文字、图片、链接、音频、视频等元素,进而描述网页。和 Windows 一样,随着技术的发展,HTML 经历了多次版本更新。后面我还会带你用 HTML 实现一个自己的网页。


比如这段代码可以实现一个简单的 HTML 页面,下面的图片是对上方代码的拆解,你能清晰地看到页面的整体结构以及不同的块级。核心部分就是 body,主要用来展示页面内容。需要明确的是,、、 这几个标签必须存在。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础网页</title>
</head>
<body>
<h1>标题内容</h1>
<p>文字段落</p>
</body>
</html>

image.png

2、CSS

只知道 HTML 还远远不够,组成网页要有三板斧,分别是 HTML、CSS、JavaScript。接着就来看下这第二板斧:CSS。


CSS 的官方定义是,层叠样式表(英文全称:Cascading Style Sheets),它是一种用来表现 HTML 的计算机语言。通俗地讲,如果 HTML 是搭建网页的砖瓦的话,那 CSS 就是涂料和装饰,它可以装饰 HTML 里的各种标签元素。


3、JavaScript

只有好看的网页仍然不够,人们还想给网页添加一些动态效果。比如常见的可以点击的按钮,页面上可以滚动的图片等等。这时候,我们就需要 JavaScript 了。它的简称是 JS,是一种轻量级的编程语言,主要作用是给网站添加动态效果,也可用作数据请求处理。


4、框架

框架是可复用的设计构件,每个框架都规定了其应用的结构,应用框架更加关注的是软件的设计高可用和对应系统设计的弹性。框架的优势就是本身帮开发者集成当量的模块和组件,供我们选用,以完成对应的系统开发,这能极大地提高开发者的开发效率和质量。


准确来说,前端框架指的是用来简化网页设计的框架。开发网页时有很多重复工作,引入框架并按规定好的代码结构编排,不但能够降低开发成本、便于分配资源,控制和延展网页也更轻松。


目前主流的前端框架有 Vue 和 React,这两个框架在企业中的应用都非常广泛。


  • Vue 可以构建交互式的 Web 界面的库,是一个构建数据驱动的 Web 界面渐进式框架。近年来 Vue 越来越受欢迎了。从 GitHub 的趋势看,虽然 Angular 和 React 也都是非常优秀的前端框架,但是 Vue 已经排在第一位,达到了 13 万的 Star。
  • React 是起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架都不满意,就决定自己写一套,用它来架设 Instagram 的网站。这个架构做出来以后,他们发现这套东西很好用,就在 2013 年 5 月开源了。


5、打包工具

除了框架,打包工具也是开发者的必备武器了,那它到底解决了什么问题呢?


浏览器文件本身不会被编译,但是在开发过程中,我们通常需要将代码、资源和样式分割成独立的模块,以便于管理和维护,所以在前端开发过程中,模块打包是非常重要的一块内容。


常用的模块打包工具有 Webpack、Parcel、Brow 等,它是一种全新的前端构建工具,它类似于 Webpack + webpack-dev-server 的组合。所以,综合来看,模块打包工具极大地优化了前端开发者的开发体验。


  • Webpack 是一个前端资源加载 / 打包工具。它会根据模块的依赖关系进行分析,然后将这些模块按照指定的规则生成对应的静态资源文件。
  • Vite 的定位是下一代前端开发与构建工具,它能显著改善前端开发体验。使用 Vite 进行开发至少会比使用 Webpack 快 10 倍左右。但它的缺点是生态不如 Webpack 成熟,相信以后会越来越完善。
相关文章
|
6月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
399 70
|
11月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
11月前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
301 0
|
11月前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
897 29
|
11月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
214 6
|
11月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
11月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
367 5
|
11月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
175 3
|
11月前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
11月前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
510 4

热门文章

最新文章

  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    68
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    331
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    367
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    558
  • 5
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    346
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    354
  • 7
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    204
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    410
  • 9
    详解智能编码在前端研发的创新应用
    440
  • 10
    智能编码在前端研发的创新应用
    316