1前端开发常用技术概述
HTML、CSS、JavaScript是Web前端开发的3大技术核心，简单说就是用HTML进行页面的结构排版，用CSS进行页面布局和样式的设计，用JavaScript实现页面的交互和数据请求。
1.1HTML5
HTML5是万维网的核心与通用语言,HTML5在2008年正式发布，在2012年形成稳定版本，相比HTML4, HTML5增加了图形绘制、多媒体等元素和功能, HTML5是Web前端开发者需要掌握的首要技术。1.2CSS3
CSS即层叠样式表，它可以对网页布局、元素等进行精确控制,CSS3是CSS技术的升级版本，主要包括盒子模型、多栏目布局等模块[2]。Div+CSS布局的优点非常多，比如可以有效减少页面代码量并提高页面显示速度，代码结构清晰明了，更容易被搜索引擎收录[3]。
1.3JavaScript
JavaScript是一种Web前端的弱语言类型、解释型语言，是一种基于事件和对象驱动的、安全性好的脚本语言。它在客户端运行(node.js例外)，是一种通用的，不需要在专门的语言环境下运行，在插入HTML页面后，可由所有的现代浏览器执行[4]。
1.4jQuery
jQuery是一个快速、轻量级、兼容多浏览器且功能丰富的JavaScript库。它使用户的像操作文档对象、选择文档对象模型元素、创建动画效果、处理事件、以及开发Ajax程序等的网页操作变得更加容易，同时赋予了开发人员提供了在网页上创建插件的能力。
1.5Bootstrap框架
Bootstrap框架简洁灵活，兼容绝大部分的JQuery 插件，形成了一套独特清新的网站显示风格并风靡一时。Bootstrap最精彩的部分就是响应式布局，通过响应式布局可以实现只用一套代码就可以完美支持PC端、PAD及手机移动端的页面访问[5]。
1.6Ajax
Ajax即异步的JavaScript和XML，它是按需加载数据，而不再像传统网页一样要更新一点点内容，就得重新加载整个网页。Ajax有着更好的用户体验，它实现了在Web端进行数据处理，减轻服务器端压力，减少了用户等待时间。
2Web前端开发技术学习方法
2.1Web前端的学习误区
网页制作是大部分专业在上学期间都会接触到的一门课程，通常网页制作所用的第一个集成开发环境大多是Dreamweaver，这种所见即所得的开发环境为网页开发带来了极大的方便。但分的依赖集成开发环境也存在弊端，比如在页面出现问题时，开发者不知如何处理，也不会进行页面优化等操作。
2.2选择正确的努力方向
成功除了要坚持不懈和持之以恒之外，选择正确的努力方向也非常重要。Web前端开发的学习首先应该选择一个正确的学习路线[6]。学习路线图在网上搜索即可，在此不再赘述。此外要多查看优秀网站的源代码，学习它们的设计和布局方式。只有多借鉴才能识广，进而融会贯通，取他人之长为我所用。
2.3基础知识的具体的学习方法
(1)HTML5+CSS3这部分建议在W3school等网站
作者简介：张向伟(1977-)，男，高级实验师，硕士，研究方向：计算机应用技术。
Web前端开发技术学习方式探讨
张向伟
jquery学习在线教程（山东大学管理学院，济南250100）
摘要:Web前端是一个网站开发的首要部分，前端开发的好坏直接影响到整个网站的交互效果。Web 前端开发则是近几年兴起的技术，阐述了HTML5、CSS3、JavaScript、jQuery、Bootstrap等Web前端开发技术，对这些技术进行分析，并对Web前端学习的方式上提出了一些有益的建议。
关键词:Web前端；HTML5技术；CSS3技术；jQuery技术；Bootstrap技术；Ajax技术
40
2021.3
上在线学习、练习，熟练之后可以浏览像网易、谷歌等优秀网站，学习这些网站的布局结构和命名规范。(2)JavaScript要学的内容很多，建议买一本《JavaScript权威指南》(又名犀牛书，被国人誉为:
JavaScript开发者的圣经)，它是由淘宝前端团队翻译的，主要深入基础的讲解了JavaScript这门语言，是前端开发的必备书籍。另外要在B站、慕课网、腾讯课堂、网易云课堂等网站上多看视频多练习。需要学习JS和HTML/ CSS在浏览器下的调试方法，推荐用Google Chrome下的chrome开发工具chrome developer tools调试。
2.4进阶
有了上面的学习基础，可以进行一些简单的页面开发，但如果做项目还需要进行以下内容的学习: 2.4.1CSS部分
应该掌握网页元素地址(包括绝对地址和相对地址)、内外边距、列表(包括有序列表和无序列表)和标签、HTML表单、表格元素及相关样式、元素定位、页面嵌套、元素显示技巧及CSS权重值计算等内容。2.4.2JavaScript
(1)框架：比如Bootstrap和Vue。Bootstrap是界面效果框架(界面效果什么样子)，它定义好了界面显示效果，比如按钮和输入框等元素的式样;Vue是功能开发框架(功能代码如何组织)，它搭建好了功能架子，居于它可以快速开发功能。长远考虑的话，建议使用Vue，短期内使用的话,Bootstrap是个不错的选择。框架部分的学习方法是也是根据教程学习模仿，记住要点就行，使用的时候可以随时查看产品文档。(2)JavaScript语言范式:JavaScript语言范式部分重点学习面向对象的相关知识，比如封装、继承、多态等等。另外就是函数式编程方面的基础知识，面向对象的设计原则及其在设计模式中的体现，面向对象编程技巧和日常开发中的代码重构。B站、慕课网、腾讯课堂等网站上有大量的视频可供学习。
(3)JavaScript语言内部机制：需要理解和掌握：函数的执行环境及作用域,this和对象原型，参数的传递方法，函数的定义环境、执行环境和四种常用的调用方法，闭包以及JSON等。
(4)DOM编程:DOM，为文档对象模型。HTML、CSS和JavaScript是前端开发的3大技术,JavaScript将浏览器、网页文档、网页文档中的HTML元素等用相应内置对象来表示，这些对象及对象之间的层次关系统称
为DOM。DOM是JavaScript最重要的组成部分。DOM
编程是Web前端工程师的核心技能之一。(5)Ajax编程:Ajax编程也是一个核心技术。学习内容包括http协议、常见请求方式、数据传输格式、同
步和异步等。建议在B站等看相关的视频文档，如今几
乎所有的框架都对Ajax进行了封装，编程并不复杂。
至少掌握用JQuery实现方法及HTML数据传递格式、XML数据传输格式、JSON数据传输格式等。(6)浏览器差异性：包括CSS和JavaScript等，浏览器差异内容很多，不但不同浏览器有差异，相同代码在同一浏览器不同版本上也会有不同的表现，甚至无法运行。浏览器渲染模式、DOCTYPE等内容也应该系统学习。
(7)Node.js：简单的说Node.js就是运行在服务端的JavaScript。这部分的学习内容有REPL(交互式解释器)、回调函数、事件循环、EventEmitter、Buffer(缓冲区)、Stream(流)、函数、路由、多进程、进程
间的消息传递及数据库操作等。
有了以上知识，开发者就可以写出运行于大多数小
型网站的代码了。但要想成为更专业的前端，还需继续
努力。更高的要求大概还有4方面：易维护、可测试、
高性能、低流量(移动端)。
3结语
决定Web前端开发技术水平高低的还是JavaScript
语言的掌握和实践,JavaScript能力越强基础越稳固,
前端开发能力就会越好。
参考文献
[1]前端开发，百度百科[引用日期2020-12-14].
[2]李文奎，张朝伟.响应式网页设计HTML5+CSS3+ CMS[M].北京：北京理工大学出版社,2016:105.
[3]李强.Web前端开发技术与学习探讨[J].长治学
院学报,2016,(4):75-76.
[4]林信良.JavaScript技术手册[M].北京：清华大
学出版社,2020.
[5]Bootstrap教程，自强学堂[引用日期2020-12-14].
[6]卢欣欣.独家分享—大牛教你如何学习Web前端开
发.慕课网[引用日期
2020-12-14].
41
2021.3

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。