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